qgb-process 0.2.3 → 0.2.7

package/src/views/formBuilder/workflow/nodeWrap.vue

@@ -1,732 +1,732 @@
-<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('+ ['87, 106, 149','255, 148, 62','50, 150, 250'][nodeConfig.type] +');'">
-                        <span class="iconfont" v-show="nodeConfig.type==1"></span>
-                        <span class="iconfont" v-show="nodeConfig.type==2"></span>
-                        <span v-if="nodeConfig.type==0">{{nodeConfig.nodeName}}</span>
-                        <input type="text" class="ant-input editable-title-input" v-if="nodeConfig.type!=0&&isInput"
-                        @blur="blurEvent()" @focus="$event.currentTarget.select()" v-focus
-                        v-model="nodeConfig.nodeName" :placeholder="placeholderList[nodeConfig.type]">
-                        <span class="editable-title" @click="clickEvent()" v-if="nodeConfig.type!=0&&!isInput">{{nodeConfig.nodeName}}</span>
-                        <i class="anticon anticon-close close" v-if="nodeConfig.type!=0" @click="delNode()"></i>
-                    </div>
-                    <div class="content" @click="setPerson">
-                        <!-- 发起人 -->
-                        <div class="text" v-if="nodeConfig.type==0">{{arrToStr(flowPermission)?arrToStr(flowPermission):'请求发起人'}}</div>
-                        <!-- 审批人 -->
-                        <div class="text" v-if="nodeConfig.type==1">
-                            <span class="placeholder" v-if="!setApproverStr(nodeConfig)">请选择{{placeholderList[nodeConfig.type]}}</span>
-                            {{setApproverStr(nodeConfig)}}
-                        </div>
-                        <!-- 抄送人 -->
-                        <div class="text" v-if="nodeConfig.type==2">
-                            <span class="placeholder" v-if="!copyerStr(nodeConfig)">请选择{{placeholderList[nodeConfig.type]}}</span>
-                            {{copyerStr(nodeConfig)}}
-                        </div>
-                        <i class="anticon anticon-right arrow"></i>
-                    </div>
-                    <div class="error_tip" v-if="isTried&&nodeConfig.error">
-                        <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);"></i>
-                    </div>
-                </div>
-            </div>
-            <addNode :childNodeP.sync="nodeConfig.childNode"></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 type="text" class="ant-input editable-title-input" v-if="isInputList[index]" @blur="blurEvent(index)" @focus="$event.currentTarget.select()" v-focus v-model="item.nodeName">
-                                        <span class="editable-title" @click="clickEvent(index)" v-if="!isInputList[index]">{{item.nodeName}}</span>
-                                        <span class="priority-title" @click="setPerson(item.priority,item)">优先级{{item.priority}}</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.priority,item)">{{conditionStr(item,index)}}</div>
-                                    <div class="error_tip" v-if="isTried&&item.error">
-                                        <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);"></i>
-                                    </div>
-                                </div>
-                                <addNode :childNodeP.sync="item.childNode"></addNode>
-                            </div>
-                        </div>
-                        <nodeWrap v-if="item.childNode && item.childNode" :nodeConfig.sync="item.childNode" :tableId="tableId"
-                        :isTried.sync="isTried" :directorMaxLevel="directorMaxLevel"></nodeWrap>
-                        <div class="top-left-cover-line" v-if="index==0"></div>
-                        <div class="bottom-left-cover-line" v-if="index==0"></div>
-                        <div class="top-right-cover-line" v-if="index==nodeConfig.conditionNodes.length-1"></div>
-                        <div class="bottom-right-cover-line" v-if="index==nodeConfig.conditionNodes.length-1"></div>
-                    </div>
-                </div>
-                <addNode :childNodeP.sync="nodeConfig.childNode"></addNode>
-            </div>
-        </div>
-
-        <nodeWrap v-if="nodeConfig.childNode && nodeConfig.childNode" :nodeConfig.sync="nodeConfig.childNode" :tableId="tableId"
-        :isTried.sync="isTried" :directorMaxLevel="directorMaxLevel" :queryInfo="queryInfo"></nodeWrap>
-
-        <!-- 审批人 / 抄送人 -->
-        <ApproverSelector ref="approverSelector" :queryInfo="queryInfo"/>
-
-        <!-- 条件设置弹出窗口 -->
-        <NodeConditionConfig  ref="conditionForm" :formData="connection" :title="title" :queryInfo="queryInfo"/>
-
-        <!-- TODO: 发起人 -->
-
-
-    </div>
-</template>
-<script>
-import ApproverSelector from '../components/approverSelector.vue'
-import NodeConditionConfig from "../components/nodeConditionConfig";
-import addNode from './addNode'
-
-
-export default {
-    props: ["nodeConfig", "flowPermission", "directorMaxLevel", "isTried", "tableId","queryInfo"],
-    components:{
-        ApproverSelector,
-        NodeConditionConfig,
-        addNode
-    },
-    name:"nodeWrap",
-    data() {
-        return {
-            placeholderList: ["发起人", "审批人", "抄送人"],
-            isInputList: [],
-            isInput: false,
-
-            // todo:发起人
-            // flowPermission1: this.flowPermission,
-
-            // 审批人
-            approverConfig: {},
-
-            // 抄送人
-            copyerConfig: {},
-            ccSelfSelectFlag: [], // 允许发起人自选抄送人
-
-            // 条件节点设置
-            conditionConfig: {},
-            conditionsConfig: {
-                conditionNodes: [],
-            },
-            bPriorityLevel: "",
-            conditions: [],
-            conditionList: [],
-
-            // 条件流程传递
-            connection:{},
-            title:""
-        }
-    },
-    mounted() {
-        if (this.nodeConfig.type == 1) {
-            this.nodeConfig.error = !this.setApproverStr(this.nodeConfig)
-        } else if (this.nodeConfig.type == 2) {
-            this.nodeConfig.error = !this.copyerStr(this.nodeConfig)
-        } else if (this.nodeConfig.type == 4) {
-            for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
-                this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
-            }
-        }
-    },
-    created(){},
-    methods: {
-        // 展示修改节点的输入框
-        clickEvent(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 ? this.nodeConfig.conditionNodes[index].nodeName : "条件"
-            } else {
-                this.isInput = false;
-                this.nodeConfig.nodeName = this.nodeConfig.nodeName ? this.nodeConfig.nodeName : this.placeholderList[this.nodeConfig.type]
-            }
-        },
-        // 配置条件节点
-        // @TYPE: 类型 [0 发起人 1审批 2抄送 3条件 4路由]
-        setPerson(priorityLevel,item) {
-            var { type } = this.nodeConfig;
-            if (type == 0) {
-                // this.flowPermission1 = this.flowPermission;
-            } else if (type == 1) {
-                // 展示审批弹窗
-                this.$refs.approverSelector.init(this.nodeConfig)
-                // 设置弹出类型
-                this.approverConfig = JSON.parse(JSON.stringify(this.nodeConfig))
-                this.approverConfig.setType = this.approverConfig.setType ? this.approverConfig.setType : 1
-            } else if (type == 2) {
-                this.$refs.approverSelector.init(this.nodeConfig)
-                this.copyerConfig = JSON.parse(JSON.stringify(this.nodeConfig))
-                this.ccSelfSelectFlag = this.copyerConfig.ccSelfSelectFlag == 0 ? [] : [this.copyerConfig.ccSelfSelectFlag] // todo: 允许发起人自选抄送人判断
-            } else {
-                // 条件配置
-                this.bPriorityLevel = priorityLevel;
-                this.conditionsConfig = JSON.parse(JSON.stringify(this.nodeConfig))
-                this.conditionConfig = this.conditionsConfig.conditionNodes.filter(item=>item.priority == priorityLevel)[0]
-                this.$refs.conditionForm.nodeConditionHandler() // 条件页面
-                this.fillConditionForm(this.conditionConfig) // 填充条件弹出表单参数
-            }
-        },
-
-        /********** 1. 审批人修改 **********/
-
-        // 修改审批人的类型
-        changeType(val) {
-            this.approverConfig.nodeUserList = [];
-            this.approverConfig.examineMode = "3";
-            this.approverConfig.authType = "1";
-            if (val == 2) {
-                this.approverConfig.directorLevel = 0;
-            }
-            this.approverConfig.setType = val
-        },
-        // 审批人为空时
-        noHanderActionChange(val){
-           this.approverConfig.authType = val;
-        },
-        // 审批的主管级别
-        directorLevelChange(val){
-            this.approverConfig.directorLevel = val
-        },
-        // 多人审批时采用的审批方式
-        examineModeChange(val){
-            this.approverConfig.examineMode = val;
-        },
-        // 确定审批数据
-        // @setType: 审批人设置 1指定成员 2主管 4发起人自选 5发起人自己 7连续多级主管
-        // @selectRange  选择范围 1.全公司 2指定成员 3指定角色
-        submitApprover(data){
-            const {approverType,approvers,directorType,notifiers} = data
-            this.approverConfig.nodeUserList = [];
-            if (this.approverConfig.setType == 1) {
-               this.approverConfig.nodeUserList = approvers
-            }
-            this.saveApprover() // 修改数据
-            this.$refs.approverSelector.showApproverSelector() // 关闭审批配置窗口
-        },
-        // 保存审批
-        saveApprover() {
-            this.approverConfig.error = !this.setApproverStr(this.approverConfig)
-            this.$emit("update:nodeConfig", this.approverConfig);
-        },
-        // 设置审批节点字符
-        setApproverStr(nodeConfig) {
-            if (nodeConfig.setType == 1) {
-                if (nodeConfig.nodeUserList.length == 1) {
-                    return nodeConfig.nodeUserList[0].userName
-                } else if (nodeConfig.nodeUserList.length > 1) {
-                    if (nodeConfig.examineMode == "1") {
-                        return nodeConfig.nodeUserList.length + "人会签"
-                    } else if (nodeConfig.examineMode == "2") {
-                        return nodeConfig.nodeUserList.length + "人或签"
-                    } else if (nodeConfig.examineMode == "3") {
-                        return nodeConfig.nodeUserList.length + "人依次审批"
-                    }
-                }
-            } else if (nodeConfig.setType == 2) {
-                let level = nodeConfig.directorLevel == 0 ? '直接主管' : '第' + (parseInt(nodeConfig.directorLevel)+1) + '级主管'
-                if (nodeConfig.examineMode == "1") {
-                    return level  + "会签"
-                } else if (nodeConfig.examineMode == "2") {
-                    return level  + "人或签"
-                } else if (nodeConfig.examineMode == "3") {
-                    return level +  "人依次审批"
-                }
-            }
-        },
-        // 数组转字符串
-        arrToStr(arr) {
-            if (arr) {
-                return arr.map(item => { return item.userName }).toString()
-            }
-        },
-
-        /********** 2. 抄送人修改 **********/
-
-        // 确定提交抄送人数据
-        submitCopyer(item) {
-            const {approverType,approvers,notifiers,passCopy,directorType} = item
-            this.copyerConfig.nodeUserList = notifiers // 更新数据
-            this.saveCopyer() // 更新数据
-            this.$refs.approverSelector.showApproverSelector() // 关闭抄送人窗口
-        },
-        // 更新抄送人数据
-        saveCopyer() {
-            this.copyerConfig.ccSelfSelectFlag = this.ccSelfSelectFlag.length == 0 ? 0 : 1; // todo: 允许发起人自选抄送人
-            this.copyerConfig.error = !this.copyerStr(this.copyerConfig);
-            this.$emit("update:nodeConfig", this.copyerConfig);
-        },
-        // 抄送人展示字段
-        copyerStr(nodeConfig) {
-            if (nodeConfig.nodeUserList.length != 0) {
-                return this.arrToStr(nodeConfig.nodeUserList)
-            } else {
-                // todo: 允许发起人自选抄送人判断
-                // if (nodeConfig.ccSelfSelectFlag == 1) {
-                //     return "选择抄送人"
-                // }
-            }
-        },
-
-        /********** todo: 3. 发起人修改 **********/
-
-        // 修改发起人方法
-        // surePromoter() {
-        //     this.flowPermission1 = [];
-        //     this.checkedDepartmentList.map(item => {
-        //         this.flowPermission1.push({
-        //             type: 3,
-        //             targetId: item.id,
-        //             name: item.departmentName
-        //         })
-        //     });
-        //     this.checkedEmployessList.map(item => {
-        //         this.flowPermission1.push({
-        //             type: 1,
-        //             targetId: item.id,
-        //             name: item.employeeName
-        //         })
-        //     });
-        //     this.promoterVisible = false;
-        // },
-        // savePromoter() {
-        //     this.$emit("update:flowPermission", this.flowPermission1);
-        //     this.promoterDrawer = false;
-        // },
-
-
-        // 删除节点
-        delNode() {
-            this.$emit("update:nodeConfig", this.nodeConfig.childNode);
-        },
-        // 添加条件
-        addTerm() {
-            let len = this.nodeConfig.conditionNodes.length + 1
-            this.nodeConfig.conditionNodes.push({
-                "nodeName": "条件" + len,
-                "type": 3,
-                "priority": len,
-                "conditionList": [],
-                "nodeUserList": [],
-                "childNode": null
-            });
-            for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
-                this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
-            }
-            this.$emit("update:nodeConfig", this.nodeConfig);
-        },
-        // 删除条件
-        delTerm(index) {
-            this.nodeConfig.conditionNodes.splice(index, 1)
-            for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
-                this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
-            }
-            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)
-            }
-        },
-        // 填充条件表单
-        fillConditionForm(value){
-            const json = {};
-            value.conditionList.forEach((item, index) => {
-                if (item.isArray && item.variable != "userId") {
-                    item.value = item.value.split(",");
-                }
-                // 判断修改类型，适应表单复现
-                // todo: 暂时判断输入框与发起人类型
-                if(!['input','sponsor'].includes(item.ele)){
-                    // 判断是否数组 
-                    item.value = !Array.isArray(item.value) ? item.value.split(',') : item.value
-                }
-                
-                json[item.variable] = item;
-            });
-            this.connection = json;
-            this.title = value.nodeName;
-        },
-        // 保存条件
-        saveCondition() {
-            var a = this.conditionsConfig.conditionNodes.splice(this.bPriorityLevel - 1, 1)//截取旧下标
-            this.conditionsConfig.conditionNodes.splice(this.conditionConfig.priority - 1, 0, a[0])//填充新下标
-            this.conditionsConfig.conditionNodes.map((item, index) =>  item.priority = index + 1);
-            for (var i = 0; i < this.conditionsConfig.conditionNodes.length; i++) {
-                this.conditionsConfig.conditionNodes[i].error = this.conditionStr(this.conditionsConfig.conditionNodes[i], i) == "请设置条件" && i != this.conditionsConfig.conditionNodes.length - 1
-            }
-            this.$emit("update:nodeConfig", this.conditionsConfig);
-        },
-        // 保存条件数据到对应节点
-        submitCondition(item){
-            const {form,desc,SxyData} = item
-            this.conditionConfig.nodeUserList = [];
-            this.conditionConfig.conditionList = [];
-            
-            this.conditionConfig.desc = desc  // 文字描述
-            // 判断是否选择人员
-            if(form.userId){
-                this.conditionConfig.nodeUserList = form.userId.sponsors
-            }
-
-            // 将所选条件加入其中
-            for (const key in form) {
-                // 修改数据格式，修改数组数据为字符串
-                let resetItemType
-                if(Array.isArray(form[key].value)){
-                  resetItemType = {"value": form[key].value.join(",")}
-                }
-                this.conditionConfig.conditionList.push({
-                    ...form[key],
-                    "variable": key,
-                    ...resetItemType,
-                })
-            }
-            // 修改数据
-            this.saveCondition()
-            // 关闭条件选择弹出
-            this.$refs.conditionForm.nodeConditionHandler()
-        },
-        // 展示条件文字
-        conditionStr(item, index) {
-            var { conditionList, nodeUserList } = item;
-            if (conditionList.length == 0) {
-                // 设置了条件判断: (index == this.nodeConfig.conditionNodes.length - 1) && this.nodeConfig.conditionNodes[0].conditionList.length != 0
-                return '请设置条件'
-            } else if(item.desc){
-                return item.desc.join("；")
-            }
-        },
-        // 修改左右关系，可依照此修改优先级
-        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.priority = index + 1
-            })
-            for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
-                this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
-            }
-            this.$emit("update:nodeConfig", this.nodeConfig);
-        }
-    }
-}
-</script>
-<style lang="scss" scoped>
-.error_tip {
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    transform: translate(150%, 0px);
-    font-size: 24px;
-}
-.add-node-popover-body {
-    display: flex;
-}
-.promoter_content {
-    padding: 0 20px;
-}
-.condition_content .el-button,
-.copyer_content .el-button,
-.approver_self_select .el-button,
-.promoter_content .el-button,
-.approver_content .el-button {
-    margin-bottom: 20px;
-}
-.promoter_content p {
-    padding: 18px 0;
-    font-size: 14px;
-    line-height: 20px;
-    color: #000000;
-}
-.promoter_person .el-dialog__body {
-    padding: 10px 20px 14px 20px;
-}
-.person_body {
-    border: 1px solid #f5f5f5;
-    height: 500px;
-}
-.person_tree {
-    padding: 10px 12px 0 8px;
-    width: 280px;
-    height: 100%;
-    border-right: 1px solid #f5f5f5;
-}
-.person_tree input {
-    padding-left: 22px;
-    width: 210px;
-    height: 30px;
-    font-size: 12px;
-    border-radius: 2px;
-    border: 1px solid #d5dadf;
-    background: url(~@/assets/workflow/list_search.png) no-repeat 10px center;
-    background-size: 14px 14px;
-    margin-bottom: 14px;
-}
-.tree_nav span {
-    display: inline-block;
-    padding-right: 10px;
-    margin-right: 5px;
-    max-width: 6em;
-    color: #38adff;
-    font-size: 12px;
-    cursor: pointer;
-    background: url(~@/assets/workflow/jiaojiao.png) no-repeat right center;
-}
-.tree_nav span:last-of-type {
-    background: none;
-}
-.person_tree ul,
-.has_selected ul {
-    height: 420px;
-    overflow-y: auto;
-}
-.person_tree li {
-    padding: 5px 0;
-}
-.person_tree li i {
-    float: right;
-    padding-left: 24px;
-    padding-right: 10px;
-    color: #3195f8;
-    font-size: 12px;
-    cursor: pointer;
-    /* background: url(~@/assets/workflow/next_level_active.png) no-repeat 10px center; */
-    border-left: 1px solid rgb(238, 238, 238);
-}
-.person_tree li a.active + i {
-    color: rgb(197, 197, 197);
-    /* background-image: url(~@/assets/workflow/next_level.png); */
-    pointer-events: none;
-}
-.person_tree img {
-    width: 14px;
-    vertical-align: middle;
-    margin-right: 5px;
-}
-.has_selected {
-    width: 276px;
-    height: 100%;
-    font-size: 12px;
-}
-.has_selected ul {
-    height: 460px;
-}
-.has_selected p {
-    padding-left: 19px;
-    padding-right: 20px;
-    line-height: 37px;
-    border-bottom: 1px solid #f2f2f2;
-}
-.has_selected p a {
-    float: right;
-}
-.has_selected ul li {
-    margin: 11px 26px 13px 19px;
-    line-height: 17px;
-}
-.has_selected li span {
-    vertical-align: middle;
-}
-.has_selected li img:first-of-type {
-    width: 14px;
-    vertical-align: middle;
-    margin-right: 5px;
-}
-.has_selected li img:last-of-type {
-    float: right;
-    margin-top: 2px;
-    width: 14px;
-}
-el-radio-group {
-    padding: 20px 0;
-}
-.approver_content {
-    padding-bottom: 10px;
-    border-bottom: 1px solid #f2f2f2;
-}
-.approver_content .el-radio,
-.approver_some .el-radio,
-.approver_self_select .el-radio {
-    width: 27%;
-    margin-bottom: 20px;
-}
-.copyer_content .el-checkbox {
-    margin-bottom: 20px;
-}
-.el-checkbox__label {
-    font-size: 12px;
-}
-.condition_content,
-.copyer_content,
-.approver_self_select,
-.approver_manager,
-.approver_content,
-.approver_some {
-    padding: 20px 20px 0;
-}
-.approver_manager p:first-of-type,
-.approver_some p {
-    line-height: 19px;
-    font-size: 14px;
-    margin-bottom: 14px;
-}
-
-.approver_manager p {
-    line-height: 32px;
-}
-.approver_manager select {
-    width: 420px;
-    height: 32px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 4px;
-    border: 1px solid rgba(217, 217, 217, 1);
-}
-.approver_manager p.tip {
-    margin: 10px 0 22px 0;
-    font-size: 12px;
-    line-height: 16px;
-    color: #f8642d;
-}
-.approver_self {
-    padding: 28px 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;
-}
-.approver_self_select h3 {
-    margin: 5px 0 20px;
-    font-size: 14px;
-    font-weight: bold;
-    line-height: 19px;
-}
-.condition_copyer .el-drawer__body .priority_level {
-    position: absolute;
-    top: 11px;
-    right: 30px;
-    width: 100px;
-    height: 32px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 4px;
-    border: 1px solid rgba(217, 217, 217, 1);
-}
-.condition_content p.tip {
-    margin: 20px 0;
-    width: 510px;
-    text-indent: 17px;
-    line-height: 45px;
-    background: rgba(241, 249, 255, 1);
-    border: 1px solid rgba(64, 163, 247, 1);
-    color: #46a6fe;
-    font-size: 14px;
-}
-.condition_content ul {
-    max-height: 500px;
-    overflow-y: scroll;
-    margin-bottom: 20px;
-}
-.condition_content li > span {
-    float: left;
-    margin-right: 8px;
-    width: 70px;
-    line-height: 32px;
-    text-align: right;
-}
-.condition_content li > div {
-    display: inline-block;
-    width: 370px;
-}
-.condition_content li:not(:last-child) > div > p {
-    margin-bottom: 20px;
-}
-.condition_content li > div > p:not(:last-child) {
-    margin-bottom: 10px;
-}
-.condition_content li > a {
-    float: right;
-    margin-right: 10px;
-    margin-top: 7px;
-}
-.condition_content li select,
-.condition_content li input {
-    width: 100%;
-    height: 32px;
-    background: rgba(255, 255, 255, 1);
-    border-radius: 4px;
-    border: 1px solid rgba(217, 217, 217, 1);
-}
-.condition_content li select + input {
-    width: 260px;
-}
-.condition_content li select {
-    margin-right: 10px;
-    width: 100px;
-}
-.condition_content li p.selected_list {
-    padding-left: 10px;
-    border-radius: 4px;
-    min-height: 32px;
-    border: 1px solid rgba(217, 217, 217, 1);
-}
-.condition_content li p.check_box {
-    line-height: 32px;
-}
-.condition_list .el-dialog__body {
-    padding: 16px 26px;
-}
-.condition_list p {
-    color: #666666;
-    margin-bottom: 10px;
-}
-.condition_list p.check_box {
-    margin-bottom: 0;
-    line-height: 36px;
-}
+<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('+ ['87, 106, 149','255, 148, 62','50, 150, 250'][nodeConfig.type] +');'">
+                        <span class="iconfont" v-show="nodeConfig.type==1"></span>
+                        <span class="iconfont" v-show="nodeConfig.type==2"></span>
+                        <span v-if="nodeConfig.type==0">{{nodeConfig.nodeName}}</span>
+                        <input type="text" class="ant-input editable-title-input" v-if="nodeConfig.type!=0&&isInput"
+                        @blur="blurEvent()" @focus="$event.currentTarget.select()" v-focus
+                        v-model="nodeConfig.nodeName" :placeholder="placeholderList[nodeConfig.type]">
+                        <span class="editable-title" @click="clickEvent()" v-if="nodeConfig.type!=0&&!isInput">{{nodeConfig.nodeName}}</span>
+                        <i class="anticon anticon-close close" v-if="nodeConfig.type!=0" @click="delNode()"></i>
+                    </div>
+                    <div class="content" @click="setPerson">
+                        <!-- 发起人 -->
+                        <div class="text" v-if="nodeConfig.type==0">{{arrToStr(flowPermission)?arrToStr(flowPermission):'请求发起人'}}</div>
+                        <!-- 审批人 -->
+                        <div class="text" v-if="nodeConfig.type==1">
+                            <span class="placeholder" v-if="!setApproverStr(nodeConfig)">请选择{{placeholderList[nodeConfig.type]}}</span>
+                            {{setApproverStr(nodeConfig)}}
+                        </div>
+                        <!-- 抄送人 -->
+                        <div class="text" v-if="nodeConfig.type==2">
+                            <span class="placeholder" v-if="!copyerStr(nodeConfig)">请选择{{placeholderList[nodeConfig.type]}}</span>
+                            {{copyerStr(nodeConfig)}}
+                        </div>
+                        <i class="anticon anticon-right arrow"></i>
+                    </div>
+                    <div class="error_tip" v-if="isTried&&nodeConfig.error">
+                        <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);"></i>
+                    </div>
+                </div>
+            </div>
+            <addNode :childNodeP.sync="nodeConfig.childNode"></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 type="text" class="ant-input editable-title-input" v-if="isInputList[index]" @blur="blurEvent(index)" @focus="$event.currentTarget.select()" v-focus v-model="item.nodeName">
+                                        <span class="editable-title" @click="clickEvent(index)" v-if="!isInputList[index]">{{item.nodeName}}</span>
+                                        <span class="priority-title" @click="setPerson(item.priority,item)">优先级{{item.priority}}</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.priority,item)">{{conditionStr(item,index)}}</div>
+                                    <div class="error_tip" v-if="isTried&&item.error">
+                                        <i class="anticon anticon-exclamation-circle" style="color: rgb(242, 86, 67);"></i>
+                                    </div>
+                                </div>
+                                <addNode :childNodeP.sync="item.childNode"></addNode>
+                            </div>
+                        </div>
+                        <nodeWrap v-if="item.childNode && item.childNode" :nodeConfig.sync="item.childNode" :tableId="tableId"
+                        :isTried.sync="isTried" :directorMaxLevel="directorMaxLevel"></nodeWrap>
+                        <div class="top-left-cover-line" v-if="index==0"></div>
+                        <div class="bottom-left-cover-line" v-if="index==0"></div>
+                        <div class="top-right-cover-line" v-if="index==nodeConfig.conditionNodes.length-1"></div>
+                        <div class="bottom-right-cover-line" v-if="index==nodeConfig.conditionNodes.length-1"></div>
+                    </div>
+                </div>
+                <addNode :childNodeP.sync="nodeConfig.childNode"></addNode>
+            </div>
+        </div>
+
+        <nodeWrap v-if="nodeConfig.childNode && nodeConfig.childNode" :nodeConfig.sync="nodeConfig.childNode" :tableId="tableId"
+        :isTried.sync="isTried" :directorMaxLevel="directorMaxLevel" :queryInfo="queryInfo"></nodeWrap>
+
+        <!-- 审批人 / 抄送人 -->
+        <ApproverSelector ref="approverSelector" :queryInfo="queryInfo"/>
+
+        <!-- 条件设置弹出窗口 -->
+        <NodeConditionConfig  ref="conditionForm" :formData="connection" :title="title" :queryInfo="queryInfo"/>
+
+        <!-- TODO: 发起人 -->
+
+
+    </div>
+</template>
+<script>
+import ApproverSelector from '../components/approverSelector.vue'
+import NodeConditionConfig from "../components/nodeConditionConfig";
+import addNode from './addNode'
+
+
+export default {
+    props: ["nodeConfig", "flowPermission", "directorMaxLevel", "isTried", "tableId","queryInfo"],
+    components:{
+        ApproverSelector,
+        NodeConditionConfig,
+        addNode
+    },
+    name:"nodeWrap",
+    data() {
+        return {
+            placeholderList: ["发起人", "审批人", "抄送人"],
+            isInputList: [],
+            isInput: false,
+
+            // todo:发起人
+            // flowPermission1: this.flowPermission,
+
+            // 审批人
+            approverConfig: {},
+
+            // 抄送人
+            copyerConfig: {},
+            ccSelfSelectFlag: [], // 允许发起人自选抄送人
+
+            // 条件节点设置
+            conditionConfig: {},
+            conditionsConfig: {
+                conditionNodes: [],
+            },
+            bPriorityLevel: "",
+            conditions: [],
+            conditionList: [],
+
+            // 条件流程传递
+            connection:{},
+            title:""
+        }
+    },
+    mounted() {
+        if (this.nodeConfig.type == 1) {
+            this.nodeConfig.error = !this.setApproverStr(this.nodeConfig)
+        } else if (this.nodeConfig.type == 2) {
+            this.nodeConfig.error = !this.copyerStr(this.nodeConfig)
+        } else if (this.nodeConfig.type == 4) {
+            for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
+                this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
+            }
+        }
+    },
+    created(){},
+    methods: {
+        // 展示修改节点的输入框
+        clickEvent(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 ? this.nodeConfig.conditionNodes[index].nodeName : "条件"
+            } else {
+                this.isInput = false;
+                this.nodeConfig.nodeName = this.nodeConfig.nodeName ? this.nodeConfig.nodeName : this.placeholderList[this.nodeConfig.type]
+            }
+        },
+        // 配置条件节点
+        // @TYPE: 类型 [0 发起人 1审批 2抄送 3条件 4路由]
+        setPerson(priorityLevel,item) {
+            var { type } = this.nodeConfig;
+            if (type == 0) {
+                // this.flowPermission1 = this.flowPermission;
+            } else if (type == 1) {
+                // 展示审批弹窗
+                this.$refs.approverSelector.init(this.nodeConfig)
+                // 设置弹出类型
+                this.approverConfig = JSON.parse(JSON.stringify(this.nodeConfig))
+                this.approverConfig.setType = this.approverConfig.setType ? this.approverConfig.setType : 1
+            } else if (type == 2) {
+                this.$refs.approverSelector.init(this.nodeConfig)
+                this.copyerConfig = JSON.parse(JSON.stringify(this.nodeConfig))
+                this.ccSelfSelectFlag = this.copyerConfig.ccSelfSelectFlag == 0 ? [] : [this.copyerConfig.ccSelfSelectFlag] // todo: 允许发起人自选抄送人判断
+            } else {
+                // 条件配置
+                this.bPriorityLevel = priorityLevel;
+                this.conditionsConfig = JSON.parse(JSON.stringify(this.nodeConfig))
+                this.conditionConfig = this.conditionsConfig.conditionNodes.filter(item=>item.priority == priorityLevel)[0]
+                this.$refs.conditionForm.nodeConditionHandler() // 条件页面
+                this.fillConditionForm(this.conditionConfig) // 填充条件弹出表单参数
+            }
+        },
+
+        /********** 1. 审批人修改 **********/
+
+        // 修改审批人的类型
+        changeType(val) {
+            this.approverConfig.nodeUserList = [];
+            this.approverConfig.examineMode = "3";
+            this.approverConfig.authType = "1";
+            if (val == 2) {
+                this.approverConfig.directorLevel = 0;
+            }
+            this.approverConfig.setType = val
+        },
+        // 审批人为空时
+        noHanderActionChange(val){
+           this.approverConfig.authType = val;
+        },
+        // 审批的主管级别
+        directorLevelChange(val){
+            this.approverConfig.directorLevel = val
+        },
+        // 多人审批时采用的审批方式
+        examineModeChange(val){
+            this.approverConfig.examineMode = val;
+        },
+        // 确定审批数据
+        // @setType: 审批人设置 1指定成员 2主管 4发起人自选 5发起人自己 7连续多级主管
+        // @selectRange  选择范围 1.全公司 2指定成员 3指定角色
+        submitApprover(data){
+            const {approverType,approvers,directorType,notifiers} = data
+            this.approverConfig.nodeUserList = [];
+            if (this.approverConfig.setType == 1) {
+               this.approverConfig.nodeUserList = approvers
+            }
+            this.saveApprover() // 修改数据
+            this.$refs.approverSelector.showApproverSelector() // 关闭审批配置窗口
+        },
+        // 保存审批
+        saveApprover() {
+            this.approverConfig.error = !this.setApproverStr(this.approverConfig)
+            this.$emit("update:nodeConfig", this.approverConfig);
+        },
+        // 设置审批节点字符
+        setApproverStr(nodeConfig) {
+            if (nodeConfig.setType == 1) {
+                if (nodeConfig.nodeUserList.length == 1) {
+                    return nodeConfig.nodeUserList[0].userName
+                } else if (nodeConfig.nodeUserList.length > 1) {
+                    if (nodeConfig.examineMode == "1") {
+                        return nodeConfig.nodeUserList.length + "人会签"
+                    } else if (nodeConfig.examineMode == "2") {
+                        return nodeConfig.nodeUserList.length + "人或签"
+                    } else if (nodeConfig.examineMode == "3") {
+                        return nodeConfig.nodeUserList.length + "人依次审批"
+                    }
+                }
+            } else if (nodeConfig.setType == 2) {
+                let level = nodeConfig.directorLevel == 0 ? '直接主管' : '第' + (parseInt(nodeConfig.directorLevel)+1) + '级主管'
+                if (nodeConfig.examineMode == "1") {
+                    return level  + "会签"
+                } else if (nodeConfig.examineMode == "2") {
+                    return level  + "人或签"
+                } else if (nodeConfig.examineMode == "3") {
+                    return level +  "人依次审批"
+                }
+            }
+        },
+        // 数组转字符串
+        arrToStr(arr) {
+            if (arr) {
+                return arr.map(item => { return item.userName }).toString()
+            }
+        },
+
+        /********** 2. 抄送人修改 **********/
+
+        // 确定提交抄送人数据
+        submitCopyer(item) {
+            const {approverType,approvers,notifiers,passCopy,directorType} = item
+            this.copyerConfig.nodeUserList = notifiers // 更新数据
+            this.saveCopyer() // 更新数据
+            this.$refs.approverSelector.showApproverSelector() // 关闭抄送人窗口
+        },
+        // 更新抄送人数据
+        saveCopyer() {
+            this.copyerConfig.ccSelfSelectFlag = this.ccSelfSelectFlag.length == 0 ? 0 : 1; // todo: 允许发起人自选抄送人
+            this.copyerConfig.error = !this.copyerStr(this.copyerConfig);
+            this.$emit("update:nodeConfig", this.copyerConfig);
+        },
+        // 抄送人展示字段
+        copyerStr(nodeConfig) {
+            if (nodeConfig.nodeUserList.length != 0) {
+                return this.arrToStr(nodeConfig.nodeUserList)
+            } else {
+                // todo: 允许发起人自选抄送人判断
+                // if (nodeConfig.ccSelfSelectFlag == 1) {
+                //     return "选择抄送人"
+                // }
+            }
+        },
+
+        /********** todo: 3. 发起人修改 **********/
+
+        // 修改发起人方法
+        // surePromoter() {
+        //     this.flowPermission1 = [];
+        //     this.checkedDepartmentList.map(item => {
+        //         this.flowPermission1.push({
+        //             type: 3,
+        //             targetId: item.id,
+        //             name: item.departmentName
+        //         })
+        //     });
+        //     this.checkedEmployessList.map(item => {
+        //         this.flowPermission1.push({
+        //             type: 1,
+        //             targetId: item.id,
+        //             name: item.employeeName
+        //         })
+        //     });
+        //     this.promoterVisible = false;
+        // },
+        // savePromoter() {
+        //     this.$emit("update:flowPermission", this.flowPermission1);
+        //     this.promoterDrawer = false;
+        // },
+
+
+        // 删除节点
+        delNode() {
+            this.$emit("update:nodeConfig", this.nodeConfig.childNode);
+        },
+        // 添加条件
+        addTerm() {
+            let len = this.nodeConfig.conditionNodes.length + 1
+            this.nodeConfig.conditionNodes.push({
+                "nodeName": "条件" + len,
+                "type": 3,
+                "priority": len,
+                "conditionList": [],
+                "nodeUserList": [],
+                "childNode": null
+            });
+            for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
+                this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
+            }
+            this.$emit("update:nodeConfig", this.nodeConfig);
+        },
+        // 删除条件
+        delTerm(index) {
+            this.nodeConfig.conditionNodes.splice(index, 1)
+            for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
+                this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
+            }
+            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)
+            }
+        },
+        // 填充条件表单
+        fillConditionForm(value){
+            const json = {};
+            value.conditionList.forEach((item, index) => {
+                if (item.isArray && item.variable != "userId") {
+                    item.value = item.value.split(",");
+                }
+                // 判断修改类型，适应表单复现
+                // todo: 暂时判断输入框与发起人类型
+                if(!['input','sponsor'].includes(item.ele)){
+                    // 判断是否数组 
+                    item.value = !Array.isArray(item.value) ? item.value.split(',') : item.value
+                }
+                
+                json[item.variable] = item;
+            });
+            this.connection = json;
+            this.title = value.nodeName;
+        },
+        // 保存条件
+        saveCondition() {
+            var a = this.conditionsConfig.conditionNodes.splice(this.bPriorityLevel - 1, 1)//截取旧下标
+            this.conditionsConfig.conditionNodes.splice(this.conditionConfig.priority - 1, 0, a[0])//填充新下标
+            this.conditionsConfig.conditionNodes.map((item, index) =>  item.priority = index + 1);
+            for (var i = 0; i < this.conditionsConfig.conditionNodes.length; i++) {
+                this.conditionsConfig.conditionNodes[i].error = this.conditionStr(this.conditionsConfig.conditionNodes[i], i) == "请设置条件" && i != this.conditionsConfig.conditionNodes.length - 1
+            }
+            this.$emit("update:nodeConfig", this.conditionsConfig);
+        },
+        // 保存条件数据到对应节点
+        submitCondition(item){
+            const {form,desc,SxyData} = item
+            this.conditionConfig.nodeUserList = [];
+            this.conditionConfig.conditionList = [];
+            
+            this.conditionConfig.desc = desc  // 文字描述
+            // 判断是否选择人员
+            if(form.userId){
+                this.conditionConfig.nodeUserList = form.userId.sponsors
+            }
+
+            // 将所选条件加入其中
+            for (const key in form) {
+                // 修改数据格式，修改数组数据为字符串
+                let resetItemType
+                if(Array.isArray(form[key].value)){
+                  resetItemType = {"value": form[key].value.join(",")}
+                }
+                this.conditionConfig.conditionList.push({
+                    ...form[key],
+                    "variable": key,
+                    ...resetItemType,
+                })
+            }
+            // 修改数据
+            this.saveCondition()
+            // 关闭条件选择弹出
+            this.$refs.conditionForm.nodeConditionHandler()
+        },
+        // 展示条件文字
+        conditionStr(item, index) {
+            var { conditionList, nodeUserList } = item;
+            if (conditionList.length == 0) {
+                // 设置了条件判断: (index == this.nodeConfig.conditionNodes.length - 1) && this.nodeConfig.conditionNodes[0].conditionList.length != 0
+                return '请设置条件'
+            } else if(item.desc){
+                return item.desc.join("；")
+            }
+        },
+        // 修改左右关系，可依照此修改优先级
+        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.priority = index + 1
+            })
+            for (var i = 0; i < this.nodeConfig.conditionNodes.length; i++) {
+                this.nodeConfig.conditionNodes[i].error = this.conditionStr(this.nodeConfig.conditionNodes[i], i) == "请设置条件" && i != this.nodeConfig.conditionNodes.length - 1
+            }
+            this.$emit("update:nodeConfig", this.nodeConfig);
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.error_tip {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    transform: translate(150%, 0px);
+    font-size: 24px;
+}
+.add-node-popover-body {
+    display: flex;
+}
+.promoter_content {
+    padding: 0 20px;
+}
+.condition_content .el-button,
+.copyer_content .el-button,
+.approver_self_select .el-button,
+.promoter_content .el-button,
+.approver_content .el-button {
+    margin-bottom: 20px;
+}
+.promoter_content p {
+    padding: 18px 0;
+    font-size: 14px;
+    line-height: 20px;
+    color: #000000;
+}
+.promoter_person .el-dialog__body {
+    padding: 10px 20px 14px 20px;
+}
+.person_body {
+    border: 1px solid #f5f5f5;
+    height: 500px;
+}
+.person_tree {
+    padding: 10px 12px 0 8px;
+    width: 280px;
+    height: 100%;
+    border-right: 1px solid #f5f5f5;
+}
+.person_tree input {
+    padding-left: 22px;
+    width: 210px;
+    height: 30px;
+    font-size: 12px;
+    border-radius: 2px;
+    border: 1px solid #d5dadf;
+    background: url(~@/assets/workflow/list_search.png) no-repeat 10px center;
+    background-size: 14px 14px;
+    margin-bottom: 14px;
+}
+.tree_nav span {
+    display: inline-block;
+    padding-right: 10px;
+    margin-right: 5px;
+    max-width: 6em;
+    color: #38adff;
+    font-size: 12px;
+    cursor: pointer;
+    background: url(~@/assets/workflow/jiaojiao.png) no-repeat right center;
+}
+.tree_nav span:last-of-type {
+    background: none;
+}
+.person_tree ul,
+.has_selected ul {
+    height: 420px;
+    overflow-y: auto;
+}
+.person_tree li {
+    padding: 5px 0;
+}
+.person_tree li i {
+    float: right;
+    padding-left: 24px;
+    padding-right: 10px;
+    color: #3195f8;
+    font-size: 12px;
+    cursor: pointer;
+    /* background: url(~@/assets/workflow/next_level_active.png) no-repeat 10px center; */
+    border-left: 1px solid rgb(238, 238, 238);
+}
+.person_tree li a.active + i {
+    color: rgb(197, 197, 197);
+    /* background-image: url(~@/assets/workflow/next_level.png); */
+    pointer-events: none;
+}
+.person_tree img {
+    width: 14px;
+    vertical-align: middle;
+    margin-right: 5px;
+}
+.has_selected {
+    width: 276px;
+    height: 100%;
+    font-size: 12px;
+}
+.has_selected ul {
+    height: 460px;
+}
+.has_selected p {
+    padding-left: 19px;
+    padding-right: 20px;
+    line-height: 37px;
+    border-bottom: 1px solid #f2f2f2;
+}
+.has_selected p a {
+    float: right;
+}
+.has_selected ul li {
+    margin: 11px 26px 13px 19px;
+    line-height: 17px;
+}
+.has_selected li span {
+    vertical-align: middle;
+}
+.has_selected li img:first-of-type {
+    width: 14px;
+    vertical-align: middle;
+    margin-right: 5px;
+}
+.has_selected li img:last-of-type {
+    float: right;
+    margin-top: 2px;
+    width: 14px;
+}
+el-radio-group {
+    padding: 20px 0;
+}
+.approver_content {
+    padding-bottom: 10px;
+    border-bottom: 1px solid #f2f2f2;
+}
+.approver_content .el-radio,
+.approver_some .el-radio,
+.approver_self_select .el-radio {
+    width: 27%;
+    margin-bottom: 20px;
+}
+.copyer_content .el-checkbox {
+    margin-bottom: 20px;
+}
+.el-checkbox__label {
+    font-size: 12px;
+}
+.condition_content,
+.copyer_content,
+.approver_self_select,
+.approver_manager,
+.approver_content,
+.approver_some {
+    padding: 20px 20px 0;
+}
+.approver_manager p:first-of-type,
+.approver_some p {
+    line-height: 19px;
+    font-size: 14px;
+    margin-bottom: 14px;
+}
+
+.approver_manager p {
+    line-height: 32px;
+}
+.approver_manager select {
+    width: 420px;
+    height: 32px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 4px;
+    border: 1px solid rgba(217, 217, 217, 1);
+}
+.approver_manager p.tip {
+    margin: 10px 0 22px 0;
+    font-size: 12px;
+    line-height: 16px;
+    color: #f8642d;
+}
+.approver_self {
+    padding: 28px 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;
+}
+.approver_self_select h3 {
+    margin: 5px 0 20px;
+    font-size: 14px;
+    font-weight: bold;
+    line-height: 19px;
+}
+.condition_copyer .el-drawer__body .priority_level {
+    position: absolute;
+    top: 11px;
+    right: 30px;
+    width: 100px;
+    height: 32px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 4px;
+    border: 1px solid rgba(217, 217, 217, 1);
+}
+.condition_content p.tip {
+    margin: 20px 0;
+    width: 510px;
+    text-indent: 17px;
+    line-height: 45px;
+    background: rgba(241, 249, 255, 1);
+    border: 1px solid rgba(64, 163, 247, 1);
+    color: #46a6fe;
+    font-size: 14px;
+}
+.condition_content ul {
+    max-height: 500px;
+    overflow-y: scroll;
+    margin-bottom: 20px;
+}
+.condition_content li > span {
+    float: left;
+    margin-right: 8px;
+    width: 70px;
+    line-height: 32px;
+    text-align: right;
+}
+.condition_content li > div {
+    display: inline-block;
+    width: 370px;
+}
+.condition_content li:not(:last-child) > div > p {
+    margin-bottom: 20px;
+}
+.condition_content li > div > p:not(:last-child) {
+    margin-bottom: 10px;
+}
+.condition_content li > a {
+    float: right;
+    margin-right: 10px;
+    margin-top: 7px;
+}
+.condition_content li select,
+.condition_content li input {
+    width: 100%;
+    height: 32px;
+    background: rgba(255, 255, 255, 1);
+    border-radius: 4px;
+    border: 1px solid rgba(217, 217, 217, 1);
+}
+.condition_content li select + input {
+    width: 260px;
+}
+.condition_content li select {
+    margin-right: 10px;
+    width: 100px;
+}
+.condition_content li p.selected_list {
+    padding-left: 10px;
+    border-radius: 4px;
+    min-height: 32px;
+    border: 1px solid rgba(217, 217, 217, 1);
+}
+.condition_content li p.check_box {
+    line-height: 32px;
+}
+.condition_list .el-dialog__body {
+    padding: 16px 26px;
+}
+.condition_list p {
+    color: #666666;
+    margin-bottom: 10px;
+}
+.condition_list p.check_box {
+    margin-bottom: 0;
+    line-height: 36px;
+}
 </style>