租户菜单权限修改

src/api/tenant/tenant.js

@@ -60,3 +60,18 @@ export function exportTenant(query) {
     params: query
   })
 }
+
+export function roleMenuTreeselect(id) {
+  return request({
+    url: '/tenant/tenant/menu/' + id,
+    method: 'get'
+  })
+}
+
+export function menuEdit(data) {
+  return request({
+    url: '/tenant/tenant/menu/edit',
+    method: 'post',
+    data: data
+  })
+}

src/views/saas/tenant/index.vue

@@ -119,6 +119,13 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['tenant:tenant:remove']"
           >删除</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleMenuChange(scope.row)"
+            v-hasPermi="['tenant:tenant:edit']"
+          >修改菜单权限</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -187,12 +194,47 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <!-- 修改菜单权限 -->
+    <el-dialog :title="title" :visible.sync="openMenu" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+        <el-form-item label="菜单权限">
+          <el-checkbox v-model="menuExpand" @change="handleCheckedTreeExpand($event, 'menu')">展开/折叠</el-checkbox>
+          <el-checkbox v-model="menuNodeAll" @change="handleCheckedTreeNodeAll($event, 'menu')">全选/全不选</el-checkbox>
+          <el-checkbox v-model="form.menuCheckStrictly" @change="handleCheckedTreeConnect($event, 'menu')">父子联动</el-checkbox>
+          <el-tree
+            class="tree-border"
+            :data="menuOptions"
+            show-checkbox
+            ref="menu"
+            node-key="id"
+            :check-strictly="!form.menuCheckStrictly"
+            empty-text="加载中，请稍后"
+            :props="defaultProps"
+          ></el-tree>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFormMenu">确 定</el-button>
+        <el-button @click="cancelMenu">取 消</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listTenant, getTenant, delTenant, addTenant, updateTenant, exportTenant } from "@/api/tenant/tenant";
+import {
+  listTenant,
+  getTenant,
+  delTenant,
+  addTenant,
+  updateTenant,
+  exportTenant,
+  roleMenuTreeselect,
+  menuEdit
+} from "@/api/tenant/tenant";
 import {code} from "quill/ui/icons";
+import {getRole} from "@/api/system/role";
 
 export default {
   name: "Tenant",
@@ -218,6 +260,7 @@ export default {
       title: "",
       // 是否显示弹出层
       open: false,
+      openMenu: false,
       // 状态：1-启用，0-禁用字典
       statusOptions: [],
       // 查询参数
@@ -250,7 +293,15 @@ export default {
         createTime: [
           { required: true, message: "创建时间不能为空", trigger: "blur" }
         ],
-      }
+      },
+      menuExpand: false,
+      menuNodeAll: false,
+      // 菜单列表
+      menuOptions: [],
+      defaultProps: {
+        children: "children",
+        label: "label"
+      },
     };
   },
   created() {
@@ -288,7 +339,8 @@ export default {
         createTime: null,
         updateTime: null,
         contactPhone: null,
-        contactName: null
+        contactName: null,
+        tenantId: null,
       };
       this.resetForm("form");
     },
@@ -379,7 +431,114 @@ export default {
         this.download(response.msg);
         this.exportLoading = false;
       }).catch(() => {});
-    }
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value, type) {
+      if (type == 'menu') {
+        let treeList = this.menuOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      } else if (type == 'dept') {
+        let treeList = this.deptOptions;
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value;
+        }
+      }
+    },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value, type) {
+      if (type == 'menu') {
+        if (value) {
+          const ids = [];
+          const walk = (nodes = []) => {
+            nodes.forEach(node => {
+              ids.push(node.id);
+              if (node.children && node.children.length) {
+                walk(node.children);
+              }
+            });
+          };
+          walk(this.menuOptions);
+          this.$refs.menu.setCheckedKeys(ids);
+        } else {
+          this.$refs.menu.setCheckedKeys([]);
+        }
+      } else if (type == 'dept') {
+        this.$refs.dept.setCheckedNodes(value ? this.deptOptions: []);
+      }
+    },
+    // 树权限（父子联动）
+    handleCheckedTreeConnect(value, type) {
+      if (type == 'menu') {
+        this.form.menuCheckStrictly = value ? true: false;
+      } else if (type == 'dept') {
+        this.form.deptCheckStrictly = value ? true: false;
+      }
+    },
+
+    cancelMenu:function(){
+      this.openMenu = false;
+      this.reset();
+    },
+
+    /** 提交按钮 */
+    submitFormMenu: function() {
+      // 1. 选中 + 半选中的 key
+      let checkedKeys = this.$refs.menu.getCheckedKeys();
+      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
+
+      // 最终有权限的（选中+半选）
+      let selectedKeys = [...checkedKeys, ...halfCheckedKeys];
+
+      // 2. 递归获取所有菜单ID
+      const getAllKeys = (tree) => {
+        let keys = [];
+        tree.forEach(item => {
+          keys.push(item.id);
+          if (item.children) keys.push(...getAllKeys(item.children));
+        });
+        return keys;
+      };
+      let allKeys = getAllKeys(this.menuOptions);
+
+      // 3. 未选中的 key
+      let unSelectedKeys = allKeys.filter(key => !selectedKeys.includes(key));
+
+      const data = {selected: selectedKeys, unSelected: unSelectedKeys, id: this.form.tenantId};
+      menuEdit(data).then(res => {
+        this.msgSuccess("修改成功");
+      }).catch(res => {
+        this.msgError(res.msg);
+      })
+
+    },
+
+
+    handleMenuChange(row) {
+      this.reset();
+      this.form.tenantId = row.id;
+      roleMenuTreeselect(row.id).then(res => {
+        this.openMenu = true;
+        this.menuOptions = res.menus;
+        this.title = "修改菜单权限";
+        this.$nextTick(() => {
+          const checkedIds = [];
+          const walk = (nodes = []) => {
+            nodes.forEach(node => {
+              if (node.status === "0" && node.visible === "0") {
+                checkedIds.push(node.id);
+              }
+              if (node.children && node.children.length) {
+                walk(node.children);
+              }
+            });
+          };
+          walk(this.menuOptions);
+          this.$refs.menu.setCheckedKeys(checkedIds);
+        });
+      })
+    },
   }
 };
 </script>