no message

src/views/setting/role/index.vue

@@ -164,6 +164,19 @@
         </div>
       </div>
       <div v-if="~['detail'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
+        <div>
+          <span class="custom-tree-node">
+            <span>菜单</span>
+            <span>
+              <el-button type="text" size="mini" @click.stop="quanbugouxuan(null, { children: menuRoleList })"
+                >全部勾选</el-button
+              >
+              <el-button type="text" size="mini" @click.stop="quxiaogouxuan(null, { children: menuRoleList })"
+                >取消勾选</el-button
+              >
+            </span>
+          </span>
+        </div>
         <zj-tree
           :data="menuRoleList"
           show-checkbox
@@ -174,6 +187,13 @@
           :props="defaultProps"
           :check-strictly="true"
         >
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <span>{{ node.label }}</span>
+            <span v-if="[1, 2].includes(data.type)">
+              <el-button type="text" size="mini" @click.stop="quanbugouxuan(node, data)">全部勾选</el-button>
+              <el-button type="text" size="mini" @click.stop="quxiaogouxuan(node, data)">取消勾选</el-button>
+            </span>
+          </span>
         </zj-tree>
         <div slot="footer" class="dialog-footer" style="text-align: right">
           <el-button size="mini" @click="data.removeTab()">{{ editId != 1 ? '取 消' : '关 闭' }}</el-button>
@@ -251,6 +271,26 @@ export default {
     })
   },
   methods: {
+    diguichazhaoid(arr, ids) {
+      for (var item of arr) {
+        ids.push(item.moduleId)
+        if (item.children && item.children.length) {
+          this.diguichazhaoid(item.children, ids)
+        }
+      }
+    },
+    quanbugouxuan(node, data) {
+      var ids = []
+      this.diguichazhaoid(data.children, ids)
+      this.$refs.tree.setCheckedKeys([data?.moduleId || '', ...ids, ...this.$refs.tree.getCheckedKeys()])
+    },
+    quxiaogouxuan(node, data) {
+      var ids = []
+      this.diguichazhaoid(data.children, ids)
+      var keyIds = [data?.moduleId || '', ...ids]
+      var keys = this.$refs.tree.getCheckedKeys().filter(k => !keyIds.includes(k))
+      this.$refs.tree.setCheckedKeys(keys)
+    },
     getList() {
       this.listLoading = true
       let params = {
@@ -425,4 +465,12 @@ export default {
     }
   }
 }
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
 </style>