选择审批人员组件

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

@@ -28,7 +28,18 @@
                             <el-button @click="chooseDialogShow=true">选择人员</el-button>
                         </div>
                         <div class="approve-list">
-                            <TreeTransfer/>
+                            <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>
                     </div>
                     <!-- <div class="block">
@@ -76,7 +87,15 @@
             :append-to-body="false"
         >
             <div class="dialog-wrap">
-                <TreeTransfer />
+                <TreeTransfer 
+                    ref="tree-trans"
+                    :defaultList="choosedList"
+                    :chooseDialogShow="chooseDialogShow"
+                />
+            </div>
+            <div class="dialog-btn">
+                <el-button>取消</el-button>
+                <el-button @click="getChoosedList">确认</el-button>
             </div>
         </el-dialog>
     </div>
@@ -93,6 +112,7 @@ export default {
             block1: 1,
             block2: 1,
             chooseDialogShow: false,
+            choosedList:[]
         };
     },
     methods: {
@@ -103,10 +123,14 @@ export default {
             //设置一下里面的文字啥的
             this.drawer = true;
         },
-    },
-    created() { console.log('test', this.flowNode); },
-    mounted() {
-        console.log('test', this.flowNode);
+        getChoosedList(){
+            this.choosedList = _.cloneDeep(this.$refs["tree-trans"].choosedList)
+            this.chooseDialogShow = false
+        },
+        removeChoosedItem(item){
+            const index = this.choosedList.findIndex(i=>i.ItemId===item.ItemId)
+            index!==-1&&this.choosedList.splice(index,1)
+        }
     },
     components: { TreeTransfer }
 };

src/views/approve_manage/components/treeTransfer.vue

@@ -1,5 +1,5 @@
 <template>
-    <!-- 支持树形结构的穿梭框,不需要树形的直接用el-transfer -->
+    <!-- 选择审批人组件 -->
     <div class="tree-transfer">
         <div class="before-transfer transfer">
             <div class="head">{{beforeNum}}项</div>
@@ -8,6 +8,7 @@
             </div>
             <div class="content">
                 <el-tree 
+                    node-key="ItemId"
                     ref="trans-tree"
                     show-checkbox
                     :data="treeData"
@@ -21,17 +22,41 @@
             </div>
         </div>
         <div class="after-transfer transfer">
-            <div class="head"><span>已选{{choosedList.length}}项</span><span>清空</span></div>
-            <ul class="content">
-                <li v-for="item in choosedList" :key="item.ItemId">{{item.ItemName}}</li>
-            </ul>
+            <div class="head">
+                <span>已选{{choosedList.length}}项</span>
+                <span class="btn-text delete" @click="clearnItem">清空</span>
+            </div>
+            <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="removeItem(item)"></i>
+                    </span>
+                </li>
+            </draggable>
         </div>
     </div>
 </template>
 
 <script>
 import { dataAuthInterface } from "@/api/api.js";
+import draggable from 'vuedraggable';
 export default {
+    components:{draggable},
+    props:{
+        defaultList:{
+            type:Array,
+            default:[]
+        },
+        chooseDialogShow:{
+            type:Boolean,
+            default:false
+        }
+    },
     data() {
         return {
             beforeNum:10,
@@ -41,6 +66,16 @@ export default {
             choosedList:[]
         };
     },
+    watch:{
+        chooseDialogShow:{
+            handler(val){
+                if(val){
+                    this.getTreeData()
+                }
+            },
+            immediate:true
+        }
+    },
     methods: {
         getTreeData(){
             ///datamanage/manual/sysuser/search?KeyWord= ,要用新接口再换
@@ -50,6 +85,13 @@ export default {
                 if(res.Ret === 200) {
                     this.treeData = res.Data||[];
                 }
+                this.$nextTick(()=>{
+                    const keys = this.defaultList.map(i=>{
+                        return i.ItemId
+                    })
+                    this.$refs["trans-tree"].setCheckedKeys(keys)
+                    this.choosedList = _.cloneDeep(this.defaultList)
+                })
             })
         },
         filterNode(value,data){
@@ -57,15 +99,46 @@ export default {
             return data.ItemName.indexOf(value)!==-1
         },
         SetCheckedNode(data,{checkedNodes}){
-            this.choosedList = checkedNodes.filter(i=>{
-                if(i.ItemId<10000&&!i.Children)
-                    return i
-            })
-            this.$emit("chooseList",this.choosedList)
-        }
+            if(!this.choosedList.length){
+                 //只获取人员
+                this.choosedList = checkedNodes.filter(i=>{
+                    if(i.ItemId<10000&&!i.Children)
+                        return i
+                })
+            }else{
+                //遍历 filterArr choosedList里没有的，push进去
+                const filterArr = checkedNodes.filter(i=>{
+                    if(i.ItemId<10000&&!i.Children)
+                        return i
+                })
+                filterArr.forEach(i=>{
+                    const index = this.choosedList.findIndex(item=>i.ItemId===item.ItemId)
+                    if(index===-1){this.choosedList.push(i)}
+                })
+                //遍历choosedList，filterArr里没有的，删除
+                const tempArr = _.cloneDeep(this.choosedList)
+                tempArr.forEach(i=>{
+                    const checkIndex = filterArr.findIndex(item=>item.ItemId===i.ItemId)
+                    if(checkIndex===-1){
+                        const index = this.choosedList.findIndex(item=>item.ItemId===i.ItemId)
+                        index!==-1&&this.choosedList.splice(index,1)
+                    }
+                })
+            }
+        },
+        removeItem(item){
+            const {ItemId} = item
+            this.$refs["trans-tree"].setChecked(ItemId,false,false)
+            const index = this.choosedList.findIndex(i=>i.ItemId===ItemId)
+            index!==-1&&this.choosedList.splice(index,1)
+        },
+        clearnItem(){
+            this.$refs["trans-tree"].setCheckedKeys([])
+            this.choosedList = []
+        },
     },
     mounted(){
-        this.getTreeData()
+        //this.getTreeData()
     }
 };
 </script>
@@ -86,11 +159,26 @@ export default {
         }
         .head{
             border-bottom: 1px solid gray;
+            display: flex;
+            justify-content: space-between;
+            .btn-text{
+                cursor: pointer;
+                &.delete{
+                    color:red;
+                }
+            }
         }
         .content{
             flex:1;
             overflow-y: scroll;
             margin-bottom: 10px;
+            .list-item{
+                cursor: pointer;
+                padding:5px 0;
+                border-bottom:1px solid gray;
+                display: flex;
+                justify-content: space-between;
+            }
         }
     }
 }