数据权限

src/views/system/role/roleData.vue

@@ -36,11 +36,21 @@
               >
                 <el-tree
                   :data="data.showPanel.items"
+                  :ref="`tree-${index}`"
                   show-checkbox
+                  check-strictly
                   node-key="value"
                   :default-checked-keys="data.showPanel.props?.defaultCheckedKeys ?? []"
                   @check="(_, treeObj) => onCheck(data, treeObj)"
-                ></el-tree>
+                >
+                  <span class="custom-tree-node" slot-scope="{ node, data: _data }" >
+                    <span>{{ node.label }}</span>
+                    <template v-if="_data.children?.length">
+                      <m-button text size="mini" type="primary" class="ml-3" @click.stop="onSelectAll($refs[`tree-${index}`], _data, data)">全选</m-button>
+                      <m-button text size="mini" type="primary" @click.stop="onSelectNone($refs[`tree-${index}`], _data, data)">全不选</m-button>
+                    </template>
+                  </span>
+                </el-tree>
               </m-card>
             </el-col>
           </el-row>
@@ -84,22 +94,6 @@ export default {
             showPanel: tree
           }
         })
-        // const { data } = await getRoleDataPermissionList()
-        // this.dataItems = data.map(e => {
-        //   const item = _data.records.find(_e => _e.funCode === e.funCode)
-        //   return {
-        //     funCode: e.funCode,
-        //     funName: e.funName,
-        //     value: item?.roleType ?? 2,
-        //     items: item?.roleValue?.split(',') ?? [],
-        //     values: [
-        //       { label: '不限', value: 2 },
-        //       { label: '本部门权限', value: 0, disable: !e.organization },
-        //       { label: '仅本人权限', value: 1, disable: !e.employee },
-        //       { label: '指定机构权限', value: 3 }
-        //     ]
-        //   }
-        // })
       } catch (error) {
         this.$message.error(error)
       }
@@ -132,12 +126,30 @@ export default {
       }
     },
     onCheck ({ showPanel }, treeObj) {
+      this.setProps(showPanel, treeObj.checkedNodes.map(e => e.tag))
+    },
+    // 选中当前节点及子节点
+    onSelectAll (ref, data, { showPanel }) {
+      const checked = ref[0].getCheckedKeys()
+      const setKeys = this.getValues(data)
+      ref[0].setCheckedKeys([...new Set([...checked, ...setKeys])])
+      this.setProps(showPanel, ref[0].getCheckedNodes().map(e => e.tag))
+    },
+    // 取消当前选中及子节点
+    onSelectNone (ref, data, { showPanel }) {
+      const checked = ref[0].getCheckedKeys()
+      const removeKeys = this.getValues(data)
+      const diffSet = new Set(removeKeys)
+      ref[0].setCheckedKeys(checked.filter(item => !diffSet.has(item)))
+      this.setProps(showPanel, ref[0].getCheckedNodes().map(e => e.tag))
+    },
+    setProps (showPanel, values) {
+      console.log(values)
       if (showPanel) {
         showPanel.props = {
           ...showPanel.props,
-          values: treeObj.checkedNodes.filter(e => !e.children).map(e => e.tag)
+          values
         }
-        // showPanel.props.values = treeObj.checkedNodes.filter(e => !e.children).map(e => e.tag)
       }
     },
     onChange (data, e) {
@@ -150,6 +162,15 @@ export default {
           values: []
         }
       }
+    },
+    getValues (data, arr = []) {
+      arr.push(data.value)
+      if (data.children) {
+        data.children.forEach(e => {
+          this.getValues(e, arr)
+        })
+      }
+      return arr
     }
   }
 }