修改分配菜单表格

chuanyi-admin/src/views/system/role/user-menu.vue

@@ -340,31 +340,80 @@ export default {
           return row.id === el.id
         })
       ) {
-        if (row.children) {
-          // 解决子组件没有被勾选到
+        if (row.children.length) {
+          // 解决子节点没有被勾选到
           this.setChildren(row.children, true)
+        } else {
+          this.findParentNode(this.addMenuList, selection, row)
         }
       } else {
-        if (row.children) {
+        // 子节点有children全选中
+        if (row.children.length) {
           this.setChildren(row.children, false)
+        } else {
+          // 反选子节点反选父节点
+          const parentRow = selection.find(item => {
+            return item.id === row.parentId
+          })
+          this.$nextTick(() => {
+            this.$refs.distTable.toggleRowSelection(parentRow, false)
+          })
         }
       }
     },
-    toggleSelection(row, select) {
-      if (row) {
-        this.$nextTick(() => {
-          this.$refs.distTable && this.$refs.distTable.toggleRowSelection(row, select)
+    findParentNode(data, selection, row) {
+      for (let i = 0; i < data.length; i++) {
+        this.setParentCheck(data[i], selection, row)
+        if (data[i].children) {
+          this.findParentNode(data[i].children, selection, row)
+        }
+      }
+    },
+    setParentCheck(item, selection, row) {
+      if (item.id === row.parentId) {
+        const selectIds = selection.filter(o => {
+          return item.id === o.parentId
+        })
+        if (item.children.length === 1) {
+          this.recursion(this.addMenuList, item)
+          return
+        }
+        item.children.forEach(j => {
+          selectIds.forEach(q => {
+            if (j.id === q.id) {
+              if (selectIds.length === item.children.length) {
+                this.$nextTick(() => {
+                  this.$refs.distTable.toggleRowSelection(item, true)
+                })
+              }
+            }
+          })
         })
       }
     },
+    recursion(data, item) {
+      for (let i = 0; i < data.length; i++) {
+        if (item) {
+          if (data[i].id === item.parentId) {
+            this.$nextTick(() => {
+              this.$refs.distTable.toggleRowSelection(data[i], true)
+              this.$refs.distTable.toggleRowSelection(item, true)
+            })
+          }
+        }
+        if (data[i].children) {
+          this.recursion(data[i].children)
+        }
+      }
+    },
     // 选择全部
     selectAll(selection) {
-      // tabledata第一层只要有在selection里面就是全选
+      // addMenuList第一层只要有在selection里面就是全选
       const isSelect = selection.some((el) => {
         const tableDataIds = this.addMenuList.map((j) => j.id)
         return tableDataIds.includes(el.id)
       })
-      // tableDate第一层只要有不在selection里面就是全不选
+      // addMenuList第一层只要有不在selection里面就是全不选
       const isCancel = !this.addMenuList.every((el) => {
         const selectIds = selection.map((j) => j.id)
         return selectIds.includes(el.id)
@@ -372,7 +421,7 @@ export default {
       if (isSelect) {
         selection.map((el) => {
           if (el.children) {
-            // 解决子组件没有被勾选到
+            // 解决子节点没有被勾选到
             this.setChildren(el.children, true)
           }
         })
@@ -380,20 +429,27 @@ export default {
       if (isCancel) {
         this.addMenuList.map((el) => {
           if (el.children) {
-            // 解决子组件没有被勾选到
+            // 解决子节点没有被勾选到
             this.setChildren(el.children, false)
           }
         })
       }
     },
     setChildren(children, type) {
-      // 编辑多个子层级
+      // 编辑多个子节点
       children.map((j) => {
         this.toggleSelection(j, type)
         if (j.children) {
           this.setChildren(j.children, type)
         }
       })
+    },
+    toggleSelection(row, select) {
+      if (row) {
+        this.$nextTick(() => {
+          this.$refs.distTable.toggleRowSelection(row, select)
+        })
+      }
     }
   }
 }