代码整理,补充注释

src/views/approve_manage/approveEdit.vue

@@ -15,7 +15,7 @@
                 </el-form>
             <div class="btn">
                 <el-button>取消</el-button>
-                <el-button>保存</el-button>
+                <el-button @click="checkFlow">保存</el-button>
             </div>
         </div>
         <!-- 审批流画布 -->
@@ -29,15 +29,24 @@
 </template>
 
 <script>
-import FlowEdiotr from './components/flowEdiotr.vue';
+import FlowEdiotr from './components/flowEdiotr';
 
 export default {
     data() {
         return {
-            approveForm:{},
+            approveForm:{
+                name:'',
+                region:'',
+                flowConfig:{}
+            },
         };
     },
-    methods: {},
+    methods: {
+        checkFlow(){
+            //检查name,region是否为空
+            //检查审批流内容:每个审批节点是否都选择了审批人
+        },
+    },
     components: { FlowEdiotr }
 };
 </script>
@@ -55,7 +64,6 @@ export default {
     .flow-editor-wrap{
         flex:1;
         overflow: hidden;
-        background-color: aqua;
     }
 }
 </style>

src/views/approve_manage/components/flowEdiotr.vue

@@ -5,9 +5,9 @@
             :is="node.nodeName"
             :flowNode="{...node,...{index}}"
             @addNode="addFlowNode"
+            @editNode="editFlowNode"
             @removeNode="removeNode">
         </component>
-        <!-- <StartNode :flowNode="mockFlow"></StartNode> -->
     </div>
 </template>
 
@@ -26,7 +26,7 @@ export default {
                 childrenNode: {
                     nodeType: 2,
                     nodeName: 'ApproveNode',
-                    approvers: ['审批人1', '审批人2'],
+                    approvers: [],
                     childrenNode: {
                         nodeType:2,
                         nodeName:'ApproveNode',
@@ -45,7 +45,7 @@ export default {
         getNode(node) {
             let result = []
             let _getNode = function (node) {
-                let tmp =JSON.parse(JSON.stringify(node))
+                let tmp = _.cloneDeep(node)
                 delete tmp.childrenNode
                 result.push(tmp) //移除拍平数组的子元素,只保留节点相干元素
                 let child = node.childrenNode
@@ -66,6 +66,10 @@ export default {
         removeNode(node){
             const {index} = node
             this.flowData.splice(index,1)
+        },
+        editFlowNode(node){
+            const {index} = node
+            this.flowData.splice(index,1,node)
         }
     },
     mounted(){
@@ -81,6 +85,5 @@ export default {
     width:100%;
     height: 100%;
     overflow:auto;
-    background-color: gray;
 }
 </style>

src/views/approve_manage/components/flowNode/addNode.vue

@@ -30,7 +30,7 @@ export default {
             const data = {
                 nodeType:2,
                 nodeName:'ApproveNode',
-                approvers:['AA'],
+                approvers:[],
                 prevNode:this.node
             }
             this.$emit("addNode",data)
@@ -61,6 +61,7 @@ export default {
     position:relative;
     .node-content{
         background-color: transparent;
+        border:none;
     }
     .line,.line-arrow,.add-btn{
         position: absolute;

src/views/approve_manage/components/flowNode/approveNode.vue

@@ -6,7 +6,14 @@
                 <span class="name">审核人</span>
                 <span class="icon-btn" @click="removeNode"><i class="el-icon-close"></i></span>
             </div>
-            <div class="content" @click="showDrawer">{{flowNode.approvers[0]||'请选择审批人'}}</div>
+            <div class="content" @click="showDrawer">
+                <ul class="approver-list" v-if="flowNode.approvers.length">
+                    <li class="list-item" v-for="item in flowNode.approvers" :key="item.ItemId">
+                        {{item.ItemName}}、
+                    </li>
+                </ul>
+                <span v-else>请选择审批人</span>
+            </div>
         </div>
         <AddNode :node="flowNode" v-on="$listeners"/>
         <el-drawer
@@ -18,7 +25,7 @@
             <div class="approve-drawer-wrap">
                 <div class="header">
                     <p>审批人设置</p>
-                    <span class="close-icon"><i class="el-icon-close"></i></span>
+                    <span class="close-icon" @click="drawer=false"><i class="el-icon-close"></i></span>
                 </div>
                 <div class="drawer-content">
                     <div class="block">
@@ -27,22 +34,20 @@
                             <el-radio v-model="block1" :label="1">指定人员</el-radio>
                             <el-button @click="chooseDialogShow=true">选择人员</el-button>
                         </div>
-                        <div class="approve-list">
-                            <draggable 
-                                v-model="choosedList"
-                                animation="300"
-                                tag="ul"
-                                class="content">
-                                <li class="list-item" v-for="item in choosedList" :key="item.ItemId">
-                                    <span class="name">{{item.ItemName}}</span>
-                                    <span class="icon-btn">
-                                        <i class="el-icon-circle-close" @click.stop="removeChoosedItem(item)"></i>
-                                    </span>
-                                </li>
-                            </draggable>
-                        </div>
+                        <draggable 
+                            v-model="choosedList"
+                            animation="300"
+                            tag="ul"
+                            class="approve-list">
+                            <li class="list-item" v-for="item in choosedList" :key="item.ItemId">
+                                <span class="name">{{item.ItemName}}</span>
+                                <span class="icon-btn">
+                                    <i class="el-icon-circle-close" @click.stop="removeChoosedItem(item)"></i>
+                                </span>
+                            </li>
+                        </draggable>
                     </div>
-                    <!-- <div class="block">
+                    <div class="block">
                         <p>多人审批时</p>
                         <el-radio-group v-model="block2">
                             <el-radio :label="1">
@@ -70,11 +75,11 @@
                                 </el-tooltip>
                             </el-radio>
                         </el-radio-group>
-                    </div> -->
+                    </div>
                 </div>
                 <div class="drawer-btn">
-                    <el-button>取消</el-button>
-                    <el-button>确认</el-button>
+                    <el-button @click="drawer=false">取消</el-button>
+                    <el-button @click="editApproveNode">确认</el-button>
                 </div>
             </div>
         </el-drawer>
@@ -102,10 +107,16 @@
 </template>
 
 <script>
-import TreeTransfer from '../treeTransfer.vue';
-import mixin from './nodeMixin'
+import TreeTransfer from '../treeTransfer';
+import draggable from 'vuedraggable';
+import AddNode from './addNode';
 export default {
-    mixins: [mixin],
+    props:{
+        flowNode:{
+            type:Object,
+            default:{}
+        }
+    },
     data() {
         return {
             drawer: false,
@@ -115,6 +126,13 @@ export default {
             choosedList:[]
         };
     },
+    watch:{
+        drawer(val){
+            if(val){
+                this.choosedList = _.cloneDeep(this.flowNode.approvers||[])
+            }
+        }
+    },
     methods: {
         removeNode() {
             this.$emit('removeNode', this.flowNode);
@@ -130,9 +148,15 @@ export default {
         removeChoosedItem(item){
             const index = this.choosedList.findIndex(i=>i.ItemId===item.ItemId)
             index!==-1&&this.choosedList.splice(index,1)
-        }
+        },
+        editApproveNode(){
+            const node = _.cloneDeep(this.flowNode)
+            node.approvers = _.cloneDeep(this.choosedList)
+            this.$emit('editNode',node)
+            this.drawer = false
+        },
     },
-    components: { TreeTransfer }
+    components: { TreeTransfer, draggable, AddNode }
 };
 </script>
 
@@ -169,7 +193,24 @@ export default {
             box-sizing: border-box;
             padding:10px;
             .block{
-                height: 500px;
+                margin-bottom: 20px;
+            }
+            .approve-list{
+                margin-top: 10px;
+                display: flex;
+                flex-wrap: wrap;
+                gap:10px;
+                .list-item{
+                    padding:5px;
+                    border:1px solid black;
+                }
+            }
+            .el-radio-group{
+                margin-top: 10px;
+                .el-radio{
+                    display: block;
+                    margin-bottom: 10px;
+                }
             }
         }
         .drawer-btn{

src/views/approve_manage/components/flowNode/nodeMixin.js

@@ -1,10 +0,0 @@
-import AddNode from './addNode.vue';
-export default{
-    components: { AddNode},
-    props:{
-        flowNode:{
-            type:Object,
-            default:{}
-        }
-    },
-}

src/views/approve_manage/components/flowNode/startNode.vue

@@ -2,16 +2,22 @@
     <div class="start-node-wrap node-wrap">
         <div class="node-content">
             <div class="head">发起人</div>
-            <div class="content">张三</div>
+            <div class="content">所有人</div>
         </div>
         <AddNode :node="flowNode" v-on="$listeners"/>
     </div>
 </template>
 
 <script>
-import mixin from './nodeMixin'
+import AddNode from './addNode.vue';
 export default {
-    mixins:[mixin],
+    components: { AddNode},
+    props:{
+        flowNode:{
+            type:Object,
+            default:{}
+        }
+    },
     data() {
         return {};
     },

src/views/approve_manage/css/nodeStyle.scss

@@ -8,6 +8,7 @@
         width:300px;
         min-height: 100px;
         background-color: #fff;
+        border:1px solid black;
         .head{
             color:#fff;
             height:35px;