From 0ba8ed9a274f2105e1565a28d1b977a68baa14b7 Mon Sep 17 00:00:00 2001
From: sunFlower <787203167@qq.com>
Date: Mon, 10 Oct 2022 14:41:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=A6=85=E9=81=93=E5=B7=B2?=
 =?UTF-8?q?=E7=9F=A5bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 jero-web/src/components/setCreator/index.vue | 392 ++++++++++++++-----
 1 file changed, 292 insertions(+), 100 deletions(-)

diff --git a/jero-web/src/components/setCreator/index.vue b/jero-web/src/components/setCreator/index.vue
index 12c38aa43..4d5537bb3 100644
--- a/jero-web/src/components/setCreator/index.vue
+++ b/jero-web/src/components/setCreator/index.vue
@@ -15,18 +15,38 @@
                         allowClear
                         :placeholder="$t('NodeQuickLookup')"/>
         <div class="drawer-content">
-          <a-tree
-            v-if="visibleTree"
-            style="margin-bottom: 60px;height: 600px"
-            checkable
-            :autoExpandParent="false"
-            :tree-data="gData"
-            @select="onSelect"
-            @check="checkChange"
-            @expand="onExpand"
-            :defaultExpandedKeys="defaultExpandedKeys"
-          >
-          </a-tree>
+          <virtualNodeTree
+            v-if="treeVisible"
+            ref="virtualNodeTreeRef"
+            :keeps="40"
+            show-checkbox
+            v-model="checkboxList"
+            class="treeWrap"
+            :defaultCheckedKeys="defaultCheckedKeys"
+            :defaultExpandAll="defaultExpandAll"
+            :check-strictly="false"
+            node-key="id"
+            @check="handleCheckChange"
+            @check-change="checkChange"
+            :data.sync="gData">
+                           <span slot-scope="{ data }">
+                            <span :class="{'active':data.color ? true:false}">
+                              {{ data.title }}
+                            </span>
+                           </span>
+          </virtualNodeTree>
+          <!--          <a-tree-->
+          <!--            v-if="visibleTree"-->
+          <!--            style="margin-bottom: 60px;height: 600px"-->
+          <!--            checkable-->
+          <!--            :autoExpandParent="false"-->
+          <!--            :tree-data="gData"-->
+          <!--            @select="onSelect"-->
+          <!--            @check="checkChange"-->
+          <!--            @expand="onExpand"-->
+          <!--            :defaultExpandedKeys="defaultExpandedKeys"-->
+          <!--          >-->
+          <!--          </a-tree>-->
         </div>
       </a-spin>
       <div class="drawer-bootom-button">
@@ -40,15 +60,20 @@
 <script>
   import { getAction, postAction } from '@/api/manage'
   import eventBUs from '../../common/event'
+  import virtualNodeTree from '@/components/virtualNodeTree/tree'
 
   export default {
     name: 'index',
+    components: {
+      virtualNodeTree
+    },
     data() {
       return {
         gData: [],
         searchModel: '',
         autoExpandParent: true,
         expandedKeys: [],
+        checkboxList: [],
         visible: false,
         confirmLoading: false,
         selectedKey: [],
@@ -56,42 +81,149 @@
         userIds: [],
         departId: '',
         defaultExpandedKeys: [],
+        defaultExpandAll: false,
+        defaultCheckedKeys: [],
         content: [],
         userName: [],
         submitLoading: false,
-        visibleTree: false
+        visibleTree: false,
+        treeVisible: false
       }
     },
     mounted() {
 
     },
     methods: {
-      getPush(data) {
-        this.tableKey = data
-        this.userName = []
-        this.content = []
-        this.searchModel = ''
-        this.visible = true
-        this.visibleTree = false
-        this.$nextTick(() => {
-          this.departId = ''
-          this.queryDepartUserTreeList()
-        })
-      },
-      onSelect(selectedKeys) {
-        this.selectedKey = selectedKeys
-      },
-      onExpand(selectedKeys, val) {
-        if (this.searchModel == '' || !this.searchModel) {
-          if (val.expanded) {
-            if (this.departId == val.node.value) {
-            } else {
-              this.departId = val.node.value
-              this.queryDepartUserTreeList()
+      checkChange(val, checked, indeterminate) {
+        if (!checked && this.searchData) {
+          this.userName = this.userName.filter(res => {
+            return res != val.title
+          })
+          this.userIds = this.userIds.filter(res => {
+            return res != val.id
+          })
+          for (let i = 0; i < this.userIds.length; i++) {
+            if (this.userIds[i] == val.parentId) {
+              this.userIds.splice(i, 1)
+              this.userName.splice(i, 1)
+              i--
             }
           }
+        } else if (checked && this.searchData) {
+          this.userName.push(val.title)
+          this.userIds.push(val.id)
+        }
+      },
+      handleCheckChange(val, data, checked) {
+        if (!this.searchData) {
+          this.userName = []
+          this.userIds = []
+          if (data.checkedNodes && data.checkedNodes.length > 0) {
+            data.checkedNodes.forEach(res => {
+              this.userName.push(res.title)
+              this.userIds.push(res.id)
+            })
+          }
         }
       },
+      getPush(data) {
+        this.tableKey = data
+        this.userName = []
+        this.userIds = []
+        this.content = []
+        this.defaultCheckedKeys = []
+        this.searchModel = ''
+        this.visible = true
+        this.visibleTree = false
+        this.treeVisible = false
+        // this.$nextTick(() => {
+        //   this.departId = ''
+        //   this.queryDepartUserTreeList()
+        // })
+        let gData = localStorage.getItem('gData')
+        if (gData) {
+          let dataList = JSON.parse(gData)
+          dataList.forEach(res => {
+            if (res.type == 'Depart') {
+              res.disabled = true
+            }
+          })
+          this.dataList = this.toTree(dataList)
+        }
+        setTimeout(() => {
+          if (gData) {
+            this.gData = this.dataList
+            this.gData = [...this.gData]
+            this.treeVisible = true
+          } else {
+            this.queryDepartUserTreeList(1)
+          }
+        }, 200)
+      },
+      deleteChildren(value, arr) {
+        let newarr = []
+        arr.forEach(element => {
+          if (element.title.indexOf(value) > -1) { // 判断条件
+            newarr.push(element)
+          } else {
+            if (element.children && element.children.length > 0) {
+              let redata = this.deleteChildren(value, element.children)
+              if (redata && redata.length > 0) {
+                let obj = {
+                  ...element,
+                  children: redata
+                }
+                newarr.push(obj)
+              }
+            }
+          }
+        })
+        return newarr
+      },
+      // 将数据拼成树形结构
+      toTree(config, num) {
+        // 删除 所有 children,以防止多次调用
+        config.forEach(function(item) {
+          delete item.children
+        })
+        // 将数据存储为 以 id 为 KEY 的 map 索引数据列
+        let map = {}
+        config.forEach((item) => {
+          item.label = item.name
+          item.key = item.id
+
+          item.title = item.name + (item.itemName ? ' ' + item.itemName : '')
+          map[item.id] = item
+        })
+        let val = []
+        config.forEach((item) => {
+          // 以当前遍历项，的pid,去map对象中找到索引的id
+          let parent = map[item.parentId]
+
+          // 如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
+          if (parent) {
+            (parent.children || (parent.children = [])).push(item)
+          } else {
+            //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
+            val.push(item)
+          }
+        })
+        return val
+      },
+      // onSelect(selectedKeys) {
+      //   this.selectedKey = selectedKeys
+      // },
+      // onExpand(selectedKeys, val) {
+      //   if (this.searchModel == '' || !this.searchModel) {
+      //     if (val.expanded) {
+      //       if (this.departId == val.node.value) {
+      //       } else {
+      //         this.departId = val.node.value
+      //         this.queryDepartUserTreeList()
+      //       }
+      //     }
+      //   }
+      // },
       handleCancel() {
         this.visible = false
         this.visibleTree = false
@@ -125,84 +257,137 @@
         })
       },
       onSearch(e) {
-        this.gData = []
-        this.departId = ''
-        this.visibleTree = false
-        if (e) {
-          this.getUserAndDepart()
-        } else {
-          this.queryDepartUserTreeList()
-        }
-      },
-      getUserAndDepart() {
-        getAction('sys/user/getUserAndDepart', { name: this.searchModel }).then((res) => {
-          if (res){
-            this.gData = res.filter(ele => ele.flag === 'DEPART');
-          } else {
-            this.gData = []
-          }
-          this.visibleTree = true
+        this.treeVisible = false
+        let p = new Promise((resolve, reject) => {
+          resolve()
         })
+        p.then(() => {
+          this.searchData = e
+          let gData = localStorage.getItem('gData')
+          let content = []
+          if (gData) {
+            if (e) {
+              JSON.parse(gData).forEach(res => {
+                if (res.type == 'User') {
+                  if (res.name.includes(e)) {
+                    res.color = true
+                    content.push(res)
+                  }
+                }
+              })
+              let gDataAdmin = this.toTree(content)
+              this.gData = this.deleteChildren(e, gDataAdmin)
+              this.defaultExpandAll = true
+              this.treeVisible = true
+              this.defaultCheckedKeys = this.userIds
+              this.defaultCheckedKeys = [...this.defaultCheckedKeys]
+              this.loading = false
+            } else {
+              let content = JSON.parse(gData)
+              content.forEach(res => {
+                if (res.type == 'Depart') {
+                  res.disabled = true
+                }
+              })
+              this.gData = this.toTree(content)
+              this.defaultExpandAll = false
+              this.defaultCheckedKeys = this.userIds
+              this.defaultCheckedKeys = [...this.defaultCheckedKeys]
+              this.treeVisible = true
+              this.loading = false
+            }
+          }
+        })
+        // this.gData = []
+        // this.departId = ''
+        // this.visibleTree = false
+        // if (e) {
+        //   this.getUserAndDepart()
+        // } else {
+        //   this.queryDepartUserTreeList()
+        // }
       },
+      // getUserAndDepart() {
+      //   getAction('sys/user/getUserAndDepart', { name: this.searchModel }).then((res) => {
+      //     if (res) {
+      //       this.gData = res.filter(ele => ele.flag === 'DEPART')
+      //     } else {
+      //       this.gData = []
+      //     }
+      //     this.visibleTree = true
+      //   })
+      // },
       queryDepartUserTreeList() {
-        let gData = JSON.parse(JSON.stringify(this.gData))
-        if (gData && gData.length > 0) {
-          gData = JSON.stringify(gData)
-        } else {
-          gData = ''
-        }
+        // let gData = JSON.parse(JSON.stringify(this.gData))
+        // if (gData && gData.length > 0) {
+        //   gData = JSON.stringify(gData)
+        // } else {
+        //   gData = ''
+        // }
         this.confirmLoading = true
-        postAction('sys/user/queryDepartUserTreeList', {
-          departId: this.departId,
-          flag: '1',
-          json: gData
+        getAction('sys/user/queryUserTreeList', {
+          // departId: this.departId,
+          // flag: '1',
+          // json: gData
         }).then((res) => {
           this.confirmLoading = false
           if (res.success) {
-            this.gData = res.result
-            this.defaultExpandedKeys = [this.departId]
+            let content = JSON.parse(JSON.stringify(res.result))
+            res.result.forEach(res => {
+              if (res.type == 'Depart') {
+                res.disabled = true
+              }
+            })
+            localStorage.removeItem('gData')
+            localStorage.setItem('gData', JSON.stringify(content))
+            this.gData = this.toTree(res.result)
+            this.gData = [...this.gData]
+            // this.gData = res.result
+            // this.defaultExpandedKeys = [this.departId]
+            this.defaultExpandAll = false
+            this.treeVisible = true
             this.visibleTree = true
           } else {
             this.gData = []
           }
         })
-      },
-      checkChange(e, info) {
-        this.userIds = e
-        this.userName = []
-        if (info.checkedNodes && info.checkedNodes.length > 0) {
-          info.checkedNodes.forEach(res => {
-            if (res.data.props.dataRef.key) {
-              this.content.push({
-                id: res.data.props.dataRef.key,
-                title: res.data.props.dataRef.title
-              })
-            } else {
-              this.content.push({
-                id: res.data.props.id,
-                title: res.data.props.title
-              })
-            }
-          })
-        }
-        if (this.content && this.content.length > 0) {
-          for (let i = 0; i < this.content.length; i++) {
-            for (let j = i + 1; j < this.content.length; j++) {
-              if (this.content[i].id == this.content[j].id) {
-                this.content.splice(j, 1)
-                j--
-              }
-            }
-          }
-          this.userIds.forEach(res => {
-            this.content.forEach(val => {
-              if (res == val.id) {
-                this.userName.push(val.title)
-              }
-            })
-          })
-        }
       }
+      // checkChange(e, info) {
+      //   this.userIds = e
+      //   this.userName = []
+      //   if (info.checkedNodes && info.checkedNodes.length > 0) {
+      //     info.checkedNodes.forEach(res => {
+      //       if (res.data.props.dataRef.key) {
+      //         this.content.push({
+      //           id: res.data.props.dataRef.key,
+      //           title: res.data.props.dataRef.title
+      //         })
+      //       } else {
+      //         this.content.push({
+      //           id: res.data.props.id,
+      //           title: res.data.props.title
+      //         })
+      //       }
+      //     })
+      //   }
+      //   if (this.content && this.content.length > 0) {
+      //     for (let i = 0; i < this.content.length; i++) {
+      //       for (let j = i + 1; j < this.content.length; j++) {
+      //         if (this.content[i].id == this.content[j].id) {
+      //           this.content.splice(j, 1)
+      //           j--
+      //         }
+      //       }
+      //     }
+      //     this.userIds.forEach(res => {
+      //       this.content.forEach(val => {
+      //         if (res == val.id) {
+      //           this.userName.push(val.title)
+      //         }
+      //       })
+      //     })
+      //   }
+      // }
     }
   }
 </script>
@@ -243,4 +428,11 @@
     height: calc(100% - 60px);
     overflow: auto;
   }
+  .treeWrap {
+    height: calc(100vh - 240px);
+  }
+  .active {
+    color: #21c9cc;
+    display: inline-block;
+  }
 </style>