fix: role assign disabled not has permission menu item

@@ -14,6 +14,7 @@
     "PROTOBUF",
     "SNMP",
     "unref",
+    "vben",
     "VITE"
   ]
 }

@@ -18,3 +18,32 @@ export interface RouteItem {
  * @description: Get menu return value
  */
 export type getMenuListResultModel = RouteItem[];
+
+export interface Meta {
+  title: string;
+  menuType: string;
+  status: string;
+  icon: string;
+  isLink: boolean;
+  ignoreKeepAlive: boolean;
+  hideMenu: boolean;
+}
+
+export interface MenuRecord {
+  id: string;
+  createTime: string;
+  updateTime: string;
+  name: string;
+  children: MenuRecord[];
+  path: string;
+  type: string;
+  permission: string;
+  sort: number;
+  component: string;
+  meta: Meta;
+  disabled?: boolean;
+  isDictCompareDisabled?: boolean;
+  icon?: string;
+  title?: string;
+  key?: string;
+}

@@ -9,18 +9,20 @@
   >
     <BasicForm @register="registerForm">
       <template #menu>
-        <BasicTree
-          v-if="treeData.length"
-          checkable
-          toolbar
-          :expandedKeys="treeExpandData"
-          ref="treeRef"
-          :treeData="treeData"
-          :replaceFields="{ title: 'menuName' }"
-          :checkedKeys="roleMenus"
-          @check="handleCheckClick"
-          title="菜单分配"
-        />
+        <Spin :spinning="spinning">
+          <BasicTree
+            v-if="treeData.length"
+            checkable
+            toolbar
+            :expandedKeys="treeExpandData"
+            ref="treeRef"
+            :treeData="treeData"
+            :replace-fields="{ title: 'name', key: 'id' }"
+            :checkedKeys="roleMenus"
+            @check="handleCheckClick"
+            title="菜单分配"
+          />
+        </Spin>
       </template>
     </BasicForm>
   </BasicDrawer>
@@ -28,7 +30,7 @@
 <script lang="ts">
   import { defineComponent, ref, computed, unref, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
-  import { formSchema } from './role.data';
+  import { formSchema, KeysTypeEnum, RoleMenuDictEnum } from './role.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { BasicTree, TreeItem } from '/@/components/Tree';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -36,22 +38,28 @@
   // 加载菜单数据
   import { getMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu';
   import { useI18n } from '/@/hooks/web/useI18n';
-  import { RouteItem } from '/@/api/sys/model/menuModel';
+  import { MenuRecord } from '/@/api/sys/model/menuModel';
   import { saveOrUpdateRoleInfoWithMenu } from '/@/api/system/system';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { RoleEnum } from '/@/enums/roleEnum';
+  import { Spin } from 'ant-design-vue';
+
+  type TreeData = MenuRecord & TreeItem;
+
   export default defineComponent({
     name: 'RoleDrawer',
-    components: { BasicDrawer, BasicForm, BasicTree },
+    components: { BasicDrawer, BasicForm, BasicTree, Spin },
     emits: ['success', 'register'],
     setup(_, { emit }) {
-      const treeExpandData = ref([]);
+      const treeExpandData = ref<string[]>([]);
       const isUpdate = ref<boolean>(true);
-      const treeData = ref<TreeItem[]>([]);
+      const treeData = ref<TreeData[]>([]);
       const roleMenus = ref<string[]>([]);
       const allCheckedKeys = ref<string[]>([]);
       const roleId = ref<string>('');
       const treeRef = ref();
-      const checked: any = ref([]); //需要选中的节点
-      const pidArr: any = ref([]); //获取父节点
+      const checked = ref<string[]>([]); //需要选中的节点
+      const spinning = ref(false);
 
       const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
         labelWidth: 100,
@@ -59,24 +67,18 @@
         showActionButtonGroup: false,
       });
 
-      // 递归函数，将RouteItem里面的字段换名称
-      function processChildren(items: RouteItem[]) {
-        items.forEach((item) => {
-          item.menuName = t(item.meta.title);
-          item.icon = item.meta.icon;
-          item.key = item.id;
-          if (item.children) {
-            processChildren(item.children);
+      const originMenus = ref();
+
+      const transformName = (data: TreeData[]) => {
+        return data.map((item) => {
+          item.name = t(item.name);
+          if (item.children && item.children.length) {
+            item.children = transformName(item.children as unknown as TreeData[]);
           }
+          return item;
         });
-      }
-      function lookForAllId(data = [], arr = []) {
-        for (const item of data) {
-          arr.push(item.id);
-        }
-        return arr;
-      }
-      const originMenus = ref();
+      };
+
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
         allCheckedKeys.value = [];
         originMenus.value = [];
@@ -84,53 +86,52 @@
         resetFields();
         roleId.value = '';
         // 在打开弹窗时清除所有选择的菜单
-        treeRef.value && treeRef.value.checkAll(false);
+        treeRef.value && treeRef.value?.setCheckedKeys([]);
         isUpdate.value = data.isUpdate;
-        // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
-        if (!unref(treeData).length) {
-          // 获取全部的菜单
-          const menuListModel = await getMenuList();
-          processChildren(menuListModel);
-          treeData.value = menuListModel;
-          //修复角色菜单新增-全部展开问题-只展开第一级即可
-          nextTick(() => {
-            const getAllIds = lookForAllId(treeData.value, []);
-            treeExpandData.value = getAllIds;
-          });
-        }
-        // 更新
-        if (unref(isUpdate)) {
-          allCheckedKeys.value = [];
-          checked.value = [];
-          //通过角色id去获取角色对应的菜单的ids
-          roleMenus.value = await getMenusIdsByRoleId(data.record.id);
-          originMenus.value = [...roleMenus.value];
-
-          const getAllIds = lookForAllId(treeData.value, []);
-          treeExpandData.value = getAllIds;
-          for (let item of treeData.value) {
-            if (item?.children != 0) {
-              pidArr.value.push(item.key);
-            }
-            for (let item1 of item?.children) {
-              if (item1?.children != 0) {
-                pidArr.value.push(item1.key);
-              }
-            }
+        const roleType = data?.record?.roleType || RoleEnum.SYS_ADMIN;
+        try {
+          spinning.value = true;
+          // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
+
+          if (!unref(treeData).length) {
+            // 获取全部的菜单
+            const menuListModel = await getMenuList();
+            treeData.value = transformName(menuListModel as unknown as TreeData[]);
+            //修复角色菜单新增-全部展开问题-只展开第一级即可
+            await nextTick();
+            const getExpandKeys = unref(treeData).map((item) => item.id);
+            treeExpandData.value = getExpandKeys;
           }
-          for (let item of roleMenus.value) {
-            let isP = pidArr.value.includes(item);
-            if (!isP) {
-              checked.value.push(item);
-            }
+
+          const keys = await getPermissionByRole(roleType);
+          const { keyType } = RoleMenuDictEnum[roleType];
+          treeData.value = getPermissionTreeData(
+            unref(treeData) as unknown as TreeData[],
+            keys,
+            keyType
+          );
+
+          // 更新
+          if (unref(isUpdate)) {
+            allCheckedKeys.value = [];
+            checked.value = [];
+            roleId.value = data.record.id;
+
+            //通过角色id去获取角色对应的菜单的ids
+            originMenus.value = roleMenus.value = await getMenusIdsByRoleId(data.record.id);
+
+            const getExpandKeys = unref(treeData).map((item) => item.id);
+            treeExpandData.value = getExpandKeys;
+
+            await nextTick();
+            treeRef.value.setCheckedKeys(roleMenus.value);
+            setFieldsValue(data.record);
+          } else {
           }
-          nextTick(() => {
-            treeRef.value.setCheckedKeys(checked.value);
-            // const expandTreeIds = lookForAllId(treeData.value);
-            // treeRef.value.setExpandedKeys(expandTreeIds);
-          });
-          roleId.value = data.record.id;
-          setFieldsValue(data.record);
+        } catch (error) {
+          throw error;
+        } finally {
+          spinning.value = false;
         }
       });
 
@@ -146,7 +147,7 @@
             name: values.name,
             remark: values.remark,
             status: values.status,
-            menu: allCheckedKeys.value.length ? allCheckedKeys.value : originMenus.value,
+            menu: unref(treeRef).getCheckedKeys() || [],
           };
           if (req.menu == undefined) return createMessage.error('请勾选权限菜单');
           saveOrUpdateRoleInfoWithMenu(req).then(() => {
@@ -165,7 +166,74 @@
         allCheckedKeys.value = [...checkedNodes, ...halfCheckedKeys];
       };
 
+      const getPermissionByRole = async (roleType: RoleEnum) => {
+        try {
+          const { key } = RoleMenuDictEnum[roleType];
+          const res = await findDictItemByCode({ dictCode: key });
+          return res.map((item) => item.itemValue);
+        } catch (error) {}
+        return [];
+      };
+
+      const getPermissionTreeData = (
+        data: MenuRecord[],
+        permissionKeys: string[],
+        keysType: KeysTypeEnum
+      ) => {
+        const setDisabled = (data: MenuRecord[], flag: boolean) => {
+          return data.map((item) => {
+            item.name = t(item.name);
+            if (item.children && item.children.length) {
+              item.children = setDisabled(item.children, flag);
+            }
+            return {
+              ...item,
+              disabled: flag,
+              icon: item.meta.icon,
+            } as TreeData;
+          });
+        };
+
+        const permissionCompare = (
+          data: MenuRecord[],
+          permissionKeys: string[],
+          keysType: KeysTypeEnum
+        ) => {
+          return data.map((item) => {
+            item.name = t(item.name);
+            const findFlag = permissionKeys.includes(item.permission);
+            if (findFlag) item.isDictCompareDisabled = true;
+            const disabledFlag = keysType === KeysTypeEnum.DISABLED ? findFlag : !findFlag;
+            item.disabled = disabledFlag;
+
+            if (item.isDictCompareDisabled && item.children && item.children.length) {
+              setDisabled(item.children, disabledFlag);
+            } else {
+              if (item.children && item.children.length) {
+                item.children = permissionCompare(item.children, permissionKeys, keysType);
+                item.disabled = item.children.every((temp) => temp.disabled);
+              }
+            }
+            return {
+              ...item,
+              icon: item.meta.icon,
+            } as TreeData;
+          });
+        };
+
+        const result = permissionCompare(data, permissionKeys, keysType).map((item) => {
+          if (item.children && item.children.length) {
+            const rootDisabledFlag = item.children.every((temp) => temp.disabled);
+            item.disabled = rootDisabledFlag;
+          }
+          return item;
+        });
+
+        return result;
+      };
+
       return {
+        spinning,
         registerDrawer,
         registerForm,
         getTitle,
@@ -185,9 +253,11 @@
   :deep(.vben-basic-tree) {
     width: 100% !important;
   }
+
   :deep(.is-unflod) {
     display: none !important;
   }
+
   :deep(.is-flod) {
     display: none !important;
   }

 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
+import { RoleEnum } from '/@/enums/roleEnum';
+
+export enum KeysTypeEnum {
+  DISABLED = 'disabled',
+  ENABLED = 'enabled',
+}
+
+export const RoleMenuDictEnum: Recordable<{ key: string; keyType: KeysTypeEnum }> = {
+  [RoleEnum.PLATFORM_ADMIN]: { key: 'enabled_platform_admin_auth', keyType: KeysTypeEnum.ENABLED },
+  [RoleEnum.SYS_ADMIN]: { key: 'enabled_sysadmin_auth', keyType: KeysTypeEnum.ENABLED },
+  [RoleEnum.TENANT_ADMIN]: { key: 'disabled_tenant_auth', keyType: KeysTypeEnum.DISABLED },
+};
 
 export const columns: BasicColumn[] = [
   {

@@ -9,19 +9,21 @@
   >
     <BasicForm @register="registerForm">
       <template #menu>
-        <BasicTree
-          v-if="treeData.length > 0"
-          :treeData="treeData"
-          :expandedKeys="treeExpandData"
-          :replaceFields="{ title: 'menuName' }"
-          :checkedKeys="roleMenus"
-          @check="handleCheckClick"
-          checkable
-          toolbar
-          ref="treeRef"
-          title="权限分配"
-          :defaultExpandAll="true"
-        />
+        <Spin :spinning="spinning">
+          <BasicTree
+            v-if="treeData.length"
+            :treeData="treeData"
+            :expandedKeys="treeExpandData"
+            :replaceFields="{ title: 'name', key: 'id' }"
+            :checkedKeys="roleMenus"
+            @check="handleCheckClick"
+            checkable
+            toolbar
+            ref="treeRef"
+            title="权限分配"
+            :defaultExpandAll="true"
+          />
+        </Spin>
       </template>
     </BasicForm>
   </BasicDrawer>
@@ -36,17 +38,22 @@
   // 加载菜单数据
   import { getMenuList, getMenusIdsByRoleId } from '/@/api/sys/menu';
   import { useI18n } from '/@/hooks/web/useI18n';
-  import { RouteItem } from '/@/api/sys/model/menuModel';
+  import { MenuRecord } from '/@/api/sys/model/menuModel';
   import { saveOrUpdateRoleInfoWithMenu } from '/@/api/system/system';
   import { RoleEnum } from '/@/enums/roleEnum';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { KeysTypeEnum, RoleMenuDictEnum } from '../../system/role/role.data';
+  import { findDictItemByCode } from '/@/api/system/dict';
+  import { Spin } from 'ant-design-vue';
+
+  type TreeData = MenuRecord & TreeItem;
 
   export default defineComponent({
     name: 'RoleDrawer',
-    components: { BasicDrawer, BasicForm, BasicTree },
+    components: { BasicDrawer, BasicForm, BasicTree, Spin },
     emits: ['success', 'register'],
     setup(_, { emit }) {
-      const treeExpandData = ref([]);
+      const treeExpandData = ref<string[]>([]);
 
       const isUpdate = ref(true);
       const treeData = ref<TreeItem[]>([]);
@@ -54,8 +61,8 @@
       const allCheckedKeys = ref<string[]>([]);
       const roleId = ref('');
       const treeRef = ref();
-      const checked: any = ref([]); //需要选中的节点
-      const pidArr: any = ref([]); //获取父节点
+      const checked = ref<string[]>([]); //需要选中的节点
+      const spinning = ref(false);
 
       const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
         labelWidth: 90,
@@ -63,77 +70,71 @@
         showActionButtonGroup: false,
       });
 
-      function processChildren(items: RouteItem[]) {
-        items.map((item) => {
-          item.menuName = t(item.meta.title);
-          item.icon = item.meta.icon;
-          item.key = item.id;
-          if (item.children) {
-            processChildren(item.children);
+      const originMenus = ref();
+
+      const transformName = (data: TreeData[]) => {
+        return data.map((item) => {
+          item.name = t(item.name);
+          if (item.children && item.children.length) {
+            item.children = transformName(item.children as unknown as TreeData[]);
           }
+          return item;
         });
-      }
-      function lookForAllId(data = [], arr = []) {
-        for (const item of data) {
-          arr.push(item.id);
-        }
-        return arr;
-      }
+      };
 
-      const originMenus = ref();
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
-        setDrawerProps({ confirmLoading: false });
         allCheckedKeys.value = [];
         originMenus.value = [];
-        treeExpandData.value;
         allCheckedKeys.value.length = 0;
         resetFields();
         roleId.value = '';
         // 在打开弹窗时清除所有选择的菜单
-        treeRef.value && treeRef.value.checkAll(false);
+        treeRef.value && treeRef.value?.setCheckedKeys([]);
         isUpdate.value = data.isUpdate;
-        // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
-        if (!unref(treeData).length) {
-          // 获取全部的菜单
-          const menuListModel = await getMenuList();
-          processChildren(menuListModel);
-          treeData.value = menuListModel;
-          //修复角色菜单新增-全部展开问题-只展开第一级即可
-          nextTick(() => {
-            const getAllIds = lookForAllId(treeData.value, []);
-            treeExpandData.value = getAllIds;
-          });
-        }
-        // 更新
-        if (unref(isUpdate)) {
-          allCheckedKeys.value = [];
-          checked.value = [];
-          //通过角色id去获取角色对应的菜单的ids
-          roleMenus.value = await getMenusIdsByRoleId(data.record.id);
-          originMenus.value = [...roleMenus.value];
-          const getAllIds = lookForAllId(treeData.value, []);
-          treeExpandData.value = getAllIds;
-          for (let item of treeData.value) {
-            if (item?.children != 0) {
-              pidArr.value.push(item.key);
-            }
-            for (let item1 of item?.children) {
-              if (item1?.children != 0) {
-                pidArr.value.push(item1.key);
-              }
-            }
+        const roleType = data?.record?.roleType || RoleEnum.TENANT_ADMIN;
+        try {
+          spinning.value = true;
+          // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
+
+          if (!unref(treeData).length) {
+            // 获取全部的菜单
+            const menuListModel = await getMenuList();
+            treeData.value = transformName(menuListModel as unknown as TreeData[]);
+            //修复角色菜单新增-全部展开问题-只展开第一级即可
+            await nextTick();
+            const getExpandKeys = unref(treeData).map((item) => item.id);
+            treeExpandData.value = getExpandKeys;
           }
-          for (let item of roleMenus.value) {
-            let isP = pidArr.value.includes(item);
-            if (!isP) {
-              checked.value.push(item);
-            }
+
+          const keys = await getPermissionByRole(roleType);
+          const { keyType } = RoleMenuDictEnum[roleType];
+          treeData.value = getPermissionTreeData(
+            unref(treeData) as unknown as TreeData[],
+            keys,
+            keyType
+          );
+
+          // 更新
+          if (unref(isUpdate)) {
+            allCheckedKeys.value = [];
+            checked.value = [];
+            roleId.value = data.record.id;
+
+            //通过角色id去获取角色对应的菜单的ids
+            originMenus.value = roleMenus.value = await getMenusIdsByRoleId(data.record.id);
+
+            const getExpandKeys = unref(treeData).map((item) => item.id);
+            treeExpandData.value = getExpandKeys;
+
+            await nextTick();
+            treeRef.value.setCheckedKeys(roleMenus.value);
+            setFieldsValue(data.record);
+          } else {
           }
-          nextTick(() => {
-            treeRef.value.setCheckedKeys(checked.value);
-          });
-          roleId.value = data.record.id;
-          setFieldsValue(data.record);
+        } catch (error) {
+          throw error;
+        } finally {
+          spinning.value = false;
         }
       });
       const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
@@ -150,7 +151,7 @@
             remark: values.remark,
             status: values.status,
             roleType: RoleEnum.TENANT_ADMIN,
-            menu: allCheckedKeys.value.length ? allCheckedKeys.value : originMenus.value,
+            menu: unref(treeRef).getCheckedKeys() || [],
           };
           if (req.menu == undefined) return createMessage.error('请勾选权限菜单');
           const res = await saveOrUpdateRoleInfoWithMenu(req);
@@ -173,7 +174,74 @@
         allCheckedKeys.value = [...checkedNodes, ...halfCheckedKeys];
       };
 
+      const getPermissionByRole = async (roleType: RoleEnum) => {
+        try {
+          const { key } = RoleMenuDictEnum[roleType];
+          const res = await findDictItemByCode({ dictCode: key });
+          return res.map((item) => item.itemValue);
+        } catch (error) {}
+        return [];
+      };
+
+      const getPermissionTreeData = (
+        data: MenuRecord[],
+        permissionKeys: string[],
+        keysType: KeysTypeEnum
+      ) => {
+        const setDisabled = (data: MenuRecord[], flag: boolean) => {
+          return data.map((item) => {
+            item.name = t(item.name);
+            if (item.children && item.children.length) {
+              item.children = setDisabled(item.children, flag);
+            }
+            return {
+              ...item,
+              disabled: flag,
+              icon: item.meta.icon,
+            } as TreeData;
+          });
+        };
+
+        const permissionCompare = (
+          data: MenuRecord[],
+          permissionKeys: string[],
+          keysType: KeysTypeEnum
+        ) => {
+          return data.map((item) => {
+            item.name = t(item.name);
+            const findFlag = permissionKeys.includes(item.permission);
+            if (findFlag) item.isDictCompareDisabled = true;
+            const disabledFlag = keysType === KeysTypeEnum.DISABLED ? findFlag : !findFlag;
+            item.disabled = disabledFlag;
+
+            if (item.isDictCompareDisabled && item.children && item.children.length) {
+              setDisabled(item.children, disabledFlag);
+            } else {
+              if (item.children && item.children.length) {
+                item.children = permissionCompare(item.children, permissionKeys, keysType);
+                item.disabled = item.children.every((temp) => temp.disabled);
+              }
+            }
+            return {
+              ...item,
+              icon: item.meta.icon,
+            } as TreeData;
+          });
+        };
+
+        const result = permissionCompare(data, permissionKeys, keysType).map((item) => {
+          if (item.children && item.children.length) {
+            const rootDisabledFlag = item.children.every((temp) => temp.disabled);
+            item.disabled = rootDisabledFlag;
+          }
+          return item;
+        });
+
+        return result;
+      };
+
       return {
+        spinning,
         registerDrawer,
         registerForm,
         getTitle,
@@ -192,9 +260,11 @@
   :deep(.vben-basic-tree) {
     width: 100% !important;
   }
+
   :deep(.is-unflod) {
     display: none !important;
   }
+
   :deep(.is-flod) {
     display: none !important;
   }