refactor: ♻️ 重构菜单管理前端

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

@@ -1,17 +1,23 @@
-import { CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose } from '@fast-crud/fast-crud';
+import {
+	CrudOptions,
+	AddReq,
+	DelReq,
+	EditReq,
+	dict,
+	CrudExpose,
+	CreateCrudOptionsRet,
+	CreateCrudOptionsProps,
+	UserPageQuery,
+} from '@fast-crud/fast-crud';
 import _ from 'lodash-es';
 import * as api from './api';
-import { dictionary } from '/@/utils/dictionary';
-
-interface CreateCrudOptionsTypes {
-	crudOptions: CrudOptions;
-}
 
 import { request } from '/@/utils/service';
 //此处为crudOptions配置
-export const createCrudOptions = function ({ crudExpose, selectOptions }: { crudExpose: CrudExpose; selectOptions: any }): CreateCrudOptionsTypes {
-	const pageRequest = async (query: any) => {
-		return await api.GetList({ menu: selectOptions.value.id } as any);
+export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
+	const pageRequest = async (query: UserPageQuery) => {
+		console.log(context!.selectOptions);
+		return await api.GetList({ menu: context!.selectOptions.value.id } as any);
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
 		form.id = row.id;

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

@@ -1,83 +1,28 @@
 <template>
-	<el-drawer size="70%" v-model="menuButtonDrawer" direction="rtl" destroy-on-close :before-close="handleClose">
-		<template #header>
-			<div>
-				当前菜单:
-				<el-tag>{{ selectOptions.name }}</el-tag>
-			</div>
-		</template>
-		<div>
-			<fs-page style="margin-top: 60px">
-				<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
-			</fs-page>
-		</div>
-	</el-drawer>
+	<fs-page>
+		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+	</fs-page>
 </template>
 
 <script lang="ts" setup>
-import { ref, defineProps, defineEmits, watch, toRaw } from 'vue';
-import { useExpose, useCrud } from '@fast-crud/fast-crud';
-import { createCrudOptions } from './curd';
-import { ElMessageBox } from 'element-plus';
-// 弹窗是否显示
-let menuButtonDrawer = ref(false);
+import { ref, defineProps, watch } from 'vue';
+import { useFs } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud';
 // 当前选择的菜单信息
 let selectOptions: any = ref({ name: null });
 const props = defineProps<{
-	drawerShow: {
-		type: boolean;
-		default: false;
-	};
 	selectMenu: object;
 }>();
-const emit = defineEmits<{
-	(e: 'drawer-close', value: boolean): void;
-}>();
 
-// 侦听弹窗变量
-watch(
-	() => props.drawerShow,
-	(newVal) => {
-		menuButtonDrawer.value = newVal ? true : false;
+watch(props.selectMenu, (val: any) => {
+	if (!val.is_catalog) {
+		selectOptions.value = val;
+		doRefresh();
 	}
-);
-
-watch(props.selectMenu, (val) => {
-	selectOptions.value = val;
-	doRefresh();
 });
 
-//抽屉关闭确认
-const handleClose = (done: () => void) => {
-	ElMessageBox.confirm('您确定要关闭?', {
-		confirmButtonText: '确定',
-		cancelButtonText: '取消',
-		type: 'warning',
-	})
-		.then(() => {
-			done();
-			// @ts-ignore
-			emit('drawer-close', menuButtonDrawer);
-		})
-		.catch(() => {
-			// catch error
-		});
-};
-// crud组件的ref
-const crudRef = ref();
-// crud 配置的ref
-const crudBinding = ref();
-// 暴露的方法
-const { crudExpose } = useExpose({ crudRef, crudBinding });
-
+const { crudRef, crudBinding, crudExpose, context } = useFs({ createCrudOptions, context: { selectOptions } });
 const { doRefresh } = crudExpose;
-// 你的crud配置
-const { crudOptions } = createCrudOptions({ crudExpose, selectOptions });
-// 初始化crud配置
-// @ts-ignore
-const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
-// 你可以调用此方法，重新初始化crud配置
-// resetCrudOptions(options)
 
-defineExpose({ menuButtonDrawer, selectOptions });
+defineExpose({ selectOptions });
 </script>

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

@@ -79,16 +79,7 @@
 									</el-radio-group>
 								</el-form-item>
 							</el-col>
-							<el-col :span="20">
-								<el-form-item label="权限" class="flex flex-wrap w-full">
-									<el-checkbox-group v-model="form.permission" :disabled="form.is_catalog" class="flex flex-wrap">
-										<el-checkbox v-model="form.permission">全选</el-checkbox>
-										<!-- TODO 选中没做 -->
-										<el-checkbox v-for="item in menuPermissonList" :checked="true" :label="`${item.name}(${item.value})`" />
-									</el-checkbox-group>
-									<el-button class="mx-2" @click="addPermission()">其他权限</el-button>
-								</el-form-item>
-							</el-col>
+
 							<el-col :span="20">
 								<el-form-item label="图标" prop="icon">
 									<IconSelector clearable v-model="form.icon" />
@@ -104,11 +95,15 @@
 								</el-divider>
 							</el-col>
 						</el-row>
+						<el-row>
+							<el-col>
+								<menuButton :select-menu="form" class="h-screen/2" />
+							</el-col>
+						</el-row>
 					</el-form>
 				</el-card>
 			</el-col>
 		</el-row>
-		<menuButton :drawer-show="permissionDrawerVisible" @drawer-close="drawerClose()" :select-menu="form"></menuButton>
 	</fs-page>
 </template>
 

web/tailwind.config.js

@@ -2,7 +2,11 @@
 module.exports = {
 	content: ['./index.html', './src/**/*.{vue,js}'],
 	theme: {
-		extend: {},
+		extend: {
+			height: {
+				'screen/2': '50vh',
+			},
+		},
 	},
 	plugins: [],
 };