列权限添加

2023-09-11 12:02:29 +08:00
parent ad6ec5ca58
commit 94815f4b20
7 changed files with 121 additions and 30 deletions
--- a/web/.env
+++ b/web/.env
@@ -1,5 +1,5 @@
 # port 端口号
-VITE_PORT = 8085
+VITE_PORT = 8080

 # open 运行 npm run dev 时自动打开浏览器
 VITE_OPEN = false
--- a/web/src/stores/columnPermission.ts
+++ b/web/src/stores/columnPermission.ts
@@ -0,0 +1,20 @@
+import { defineStore } from 'pinia';
+
+export interface DataItemType {
+	field_name: string;
+	is_create: boolean;
+	is_query: boolean;
+	is_update: boolean;
+}
+
+export const useColumnPermission = defineStore('columnPermission', {
+	state: () => ({
+		permission: [] as DataItemType[],
+	}),
+
+	actions: {
+		setPermissionData(data: DataItemType[]) {
+			this.permission = data;
+		},
+	},
+});
--- a/web/src/utils/columnPermission.ts
+++ b/web/src/utils/columnPermission.ts
@@ -0,0 +1,9 @@
+import { useColumnPermission } from '/@/stores/columnPermission';
+
+type permissionType = 'is_create' | 'is_query' | 'is_update';
+
+export const columnPermission = (key: string, type: permissionType): boolean => {
+	const permissions = useColumnPermission().permission || [];
+
+	return !!permissions.some((i) => i.field_name === key && i[type]);
+};
--- a/web/src/views/system/role/api.ts
+++ b/web/src/views/system/role/api.ts
@@ -2,6 +2,14 @@ import { request } from '/@/utils/service';
 import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';

 export const apiPrefix = '/api/system/role/';
+
+export function GetPermission() {
+	return request({
+		url: apiPrefix + 'field_permission/',
+		method: 'get',
+	});
+}
+
 export function GetList(query: PageQuery) {
 	return request({
 		url: apiPrefix,
--- a/web/src/views/system/role/crud.tsx
+++ b/web/src/views/system/role/crud.tsx
@@ -1,9 +1,11 @@
 import { CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose, compute } from '@fast-crud/fast-crud';
 import * as api from './api';
 import { dictionary } from '/@/utils/dictionary';
+import { columnPermission } from '../../../utils/columnPermission';
 import { successMessage } from '../../../utils/message';
-import { inject } from 'vue';
+
 interface CreateCrudOptionsTypes {
+	output: any;
 	crudOptions: CrudOptions;
 }

@@ -12,10 +14,12 @@ 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);
@@ -32,7 +36,6 @@ export const createCrudOptions = function ({
 	};

 	//权限判定
-	const hasPermissions: any = inject('$hasPermissions');

 	// @ts-ignore
 	// @ts-ignore
@@ -58,7 +61,7 @@ export const createCrudOptions = function ({
 					remove: {
 						show: hasPermissions('role:Delete'),
 					},
-					custom: {
+					/* custom: {
 						type: 'primary',
 						text: '权限配置',
 						show: hasPermissions('role:Update'),
@@ -73,10 +76,10 @@ export const createCrudOptions = function ({
 							rolePermission.value.editedRoleInfo = row;
 							rolePermission.value.initGet();
 						},
-					},
+					}, */
 					customNew: {
 						type: 'primary',
-						text: '权限配置新',
+						text: '权限配置',
 						show: hasPermissions('role:Update'),
 						tooltip: {
 							placement: 'top',
@@ -122,6 +125,13 @@ export const createCrudOptions = function ({
 					column: {
 						minWidth: 120,
 						sortable: 'custom',
+						show: columnPermission('name', 'is_query'),
+					},
+					addForm: {
+						show: columnPermission('name', 'is_create'),
+					},
+					editForm: {
+						show: columnPermission('name', 'is_update'),
 					},
 					form: {
 						rules: [{ required: true, message: '角色名称必填' }],
@@ -135,12 +145,22 @@ export const createCrudOptions = function ({
 					type: 'text',
 					search: { show: false },
 					column: {
-						width: 120,
+						minWidth: 120,
 						sortable: 'custom',
+						show: columnPermission('key', 'is_query'),
+						columnSetDisabled: true,
+					},
+					addForm: {
+						show: columnPermission('key', 'is_create'),
+					},
+					editForm: {
+						show: columnPermission('key', 'is_update'),
 					},
 					form: {
 						rules: [{ required: true, message: '权限标识必填' }],
-						placeholder: '输入权限标识',
+						component: {
+							placeholder: '输入权限标识',
+						},
 					},
 				},
 				sort: {
@@ -148,8 +168,15 @@ export const createCrudOptions = function ({
 					search: { show: false },
 					type: 'number',
 					column: {
-						width: 90,
+						minWidth: 90,
 						sortable: 'custom',
+						show: columnPermission('sort', 'is_query'),
+					},
+					addForm: {
+						show: columnPermission('sort', 'is_create'),
+					},
+					editForm: {
+						show: columnPermission('sort', 'is_update'),
 					},
 					form: {
 						rules: [{ required: true, message: '排序必填' }],
@@ -175,8 +202,15 @@ export const createCrudOptions = function ({
 						],
 					}),
 					column: {
-						width: 130,
+						minWidth: 130,
 						sortable: 'custom',
+						show: columnPermission('admin', 'is_query'),
+					},
+					addForm: {
+						show: columnPermission('admin', 'is_create'),
+					},
+					editForm: {
+						show: columnPermission('admin', 'is_update'),
 					},
 					form: {
 						rules: [{ required: true, message: '是否管理员必填' }],
@@ -202,6 +236,13 @@ export const createCrudOptions = function ({
 								};
 							}),
 						},
+						show: columnPermission('status', 'is_query'),
+					},
+					addForm: {
+						show: columnPermission('status', 'is_create'),
+					},
+					editForm: {
+						show: columnPermission('status', 'is_update'),
 					},
 					dict: dict({
 						data: dictionary('button_status_bool'),
@@ -212,8 +253,9 @@ export const createCrudOptions = function ({
 					type: 'text',
 					search: { show: false },
 					column: {
-						width: 170,
+						minWidth: 170,
 						sortable: 'custom',
+						show: columnPermission('update_datetime', 'is_query'),
 					},
 					form: {
 						show: false,
@@ -228,7 +270,8 @@ export const createCrudOptions = function ({
 					search: { show: false },
 					column: {
 						sortable: 'custom',
-						width: 170,
+						minWidth: 170,
+						show: columnPermission('create_datetime', 'is_query'),
 					},
 					form: {
 						show: false,
--- a/web/src/views/system/role/index.vue
+++ b/web/src/views/system/role/index.vue
@@ -8,14 +8,14 @@

 		<permission ref="rolePermission"></permission>

-
-			<PermissionComNew  v-model:drawerVisible="drawerVisible" :roleId="roleId" :roleName="roleName"  @drawerClose="handleDrawerClose" />
-
+		<PermissionComNew v-model:drawerVisible="drawerVisible" :roleId="roleId" :roleName="roleName" @drawerClose="handleDrawerClose" />
 	</fs-page>
 </template>

 <script lang="ts" setup name="role">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, inject } from 'vue';
+import { useColumnPermission } from '/@/stores/columnPermission';
+import { GetPermission } from './api';
 import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
 import permission from './components/PermissionCom/index.vue';
@@ -30,12 +30,17 @@ const rolePermission = ref();
 const crudRef = ref();
 // crud 配置的ref
 const crudBinding = ref();
-// 暴露的方法
-const { crudExpose } = useExpose({ crudRef, crudBinding });

-const handleDrawerOpen = (row:any) => {
-  roleId.value = row.id
-  roleName.value = row.name
+const hasPermissions: any = inject('$hasPermissions');
+
+const fetchColumnPermission = async () => {
+	const res = await GetPermission();
+	useColumnPermission().setPermissionData(res.data);
+};
+
+const handleDrawerOpen = (row: any) => {
+	roleId.value = row.id;
+	roleName.value = row.name;
 	drawerVisible.value = true;
 };

@@ -43,18 +48,24 @@ const handleDrawerClose = () => {
 	drawerVisible.value = false;
 };

-// 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose, rolePermission, handleDrawerOpen });
+const { crudExpose } = useExpose({ crudRef, crudBinding });

-// 初始化crud配置
-const { resetCrudOptions } = useCrud({
-	crudExpose,
-	crudOptions,
-	context: {},
-});
 // 页面打开后获取列表数据
-onMounted(() => {
+onMounted(async () => {
+	await fetchColumnPermission();
+
+	// 你的crud配置
+	const { crudOptions } = createCrudOptions({ crudExpose, rolePermission, handleDrawerOpen, hasPermissions });
+
+	// 初始化crud配置
+	const { resetCrudOptions } = useCrud({
+		crudExpose,
+		crudOptions,
+		context: {},
+	});
+
 	crudExpose.doRefresh();
 });
+
 defineExpose(rolePermission);
 </script>