角色管理

web/src/views/system/apiWhiteList/curd.tsx

@@ -1,7 +1,6 @@
 import { CrudExpose, CrudOptions, AddReq, DelReq, EditReq, dict } from '@fast-crud/fast-crud';
 import _ from 'lodash-es';
-import {h} from 'vue';
-import {tabBarProps} from "element-plus";
+
 interface CreateCrudOptionsTypes {
 	crudOptions: CrudOptions;
 }
@@ -170,7 +169,7 @@ export const createCrudOptions = function ({crudExpose}: {crudExpose: CrudExpose
 						col: { span: 24 },
 						helper: {
 							render() {
-								return <el-tag>请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/</el-tag>
+								return <el-tag type="warning">请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/</el-tag>
 							},
 						},
 						component: {

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

@@ -73,7 +73,18 @@ export const createCrudOptions = function ({crudExpose}: {crudExpose: CrudExpose
 				delRequest,
 			},
 			rowHandle: {
-				buttons: {},
+				width: 330,
+				buttons: {
+					edit: {
+						size: 'default'
+					},
+					view: {
+						size: 'default'
+					},
+					remove: {
+						size: 'default'
+					}
+				},
 			},
 			form: {
 				col: { span: 24 },
@@ -144,7 +155,9 @@ export const createCrudOptions = function ({crudExpose}: {crudExpose: CrudExpose
 					},
 					form: {
 						rules: [{ required: true, message: '权限标识必填' }],
+						component: {
 							placeholder: '输入权限标识',
+						}
 					},
 				},
 				sort: {

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

@@ -1,15 +1,26 @@
 <template>
 	<fs-page>
 		<fs-crud ref="crudRef" v-bind="crudBinding">
-			<template #cell_url="scope">
-				<el-tag size="small">{{ scope.row.url }}</el-tag>
+			<template #cell-rowHandle-right="scope">
+				<el-button class="row-handle-btn" type="warning" size="default" @click="handleOpenRoleDrawer(scope.row.id, scope.row.name)"
+					>权限管理</el-button
+				>
 			</template>
 		</fs-crud>
+		<el-drawer v-model="state.roleVisible" direction="rtl" destroy-on-close size="65%">
+			<template #header="{ close, titleId, titleClass }">
+				当前角色
+				<div>
+					<el-tag size="default">{{ state.roleDrawerTitle }}</el-tag>
+				</div>
+			</template>
+			<span>Hi, there!</span>
+		</el-drawer>
 	</fs-page>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import { useExpose, useCrud } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './curd';
 
@@ -26,6 +37,16 @@ const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
 // 你可以调用此方法，重新初始化crud配置
 // resetCrudOptions(options)
 
+const state = reactive({
+	roleVisible: false,
+	roleDrawerTitle: '',
+});
+
+const handleOpenRoleDrawer = (sign: string, title: string) => {
+	state.roleDrawerTitle = title;
+	state.roleVisible = true;
+};
+
 // 页面打开后获取列表数据
 onMounted(() => {
 	crudExpose.doRefresh();

web/vite.config.ts

@@ -1,7 +1,7 @@
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import { defineConfig, loadEnv, ConfigEnv } from 'vite';
-import vueJsx from '@vitejs/plugin-vue-jsx'
+import vueJsx from '@vitejs/plugin-vue-jsx';
 const pathResolve = (dir: string): any => {
 	return resolve(__dirname, '.', dir);
 };