From 26f21302304bd7b22395528284697c0a436a98e2 Mon Sep 17 00:00:00 2001
From: Sheng <sheng@ShengMacBook-Pro.local>
Date: Fri, 28 Oct 2022 17:47:05 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=92=E8=89=B2=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/views/system/apiWhiteList/curd.tsx |  5 ++--
 web/src/views/system/role/curd.tsx         | 17 ++++++++++++--
 web/src/views/system/role/index.vue        | 27 +++++++++++++++++++---
 web/vite.config.ts                         |  4 ++--
 4 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/web/src/views/system/apiWhiteList/curd.tsx b/web/src/views/system/apiWhiteList/curd.tsx
index 87d8757..8b28bbe 100644
--- a/web/src/views/system/apiWhiteList/curd.tsx
+++ b/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: {
diff --git a/web/src/views/system/role/curd.tsx b/web/src/views/system/role/curd.tsx
index f9ae970..3574471 100644
--- a/web/src/views/system/role/curd.tsx
+++ b/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: '权限标识必填' }],
-						placeholder: '输入权限标识',
+						component: {
+							placeholder: '输入权限标识',
+						}
 					},
 				},
 				sort: {
diff --git a/web/src/views/system/role/index.vue b/web/src/views/system/role/index.vue
index d2ff9e0..0b88116 100644
--- a/web/src/views/system/role/index.vue
+++ b/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();
diff --git a/web/vite.config.ts b/web/vite.config.ts
index ae111a2..3cf3d48 100644
--- a/web/vite.config.ts
+++ b/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);
 };
@@ -14,7 +14,7 @@ const alias: Record<string, string> = {
 const viteConfig = defineConfig((mode: ConfigEnv) => {
 	const env = loadEnv(mode.mode, process.cwd());
 	return {
-		plugins: [vue(),vueJsx() ],
+		plugins: [vue(), vueJsx()],
 		root: process.cwd(),
 		resolve: { alias },
 		base: mode.command === 'serve' ? './' : env.VITE_PUBLIC_PATH,