From 8378c4d6ab43f53a9006c2d6dd98b5e409b48674 Mon Sep 17 00:00:00 2001
From: zhutianqi <ztq_qi@sina.com>
Date: Tue, 8 Mar 2022 18:16:18 +0800
Subject: [PATCH] commit

---
 src/components/roleTree/index.vue | 175 ++++++++++++++++++++++--------
 1 file changed, 129 insertions(+), 46 deletions(-)

diff --git a/src/components/roleTree/index.vue b/src/components/roleTree/index.vue
index c21e09c28..c4d706511 100644
--- a/src/components/roleTree/index.vue
+++ b/src/components/roleTree/index.vue
@@ -20,51 +20,67 @@
                     ></el-input>
                 </el-form-item>
             </el-form>
-            <el-tree
-                    v-if="open1 && isVisible2"
-                    node-key="id"
-                    style="height: 100%; overflow: auto;"
-                    class="filter-tree tree-line"
-                    icon-class="icon-tree"
-                    @check-change="checkChange"
-                    :data="treeData"
-                    :props="defaultProps"
-                    :default-checked-keys="nodeList"
-                    highlight-current
-                    check-strictly
-                    @check="drawerCheck"
-                    :expand-on-click-node="true"
-                    show-checkbox
-                    ref="tree"
-                    :load="loadNode"
-                    lazy>
+            <div class="divTree">
+                <el-tree
+                        v-if="open1 && isVisible2"
+                        node-key="id"
+                        style="height: 100%; overflow: auto;"
+                        class="filter-tree tree-line"
+                        icon-class="icon-tree"
+                        @check-change="checkChange"
+                        :data="treeData"
+                        :props="defaultProps"
+                        :default-checked-keys="nodeList"
+                        highlight-current
+                        check-strictly
+                        @check="drawerCheck"
+                        :expand-on-click-node="true"
+                        show-checkbox
+                        ref="tree"
+                        :load="loadNode"
+                        lazy>
                   <span class="custom-tree-node" slot-scope="{ node, data }">
                       <span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
                       <span> {{ node.label }} </span>
                   </span>
-            </el-tree>
-            <el-tree
-                    v-if="!open1 && isVisible2"
-                    node-key="id"
-                    style="height: 100%; overflow: auto;"
-                    class="filter-tree tree-line"
-                    icon-class="icon-tree"
-                    :data="treeData1"
-                    :props="defaultProps"
-                    @check-change="checkChange2"
-                    :default-checked-keys="nodeList"
-                    highlight-current
-                    check-strictly
-                    @check="drawerCheck"
-                    :expand-on-click-node="true"
-                    default-expand-all
-                    show-checkbox
-                    ref="tree">
+                </el-tree>
+                <el-tree
+                        v-if="!open1 && isVisible2"
+                        node-key="id"
+                        style="height: 100%; overflow: auto;"
+                        class="filter-tree tree-line"
+                        icon-class="icon-tree"
+                        :data="treeData1"
+                        :props="defaultProps"
+                        @check-change="checkChange2"
+                        :default-checked-keys="nodeList"
+                        highlight-current
+                        check-strictly
+                        @check="drawerCheck"
+                        :expand-on-click-node="true"
+                        default-expand-all
+                        show-checkbox
+                        ref="tree">
                   <span class="custom-tree-node" slot-scope="{ node, data }">
                       <span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
                       <span> {{ node.label }} </span>
                   </span>
-            </el-tree>
+                </el-tree>
+            </div>
+            <div class="divDel">
+                <div class="divDel_title">已选中人员</div>
+                <div class="divDel_box">
+                    <el-tag
+                            v-for="tag in delList"
+                            :key="tag.id"
+                            size="mini"
+                            @close="handleClose(tag)"
+                            closable>
+                        {{tag.name}}
+                    </el-tag>
+                    <el-tag v-show="delList.length > 0" type="danger" closable size="mini" @close="handleCloseAll()">全部删除</el-tag>
+                </div>
+            </div>
             <div id="roleFormButton" class="demo-drawer-footer">
                 <el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo">确定</el-button>
 
@@ -108,6 +124,7 @@
         },
         data () {
             return {
+                delList: [],
                 roleList: [],
                 isVisible2: false,
                 filterText: '',
@@ -128,6 +145,36 @@
             }
         },
         methods: {
+            handleClose (tag) {
+                for (let a = 0; a < this.delList.length; a++) {
+                    if (tag.id === this.delList[a].id) {
+                        this.delList.splice(a, 1)
+                    }
+                }
+                for (let b = 0; b < this.nodeList.length; b++) {
+                    if (tag.id === this.nodeList[b]) {
+                        this.nodeList.splice(b, 1)
+                    }
+                }
+            },
+            handleCloseAll () {
+                this.$msgbox({
+                    title: '提示',
+                    message: '是否删除当前选中人员',
+                    showCancelButton: true,
+                    confirmButtonText: '确定',
+                    cancelButtonText: '取消',
+                }).then(() => {
+                    this.delList = []
+                    this.nodeList = []
+                }).catch(() => {
+                        this.$message({
+                            type: 'info',
+                            message: '取消删除'
+                        });
+                    }
+                )
+            },
             changeInput:debounce(function (val) {
                 if (val.length) {
                     this.open1 = false
@@ -219,14 +266,6 @@
                     } else if (getlist.length === 1) {
                         this.roleList = [data]
                     }
-                    // var getlist = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
-                    // if(getlist.length == 1) {
-                    //     this.roleRow = getlist[0]
-                    // } else {
-                    //     this.$refs.tree.setCheckedKeys([data.id])
-                    //     this.roleRow = this.$refs.tree.getCheckedNodes()[0]
-                    // }
-                    // this.roleList = [this.roleRow]
                 } else { // 多选
                     this.roleList = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
                 }
@@ -256,6 +295,30 @@
         watch: {
             isVisible (val) {
                 this.isVisible2 = val
+                if (val) {
+                    if (this.nodeList.length > 0 && this.nodeList[0].length !== 0) {
+                        let ids = ''
+                        this.nodeList.forEach(item => {
+                            if (ids.length > 0) {
+                                ids += ','
+                                ids += item
+                            } else {
+                                ids = item
+                            }
+                        })
+                        this.$http.get('SarInstitution/institution/getNextById', {
+                            ids: ids
+                        }, {
+                            _this: this
+                        }, res => {
+                            this.delList = res
+                        })
+                    } else {
+                        this.delList = []
+                    }
+                } else {
+                    this.delList = []
+                }
             },
             isVisible2 (val) {
                 this.$emit('update:isVisible', val)
@@ -268,7 +331,27 @@
 </script>
 
 <style lang="less" scoped>
-/deep/ .icon-tree {
+    .divTree {
+        overflow: auto;
+        height: calc(~'100% - 300px');
+    }
+    .divDel {
+        border-top: 1px solid #000;
+        height: 300px;
+        .divDel_title {
+            margin: 10px;
+        }
+        .divDel_box {
+            display: flex;
+            flex-wrap: wrap;
+            overflow: auto;
+            margin: 10px;
+            span {
+                margin-right: 5px;
+            }
+        }
+    }
+    /deep/ .icon-tree {
   margin: 0 5px 0 10px;
   position: relative;
   background: url('~@/assets/images/shangqi/img/tree-add.png');