树形展开、选中修改

src/views/accountGroupManagement/components/accountGroupHome.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2022-01-08 09:27:43
- * @LastEditTime: 2022-03-18 16:00:11
+ * @LastEditTime: 2022-03-18 18:18:29
  * @LastEditors: your name
  * @Description: 用户组管理
  * @FilePath: \Foshan4A2.0\src\views\accountGroupManagement\components\home.vue
@@ -37,7 +37,10 @@
                 node-key="GroupId"
                 :filter-node-method="filterNode"
                 highlight-current
-                :default-expanded-keys="[currentKey]"
+                :default-expanded-keys="expandedKeys"
+                :current-node-key="currentKey"
+                @node-expand="handleExpand"
+                @node-collapse="handleCollapse"
                 @node-click="handleNodeClick"
               >
               </el-tree>
@@ -340,10 +343,10 @@ export default {
         label: 'GroupName'
       },
       currDataArr: [],
-      currDataArrId: 0,
       childrenData: [],
       dataListTree: [],
       currentKey: -1,
+      expandedKeys: [-1],
       delIndex: 0
     }
   },
@@ -361,6 +364,11 @@ export default {
         this.dataListTree.push(_.cloneDeep(val))
       },
       deep: true
+    },
+    currentKey: {
+      handler(val) {
+        this.$refs.tree.setCurrentKey(val)
+      }
     }
   },
   methods: {
@@ -519,11 +527,14 @@ export default {
       } catch (error) {
         console.log('出错了', error)
         if (!isChildren) {
-            this.currDataArr[0].flag = !flag
-          } else {
-            this.childrenData[index].flag = !flag
-          }
+          this.currDataArr[0].flag = !flag
+        } else {
+          this.childrenData[index].flag = !flag
+        }
       }
+      this.$nextTick(() => {
+        this.$refs.tree.setCurrentKey(this.currentKey)
+      })
     },
     // 删除
     async deleteOrg(id) {
@@ -551,22 +562,41 @@ export default {
     // 树点击
     handleNodeClick(data) {
       const dataNew = _.cloneDeep(data)
-      this.currDataArrId = dataNew.GroupId
+      this.currentKey = dataNew.GroupId
       this.currDataArr = []
       this.childrenData = []
-      this.currDataArr = this.decompose(this.dataArr, 'GroupId', dataNew.GroupId)
-      this.childrenData = this.decompose(this.dataArr, 'GroupUpid', dataNew.GroupId)
+      this.currDataArr = this.decompose(this.dataArr, 'GroupId', this.currentKey)
+      this.childrenData = this.decompose(this.dataArr, 'GroupUpid', this.currentKey)
     },
     // 下级卡片点击
     childrenClick(data) {
       const dataNew = _.cloneDeep(data)
-      this.currDataArrId = dataNew.GroupId
+      this.currentKey = dataNew.GroupId
       this.currDataArr = []
       this.childrenData = []
-      this.currDataArr = this.decompose(this.dataArr, 'GroupId', dataNew.GroupId)
-      this.childrenData = this.decompose(this.dataArr, 'GroupUpid', dataNew.GroupId)
-      this.$refs.tree.setCurrentKey(dataNew.GroupId)
-      this.currentKey = dataNew.GroupId
+      this.currDataArr = this.decompose(this.dataArr, 'GroupId', this.currentKey)
+      this.childrenData = this.decompose(this.dataArr, 'GroupUpid', this.currentKey)
+      if (!this.expandedKeys.includes(this.currentKey)) {
+        this.expandedKeys.push(this.currentKey)
+      }
+    },
+    // 节点展开
+    handleExpand(obj) {
+      this.expandedKeys.push(obj.GroupId)
+    },
+    // 节点收起
+    handleCollapse(obj) {
+      const { GroupId, children } = obj
+      children.length && this.collapseChilren(children)
+      this.expandedKeys = this.expandedKeys.filter(key => key !== GroupId)
+    },
+    // 收起子节点
+    collapseChilren(children) {
+      children.forEach(child => {
+        const { GroupId, children } = child
+        children.length && this.collapseChilren(children)
+        this.expandedKeys = this.expandedKeys.filter(key => key !== GroupId)
+      })
     }
   }
 }

src/views/accountGroupManagement/mixins/treeData.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-12-22 17:00:22
- * @LastEditTime: 2022-03-14 10:50:13
+ * @LastEditTime: 2022-03-18 17:55:45
  * @LastEditors: your name
  * @Description: 获取权限树
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\minixs\treeData.js
@@ -10,7 +10,7 @@ import { translateDataToTreeAll } from '@/utils/validate'
 import { GetGroupTree } from '@/api/AccountGroup'
 
 export default {
-  data () {
+  data() {
     return {
       dataList: {
         GroupId: -1,
@@ -29,10 +29,10 @@ export default {
   //   this.getGroupTree()
   // },
   methods: {
-    async getGroupTree (name = '') {
+    async getGroupTree(name = '') {
       try {
         const result = await GetGroupTree({
-          "QueryName": name
+          QueryName: name
         })
         if (result.code === 0 && result.returnData.length) {
           result.returnData.forEach(item => {
@@ -49,7 +49,7 @@ export default {
             children: translateDataToTreeAll(result.returnData, 'GroupUpid', 'GroupId')
           }
           this.dataList = obj
-          this.dataArr = result.returnData;
+          this.dataArr = result.returnData
           this.dataArr.push({
             GroupId: -1,
             GroupName: this.accountGroupType,
@@ -57,12 +57,12 @@ export default {
             UserCount: 0,
             AuthCount: 0,
             Status: 1,
-            QueryTarget: 0,
+            QueryTarget: 0
           })
         } else {
           const obj = {
             GroupId: -1,
-            GroupName: "系统权限组",
+            GroupName: '系统权限组',
             GroupUpid: -2,
             UserCount: 0,
             AuthCount: 0,
@@ -73,8 +73,12 @@ export default {
           this.dataList = obj
           this.dataArr.push(obj)
         }
+        this.currDataArr = this.decompose(this.dataArr, 'GroupId', this.currentKey)
+        this.childrenData = this.decompose(this.dataArr, 'GroupUpid', this.currentKey)
       } catch (error) {
         console.log('出错了', error)
+        this.currDataArr = this.decompose(this.dataArr, 'GroupId', this.currentKey)
+        this.childrenData = this.decompose(this.dataArr, 'GroupUpid', this.currentKey)
       }
     }
   }

src/views/authorityManagement/components/authorityHome.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-29 09:27:43
- * @LastEditTime: 2022-03-18 16:02:57
+ * @LastEditTime: 2022-03-18 18:18:39
  * @LastEditors: your name
  * @Description: 权限管理
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\home.vue
@@ -27,7 +27,7 @@
           <div class="grid-content">
             <div class="title">权限树</div>
             <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" class="contentTree">
-              <el-tree ref="tree" :data="dataListTree" :props="defaultProps" node-key="AuthId" :filter-node-method="filterNode" highlight-current :default-expanded-keys="[currentKey]" @node-click="handleNodeClick">
+              <el-tree ref="tree" :data="dataListTree" :props="defaultProps" node-key="AuthId" :filter-node-method="filterNode" highlight-current :default-expanded-keys="expandedKeys" :current-node-key="currentKey" @node-expand="handleExpand" @node-collapse="handleCollapse" @node-click="handleNodeClick">
               </el-tree>
             </div>
           </div>
@@ -100,19 +100,19 @@
                             <div :title="data.AuthName" class="name">{{data.AuthName}}</div>
                             <div class="icon">
                               <el-tooltip effect="dark" content="新增应用" placement="bottom">
-                                <span v-if="data.Type === 0" @click="renderAdd()" class="cap cap-plus"></span>
+                                <span v-if="data.Type === 0" @click.stop="renderAdd()" class="cap cap-plus"></span>
                               </el-tooltip>
                               <el-tooltip effect="dark" content="修改应用" placement="bottom">
-                                <span v-if="data.Type === 1" @click="renderEdit(data)" class="cap cap-edit"></span>
+                                <span v-if="data.Type === 1" @click.stop="renderEdit(data)" class="cap cap-edit"></span>
                               </el-tooltip>
                               <el-tooltip v-is="['authtree_btn_add_auth']" effect="dark" content="新增权限项" placement="bottom">
-                                <span v-if="data.Type === 2" @click="renderSub(data)" class="cap cap-sub"></span>
+                                <span v-if="data.Type === 2" @click.stop="renderSub(data)" class="cap cap-sub"></span>
                               </el-tooltip>
                               <el-tooltip v-is="['authtree_btn_update_auth']" effect="dark" content="编辑权限项" placement="bottom">
-                                <span v-if="data.Type > 2" @click="renderEdit(data)" class="cap cap-edit"></span>
+                                <span v-if="data.Type > 2" @click.stop="renderEdit(data)" class="cap cap-edit"></span>
                               </el-tooltip>
                               <el-tooltip v-is="['authtree_btn_add_auth']" effect="dark" content="新增权限项" placement="bottom">
-                                <span v-if="data.Type > 2" @click="renderSub(data)" class="cap cap-sub"></span>
+                                <span v-if="data.Type > 2" @click.stop="renderSub(data)" class="cap cap-sub"></span>
                               </el-tooltip>
                             </div>
                           </div>
@@ -126,7 +126,7 @@
                         </div>
                       </div>
                       <div v-is="['authtree_btn_del_auth']">
-                        <div v-if="data.Type !== 0 && data.Type !== 2" @click="onNodeClick(data)" class="info-close">
+                        <div v-if="data.Type !== 0 && data.Type !== 2" @click.stop="onNodeClick(data)" class="info-close">
                           <i class="icon el-icon-close" :class="data.Type === 1 ? 'close1' : data.Type > 2 ? 'close2' : ''"></i>
                         </div>
                       </div>
@@ -179,14 +179,14 @@ export default {
       flag: false, //弹框开关
       dataId: null, //tree数据id
       currDataArr: [],
-      currDataArrId: 0,
       childrenData: [],
       dataListTree: [],
-      currentKey: -1,
       defaultProps: {
         children: "children",
         label: "AuthName",
       },
+      currentKey: -1,
+      expandedKeys: [-1]
     }
   },
   created: function () {
@@ -203,28 +203,52 @@ export default {
         this.dataListTree.push(_.cloneDeep(val))
       },
       deep: true
+    },
+    currentKey: {
+      handler(val) {
+        this.$refs.tree.setCurrentKey(val)
+      }
     }
   },
   methods: {
     //树点击
     handleNodeClick (data) {
       const dataNew = _.cloneDeep(data)
-      this.currDataArrId = dataNew.AuthId;
+      this.currentKey = dataNew.AuthId
       this.currDataArr = [];
       this.childrenData = [];
-      this.currDataArr = this.decompose(this.dataArr, "AuthId", dataNew.AuthId);
-      this.childrenData = this.decompose(this.dataArr, "UpAuthId", dataNew.AuthId);
+      this.currDataArr = this.decompose(this.dataArr, "AuthId", this.currentKey);
+      this.childrenData = this.decompose(this.dataArr, "UpAuthId", this.currentKey);
     },
     //下级卡片点击
     childrenClick (data) {
       const dataNew = _.cloneDeep(data)
-      this.currDataArrId = dataNew.AuthId;
+      this.currentKey = dataNew.AuthId
       this.currDataArr = [];
       this.childrenData = [];
-      this.currDataArr = this.decompose(this.dataArr, "AuthId", dataNew.AuthId);
-      this.childrenData = this.decompose(this.dataArr, "UpAuthId", dataNew.AuthId);
-      // this.$refs.tree.setCurrentKey(dataNew.AuthId);
-      this.currentKey = dataNew.AuthId;
+      this.currDataArr = this.decompose(this.dataArr, "AuthId", this.currentKey);
+      this.childrenData = this.decompose(this.dataArr, "UpAuthId", this.currentKey);
+      if (!this.expandedKeys.includes(this.currentKey)) {
+        this.expandedKeys.push(this.currentKey)
+      }
+    },
+    // 节点展开
+    handleExpand(obj) {
+      this.expandedKeys.push(obj.AuthId)
+    },
+    // 节点收起
+    handleCollapse(obj) {
+      const { AuthId, children } = obj
+      children.length && this.collapseChilren(children)
+      this.expandedKeys = this.expandedKeys.filter(key => key !== AuthId)
+    },
+    // 收起子节点
+    collapseChilren(children) {
+      children.forEach(child => {
+        const { AuthId, children } = child
+        children.length && this.collapseChilren(children)
+        this.expandedKeys = this.expandedKeys.filter(key => key !== AuthId)
+      })
     },
     //下级切换状态
     childrenRenderChange (data, index) {
@@ -397,6 +421,9 @@ export default {
           this.childrenData[index].flag = !flag;
         }
       }
+      this.$nextTick(() => {
+        this.$refs.tree.setCurrentKey(this.currentKey)
+      })
     },
     //应用删除
     async deleteApp (id) {
@@ -423,7 +450,7 @@ export default {
           AuthId: id,
         })
         if (res.code === 0) {
-          this.$message.success(res.message)
+          this.$message.success(res.message || '成功')
           this.flag = false
           this.getAuthTree()
         } else {

src/views/authorityManagement/minixs/treeData.js

@@ -1,7 +1,7 @@
 /*
  * @Author: your name
  * @Date: 2021-12-22 17:00:22
- * @LastEditTime: 2022-03-17 12:05:21
+ * @LastEditTime: 2022-03-18 17:49:39
  * @LastEditors: your name
  * @Description: 获取权限树
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\minixs\treeData.js
@@ -52,9 +52,7 @@ export default {
             Type: 0,
             disabled: true,
             children: []
-          }
-          )
-          this.loading = false
+          })
         } else {
           const obj = {
             AuthId: -1,
@@ -76,10 +74,11 @@ export default {
             Type: 0,
             disabled: true,
             children: []
-          }
-          )
-          this.loading = false
+          })
         }
+        this.currDataArr = this.decompose(this.dataArr, "AuthId", this.currentKey)
+        this.childrenData = this.decompose(this.dataArr, "UpAuthId", this.currentKey)
+        this.loading = false
       } catch (error) {
         const obj = {
           AuthId: -1,
@@ -101,8 +100,9 @@ export default {
           Type: 0,
           disabled: true,
           children: []
-        }
-        )
+        })
+        this.currDataArr = this.decompose(this.dataArr, "AuthId", this.currentKey)
+        this.childrenData = this.decompose(this.dataArr, "UpAuthId", this.currentKey)
         this.loading = false
       }
     }

src/views/organizationManagement/components/organizationHome.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-11-29 09:27:43
- * @LastEditTime: 2022-03-18 15:54:39
+ * @LastEditTime: 2022-03-18 18:18:54
  * @LastEditors: your name
  * @Description: 权限管理
  * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\home.vue
@@ -24,7 +24,7 @@
           <div class="grid-content">
             <div class="title">组织树</div>
             <div class="contentTree">
-              <el-tree ref="tree" :data="dataListTree" :props="defaultProps" node-key="OrganId" :filter-node-method="filterNode" highlight-current :default-expanded-keys="[currentKey]" @node-click="handleNodeClick">
+              <el-tree ref="tree" :data="dataListTree" :props="defaultProps" node-key="OrganId" :filter-node-method="filterNode" highlight-current :default-expanded-keys="expandedKeys" :current-node-key="currentKey" @node-expand="handleExpand" @node-collapse="handleCollapse" @node-click="handleNodeClick">
               </el-tree>
             </div>
           </div>
@@ -225,6 +225,7 @@ export default {
       childrenData: [],
       dataListTree: [],
       currentKey: -1,
+      expandedKeys: [-1],
       delIndex: 0
     };
   },
@@ -243,6 +244,11 @@ export default {
       },
       deep: true,
     },
+    currentKey: {
+      handler(val) {
+        this.$refs.tree.setCurrentKey(val)
+      }
+    }
   },
   methods: {
     filterNode (value, data) {
@@ -353,14 +359,15 @@ export default {
     //-----------获取数据------------
     //应用状态变更
     async handleChange (id, flag) {
+      const Status = flag ? 1 : 0
       try {
         const res = await tissueTreeStart({
           OrganId: id,
-          Status: flag ? 1 : 0,
+          Status: Status
         });
         if (res.code === 0) {
           this.$message.success(res.message);
-          this.currDataArr[0].Status = val;
+          this.currDataArr[0].Status = Status
           // this.getOrganTree();
         } else {
           this.$message.error(res.message);
@@ -395,38 +402,57 @@ export default {
     //树点击
     handleNodeClick (data) {
       const dataNew = _.cloneDeep(data);
-      this.currDataArrId = dataNew.OrganId;
+      this.currentKey = dataNew.OrganId;
       this.currDataArr = [];
       this.childrenData = [];
       this.currDataArr = this.decompose(
         this.dataArr,
         "OrganId",
-        dataNew.OrganId
+        this.currentKey
       );
       this.childrenData = this.decompose(
         this.dataArr,
         "OrganUpid",
-        dataNew.OrganId
+        this.currentKey
       );
     },
     //下级卡片点击
     childrenClick (data) {
       const dataNew = _.cloneDeep(data);
-      this.currDataArrId = dataNew.OrganId;
+      this.currentKey = dataNew.OrganId;
       this.currDataArr = [];
       this.childrenData = [];
       this.currDataArr = this.decompose(
         this.dataArr,
         "OrganId",
-        dataNew.OrganId
+        this.currentKey
       );
       this.childrenData = this.decompose(
         this.dataArr,
         "OrganUpid",
-        dataNew.OrganId
+        this.currentKey
       );
-      this.$refs.tree.setCurrentKey(dataNew.OrganId);
-      this.currentKey = dataNew.OrganId;
+      if (!this.expandedKeys.includes(this.currentKey)) {
+        this.expandedKeys.push(this.currentKey)
+      }
+    },
+    // 节点展开
+    handleExpand(obj) {
+      this.expandedKeys.push(obj.OrganId)
+    },
+    // 节点收起
+    handleCollapse(obj) {
+      const { OrganId, children } = obj
+      children.length && this.collapseChilren(children)
+      this.expandedKeys = this.expandedKeys.filter(key => key !== OrganId)
+    },
+    // 收起子节点
+    collapseChilren(children) {
+      children.forEach(child => {
+        const { OrganId, children } = child
+        children.length && this.collapseChilren(children)
+        this.expandedKeys = this.expandedKeys.filter(key => key !== OrganId)
+      })
     },
     //岗位点击
     toJob (data) {

src/views/organizationManagement/minixs/treeData.js

@@ -93,8 +93,12 @@ export default {
           }
           )
         }
+        this.currDataArr = this.decompose(this.dataArr, 'OrganId', this.currentKey)
+        this.childrenData = this.decompose(this.dataArr, 'OrganUpid', this.currentKey)
       } catch (error) {
         console.log('出错了', error)
+        this.currDataArr = this.decompose(this.dataArr, 'OrganId', this.currentKey)
+        this.childrenData = this.decompose(this.dataArr, 'OrganUpid', this.currentKey)
       }
     }
   }