feat: 新增按钮权限

README.md

@@ -16,7 +16,11 @@
 
 安装项目根目录.vscode 推荐的插件，再安装 Volar，并禁用 Vetur，重启 vscode 即可。
 
-> 使用了 Vue3.0 全家桶、ant-design-vue2.0 和 typescript4.0，实践 vue3.0 的新特性以及玩法，不得不说 vue3.0 的 Composition API 相比于 vue2.0 的 Options API 灵活很多，让我们可以灵活地组合组件逻辑，我们可以很轻松的使用 hooks 的形式去代替以前 mixins 等的写法。更多 hooks 可以参考[vueuse](https://vueuse.org/functions.html)
+> 使用了 Vue3.x 全家桶、ant-design-vue3.x 和 typescript4.x，实践 vue3.x 的新特性以及玩法，不得不说 vue3.x 的 Composition API 相比于 vue2.x 的 Options API 灵活很多，让我们可以灵活地组合组件逻辑，我们可以很轻松的使用 hooks 的形式去代替以前 mixins 等的写法。更多 hooks 可以参考[vueuse](https://vueuse.org/functions.html)
+
+## 项目简要说明
+
+`rootadmin` 默认开放多点登录，其他新建的账号默认都是单点登录。建议自己拉后端代码到本地跑，避免多人同时操作时产生冲突和误解。
 
 ## Project setup
 

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
+    "dev": "npm run serve",
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
@@ -36,8 +37,8 @@
     "@types/lodash": "^4.14.178",
     "@types/node": "^16.11.12",
     "@types/webpack-env": "^1.16.3",
-    "@typescript-eslint/eslint-plugin": "^5.6.0",
-    "@typescript-eslint/parser": "^5.6.0",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
     "@vue/cli-plugin-babel": "^5.0.0-rc.1",
     "@vue/cli-plugin-eslint": "^5.0.0-rc.1",
     "@vue/cli-plugin-router": "^5.0.0-rc.1",
@@ -49,7 +50,7 @@
     "babel-plugin-import": "^1.13.3",
     "babel-plugin-lodash": "^3.3.4",
     "commitizen": "^4.2.4",
-    "compression-webpack-plugin": "^9.0.1",
+    "compression-webpack-plugin": "^9.1.2",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
@@ -71,7 +72,7 @@
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
     "svg-sprite-loader": "^6.0.11",
-    "typescript": "^4.5.3",
+    "typescript": "^4.5.4",
     "vue-cli-plugin-windicss": "^1.1.2",
     "vue-eslint-parser": "^8.0.1"
   },

src/api/system/user/index.ts

@@ -1,6 +1,6 @@
 import { request } from '@/utils/request';
 import Api from '@/core/permission/modules/sys/user';
-import { generatePermCode } from '@/core/permission';
+import { generatePermCode } from '@/core/permission/modules';
 
 export function getUserListPage(data: API.PageParams<{ departmentIds: number[] }>) {
   return request<API.TableListResult<API.UserListPageResult>>(

src/components/dynamic-table/components/table-action.vue

@@ -1,5 +1,5 @@
 <template>
-  <template v-for="(actionItem, index) in actions" :key="`${index}-${actionItem.label}`">
+  <template v-for="(actionItem, index) in actionFilters" :key="`${index}-${actionItem.label}`">
     <component
       :title="actionItem.title"
       :is="actionItem.popConfirm ? Popconfirm : 'span'"
@@ -14,14 +14,44 @@
 
 <script lang="ts" setup>
   import { Popconfirm } from 'ant-design-vue';
-  import { PropType } from 'vue';
+  import type { PropType } from 'vue';
+  import { computed } from 'vue';
   import type { ActionItem } from '../types/tableAction';
+  import { verifyAuth } from '@/core/permission/';
+  import { isString, isObject } from '@/utils/is';
 
-  defineProps({
+  const props = defineProps({
     actions: {
       // 表格行动作
       type: Array as PropType<ActionItem[]>,
       default: () => [],
     },
   });
+
+  const actionFilters = computed(() => {
+    return props.actions.filter((item) => {
+      const auth = item.auth;
+
+      if (Object.is(auth, undefined)) {
+        return true;
+      }
+      if (isString(auth)) {
+        const isValid = verifyAuth(auth);
+        item.disabled = !isValid;
+        if (item.disabled) {
+          item.title = '对不起，您没有该操作权限！';
+        }
+        return isValid;
+      }
+      if (isObject(auth)) {
+        const isValid = verifyAuth(auth.perm);
+        const isDisable = auth.effect !== 'delete';
+        item.disabled = !isValid && isDisable;
+        if (item.disabled) {
+          item.title = '对不起，您没有该操作权限！';
+        }
+        return isValid || isDisable;
+      }
+    });
+  });
 </script>

src/components/dynamic-table/dynamic-table.vue

@@ -17,7 +17,7 @@
         @change="handleTableChange"
       >
         <template
-          v-for="slotName in defaultSlots.filter((name) => Object.hasOwn($slots, name))"
+          v-for="slotName in defaultSlots.filter((name) => Object.hasOwnProperty($slots, name))"
           #[slotName]="slotData"
           :key="slotName"
         >

src/components/dynamic-table/types/tableAction.ts

@@ -1,6 +1,7 @@
 import type { PopconfirmProps } from 'ant-design-vue/es/popconfirm';
 import type { ButtonProps, TooltipProps } from 'ant-design-vue/lib/components';
 import { ColumnParams } from '../typing';
+import type { PermissionType } from '@/core/permission/modules/types';
 
 export interface ActionItem extends Omit<ButtonProps, 'onClick'> {
   onClick?: Fn<ColumnParams, any>;
@@ -15,6 +16,13 @@ export interface ActionItem extends Omit<ButtonProps, 'onClick'> {
   // 业务控制是否显示
   ifShow?: boolean | ((action: ActionItem) => boolean);
   tooltip?: string | TooltipProps;
+  /** 设置按钮权限, effect不传默认为disable */
+  auth?:
+    | PermissionType
+    | {
+        perm: PermissionType;
+        effect?: 'delete' | 'disable';
+      };
 }
 
 export interface PopConfirm extends PopconfirmProps {

src/core/permission/index.ts

@@ -8,48 +8,13 @@
 // import type { DataNode } from 'rc-tree-select/lib/interface'
 
 import type { TreeSelectProps } from 'ant-design-vue';
+import type { App } from 'vue';
+import { permissions } from './modules/';
+import type { PermissionType } from './modules/types';
+import { useUserStore } from '@/store/modules/user';
 
 type DataNode = NonNullable<TreeSelectProps['treeData']>[number];
 
-interface Permissions {
-  [key: string]: {
-    [key: string]: string;
-  };
-}
-
-const modulesPermissionFiles = require.context('./modules', true, /\.ts$/);
-/**
- * 根据接口路径生成接口权限码, eg: sys/user/add => sys:user:add
- * @param str 接口路径
- * @returns {string}
- */
-export const generatePermCode = (str: string) => str.replace(/\//g, ':');
-
-/**
- * @description 权限列表
- */
-export const permissions: Permissions = modulesPermissionFiles
-  .keys()
-  .reduce((modules, modulePath) => {
-    // set './app.js' => 'app'
-    // set './sys/app.js' => 'sysApp'
-    const moduleName = modulePath
-      .replace(/^\.\/(.*)\.\w+$/, '$1')
-      .replace(/[-_/][a-z]/gi, (s) => s.substring(1).toUpperCase());
-    const value = modulesPermissionFiles(modulePath).default;
-
-    // pass sys/user/add => sys:user:add
-    const permissionModule = Object.keys(value).reduce((obj, key) => {
-      obj[key] = generatePermCode(value[key]);
-      return obj;
-    }, {});
-
-    modules[moduleName] = permissionModule;
-    // console.log('permissions modules', modules);
-    return modules;
-  }, {});
-// console.log('permissions', permissions);
-
 /**
  * @description 将权限列表转成级联选择器要求的数据格式
  */
@@ -98,4 +63,20 @@ export const formarPermsToCascader = () => {
 //     }
 //   }
 // })
-export default permissions;
+/**
+ * 验证权限
+ * @param {PermissionType} perm  权限码
+ * @returns {boolean} true | false
+ */
+export const verifyAuth = (perm: PermissionType) => {
+  const permCode = perm.split('/').join(':');
+  const permissionList = useUserStore().perms;
+
+  return permissionList.some((n) => n === permCode);
+};
+
+export default {
+  install(app: App) {
+    app.config.globalProperties.$auth = verifyAuth;
+  },
+};

src/core/permission/modules/index.ts

@@ -0,0 +1,41 @@
+interface Permissions {
+  [key: string]: {
+    [key: string]: string;
+  };
+}
+
+const modulesPermissionFiles = require.context('./', true, /\.ts$/);
+/**
+ * 根据接口路径生成接口权限码, eg: sys/user/add => sys:user:add
+ * @param str 接口路径
+ * @returns {string}
+ */
+export const generatePermCode = (str: string) => str.replace(/\//g, ':');
+
+const filterDirs = ['/index.ts', './types.ts'];
+
+/**
+ * @description 权限列表
+ */
+export const permissions: Permissions = modulesPermissionFiles
+  .keys()
+  .reduce((modules, modulePath) => {
+    if (filterDirs.some((n) => modulePath.includes(n))) return modules;
+    // set './app.js' => 'app'
+    // set './sys/app.js' => 'sysApp'
+    const moduleName = modulePath
+      .replace(/^\.\/(.*)\.\w+$/, '$1')
+      .replace(/[-_/][a-z]/gi, (s) => s.substring(1).toUpperCase());
+    const value = modulesPermissionFiles(modulePath).default;
+
+    // pass sys/user/add => sys:user:add
+    const permissionModule = Object.keys(value).reduce((obj, key) => {
+      obj[key] = generatePermCode(value[key]);
+      return obj;
+    }, {});
+
+    modules[moduleName] = permissionModule;
+    // console.log('permissions modules', modules);
+    return modules;
+  }, {});
+console.log('permissions', permissions);

src/core/permission/modules/netdisk/index.ts

@@ -0,0 +1,3 @@
+import type { NetdiskMangePerms } from './manage';
+
+export type NetdiskPermissionType = NetdiskMangePerms;

src/core/permission/modules/netdisk/manage.ts

@@ -1,4 +1,4 @@
-export default {
+export const netdiskMange = {
   list: 'netdisk/manage/list',
   mkdir: 'netdisk/manage/mkdir',
   token: 'netdisk/manage/token',
@@ -10,4 +10,10 @@ export default {
   mark: 'netdisk/manage/mark',
   cut: 'netdisk/manage/cut',
   copy: 'netdisk/manage/copy',
-};
+} as const;
+
+export const values = Object.values(netdiskMange);
+
+export type NetdiskMangePerms = typeof values[number];
+
+export default netdiskMange;

src/core/permission/modules/sys/dept.ts

@@ -1,9 +1,18 @@
-export default {
+export const sysDept = {
+  /** 获取部门列表 */
   list: 'sys/dept/list',
+  /** 移动部门 */
   move: 'sys/dept/move',
+  /** 更新部门 */
   update: 'sys/dept/update',
   delete: 'sys/dept/delete',
   add: 'sys/dept/add',
   info: 'sys/dept/info',
   transfer: 'sys/dept/transfer',
-};
+} as const;
+
+export const values = Object.values(sysDept);
+
+export type SysDeptPerms = typeof values[number];
+
+export default sysDept;

src/core/permission/modules/sys/index.ts

@@ -0,0 +1,16 @@
+import { SysLogPerms } from './log';
+import { SysDeptPerms } from './dept';
+import { SysMenuPerms } from './menu';
+import { SysOnlinePerms } from './online';
+import { SysRolePerms } from './role';
+import { SysTaskPerms } from './task';
+import { SysUserPerms } from './user';
+
+export type SysPermissionType =
+  | SysLogPerms
+  | SysDeptPerms
+  | SysMenuPerms
+  | SysOnlinePerms
+  | SysRolePerms
+  | SysTaskPerms
+  | SysUserPerms;

src/core/permission/modules/sys/log.ts

@@ -1,5 +1,11 @@
-export default {
+export const sysLog = {
   req: 'sys/log/req/page',
   login: 'sys/log/login/page',
   task: 'sys/log/task/page',
-};
+} as const;
+
+export const values = Object.values(sysLog);
+
+export type SysLogPerms = typeof values[number];
+
+export default sysLog;

src/core/permission/modules/sys/menu.ts

@@ -1,7 +1,13 @@
-export default {
+export const sysMenu = {
   list: 'sys/menu/list',
   add: 'sys/menu/add',
   update: 'sys/menu/update',
   info: 'sys/menu/info',
   delete: 'sys/menu/delete',
-};
+} as const;
+
+export const deptValues = Object.values(sysMenu);
+
+export type SysMenuPerms = typeof deptValues[number];
+
+export default sysMenu;

src/core/permission/modules/sys/online.ts

@@ -1,4 +1,10 @@
-export default {
+export const sysOnline = {
   list: 'sys/online/list',
   kick: 'sys/online/kick',
-};
+} as const;
+
+export const values = Object.values(sysOnline);
+
+export type SysOnlinePerms = typeof values[number];
+
+export default sysOnline;

src/core/permission/modules/sys/role.ts

@@ -1,8 +1,14 @@
-export default {
+export const sysRole = {
   list: 'sys/role/list',
   page: 'sys/role/page',
   add: 'sys/role/add',
   update: 'sys/role/update',
   delete: 'sys/role/delete',
   info: 'sys/role/info',
-};
+} as const;
+
+export const values = Object.values(sysRole);
+
+export type SysRolePerms = typeof values[number];
+
+export default sysRole;

src/core/permission/modules/sys/task.ts

@@ -1,4 +1,4 @@
-export default {
+export const sysTask = {
   page: 'sys/task/page',
   add: 'sys/task/add',
   update: 'sys/task/update',
@@ -7,4 +7,10 @@ export default {
   start: 'sys/task/start',
   stop: 'sys/task/stop',
   info: 'sys/task/info',
-};
+} as const;
+
+export const values = Object.values(sysTask);
+
+export type SysTaskPerms = typeof values[number];
+
+export default sysTask;