refactor: 检测目前所有菜单权限

backend/dvadmin/system/views/menu_button.py

@@ -11,7 +11,7 @@ from rest_framework.decorators import action
 from rest_framework.permissions import IsAuthenticated
 
 from dvadmin.system.models import MenuButton, RoleMenuButtonPermission
-from dvadmin.utils.json_response import DetailResponse
+from dvadmin.utils.json_response import DetailResponse, SuccessResponse
 from dvadmin.utils.serializers import CustomModelSerializer
 from dvadmin.utils.viewset import CustomModelViewSet
 
@@ -49,12 +49,24 @@ class MenuButtonViewSet(CustomModelViewSet):
     retrieve:单例
     destroy:删除
     """
-    queryset = MenuButton.objects.all()
+    queryset = MenuButton.objects.order_by('create_datetime')
     serializer_class = MenuButtonSerializer
     create_serializer_class = MenuButtonCreateUpdateSerializer
     update_serializer_class = MenuButtonCreateUpdateSerializer
     extra_filter_class = []
 
+    def list(self, request, *args, **kwargs):
+        """
+        重写list方法
+        :param request:
+        :param args:
+        :param kwargs:
+        :return:
+        """
+        queryset = self.filter_queryset(self.get_queryset())
+        serializer = self.get_serializer(queryset, many=True, request=request)
+        return SuccessResponse(serializer.data,msg="获取成功")
+
     @action(methods=['get'],detail=False,permission_classes=[IsAuthenticated])
     def menu_button_all_permission(self,request):
         """

web/src/main.ts

@@ -14,7 +14,7 @@ import piniaPersist from 'pinia-plugin-persist';
 // @ts-ignore
 import fastCrud from './settings.ts';
 import pinia from './stores';
-import permission from '/@/plugin/permission/index';
+import {RegisterPermission} from '/@/plugin/permission/index';
 // @ts-ignore
 import eIconPicker, { iconList, analyzingIconForIconfont } from 'e-icon-picker';
 import 'e-icon-picker/icon/default-icon/symbol.js'; //基本彩色图标库
@@ -54,7 +54,6 @@ other.elSvg(app);
 
 
 app.use(VXETable)
-app.use(permission);
 app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).use(VueGridLayout).use(fastCrud).mount('#app');
 
 app.config.globalProperties.mittBus = mitt();

web/src/plugin/permission/index.ts

@@ -1,10 +1,6 @@
 import permissionDirective from './directive.permission'
 import permissionFunc from './func.permission'
-const install = function (app:any) {
+export const RegisterPermission = function (app:any) {
   app.directive('permission', permissionDirective)
   app.provide('$hasPermissions',permissionFunc.hasPermissions)
 }
-
-export default {
-  install
-}

web/src/stores/btnPermission.ts

@@ -0,0 +1,26 @@
+import {defineStore} from "pinia";
+import {DictionaryStates} from "/@/stores/interface";
+import {request} from "/@/utils/service";
+
+export const BtnPermissionStore = defineStore('BtnPermission', {
+    state: (): DictionaryStates => ({
+        data: []
+    }),
+    actions: {
+        async getBtnPermissionStore() {
+            request({
+                url: '/api/system/menu_button/menu_button_all_permission/',
+                method: 'get',
+            }).then((ret: {
+                data: []
+            }) => {
+                // 转换数据格式并保存到pinia
+                let dataList = ret.data
+                this.data=dataList
+            })
+        },
+    },
+    persist: {
+        enabled: true,
+    },
+});

web/src/utils/authDirective.ts

@@ -1,7 +1,6 @@
 import type { App } from 'vue';
-import { useUserInfo } from '/@/stores/userInfo';
 import { judementSameArr } from '/@/utils/arrayOperation';
-
+import {BtnPermissionStore} from "/@/stores/btnPermission";
 /**
  * 用户权限指令
  * @directive 单个权限验证（v-auth="xxx"）
@@ -12,16 +11,16 @@ export function authDirective(app: App) {
 	// 单个权限验证（v-auth="xxx"）
 	app.directive('auth', {
 		mounted(el, binding) {
-			const stores = useUserInfo();
+			const stores = BtnPermissionStore();
-			if (!stores.userInfos.authBtnList.some((v: string) => v === binding.value)) el.parentNode.removeChild(el);
+			if (!stores.data.some((v: string) => v === binding.value)) el.parentNode.removeChild(el);
 		},
 	});
 	// 多个权限验证，满足一个则显示（v-auths="[xxx,xxx]"）
 	app.directive('auths', {
 		mounted(el, binding) {
 			let flag = false;
-			const stores = useUserInfo();
+			const stores = BtnPermissionStore();
-			stores.userInfos.authBtnList.map((val: string) => {
+			stores.data.map((val: string) => {
 				binding.value.map((v: string) => {
 					if (val === v) flag = true;
 				});
@@ -32,8 +31,8 @@ export function authDirective(app: App) {
 	// 多个权限验证，全部满足则显示（v-auth-all="[xxx,xxx]"）
 	app.directive('auth-all', {
 		mounted(el, binding) {
-			const stores = useUserInfo();
+			const stores = BtnPermissionStore();
-			const flag = judementSameArr(binding.value, stores.userInfos.authBtnList);
+			const flag = judementSameArr(binding.value, stores.data);
 			if (!flag) el.parentNode.removeChild(el);
 		},
 	});

web/src/utils/authFunction.ts

@@ -1,14 +1,13 @@
-import { useUserInfo } from '/@/stores/userInfo';
 import { judementSameArr } from '/@/utils/arrayOperation';
-
+import {BtnPermissionStore} from "/@/stores/btnPermission";
 /**
  * 单个权限验证
  * @param value 权限值
  * @returns 有权限，返回 `true`，反之则反
  */
 export function auth(value: string): boolean {
-	const stores = useUserInfo();
+	const stores = BtnPermissionStore();
-	return stores.userInfos.authBtnList.some((v: string) => v === value);
+	return stores.data.some((v: string) => v === value);
 }
 
 /**
@@ -18,8 +17,8 @@ export function auth(value: string): boolean {
  */
 export function auths(value: Array<string>): boolean {
 	let flag = false;
-	const stores = useUserInfo();
+	const stores = BtnPermissionStore();
-	stores.userInfos.authBtnList.map((val: string) => {
+	stores.data.map((val: string) => {
 		value.map((v: string) => {
 			if (val === v) flag = true;
 		});
@@ -33,6 +32,6 @@ export function auths(value: Array<string>): boolean {
  * @returns 有权限，返回 `true`，反之则反
  */
 export function authAll(value: Array<string>): boolean {
-	const stores = useUserInfo();
+	const stores = BtnPermissionStore();
-	return judementSameArr(value, stores.userInfos.authBtnList);
+	return judementSameArr(value, stores.data);
 }

web/src/views/system/areas/crud.tsx

@@ -1,20 +1,30 @@
 import * as api from './api';
-import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import {
-import { dictionary } from '/@/utils/dictionary';
+    dict,
-import { successMessage } from '/@/utils/message';
+    UserPageQuery,
+    AddReq,
+    DelReq,
+    EditReq,
+    compute,
+    CreateCrudOptionsProps,
+    CreateCrudOptionsRet
+} from '@fast-crud/fast-crud';
+import {dictionary} from '/@/utils/dictionary';
+import {successMessage} from '/@/utils/message';
+import {auth} from "/@/utils/authFunction";
 
-export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps): CreateCrudOptionsRet {
     const pageRequest = async (query: UserPageQuery) => {
         return await api.GetList(query);
     };
-	const editRequest = async ({ form, row }: EditReq) => {
+    const editRequest = async ({form, row}: EditReq) => {
         form.id = row.id;
         return await api.UpdateObj(form);
     };
-	const delRequest = async ({ row }: DelReq) => {
+    const delRequest = async ({row}: DelReq) => {
         return await api.DelObj(row.id);
     };
-	const addRequest = async ({ form }: AddReq) => {
+    const addRequest = async ({form}: AddReq) => {
         return await api.AddObj(form);
     };
 
@@ -24,7 +34,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
      * @returns {Promise<unknown>}
      */
     const loadContentMethod = (tree: any, treeNode: any, resolve: Function) => {
-		pageRequest({ pcode: tree.code }).then((res: APIResponseData) => {
+        pageRequest({pcode: tree.code}).then((res: APIResponseData) => {
             resolve(res.data);
         });
     };
@@ -37,6 +47,13 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                 editRequest,
                 delRequest,
             },
+            actionbar: {
+                buttons: {
+                    add: {
+                        show: auth('area:Create'),
+                    }
+                }
+            },
             rowHandle: {
                 //固定右侧
                 fixed: 'right',
@@ -48,10 +65,12 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                     edit: {
                         iconRight: 'Edit',
                         type: 'text',
+						show: auth('area:Update')
                     },
                     remove: {
                         iconRight: 'Delete',
                         type: 'text',
+						show: auth('area:Delete')
                     },
                 },
             },
@@ -62,12 +81,12 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                 rowKey: 'id',
                 lazy: true,
                 load: loadContentMethod,
-				treeProps: { children: 'children', hasChildren: 'hasChild' },
+                treeProps: {children: 'children', hasChildren: 'hasChild'},
             },
             columns: {
                 _index: {
                     title: '序号',
-					form: { show: false },
+                    form: {show: false},
                     column: {
                         type: 'index',
                         align: 'center',
@@ -106,13 +125,13 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                     },
                     treeNode: true,
                     type: 'input',
-					column:{
+                    column: {
                         minWidth: 120,
                     },
                     form: {
                         rules: [
                             // 表单校验规则
-							{ required: true, message: '名称必填项' },
+                            {required: true, message: '名称必填项'},
                         ],
                         component: {
                             placeholder: '请输入名称',
@@ -125,13 +144,13 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                         show: true,
                     },
                     type: 'input',
-					column:{
+                    column: {
                         minWidth: 90,
                     },
                     form: {
                         rules: [
                             // 表单校验规则
-							{ required: true, message: '地区编码必填项' },
+                            {required: true, message: '地区编码必填项'},
                         ],
                         component: {
                             placeholder: '请输入地区编码',
@@ -144,13 +163,13 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                         disabled: true,
                     },
                     type: 'input',
-					column:{
+                    column: {
                         minWidth: 120,
                     },
                     form: {
                         rules: [
                             // 表单校验规则
-							{ required: true, message: '拼音必填项' },
+                            {required: true, message: '拼音必填项'},
                         ],
                         component: {
                             placeholder: '请输入拼音',
@@ -163,14 +182,14 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                         disabled: true,
                     },
                     type: 'input',
-					column:{
+                    column: {
                         minWidth: 100,
                     },
                     form: {
                         disabled: false,
                         rules: [
                             // 表单校验规则
-							{ required: true, message: '拼音必填项' },
+                            {required: true, message: '拼音必填项'},
                         ],
                         component: {
                             placeholder: '请输入拼音',
@@ -179,13 +198,13 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                 },
                 initials: {
                     title: '首字母',
-					column:{
+                    column: {
                         minWidth: 100,
                     },
                     form: {
                         rules: [
                             // 表单校验规则
-							{ required: true, message: '首字母必填项' },
+                            {required: true, message: '首字母必填项'},
                         ],
 
                         component: {
@@ -200,7 +219,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                     },
                     type: 'dict-radio',
                     column: {
-						minWidth:90,
+                        minWidth: 90,
                         component: {
                             name: 'fs-dict-switch',
                             activeText: '',

web/src/views/system/dept/components/DeptUserCom/crud.tsx

@@ -4,6 +4,7 @@ import { request } from '/@/utils/service';
 import * as api from './api';
 import { dictionary } from '/@/utils/dictionary';
 import { successMessage } from '/@/utils/message';
+import {auth} from "/@/utils/authFunction";
 
 export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
 	const pageRequest = async (query: UserPageQuery) => {
@@ -39,9 +40,6 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 		return await api.exportData(query);
 	};
 
-	//权限判定
-	const hasPermissions: any = inject('$hasPermissions');
-
 	return {
 		crudOptions: {
 			table: {
@@ -58,12 +56,12 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 			actionbar: {
 				buttons: {
 					add: {
-						show: hasPermissions('user:Create'),
+						show: auth('user:Create')
-						// show:true
 					},
 					export: {
 						text: '导出', //按钮文字
 						title: '导出', //鼠标停留显示的信息
+						show: auth('user:Export'),
 						click() {
 							return exportRequest(crudExpose!.getSearchFormData());
 						},
@@ -89,15 +87,15 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 						show: false,
 					},
 					edit: {
-						show: hasPermissions('user:Update'),
+						show: auth('user:Update'),
 					},
 					remove: {
-						show: hasPermissions('user:Delete'),
+						show: auth('user:Delete'),
 					},
 					custom: {
 						text: '重设密码',
 						type: 'primary',
-						show: hasPermissions('user:ResetPassword'),
+						show: auth('user:ResetPassword'),
 						tooltip: {
 							placement: 'top',
 							content: '重设密码',

web/src/views/system/dept/components/DeptUserCom/index.vue

@@ -40,7 +40,7 @@
 			<el-button :icon="!showCount ? 'Hide' : 'View'" circle @click="showCount = !showCount"></el-button>
 		</template>
 		<template #actionbar-right>
-			<importExcel api="api/system/user/">导入 </importExcel>
+			<importExcel api="api/system/user/" v-auth="'user:Import'">导入 </importExcel>
 		</template>
 	</fs-crud>
 

web/src/views/system/dictionary/crud.tsx

@@ -3,7 +3,7 @@ import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOption
 import { dictionary } from '/@/utils/dictionary';
 import { inject, nextTick, ref } from 'vue';
 import { successMessage } from '/@/utils/message';
-
+import {auth} from '/@/utils/authFunction';
 export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
 	const pageRequest = async (query: UserPageQuery) => {
 		return await api.GetList(query);
@@ -19,8 +19,6 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 		return await api.AddObj(form);
 	};
 
-	//权限判定
-	const hasPermissions = inject('$hasPermissions');
 
 	return {
 		crudOptions: {
@@ -40,17 +38,17 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 					edit: {
 						iconRight: 'Edit',
 						type: 'text',
-						show: hasPermissions('dictionary:Update'),
+						show: auth('dictionary:Update'),
 					},
 					remove: {
 						iconRight: 'Delete',
 						type: 'text',
-						show: hasPermissions('dictionary:Delete'),
+						show: auth('dictionary:Delete'),
 					},
 					custom: {
 						text: '字典配置',
 						type: 'text',
-						show: hasPermissions('dictionary:Update'),
+						show: auth('dictionary:Update'),
 						tooltip: {
 							placement: 'top',
 							content: '字典配置',

web/src/views/system/dictionary/subDict/index.vue

@@ -1,8 +1,8 @@
 <template>
 	<el-drawer size="70%" v-model="drawer" direction="rtl" destroy-on-close :before-close="handleClose">
-		<fs-page>
+		<div>
       <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
-		</fs-page>
+    </div>
 	</el-drawer>
 </template>
 

web/src/views/system/fileList/crud.tsx

@@ -34,6 +34,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 				//固定右侧
 				fixed: 'right',
 				width: 200,
+				show:false,
 				buttons: {
 					view: {
 						show: false,

web/src/views/system/menu/components/MenuButtonCom/crud.tsx

@@ -1,27 +1,30 @@
-import { AddReq, DelReq, EditReq, dict, CreateCrudOptionsRet, CreateCrudOptionsProps } from '@fast-crud/fast-crud';
+import {AddReq, DelReq, EditReq, dict, CreateCrudOptionsRet, CreateCrudOptionsProps} from '@fast-crud/fast-crud';
 import * as api from './api';
-
+import {auth} from '/@/utils/authFunction'
-import { request } from '/@/utils/service';
+import {request} from '/@/utils/service';
 //此处为crudOptions配置
-export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
     const pageRequest = async () => {
         if (context!.selectOptions.value.id) {
-			return await api.GetList({ menu: context!.selectOptions.value.id } as any);
+            return await api.GetList({menu: context!.selectOptions.value.id} as any);
         } else {
             return undefined;
         }
     };
-	const editRequest = async ({ form, row }: EditReq) => {
+    const editRequest = async ({form, row}: EditReq) => {
-		return await api.UpdateObj({ ...form, menu: row.menu });
+        return await api.UpdateObj({...form, menu: row.menu});
     };
-	const delRequest = async ({ row }: DelReq) => {
+    const delRequest = async ({row}: DelReq) => {
         return await api.DelObj(row.id);
     };
-	const addRequest = async ({ form }: AddReq) => {
+    const addRequest = async ({form}: AddReq) => {
-		return await api.AddObj({ ...form, ...{ menu: context!.selectOptions.value.id } });
+        return await api.AddObj({...form, ...{menu: context!.selectOptions.value.id}});
     };
     return {
         crudOptions: {
+            pagination:{
+                show:false
+            },
             search: {
                 container: {
                     action: {
@@ -32,6 +35,13 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
                     },
                 },
             },
+            actionbar: {
+                buttons: {
+                    add: {
+                        show: auth('btn:Create')
+                    },
+                },
+            },
             rowHandle: {
                 //固定右侧
                 fixed: 'right',
@@ -43,10 +53,10 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
                     edit: {
                         icon: '',
                         type: 'primary',
+                        show: auth('btn:Update')
                     },
                     remove: {
-						icon: '',
+                        show: auth('btn:Delete')
-						type: 'primary',
                     },
                 },
             },
@@ -57,7 +67,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
                 delRequest,
             },
             form: {
-				col: { span: 24 },
+                col: {span: 24},
                 labelWidth: '100px',
                 wrapper: {
                     is: 'el-dialog',
@@ -67,7 +77,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
             columns: {
                 _index: {
                     title: '序号',
-					form: { show: false },
+                    form: {show: false},
                     column: {
                         type: 'index',
                         align: 'center',
@@ -77,9 +87,9 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
                 },
                 search: {
                     title: '关键词',
-					column: { show: false },
+                    column: {show: false},
                     type: 'text',
-					search: { show: true },
+                    search: {show: true},
                     form: {
                         show: false,
                         component: {
@@ -90,20 +100,20 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
                 id: {
                     title: 'ID',
                     type: 'text',
-					column: { show: false },
+                    column: {show: false},
-					search: { show: false },
+                    search: {show: false},
-					form: { show: false },
+                    form: {show: false},
                 },
                 name: {
                     title: '权限名称',
                     type: 'text',
-					search: { show: true },
+                    search: {show: true},
                     column: {
                         minWidth: 120,
                         sortable: true,
                     },
                     form: {
-						rules: [{ required: true, message: '权限名称必填' }],
+                        rules: [{required: true, message: '权限名称必填'}],
                         component: {
                             placeholder: '输入权限名称搜索',
                             props: {
@@ -114,7 +124,8 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
                         },
                         helper: {
                             render() {
-								return <el-alert title="手动输入" type="warning" description="页面中按钮的名称或者自定义一个名称" />;
+                                return <el-alert title="手动输入" type="warning"
+                                                 description="页面中按钮的名称或者自定义一个名称"/>;
                             },
                         },
                     },
@@ -122,24 +133,25 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
                 value: {
                     title: '权限值',
                     type: 'text',
-					search: { show: false },
+                    search: {show: false},
                     column: {
                         width: 200,
                         sortable: true,
                     },
                     form: {
-						rules: [{ required: true, message: '权限标识必填' }],
+                        rules: [{required: true, message: '权限标识必填'}],
                         placeholder: '输入权限标识',
                         helper: {
                             render() {
-								return <el-alert title="唯一值" type="warning" description="用于判断前端按钮权限或接口权限" />;
+                                return <el-alert title="唯一值" type="warning"
+                                                 description="用于判断前端按钮权限或接口权限"/>;
                             },
                         },
                     },
                 },
                 method: {
                     title: '请求方式',
-					search: { show: false },
+                    search: {show: false},
                     type: 'dict-select',
                     column: {
                         width: 120,
@@ -147,23 +159,23 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
                     },
                     dict: dict({
                         data: [
-							{ label: 'GET', value: 0 },
+                            {label: 'GET', value: 0},
-							{ label: 'POST', value: 1, color: 'success' },
+                            {label: 'POST', value: 1, color: 'success'},
-							{ label: 'PUT', value: 2, color: 'warning' },
+                            {label: 'PUT', value: 2, color: 'warning'},
-							{ label: 'DELETE', value: 3, color: 'danger' },
+                            {label: 'DELETE', value: 3, color: 'danger'},
                         ],
                     }),
                     form: {
-						rules: [{ required: true, message: '必填项' }],
+                        rules: [{required: true, message: '必填项'}],
                     },
                 },
                 api: {
                     title: '接口地址',
-					search: { show: false },
+                    search: {show: false},
                     type: 'dict-select',
                     dict: dict({
                         getData() {
-							return request({ url: '/swagger.json' }).then((res: any) => {
+                            return request({url: '/swagger.json'}).then((res: any) => {
                                 const ret = Object.keys(res.paths);
                                 const data = [];
                                 for (const item of ret) {
@@ -181,7 +193,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
                         sortable: true,
                     },
                     form: {
-						rules: [{ required: true, message: '必填项' }],
+                        rules: [{required: true, message: '必填项'}],
                         component: {
                             props: {
                                 allowCreate: true,
@@ -191,7 +203,8 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
                         },
                         helper: {
                             render() {
-								return <el-alert title="请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/" type="warning" />;
+                                return <el-alert title="请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/"
+                                                 type="warning"/>;
                             },
                         },
                     },

web/src/views/system/menu/components/MenuFieldCom/crud.tsx

@@ -2,8 +2,8 @@ import * as api from './api';
 import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
 import { request } from '/@/utils/service';
 import { dictionary } from '/@/utils/dictionary';
-
 import { inject } from 'vue';
+import {auth} from "/@/utils/authFunction";
 
 
 
@@ -28,11 +28,6 @@ export const createCrudOptions = function ({ crudExpose, props,modelDialog,selec
 		return await api.AddObj(form);
 	};
 
-
-
-	//权限判定
-	const hasPermissions = inject('$hasPermissions');
-
 	return {
 		crudOptions: {
 			request: {
@@ -46,9 +41,13 @@ export const createCrudOptions = function ({ crudExpose, props,modelDialog,selec
 			},
 			actionbar: {
 				buttons: {
+					add:{
+						show:auth('column:Create')
+					},
 					auto: {
 						text: '自动匹配',
 						type: 'success',
+						show:auth('column:Match'),
 						click: () => {
 							return modelDialog.value=true;
 						},
@@ -58,6 +57,17 @@ export const createCrudOptions = function ({ crudExpose, props,modelDialog,selec
 			rowHandle: {
 				//固定右侧
 				fixed: 'right',
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						show: auth('column:Update')
+					},
+					remove: {
+						show: auth('column:Delete')
+					},
+				},
 			},
 			form: {
 				col: { span: 24 },

web/src/views/system/menu/components/MenuTreeCom/index.vue

@@ -41,31 +41,31 @@
 
 		<div class="mtc-tags">
 			<el-tooltip effect="dark" content="新增">
-				<el-icon size="16" @click="handleUpdateMenu('create')" class="mtc-tags-icon">
+				<el-icon size="16" v-auth="'menu:Create'" @click="handleUpdateMenu('create')" class="mtc-tags-icon">
 					<Plus />
 				</el-icon>
 			</el-tooltip>
 
 			<el-tooltip effect="dark" content="编辑">
-				<el-icon size="16" @click="handleUpdateMenu('update')" class="mtc-tags-icon">
+				<el-icon size="16" v-auth="'menu:Update'" @click="handleUpdateMenu('update')" class="mtc-tags-icon">
 					<Edit />
 				</el-icon>
 			</el-tooltip>
 
 			<el-tooltip effect="dark" content="上移">
-				<el-icon size="16" @click="handleSort('up')" class="mtc-tags-icon">
+				<el-icon size="16" v-auth="'menu:MoveUp'" @click="handleSort('up')" class="mtc-tags-icon">
 					<Top />
 				</el-icon>
 			</el-tooltip>
 
 			<el-tooltip effect="dark" content="下移">
-				<el-icon size="16" @click="handleSort('down')" class="mtc-tags-icon">
+				<el-icon size="16" v-auth="'menu:MoveDown'" @click="handleSort('down')" class="mtc-tags-icon">
 					<Bottom />
 				</el-icon>
 			</el-tooltip>
 
 			<el-tooltip effect="dark" content="删除">
-				<el-icon size="16" @click="handleDeleteMenu()" class="mtc-tags-icon">
+				<el-icon size="16" v-auth="'menu:Delete'" @click="handleDeleteMenu()" class="mtc-tags-icon">
 					<Delete />
 				</el-icon>
 			</el-tooltip>

web/src/views/system/messageCenter/crud.tsx

@@ -3,7 +3,7 @@ import { dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudO
 import tableSelector from '/@/components/tableSelector/index.vue';
 import {shallowRef, computed, ref, inject} from 'vue';
 import manyToMany from '/@/components/manyToMany/index.vue';
-
+import {auth} from '/@/utils/authFunction'
 const { compute } = useCompute();
 
 interface CreateCrudOptionsTypes {
@@ -36,8 +36,6 @@ export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudEx
 		return tabActivted.value === 'receive';
 	});
 
-	//权限判定
-	const hasPermissions = inject("$hasPermissions")
 
 	return {
 		crudOptions: {
@@ -51,7 +49,7 @@ export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudEx
 				buttons:{
 					add:{
 						show:computed(() =>{
-							return tabActivted.value !== 'receive'
+							return tabActivted.value !== 'receive' && auth('messageCenter:Create');
 						})
 					},
 				}
@@ -67,7 +65,7 @@ export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudEx
 						text:"查看",
 						type:'text',
 						iconRight:'View',
-						show:hasPermissions("messageCenter:Search"),
+						show:auth("messageCenter:Search"),
 						click({ index, row }) {
 							crudExpose.openView({ index, row });
 							if (tabActivted.value === 'receive') {
@@ -79,7 +77,7 @@ export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudEx
 					remove: {
 						iconRight: 'Delete',
 						type: 'text',
-						show:hasPermissions('messageCenter:Delete')
+						show:auth('messageCenter:Delete')
 					},
 				},
 			},

web/src/views/system/role/crud.tsx

@@ -3,7 +3,7 @@ import * as api from './api';
 import { dictionary } from '/@/utils/dictionary';
 import { columnPermission } from '../../../utils/columnPermission';
 import { successMessage } from '../../../utils/message';
-
+import {auth} from '/@/utils/authFunction'
 interface CreateCrudOptionsTypes {
 	output: any;
 	crudOptions: CrudOptions;
@@ -14,12 +14,10 @@ export const createCrudOptions = function ({
 	crudExpose,
 	rolePermission,
 	handleDrawerOpen,
-	hasPermissions,
 }: {
 	crudExpose: CrudExpose;
 	rolePermission: any;
 	handleDrawerOpen: Function;
-	hasPermissions: Function;
 }): CreateCrudOptionsTypes {
 	const pageRequest = async (query: any) => {
 		return await api.GetList(query);
@@ -50,7 +48,7 @@ export const createCrudOptions = function ({
 			actionbar: {
 				buttons: {
 					add: {
-						show: hasPermissions('role:Create')
+						show: auth('role:Create')
 					}
 				}
 			},
@@ -63,31 +61,15 @@ export const createCrudOptions = function ({
 						show: true,
 					},
 					edit: {
-						show: hasPermissions('role:Update'),
+						show: auth('role:Update'),
 					},
 					remove: {
-						show: hasPermissions('role:Delete'),
+						show: auth('role:Delete'),
 					},
-					/* custom: {
+					permission: {
 						type: 'primary',
 						text: '权限配置',
-						show: hasPermissions('role:Update'),
+						show: auth('role:Permission'),
-						tooltip: {
-							placement: 'top',
-							content: '权限配置',
-						},
-						click: (context: any): void => {
-							const { row } = context;
-							// eslint-disable-next-line no-mixed-spaces-and-tabs
-							rolePermission.value.drawer = true;
-							rolePermission.value.editedRoleInfo = row;
-							rolePermission.value.initGet();
-						},
-					}, */
-					customNew: {
-						type: 'primary',
-						text: '权限配置',
-						show: hasPermissions('role:Update'),
 						tooltip: {
 							placement: 'top',
 							content: '权限配置',
@@ -134,9 +116,9 @@ export const createCrudOptions = function ({
 						sortable: 'custom',
 						show: columnPermission('name', 'is_query'),
 					},
-					addForm: {
+					// addForm: {
-						show: columnPermission('name', 'is_create'),
+					// 	show: columnPermission('name', 'is_create'),
-					},
+					// },
 					editForm: {
 						show: columnPermission('name', 'is_update'),
 					},
@@ -177,7 +159,6 @@ export const createCrudOptions = function ({
 					column: {
 						minWidth: 90,
 						sortable: 'custom',
-						show: columnPermission('sort', 'is_query'),
 					},
 					addForm: {
 						show: columnPermission('sort', 'is_create'),

web/src/views/system/role/index.vue

@@ -13,13 +13,14 @@
 </template>
 
 <script lang="ts" setup name="role">
-import { ref, onMounted, inject } from 'vue';
+import {ref, onMounted, inject, onBeforeUpdate} from 'vue';
 import { useColumnPermission } from '/@/stores/columnPermission';
 import { GetPermission } from './api';
 import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
 import PermissionComNew from './components/PermissionComNew/index.vue';
-
+import _ from "lodash-es";
+import {columnPermission} from "/@/utils/columnPermission";
 let drawerVisible = ref(false);
 let roleId = ref(null);
 let roleName = ref(null);
@@ -30,11 +31,11 @@ const crudRef = ref();
 // crud 配置的ref
 const crudBinding = ref();
 
-const hasPermissions: any = inject('$hasPermissions');
 
 const fetchColumnPermission = async () => {
 	const res = await GetPermission();
 	useColumnPermission().setPermissionData(res.data);
+  console.log(3333,res)
 };
 
 const handleDrawerOpen = (row: any) => {
@@ -48,21 +49,51 @@ const handleDrawerClose = () => {
 };
 
 const { crudExpose } = useExpose({ crudRef, crudBinding });
+const handlecolumnPermission = async (crudOptions:any)=>{
+  const res = await GetPermission();
+  const columns = crudOptions.columns;
+  for(let col in columns){
+    for(let i in res.data){
+      if(res.data[i].field_name === col){
+        columns[col].column.show = i['is_query']
+        columns[col].addForm = {
+          show:i['is_create']
+        }
+        columns[col].editForm = {
+          show:i['is_update']
+        }
+        break;
+      }
+    }
+  }
+}
+
+// 你的crud配置
+const { crudOptions } = createCrudOptions({ crudExpose, rolePermission, handleDrawerOpen });
+
+
 
 // 页面打开后获取列表数据
-onMounted(async () => {
+onMounted( async () => {
-	await fetchColumnPermission();
 
-	// 你的crud配置
+  await handlecolumnPermission(crudOptions)
-	const { crudOptions } = createCrudOptions({ crudExpose, rolePermission, handleDrawerOpen, hasPermissions });
+  // //合并新的crudOptions
-
+  // const newOptions = _.merge(crudOptions, {
-	// 初始化crud配置
+  //   columns: {
+  //     text: {
+  //       title: "追加字段",
+  //       type: "text"
+  //     }
+  //   }
+  // });
+  //重置crudBinding
+  // resetCrudOptions(newOptions);
+// 初始化crud配置
   const { resetCrudOptions } = useCrud({
     crudExpose,
     crudOptions,
     context: {},
   });
-
 	crudExpose.doRefresh();
 });
 

web/src/views/system/rolePermission/api.ts

@@ -1,107 +0,0 @@
-import { request } from "/@/utils/service";
-
-/**
- * 获取角色所拥有的菜单
- * @param params
- */
-export function GetMenu(params:any) {
-    return request({
-        url: '/api/system/role_menu_button_permission/role_get_menu/',
-        method: 'get',
-        params:params
-    });
-}
-
-/***
- * 新增权限
- * @param data
- * @constructor
- */
-export function SaveMenuPermission(data:any) {
-    return request({
-        url: '/api/system/role_menu_permission/save_auth/',
-        method: 'post',
-        data:data
-    });
-}
-
-
-/**
- * 获取菜单下的按钮
- * @param params
- * @constructor
- */
-export function GetMenuButton(params:any) {
-    return request({
-        url: '/api/system/role_menu_button_permission/role_menu_get_button/',
-        method: 'get',
-        params:params
-    });
-}
-
-
-
-
-
-/***
- * 根据角色获取数据权限范围
- * @constructor
- */
-export function GetDataScope (params:any={}) {
-    return request({
-        url: '/api/system/role_menu_button_permission/data_scope/',
-        method: 'get',
-        params: params
-    })
-}
-
-/***
- * 获取权限部门
- * @constructor
- */
-export function GetDataScopeDept (params:any) {
-    return request({
-        url: '/api/system/role_menu_button_permission/role_to_dept_all/',
-        method: 'get',
-        params: params
-    })
-}
-
-/***
- * 新增权限
- * @param data
- * @constructor
- */
-export function CreatePermission(data:any) {
-    return request({
-        url: '/api/system/role_menu_button_permission/',
-        method: 'post',
-        data:data
-    });
-}
-
-/***
- * 根据菜单获取菜单下按钮
- * @param params
- */
-export function getObj(params:any) {
-    return request({
-        url: '/api/system/role_menu_button_permission/menu_to_button/',
-        method: 'get',
-        params:params
-    });
-}
-
-/**
- * 删除按钮权限
- * @param data
- * @constructor
- */
-export function DeletePermission(data:any) {
-    return request({
-        url: `/api/system/role_menu_button_permission/${data.id}/`,
-        method: 'delete',
-        data:{}
-    });
-}
-

web/src/views/system/rolePermission/index.vue

@@ -1,432 +0,0 @@
-<template>
-    <el-drawer
-        size="70%"
-        v-model="drawer"
-        direction="rtl"
-        destroy-on-close
-        :before-close="handleClose"
-    >
-        <template #header>
-            <div>
-                <el-tag size="large" type="primary">当前角色:{{ editedRoleInfo.name }}</el-tag>
-            </div>
-        </template>
-        <div style="padding: 1em">
-            <el-row :gutter="10">
-                <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
-                    <el-card header="菜单页面授权">
-                        <template #header>
-                            <div class="card-header">
-                                <el-tooltip effect="dark" content="点击菜单项,可对菜单下的按钮/接口授权"
-                                            placement="right">
-                                    <div>
-                                        <span>菜单页面</span>
-                                        <el-icon>
-                                            <QuestionFilled/>
-                                        </el-icon>
-                                    </div>
-                                </el-tooltip>
-                                <el-button size="mini" type="primary" @click="onSaveAuth">保存菜单授权</el-button>
-                            </div>
-                        </template>
-                        <el-tree :data="menuData"
-                                 ref="menuTree"
-                                 show-checkbox
-                                 node-key="id"
-                                 highlight-current
-                                 :expand-on-click-node="false"
-                                 :check-on-click-node="true"
-                                 :props="defaultProps"
-                                 @node-click="menuNodeClick"
-                        />
-                    </el-card>
-                </el-col>
-                <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="18">
-                    <!--          <el-alert title="对页面菜单下按钮授权"  description="新增或删除对菜单下的按钮/接口授权" type="warning" />-->
-                    <el-card v-if="isBtnPermissionShow">
-                        <template #header>
-                            <div class="card-header">
-                                <el-tooltip effect="dark" content="新增或删除对菜单下的按钮/接口授权" placement="right">
-                                    <div>
-                                        <span>按钮/接口授权</span>
-                                        <el-icon>
-                                            <QuestionFilled/>
-                                        </el-icon>
-                                    </div>
-                                </el-tooltip>
-                            </div>
-                        </template>
-                        <div>
-                            <el-divider content-position="left">{{ editedMenuInfo.name }}</el-divider>
-                            <el-button type="primary" size="small" style="margin-bottom: 0.5em"
-                                       @click="createBtnPermission">新增
-                            </el-button>
-                            <el-table size="small" :data="buttonPermissionData" border style="width: 100%">
-                                <el-table-column prop="menu_button" label="权限名称" width="100">
-                                    <template #default="scope">
-                                        <div>{{ formatMenuBtn(scope.row.menu_button) }}</div>
-                                    </template>
-                                </el-table-column>
-                                <el-table-column prop="data_range" label="权限范围" width="140">
-                                    <template #default="scope">
-                                        <div>{{ formatDataRange(scope.row.data_range) }}</div>
-                                    </template>
-                                </el-table-column>
-                                <el-table-column prop="dept" label="权限涉及部门"/>
-                                <el-table-column fixed="right" label="操作" width="120">
-                                    <template #default="scope">
-                                        <el-button type="danger" size="small" @click="onDeleteBtn(scope)">删除
-                                        </el-button>
-                                    </template>
-                                </el-table-column>
-                            </el-table>
-                        </div>
-
-
-                        <!--          <el-divider content-position="left">字段授权</el-divider>-->
-                        <!--          <el-table size="small" :data="crudPermissionData" border style="width: 100%">-->
-                        <!--            <el-table-column prop="field" label="字段"></el-table-column>-->
-                        <!--            <el-table-column prop="table" label="列表显示">-->
-                        <!--              <template #default="scope">-->
-                        <!--                <div>-->
-                        <!--                  <el-switch size="mini" v-model="scope.row.table"/>-->
-                        <!--                </div>-->
-                        <!--              </template>-->
-                        <!--            </el-table-column>-->
-                        <!--            <el-table-column prop="view" label="表单查看">-->
-                        <!--              <template #default="scope">-->
-                        <!--                <div>-->
-                        <!--                  <el-switch size="mini" v-model="scope.row.view"/>-->
-                        <!--                </div>-->
-                        <!--              </template>-->
-                        <!--            </el-table-column>-->
-                        <!--            <el-table-column prop="edit" label="表单编辑">-->
-                        <!--              <template #default="scope">-->
-                        <!--                <div>-->
-                        <!--                  <el-switch size="mini" v-model="scope.row.edit"/>-->
-                        <!--                </div>-->
-                        <!--              </template>-->
-                        <!--            </el-table-column>-->
-                        <!--          </el-table>-->
-                    </el-card>
-                </el-col>
-            </el-row>
-            <el-dialog v-model="dialogFormVisible" width="400px" title="配置按钮权限">
-                <el-form ref="buttonFormRef" :model="buttonForm" :rules="buttonRules" label-width="120px">
-                    <el-form-item label="按钮" prop="menu_button">
-                        <el-select v-model="buttonForm.menu_button" placeholder="请选择按钮" @change="onChangeButton">
-                            <el-option v-for="(item,index) in buttonOptions" :key="index" :label="item.name"
-                                       :value="item.id"/>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="权限范围" prop="data_range">
-                        <el-select v-model="buttonForm.data_range" placeholder="请选择按钮">
-                            <el-option v-for="(item,index) in dataScopeOptions" :key="index" :label="item.label"
-                                       :value="item.value"/>
-                        </el-select>
-                    </el-form-item>
-                    <el-form-item label="数据部门" prop="dept" v-show="buttonForm.data_range === 4">
-                        <div class="dept-tree">
-                            <el-tree
-                                :data="deptOptions"
-                                show-checkbox
-                                default-expand-all
-                                :default-checked-keys="deptCheckedKeys"
-                                ref="deptTree"
-                                node-key="id"
-                                :check-strictly="true"
-                                :props="{ label: 'name' }"
-                            ></el-tree>
-                        </div>
-                    </el-form-item>
-                </el-form>
-                <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="dialogFormVisible = false">取消</el-button>
-        <el-button type="primary" @click="onSaveButtonForm">
-          确定
-        </el-button>
-      </span>
-                </template>
-            </el-dialog>
-        </div>
-    </el-drawer>
-</template>
-
-<script lang="ts" setup name="rolePermission">
-import {ref, defineExpose, reactive, toRefs} from 'vue'
-import {ElMessageBox} from 'element-plus'
-import * as api from './api'
-import type {FormRules, FormInstance} from 'element-plus'
-import {ElMessage} from 'element-plus'
-import XEUtils from 'xe-utils'
-//抽屉是否显示
-const drawer = ref(false)
-//当前编辑的角色信息
-const editedRoleInfo = ref({})
-
-//抽屉关闭确认
-const handleClose = (done: () => void) => {
-    ElMessageBox.confirm('您确定要关闭?', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-    })
-        .then(() => {
-            done()
-        })
-        .catch(() => {
-            // catch error
-        })
-}
-
-/*****菜单的配置项***/
-const defaultProps = {
-    children: 'children',
-    label: 'name',
-    isLeaf: 'hasChild'
-}
-
-interface Tree {
-    name: string
-    children?: Tree[],
-    id: number
-}
-
-let menuData = ref<Tree>()
-//获取菜单
-const getMenuData = () => {
-    api.GetMenu({}).then((res: any) => {
-        const {data} = res
-        const list = XEUtils.toArrayTree(data, {parentKey: "parent", key:'menu_id',strict: true})
-        menuData.value = list
-    })
-}
-
-let isBtnPermissionShow = ref(false)
-let buttonOptions = ref<[]>()
-let editedMenuInfo = ref()
-//菜单节点点击事件
-const menuNodeClick = (node: any, obj: any) => {
-    isBtnPermissionShow.value = !node.is_catalog
-    if (!node.is_catalog) {
-        buttonOptions.value = []
-        editedMenuInfo.value = node
-        api.GetMenuButton({menu: node.menu_id}).then((res: any) => {
-            const {data} = res
-            buttonOptions.value = data
-        })
-        api.getObj({menu: node.menu_id, role: editedRoleInfo.value.id}).then((res: any) => {
-            const {data} = res
-            buttonPermissionData.value = data
-        })
-    }
-
-}
-const menuTree = ref()
-/*****菜单的配置项***/
-/***按钮授权的弹窗****/
-//是否显示新增表单
-const dialogFormVisible = ref(false)
-//部门树
-const deptTree = ref()
-//自定义部门数据
-const deptOptions = ref()
-//选中的部门数据
-const deptCheckedKeys = []
-//按钮表单
-const buttonForm = reactive({
-    menu_button: null,
-    role: null,
-    menu: null,
-    data_range: null,
-    dept: []
-})
-//按钮表格数据
-let buttonPermissionData = ref([])
-//按钮表单验证
-const buttonRules = reactive<FormRules>({
-    menu_button: [
-        {required: true, message: '必填项'}
-    ],
-    data_range: [
-        {required: true, message: '必填项'}
-    ]
-})
-//新增按钮
-const buttonFormRef = ref<FormInstance>()
-const createBtnPermission = () => {
-    dialogFormVisible.value = true
-    buttonForm.menu_button = null
-    buttonForm.menu = null
-    buttonForm.role = null
-    buttonForm.data_range = null
-    buttonForm.dept = []
-}
-//权限范围数据
-const dataScopeOptions = ref<[]>()
-//按钮值变化事件
-const onChangeButton = (val: any) => {
-    dataScopeOptions.value = []
-    //获取权限值范围
-    api.GetDataScope({menu_button: val}).then((res: any) => {
-        dataScopeOptions.value = res.data
-    })
-    //获取权限部门值
-    api.GetDataScopeDept({menu_button: val}).then((res: any) => {
-        deptOptions.value = XEUtils.toArrayTree(res.data, {parentKey: 'parent', strict: false})
-    })
-
-}
-//过滤按钮名称
-const formatMenuBtn = (val: any) => {
-    let obj: any = buttonOptions.value?.find((item: any) => {
-        return item.id === val
-    })
-    return obj ? obj.name : null
-}
-//过滤权限范围
-const formatDataRange = (val: any) => {
-    let obj: any = [
-        {
-            "value": 0,
-            "label": '仅本人数据权限'
-        },
-        {
-            "value": 1,
-            "label": '本部门及以下数据权限'
-        },
-        {
-            "value": 2,
-            "label": '本部门数据权限'
-        },
-        {
-            "value": 3,
-            "label": '全部数据权限'
-        },
-        {
-            "value": 4,
-            "label": '自定义数据权限'
-        }
-    ].find((item: any) => {
-        return item.value === val
-    })
-    return obj ? obj.label : null
-}
-//保存按钮表单
-
-const onSaveButtonForm = async () => {
-    const {id: roleId} = editedRoleInfo.value
-    const {id: menuId} = editedMenuInfo.value
-    const form: any = Object.assign({}, buttonForm)
-    form.role = roleId
-    form.menu = menuId
-    //选中的部门
-    const checkedList = deptTree.value.getCheckedKeys()
-    form.dept = checkedList
-    if (!buttonFormRef.value) return
-    await buttonFormRef.value.validate((valid, fields) => {
-        if (valid) {
-            api.CreatePermission(form).then((res: any) => {
-                const {data} = res
-                buttonPermissionData.value.push(data)
-                dialogFormVisible.value = false
-                ElMessage({
-                    type: 'success',
-                    message: res.msg,
-                })
-            })
-        } else {
-            ElMessage({
-                type: 'error',
-                title: '提交错误',
-                message: 'F12控制台看详情',
-            })
-            console.log('提交错误', fields)
-        }
-    })
-
-}
-//删除按钮权限
-const onDeleteBtn = (scope: any) => {
-    const {row, $index} = scope
-    ElMessageBox.confirm(
-        '您是否要删除数据?',
-        '温馨提示',
-        {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning',
-        }
-    ).then(() => {
-        api.DeletePermission({id: row.id}).then((res: any) => {
-            buttonPermissionData.value.splice($index, 1)
-            ElMessage({
-                type: 'success',
-                message: res.msg,
-            })
-        })
-    })
-        .catch(() => {
-            ElMessage({
-                type: 'info',
-                message: '取消删除',
-            })
-        })
-
-}
-/***按钮授权的弹窗****/
-//初始化数据
-const initGet = () => {
-    getMenuData()
-}
-
-/**
- * 保存授权
- */
-const onSaveAuth = () => {
-    //选中的菜单
-    const checkedList = menuTree.value.getCheckedKeys()
-    //半选中的菜单
-    const halfCheckedList = menuTree.value.getHalfCheckedKeys()
-    //合并的菜单数据
-    const menuIdList = [...checkedList, ...halfCheckedList]
-    // console.log(menuIdList)
-    const {id: roleId} = editedRoleInfo.value
-    const data = {
-        role: roleId,
-        menu: menuIdList
-    }
-    api.SaveMenuPermission(data).then((res: any) => {
-        ElMessage({
-            message: res.msg,
-            type: 'success',
-        })
-    })
-}
-
-
-defineExpose({drawer, editedRoleInfo, initGet})
-</script>
-
-<style scoped>
-.card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.dept-tree::-webkit-scrollbar {
-    display: none; /* Chrome Safari */
-}
-
-.dept-tree {
-    height: 160px;
-    overflow-y: scroll;
-    scrollbar-width: none; /* firefox */
-    -ms-overflow-style: none; /* IE 10+ */
-    border: 1px solid #e1e1e1;
-    width: 16em;
-    border-radius: 2px;
-}
-</style>

web/src/views/system/user/crud.tsx

@@ -3,7 +3,7 @@ import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOption
 import { request } from '/@/utils/service';
 import { dictionary } from '/@/utils/dictionary';
 import { successMessage } from '/@/utils/message';
-import { inject } from 'vue';
+import { auth } from '/@/utils/authFunction';
 
 export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
 	const pageRequest = async (query: UserPageQuery) => {
@@ -24,8 +24,6 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 		return await api.exportData(query)
 	}
 
-	//权限判定
-	const hasPermissions:any = inject('$hasPermissions');
 
 	return {
 		crudOptions: {
@@ -43,7 +41,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 			actionbar: {
 				buttons: {
 					add: {
-						show: hasPermissions('user:Create')
+						show: auth('user:Create')
 					},
 					export:{
 						text:"导出",//按钮文字
@@ -65,17 +63,17 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
 					edit: {
 						iconRight: 'Edit',
 						type: 'text',
-						show: hasPermissions('user:Update'),
+						show: auth('user:Update'),
 					},
 					remove: {
 						iconRight: 'Delete',
 						type: 'text',
-						show: hasPermissions('user:Delete'),
+						show: auth('user:Delete'),
 					},
                     custom: {
 						text: '重设密码',
 						type: 'text',
-						show: hasPermissions('user:ResetPassword'),
+						show: auth('user:ResetPassword'),
 						tooltip: {
 							placement: 'top',
 							content: '重设密码',

web/src/views/system/whiteList/crud.tsx

@@ -1,27 +1,34 @@
 import * as api from './api';
-import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
+import {
-import { request } from '/@/utils/service';
+    dict,
-import { dictionary } from '/@/utils/dictionary';
+    UserPageQuery,
-import { successMessage } from '/@/utils/message';
+    AddReq,
-import {inject} from "vue";
+    DelReq,
+    EditReq,
+    compute,
+    CreateCrudOptionsProps,
+    CreateCrudOptionsRet
+} from '@fast-crud/fast-crud';
+import {request} from '/@/utils/service';
+import {dictionary} from '/@/utils/dictionary';
+import {successMessage} from '/@/utils/message';
+import {auth} from '/@/utils/authFunction'
 
-export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps): CreateCrudOptionsRet {
     const pageRequest = async (query: UserPageQuery) => {
         return await api.GetList(query);
     };
-	const editRequest = async ({ form, row }: EditReq) => {
+    const editRequest = async ({form, row}: EditReq) => {
         form.id = row.id;
         return await api.UpdateObj(form);
     };
-	const delRequest = async ({ row }: DelReq) => {
+    const delRequest = async ({row}: DelReq) => {
         return await api.DelObj(row.id);
     };
-	const addRequest = async ({ form }: AddReq) => {
+    const addRequest = async ({form}: AddReq) => {
         return await api.AddObj(form);
     };
 
-	//权限判定
-	const hasPermissions = inject("$hasPermissions")
 
     return {
         crudOptions: {
@@ -31,6 +38,13 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                 editRequest,
                 delRequest,
             },
+            actionbar: {
+                buttons: {
+                    add: {
+                        show: auth('api_white_list:Create')
+                    }
+                }
+            },
             rowHandle: {
                 //固定右侧
                 fixed: 'right',
@@ -42,17 +56,17 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                     edit: {
                         iconRight: 'Edit',
                         type: 'text',
-						show:hasPermissions("api_white_list:Update")
+                        show: auth("api_white_list:Update")
                     },
                     remove: {
                         iconRight: 'Delete',
                         type: 'text',
-						show:hasPermissions("api_white_list:Delete")
+                        show: auth("api_white_list:Delete")
                     },
                 },
             },
             form: {
-				col: { span: 24 },
+                col: {span: 24},
                 labelWidth: '110px',
                 wrapper: {
                     is: 'el-dialog',
@@ -62,7 +76,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
             columns: {
                 _index: {
                     title: '序号',
-					form: { show: false },
+                    form: {show: false},
                     column: {
                         //type: 'index',
                         align: 'center',
@@ -131,7 +145,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                             },
                         ],
                     }),
-					column:{
+                    column: {
                         minWidth: 120,
                     },
                     form: {
@@ -146,7 +160,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                             span: 12,
                         },
                         itemProps: {
-							class: { yxtInput: true },
+                            class: {yxtInput: true},
                         },
                     },
                 },
@@ -163,7 +177,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                                 const res = Object.keys(ret.paths);
                                 const data = [];
                                 for (const item of res) {
-									const obj = { label: '', value: '' };
+                                    const obj = {label: '', value: ''};
                                     obj.label = item;
                                     obj.value = item;
                                     data.push(obj);
@@ -172,7 +186,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                             });
                         },
                     }),
-					column:{
+                    column: {
                         minWidth: 200,
                     },
                     form: {
@@ -194,7 +208,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                             },
                         },
                         itemProps: {
-							class: { yxtInput: true },
+                            class: {yxtInput: true},
                         },
                         helper: {
                             position: 'label',
@@ -212,7 +226,7 @@ export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProp
                     },
                     type: 'dict-radio',
                     column: {
-						minWidth:120,
+                        minWidth: 120,
                         component: {
                             name: 'fs-dict-switch',
                             activeText: '',