no message

src/views/setting/role/index.vue

@@ -163,7 +163,50 @@
           <el-button size="mini" type="primary" @click="submitAddForm(data.removeTab)">确 定</el-button>
         </div>
       </div>
-      <div v-if="~['detail'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
+      <el-dialog
+        title="设置权限"
+        :visible.sync="roleFormVisible"
+        :show-close="false"
+        width="40%"
+        :close-on-click-modal="false"
+        custom-class="tree-dialog"
+        top="50px"
+      >
+        <el-tree
+          :data="menuRoleList"
+          show-checkbox
+          :check-strictly="true"
+          :default-expand-all="true"
+          :expand-on-click-node="true"
+          node-key="moduleId"
+          ref="tree"
+          highlight-current
+          :props="defaultProps"
+          @check-change="getCheck"
+        >
+          <span class="custom-tree-node" slot-scope="{ node, data }">
+            <span>{{ node.label }}</span>
+            <span v-if="data.type < 3">
+              <el-button type="text" size="mini" @click="() => quickSelection(data)">一键全选</el-button>
+              <el-button type="text" size="mini" @click="() => quickCancel(data)" style="color: #f56c6c"
+                >一键取消</el-button
+              >
+            </span>
+          </span>
+        </el-tree>
+        <div slot="footer" class="dialog-footer">
+          <el-button
+            @click="
+              roleFormVisible = false
+              flag = false
+            "
+            >{{ editId != 1 ? '取 消' : '关 闭' }}</el-button
+          >
+          <el-button type="primary" @click="submitRoleForm" v-if="editId != 1">确 定</el-button>
+        </div>
+      </el-dialog>
+
+      <!-- <div v-if="~['detail'].indexOf(activeKey)" style="box-sizing: border-box; padding: 16px">
         <div>
           <span class="custom-tree-node">
             <span>菜单</span>
@@ -202,7 +245,7 @@
             >确 定</el-button
           >
         </div>
-      </div>
+      </div> -->
     </template>
   </zj-tab-page>
 </template>
@@ -253,7 +296,9 @@ export default {
         label: 'moduleName'
       },
       adminRoleGetRoleType: [],
-      dataList22: []
+      dataList22: [],
+      roleFormVisible: false,
+      flag: false
     }
   },
   computed: {
@@ -334,6 +379,45 @@ export default {
       // this.$refs.tree.setCheckedKeys(keys)
     },
 
+    // 一键全选
+    quickSelection(data) {
+      let nowChecked = this.$refs.tree.getCheckedKeys()
+      let thisId = data.moduleId
+      let childId = []
+      if (data.children.length) {
+        childId = this.familyTree(data.children)
+      }
+
+      let setChecked = nowChecked.concat([thisId]).concat(childId)
+
+      this.$refs.tree.setCheckedKeys(setChecked)
+    },
+
+    // 一键取消
+    quickCancel(data) {
+      let nowChecked = this.$refs.tree.getCheckedKeys()
+      let thisId = data.moduleId
+      let childId = []
+      if (data.children.length) {
+        childId = this.familyTree(data.children)
+      }
+
+      let setChecked = nowChecked
+      if (setChecked.indexOf(thisId) >= 0) {
+        setChecked.splice(setChecked.indexOf(thisId), 1)
+      }
+
+      if (childId.length) {
+        for (var i = 0; i < childId.length; i++) {
+          if (setChecked.indexOf(childId[i]) >= 0) {
+            setChecked.splice(setChecked.indexOf(childId[i]), 1)
+          }
+        }
+      }
+
+      this.$refs.tree.setCheckedKeys(setChecked)
+    },
+
     // 递归子id
     familyTree(arr) {
       var temp = []
@@ -350,6 +434,21 @@ export default {
       return temp
     },
 
+    getCheck(data, val, oval) {
+      // flag 限制初始化时出现卡顿
+      if (this.flag) {
+        const moduleIds = [
+          ...new Set([
+            ...this.$refs.tree.getCheckedNodes().map(e => {
+              return e.parentId
+            }),
+            ...this.$refs.tree.getCheckedKeys()
+          ])
+        ]
+        this.$refs.tree.setCheckedKeys(moduleIds)
+      }
+    },
+
     getList() {
       this.listLoading = true
       let params = {
@@ -453,39 +552,62 @@ export default {
 
     // 设置权限 - 获取列表
     setMenuRole(row) {
-      console.log(row)
-      this.$refs.tabPage.addTab({
-        activeKey: 'detail',
-        key: 'detail',
-        label: '设置权限',
-        triggerEvent: () => {
-          this.$nextTick(() => {
-            this.editId = row.adminRoleId
-            function aaa(list) {
-              for (var item of list) {
-                if (item.type == 3) {
-                  item.tiling = true
-                  item.labelWidthNum = 115
-                }
-                if (item.children && item.children.length) {
-                  aaa(item.children)
-                }
-              }
-            }
-            getMenuList({
-              adminUserId: this.userid,
-              parentAdminRoleId: row.parentRoleId
-            }).then(res => {
-              aaa(res.data)
-              this.menuRoleList = res.data
-            })
-            getMenuRoleIds({ adminRoleId: row.adminRoleId }).then(res => {
-              this.$refs.tree.setCheckedKeys(res.data)
-            })
-          })
-        },
-        closeEvent: () => {}
+      this.roleFormVisible = true
+      this.editId = row.adminRoleId
+      // function aaa(list) {
+      //   for (var item of list) {
+      //     if (item.type == 3) {
+      //       item.tiling = true
+      //       item.labelWidthNum = 115
+      //     }
+      //     if (item.children && item.children.length) {
+      //       aaa(item.children)
+      //     }
+      //   }
+      // }
+      getMenuList({
+        adminUserId: this.userid,
+        parentAdminRoleId: row.parentRoleId
+      }).then(res => {
+        // aaa(res.data)
+        this.menuRoleList = res.data
+      })
+      getMenuRoleIds({ adminRoleId: row.adminRoleId }).then(res => {
+        this.$refs.tree.setCheckedKeys(res.data)
+        this.flag = true
       })
+      // this.$refs.tabPage.addTab({
+      //   activeKey: 'detail',
+      //   key: 'detail',
+      //   label: '设置权限',
+      //   triggerEvent: () => {
+      //     this.$nextTick(() => {
+      //       this.editId = row.adminRoleId
+      //       function aaa(list) {
+      //         for (var item of list) {
+      //           if (item.type == 3) {
+      //             item.tiling = true
+      //             item.labelWidthNum = 115
+      //           }
+      //           if (item.children && item.children.length) {
+      //             aaa(item.children)
+      //           }
+      //         }
+      //       }
+      //       getMenuList({
+      //         adminUserId: this.userid,
+      //         parentAdminRoleId: row.parentRoleId
+      //       }).then(res => {
+      //         aaa(res.data)
+      //         this.menuRoleList = res.data
+      //       })
+      //       getMenuRoleIds({ adminRoleId: row.adminRoleId }).then(res => {
+      //         this.$refs.tree.setCheckedKeys(res.data)
+      //       })
+      //     })
+      //   },
+      //   closeEvent: () => {}
+      // })
     },
 
     // 设置权限 - 提交数据
@@ -496,7 +618,9 @@ export default {
         adminRoleId: this.editId
       }
       setMenuRole(params).then(res => {
-        removeTab('list')
+        // removeTab('list')
+        this.roleFormVisible = false
+        this.flag = false
         this.getList()
         this.$successMsg()
       })
@@ -532,4 +656,28 @@ export default {
   font-size: 14px;
   padding-right: 8px;
 }
+::v-deep .tree-dialog {
+  .el-dialog__body {
+    padding: 20px;
+    .el-tree {
+      max-height: calc(100vh - 140px - 54px - 70px);
+      overflow-y: scroll;
+      padding: 0 30px;
+      > .el-tree-node {
+        padding: 15px 0;
+        border: 1px dashed #ddd;
+        margin-bottom: 15px;
+        border-radius: 10px;
+      }
+    }
+  }
+}
+::v-deep .custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
 </style>