feat(permission): 新增权限hooks

src/hooks/permission/index.ts

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react';
+import { BUTTON_PERMISSION_ENUM } from '@/utils/menu/router';
+import type { MENUS_CODE_TYPE } from '@/utils/menu/router';
+import { MENUS_BUTTONS_CACHE } from '@/utils/menu';
+
+type permissionKeyType = keyof typeof BUTTON_PERMISSION_ENUM;
+type permissionType = Record<permissionKeyType, boolean>;
+
+const usePermissions = (
+  code: MENUS_CODE_TYPE,
+): {
+  /**
+   * 是否有改权限
+   */
+  permission: Partial<permissionType>;
+  /**
+   * 获取额外权限，比如组合权限
+   * @example getOtherPermission(['add', 'delete']) => boolean
+   * @return Boolean
+   */
+  getOtherPermission: (permission: string | string[]) => boolean;
+} => {
+  const [permission, setPermission] = useState<Partial<permissionType>>({});
+
+  let buttons = {};
+  const permissionButton: Partial<permissionType> = {};
+
+  try {
+    const buttonString = localStorage.getItem(MENUS_BUTTONS_CACHE);
+    buttons = JSON.parse(buttonString || '{}');
+  } catch (e) {
+    console.warn(e);
+  }
+
+  const getOtherPermission = (permissionCode: string | string[]) => {
+    if (!!Object.keys(buttons).length && permissionCode) {
+      const _buttonArray = buttons[code];
+      if (!_buttonArray) {
+        return false;
+      }
+      return _buttonArray.some((btnId: string) => {
+        if (typeof permissionCode === 'string') {
+          return permissionCode === btnId;
+        } else {
+          return permissionCode.includes(btnId);
+        }
+        return false;
+      });
+    }
+    return false;
+  };
+
+  useEffect(() => {
+    Object.keys(BUTTON_PERMISSION_ENUM).forEach((key) => {
+      permissionButton[key] = getOtherPermission[key];
+    });
+
+    setPermission(permissionButton);
+  }, [code]);
+
+  return { permission, getOtherPermission };
+};
+
+export default usePermissions;

src/locales/zh-CN/pages.ts

@@ -18,6 +18,7 @@ export default {
   'pages.data.option.disabled.tips': '确认禁用？',
   'pages.data.option.enabled': '启用',
   'pages.data.option.enabled.tips': '确认启用？',
+  'pages.data.option.noPermission': '暂无权限，请联系管理员',
   'pages.data.option.add': '新增',
   'pages.data.option.edit': '编辑',
   'pages.data.option.preview': '预览',

src/pages/system/Department/index.tsx

@@ -22,6 +22,7 @@ import { model } from '@formily/reactive';
 import Save from './save';
 import SearchComponent from '@/components/SearchComponent';
 import { getButtonPermission, getMenuPathByParams, MENUS_CODE } from '@/utils/menu';
+import usePermissions from '@/hooks/permission';
 
 export const service = new Service('organization');
 
@@ -64,7 +65,7 @@ export default observer(() => {
   const [expandedRowKeys, setExpandedRowKeys] = useState<React.Key[]>([]);
   const [treeData, setTreeData] = useState<any[]>([]);
   const [sortParam, setSortParam] = useState<any>({ name: 'sortIndex', order: 'asc' });
-
+  const { permission, getOtherPermission } = usePermissions('system/Department');
   const rowKeys = useRef<React.Key[]>([]);
 
   /**
@@ -110,29 +111,29 @@ export default observer(() => {
       valueType: 'option',
       width: 240,
       render: (text, record) => [
-        <Button
-          style={{ padding: 0 }}
-          type="link"
-          disabled={getButtonPermission('system/Department', ['update'])}
-          key="editable"
-          onClick={() => {
-            State.current = record;
-            State.visible = true;
-          }}
+        <Tooltip
+          title={intl.formatMessage({
+            id: permission.update ? 'pages.data.option.edit' : 'pages.data.option.noPermission',
+            defaultMessage: '编辑',
+          })}
         >
-          <Tooltip
-            title={intl.formatMessage({
-              id: 'pages.data.option.edit',
-              defaultMessage: '编辑',
-            })}
+          <Button
+            style={{ padding: 0 }}
+            type="link"
+            disabled={!permission.update}
+            key="editable"
+            onClick={() => {
+              State.current = record;
+              State.visible = true;
+            }}
           >
             <EditOutlined />
-          </Tooltip>
-        </Button>,
+          </Button>
+        </Tooltip>,
         <Button
           style={{ padding: 0 }}
           type="link"
-          disabled={getButtonPermission('system/Department', ['add'])}
+          disabled={!getOtherPermission(['add'])}
           key="editable"
           onClick={() => {
             State.current = {

src/utils/menu/router.ts

@@ -106,16 +106,18 @@ export enum MENUS_CODE {
 
 export type MENUS_CODE_TYPE = keyof typeof MENUS_CODE;
 
-export type BUTTON_PERMISSION =
-  | 'add'
-  | 'delete'
-  | 'import'
-  | 'view'
-  | 'export'
-  | 'update'
-  | 'action'
-  | 'push'
-  | string;
+export enum BUTTON_PERMISSION_ENUM {
+  'add' = 'add',
+  'delete' = 'delete',
+  'import' = 'import',
+  'view' = 'view',
+  'export' = 'export',
+  'update' = 'update',
+  'action' = 'action',
+  'push' = 'push',
+}
+
+export type BUTTON_PERMISSION = keyof typeof BUTTON_PERMISSION_ENUM | string;
 
 export const getDetailNameByCode = {
   'system/Menu/Detail': '菜单详情',