kpi_vue_pc/src/views/workflow/flowcont.vue

<!--
@ 作者: 秦东
@ 时间: 2023-03-24 16:11:50
@ 备注: 添加流程
-->
<template>
    <el-dialog title="添加流程" :visible.sync="addWorkFlowBox" :top="flowActive==1?'10%':'0px'" :width="flowActive==1?'40%':'90%'" :before-close="closeDialog" class="dialogClass">
        <el-steps :active="flowActive" align-center>
            <el-step title="基本信息">2</el-step>
            <el-step title="设置流程"></el-step>
        </el-steps>
        <el-form ref="form"   v-show="flowActive==1" :model="flowConfig" label-width="100px" style="margin-top:50px">
            <el-form-item label="工作流名称">
                <el-input v-model="flowConfig.name"></el-input>
            </el-form-item>
            <el-form-item label="工作流描述">
                <el-input type="textarea" v-model="flowConfig.describe"></el-input>
            </el-form-item>
            <el-form-item label="关联企业微信">
                <el-radio-group v-model="flowConfig.wechat">
                    <el-radio :label="1">无需关联</el-radio>
                    <el-radio :label="2">仅通知</el-radio>
                    <el-radio :label="3">通知和审批</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div class="kuangjiangao"  v-show="flowActive==2">
            <div class="dashboard-container">
                <div class="gva-table-box">
                    
                    <section class="dingflow-design">
                        <!-- <div class="zoom">
                            <el-button type="button"  @click="saveSet">发 布</el-button>
                        </div> -->
                        <!--流程画布-->
                        <div class="box-scale" id="box-scale" :style="'transform: scale('+nowVal/100+'); transform-origin: 50% 0px 0px;'">
                            <nodeWrap :nodeConfig.sync="nodeConfig" :flowPermission.sync="flowPermission"></nodeWrap>
                            <div class="end-node">
                                <div class="end-node-circle"></div>
                                <div class="end-node-text">流程结束</div>
                            </div>
                        </div>
                    </section>
                </div>
                <promoterDrawer />
                <approverDrawer  :directorMaxLevel="directorMaxLevel" :nodeConfig="nodeConfig"/>
                <copyerDrawer />
                <conditionDrawer />
                <errorDialog 
                    :visible.sync="tipVisible"
                    :list="tipList"	
                />
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button v-if="flowActive>1" type="warning" @click="printnext">上一步</el-button>
            <el-button type="primary" @click="next">{{ flowButtonName }}</el-button>
        </span>
    </el-dialog>
</template>
<script>
import { initializeWorkFlow,publishWorkFlow } from "@/api/workflowapi/workflowaip"
import promoterDrawer from "@/customworkflow/drawer/promoterDrawer" //加载开始节点设置页面
import approverDrawer from "@/customworkflow/drawer/approverDrawer" //加载执行节点设置页面
import copyerDrawer from "@/customworkflow/drawer/copyerDrawer" //抄送人设置页面
import conditionDrawer from '@/customworkflow/drawer/conditionDrawer'   //条件设置
import errorDialog from '@/customworkflow/dialog/errorDialog'
import { mapMutations } from 'vuex'
export default {
    components: {
        promoterDrawer,
        approverDrawer,
        copyerDrawer,
        conditionDrawer,
        errorDialog
    },
    props: ['addWorkFlowBox','closeAddWorkFlow'],
    data() {
        return {
            flowActive:1,
            flowButtonName:"下一步",
            nowVal:100,
            nodeConfig: {}, //流程数据结构体
            flowPermission: [],     //起始节点发起人(处理人)
            processConfig: {},      //初始工作流数据
            directorMaxLevel: 0,    //审批主管最大层级
            workFlowDef: {},        //工作流主体附加参数
            tipVisible: false,  //流程提示
            tipList: [],    //流程错误信息
            flowConfig:{
                flowid:"",
                name:"",
                describe:"",
                wechat:1
            }, //工作流表基本设置
        }
    },
    created(){
        this.getInitData(); //初始化数据
    },
    watch:{
        addWorkFlowBox(){
            this.getInitData()
        }
    },
    methods:{
        ...mapMutations(['setTableId', 'setIsTried','setPromoter']),
        reErr({ childNode }) {
			if (childNode) {
				let { type, error, nodeName, conditionNodes } = childNode
				if (type == 1 || type == 2 || type == 3) {
					if (error) {
						this.tipList.push({ name: nodeName, type: ["", "审核人", "抄送人", "执行人"][type] })
					}
					this.reErr(childNode)
				} else if (type == 5) {
					this.reErr(childNode)
				} else if (type == 4) {
					this.reErr(childNode)
					for (var i = 0; i < conditionNodes.length; i++) {
						if (conditionNodes[i].error) {
							this.tipList.push({ name: conditionNodes[i].nodeName, type: "条件" })
						}
						this.reErr(conditionNodes[i])
					}
				}
			} else {
				childNode = null
			}
		},
        //保存工作流
        async saveWorkFlow(){
            this.setIsTried(true);
            this.tipList = [];
            this.reErr(this.nodeConfig);
			if (this.tipList.length != 0) {
				this.tipVisible = true;
				return;
			}
            this.processConfig.flowPermission = this.flowPermission
            this.processConfig.workFlowDef.name = this.flowConfig.name
            // console.log("saveSet---发布--->",JSON.stringify(this.processConfig))
            // console.log("saveSet---发布--2->",this.processConfig)
            let sendData = {
                flowid:this.flowConfig.flowid.toString(),
                name:this.flowConfig.name,
                describe:this.flowConfig.describe,
                wecaht:this.flowConfig.wecaht,
                flowcont:this.processConfig
            }
            console.log("saveSet---发布--4->",sendData)
            const res = await publishWorkFlow(sendData);
            // console.log("saveSet---发布--3->",res)
            if(res.code == 0){
                this.closeDialog();
            }
        },
        next() {
            if (this.flowActive++ > 0){
                
                this.flowButtonName="发布"
            }
            if( this.flowActive == 3){
                this.flowActive = 2;
                this.saveWorkFlow();
            }
        },
        //上一步
        printnext(){
            this.flowActive--;
            this.flowButtonName="下一步"
            if(this.flowActive < 1){
                this.flowActive = 1
            }
        },
        //关闭添加流程弹窗
        closeDialog(){
            this.$emit('closeAddWorkFlow');
            this.flowActive = 1;
            this.flowButtonName="下一步";
            this.initConfig()
        },
        //发布流程
        saveSet(){
            
        },
        //获取初始化数据
        async getInitData(){
            const res = await initializeWorkFlow()
            // console.log("获取初始化数据---->",res)
            this.processConfig = res.data;
            let { nodeConfig, flowPermission, directorMaxLevel, workFlowDef, tableId } = res.data;      //参数说明{ 流程数据结构体，起始节点发起人(处理人)，审批主管最大层级，工作流主体附加参数；工作流id}
            this.nodeConfig = nodeConfig;
			this.flowPermission = flowPermission;
			this.directorMaxLevel = directorMaxLevel;
			this.workFlowDef = workFlowDef;
            this.flowConfig.flowid=tableId.toString()
            this.setTableId(tableId)
            
        },
        //初始化数据
        initConfig(){
            this.flowConfig.name = "";
            this.flowConfig.describe = "";
            this.flowConfig.wecaht = 1;
            this.nodeConfig={};
            this.flowPermission=[];
            this.directorMaxLevel = 0
            this.workFlowDef = {}
        },
    }
}
</script>
<style>
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #333333;

}



.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.l {
    float: left;
}

input {
    text-indent: 10px;
}

select {
    text-indent: 8px;
}

.ml_10 {
    margin-left: 10px;
}

.mr_10 {
    margin-right: 10px;
}

.radio_box a,
.check_box a {
    font-size: 12px;
    position: relative;
    padding-left: 20px;
    margin-right: 30px;
    cursor: pointer;
    color: #333;
}

.check_box.not a:hover {
    color: #333;
}

.check_box.not a::before,
.check_box.not a:hover::before {
    border: none;
}

.check_box.not.active {
    background: #f3f3f3;
}

.radio_box a:hover::before,
.check_box a:hover::before {
    border: 1px solid #46a6fe;
}

.radio_box a::before,
.check_box a::before {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    left: 0;
    top: 1px;
    content: "";
}

.radio_box a::before {
    border-radius: 50%;
}

.check-dot.active::after,
.radio_box a.active::after,
.check_box a.active::after {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    content: "";
}

.radio_box a.active::after {
    background: #46a6fe;
}

.check_box a.active::after {
    background: url(~@/assets/images/check_box.png) no-repeat center;
}


.error-modal-list {
	width: 455px;
}
.dialogClass{
    height:100%;
}
.dashboard-container{
    height: 100%;
}
.el-dialog {
    /*height: 100%;*/
}
.el-dialog__body{
    /*height: calc(100% - 110px);*/
}
.kuangjiangao{
    height: 810px;
}
</style>