kpi_vue_pc/src/customworkflow/nodeWrap.vue

<template>
    <div>
        <!--执行框-->
        <div class="node-wrap" v-if="nodeConfig.type<4">
            <!--执行节点信息-->
            <div class="node-wrap-box" :class="(nodeConfig.type==0?'start-node ':'')+(isTried&&nodeConfig.error?'active error':'')">
                <div>
                    <!--执行框标题-->
                    <div class="title" :style="`background: rgb(${bgColor});`">
                        <span class="iconfont" v-if="nodeConfig.type==0"><i class="el-icon-video-play"></i></span>  <!--开始图标-->
                        <span v-if="nodeConfig.type==0">{{nodeConfig.nodeName}}</span><!--开始名称-->
                        <template v-else><!--不是发起节点的话执行下面内容-->
                            <span class="iconfont"><!--节点图标-->
                                <i class="el-icon-s-check" v-if="nodeConfig.type==1"></i>
                                <i class="el-icon-s-promotion" v-if="nodeConfig.type!=1"></i>
                            </span>
                            <!--节点名称,单击可编辑-->
                            <input type="text" 
                                v-if="isInput"
                                class="ant-input editable-title-input" 
                                @blur="blurEvent()" 
                                @focus="$event.currentTarget.select()" 
                                v-focus
                                v-model="nodeConfig.nodeName" 
                                :placeholder="defaultText"
                            >
                            <span v-else class="editable-title" @click="clickEvent()">{{nodeConfig.nodeName}}</span>
                            <i class="anticon anticon-close close" @click="delNode"></i>
                        </template>
                    </div>
                    <!--节点内容说明-->
                    <div class="content" @click="setPerson">
                        <div class="text">
                            <span class="placeholder" v-if="!showText">请选择{{defaultText}}</span>
                            {{showText}}
                        </div>
                        <i class="anticon anticon-right arrow"></i>
                        
                    </div>
                    
                    <!--错误提示-->
                    <div class="error_tip" v-if="isTried&&nodeConfig.error">
                        <i class="anticon anticon-exclamation-circle"></i>
                    </div>
                </div>
            </div>
            <div class="text" style="padding: 0 2px; overflow: hidden;">
                NO:{{nodeConfig.nodeNumber}}
            </div>
            <!--添加按钮-->
            <addNode :childNodeP.sync="nodeConfig.childNode" :nodeConfig.sync="nodeConfig"></addNode>
        </div>
        <!--条件节点-->
        <div class="branch-wrap" v-if="nodeConfig.type==4">
            <div class="branch-box-wrap">
                <!--条件主体-->
                <div class="branch-box">
                    <button class="add-branch" @click="addTerm">添加条件</button>   <!--添加条件按钮-->
                    <div class="col-box" v-for="(item,index) in nodeConfig.conditionNodes" :key="index">    <!--条件节点分支-->
                        <div class="condition-node">
                            <div class="condition-node-box">
                                <div class="auto-judge" :class="isTried&&item.error?'error active':''">
                                    <div class="sort-left" v-if="index!=0" @click="arrTransfer(index,-1)">&lt;</div>
                                    <div class="title-wrapper"><!--条件标题-->
                                        <input 
                                            v-if="isInputList[index]"
                                            type="text" 
                                            class="ant-input editable-title-input" 
                                            @blur="blurEvent(index)" 
                                            @focus="$event.currentTarget.select()" 
                                            v-focus 
                                            v-model="item.nodeName"
                                        >
                                        <span  v-else class="editable-title" @click="clickEvent(index)">{{item.nodeName}}</span>
                                        <span class="priority-title" @click="setPerson(item.priorityLevel)">优先级{{item.priorityLevel}}</span>
                                        <i class="anticon anticon-close close" @click="delTerm(index)"></i>
                                    </div>
                                    <div class="sort-right" v-if="index!=nodeConfig.conditionNodes.length-1" @click="arrTransfer(index)">&gt;</div>
                                    <div class="content" @click="setPerson(item.priorityLevel)">{{$func.conditionStr(nodeConfig,index)}}</div>
                                    <div class="error_tip" v-if="isTried&&item.error">
                                        <i class="anticon anticon-exclamation-circle"></i>
                                    </div>
                                    
                                </div>
                                <div class="text" style="padding: 0 2px; overflow: hidden;">
                                    NO:{{nodeConfig.nodeNumber}}
                                </div>
                                <addNode :childNodeP.sync="item.childNode"  :nodeConfig="item"></addNode>
                            </div>
                        </div>
                        <nodeWrap v-if="item.childNode" :nodeConfig.sync="item.childNode"></nodeWrap>
                        <template v-if="index==0">
                            <div class="top-left-cover-line"></div>
                            <div class="bottom-left-cover-line"></div>
                        </template>
                        <template v-if="index==nodeConfig.conditionNodes.length-1">
                            <div class="top-right-cover-line"></div>
                            <div class="bottom-right-cover-line"></div>
                        </template>
                    </div>
                </div>
                <!--添加按钮-->
                <addNode :childNodeP.sync="nodeConfig.childNode"  :nodeConfig.="nodeConfig" ></addNode>
            </div>
        </div>
        <nodeWrap v-if="nodeConfig.childNode" :nodeConfig.sync="nodeConfig.childNode"></nodeWrap>
    </div>
</template>
<script>
import { v4 } from 'uuid'
import { mapState, mapMutations } from 'vuex'
export default {
    props: ["nodeConfig", "flowPermission"],
    data() {
        return {
            placeholderList: ["发起人", "审核人", "抄送人", "执行人"],
            isInputList: [],    //节点条件是否可编辑数组
            isInput: false,     //节点标题是否可编辑
        }
    },
    mounted() {
        if (this.nodeConfig.type == 1 || this.nodeConfig.type == 3) {
            this.nodeConfig.error = !this.$func.setApproverStr(this.nodeConfig)
        } else if (this.nodeConfig.type == 2) {
            this.nodeConfig.error = !this.$func.copyerStr(this.nodeConfig)
        } else if (this.nodeConfig.type == 4) {
            this.resetConditionNodesErr()
        }
    },
    directives: {
        focus: {
            inserted: function (el) {
                el.focus()
            }
        }
    },
    computed: {
        ...mapState([
            'isTried',
            'flowPermission1',      //开始节点
            'approverConfig1',       //执行节点
            'copyerConfig1',        //抄送
            'conditionsConfig1'     //抄送
        ]),
        defaultText() { //节点内容选择提示语
            return this.placeholderList[this.nodeConfig.type]
        },
        showText() {    //节点内容文本
            if (this.nodeConfig.type == 0) return this.$func.arrToStr(this.flowPermission) || '所有人'
            if (this.nodeConfig.type == 1 || this.nodeConfig.type == 3) return this.$func.setApproverStr(this.nodeConfig)
            return this.$func.copyerStr(this.nodeConfig)
        },
        bgColor() { //节点标题背景色
            return ['87, 106, 149', '255, 148, 62', '50, 150, 250','255,102,0','255,255,255'][this.nodeConfig.type]
        }
    },
    watch: {
        //监听开始节点数据变化
        flowPermission1(data){
            // console.log("监听开始节点数据变化------data----------->",data,"-----_uid---->", this._uid)
            if (data.flag && data.id === this._uid) {
                this.$emit('update:flowPermission', data.value)
            }
        },
        //监听执行节点数据变化
        approverConfig1(data) {
            if (data.flag && data.id === this._uid) {
                this.$emit('update:nodeConfig', data.value)
            }
        },
        copyerConfig1(data) {
            // console.log("监听抄送节点---------->",date)
            if (data.flag && data.id === this._uid) {
                this.$emit('update:nodeConfig', data.value)
            }
        },
        conditionsConfig1(data) {
            if (data.flag && data.id === this._uid) {
                // console.log("监听条件节点---------->",date)
                this.$emit('update:nodeConfig', data.value)
            }
        },
    },
    methods: {
        ...mapMutations([
            'setPromoter',              //开始节点
            'setFlowPermission',        //开始节点
            'setApprover',              //执行节点
            'setApproverConfig',         //执行节点
            'setCopyer',                //抄送节点
            'setCopyerConfig',          //抄送节点
            'setCondition',             //条件
            'setConditionsConfig',      //条件
        ]),
        //设置当前节点标题可编辑
        clickEvent(index) {
            // console.log("设置当前节点标题可编辑",index)
            if (index || index === 0) {
                this.$set(this.isInputList, index, true)
            } else {
                this.isInput = true;
            }
        },
        //节点编辑标题失去焦点时
        blurEvent(index) {
            if (index || index === 0) {
                this.$set(this.isInputList, index, false)
                this.nodeConfig.conditionNodes[index].nodeName = this.nodeConfig.conditionNodes[index].nodeName || "条件"
            } else {
                this.isInput = false;
                this.nodeConfig.nodeName = this.nodeConfig.nodeName || this.defaultText
            }
        },
        //删除节点
        delNode() {
            this.$emit("update:nodeConfig", this.nodeConfig.childNode);
        },
        //打开节点操作抽屉
        setPerson(priorityLevel) {
            console.log("打开节点操作抽屉------------>",priorityLevel)
            var { type } = this.nodeConfig;
            console.log("打开节点操作抽屉-----1------->",type,this.nodeConfig)
            if (type == 0) {
                this.setPromoter(true)
                this.setFlowPermission({
                    value: this.flowPermission,
                    flag: false,
                    id: this._uid
                })
            } else if (type == 1 || type == 3) { //打开执行节点
                this.setApprover(true)
                this.setApproverConfig({
                    value: {
                        ...JSON.parse(JSON.stringify(this.nodeConfig)),
                        ...{ settype: this.nodeConfig.settype ? this.nodeConfig.settype : 1 }
                    },
                    flag: false,
                    id: this._uid
                })
            } else if (type == 2) {
                this.setCopyer(true)
                
                this.setCopyerConfig({
                    value: JSON.parse(JSON.stringify(this.nodeConfig)),
                    flag: false,
                    id: this._uid
                })
            } else {
                //条件
                this.setCondition(true)
                this.setConditionsConfig({
                    value: JSON.parse(JSON.stringify(this.nodeConfig)),
                    priorityLevel,
                    flag: false,
                    id: this._uid
                })
            }
        },
        //添加条件
        addTerm() {
            const snowflake = v4().replaceAll('-','').toString();
            let len = this.nodeConfig.conditionNodes.length + 1
            this.nodeConfig.gotoNode.push(snowflake);
            this.nodeConfig.conditionNodes.push({
                "nodeNumber":snowflake,
                "nodeName": "条件" + len,
                "type": 5,
                "priorityLevel": len,
                "conditionList": [],
                "nodeUserList": [],
                "databasecondition":[],
                "childNode": null,
                "fromNode": this.nodeConfig.nodeNumber,
                "gotoNode":[]
            });
            this.resetConditionNodesErr()
            this.$emit("update:nodeConfig", this.nodeConfig);
        },
        //检验是否设置条件
        resetConditionNodesErr() {
            for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
                this.nodeConfig.conditionNodes[i].error = this.$func.conditionStr(this.nodeConfig, i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
            }
        },
        //增加或减少提交
        arrTransfer(index, type = 1) {//向左-1,向右+1
            this.nodeConfig.conditionNodes[index] = this.nodeConfig.conditionNodes.splice(index + type, 1, this.nodeConfig.conditionNodes[index])[0];
            this.nodeConfig.conditionNodes.map((item, index) => {
                item.priorityLevel = index + 1
            })
            this.$emit("update:nodeConfig", this.nodeConfig);
        },
        //删除提交
        delTerm(index) {
            this.nodeConfig.conditionNodes.splice(index, 1)
            this.nodeConfig.conditionNodes.map((item, index) => {
                item.priorityLevel = index + 1
                item.nodeName = `条件${index + 1}`
            });
            this.resetConditionNodesErr()
            this.$emit("update:nodeConfig", this.nodeConfig);
            if (this.nodeConfig.conditionNodes.length == 1) {
                if (this.nodeConfig.childNode) {
                    if (this.nodeConfig.conditionNodes[0].childNode) {
                        this.reData(this.nodeConfig.conditionNodes[0].childNode, this.nodeConfig.childNode)
                    } else {
                        this.nodeConfig.conditionNodes[0].childNode = this.nodeConfig.childNode
                    }
                }
                this.$emit("update:nodeConfig", this.nodeConfig.conditionNodes[0].childNode);
            }
        },
        //删除提交(副本)
        reData(data, addData) {
            if (!data.childNode) {
                data.childNode = addData
            } else {
                this.reData(data.childNode, addData)
            }
        },
    }
}
</script>
<style>
.error_tip {
    position: absolute;
    top: 0px;
    right: 0px;
    transform: translate(150%, 0px);
    font-size: 24px;
}

.promoter_person .el-dialog__body {
    padding: 10px 20px 14px 20px;
}

.selected_list {
    margin-bottom: 20px;
    line-height: 30px;
}

.selected_list span {
    margin-right: 10px;
    padding: 3px 6px 3px 9px;
    line-height: 12px;
    white-space: nowrap;
    border-radius: 2px;
    border: 1px solid rgba(220, 220, 220, 1);
}

.selected_list img {
    margin-left: 5px;
    width: 7px;
    height: 7px;
    cursor: pointer;
}
</style>