refactor: ♻️ 菜单管理重构完成

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

@@ -9,13 +9,6 @@ export function GetList(query: PageQuery) {
 		params: query,
 	});
 }
-export function GetAllMenu(query: PageQuery) {
-	return request({
-		url: apiPrefix + 'get_all_menu/',
-		method: 'get',
-		params: query,
-	});
-}
 
 export function GetObj(id: InfoReq) {
 	return request({
@@ -46,3 +39,27 @@ export function DelObj(obj: DelReq) {
 		method: 'delete',
 	});
 }
+
+export function GetAllMenu(query: PageQuery) {
+	return request({
+		url: apiPrefix + 'get_all_menu/',
+		method: 'get',
+		params: query,
+	});
+}
+
+export function lazyLoadMenu(query: PageQuery) {
+	return request({
+		url: apiPrefix,
+		method: 'get',
+		params: query,
+	});
+}
+
+export function dragMenu(obj: AddReq) {
+	return request({
+		url: apiPrefix + 'drag_menu/',
+		method: 'post',
+		data: obj,
+	});
+}

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

@@ -1,186 +1,195 @@
-import {CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose} from '@fast-crud/fast-crud';
+import { CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose } from '@fast-crud/fast-crud';
 import _ from 'lodash-es';
-import * as api from "./api";
-import {dictionary} from '/@/utils/dictionary';
+import * as api from './api';
+import { dictionary } from '/@/utils/dictionary';
 
 interface CreateCrudOptionsTypes {
-    crudOptions: CrudOptions;
+	crudOptions: CrudOptions;
 }
 
-import {request} from '/@/utils/service';
+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});
-    };
-    const editRequest = async ({form, row}: EditReq) => {
-        form.id = row.id;
-        return await api.UpdateObj(form);
-    };
-    const delRequest = async ({row}: DelReq) => {
-        return await api.DelObj(row.id);
-    };
-    const addRequest = async ({form}: AddReq) => {
-        return await api.AddObj(form);
-    };
-    return {
-        crudOptions: {
-            request: {
-                pageRequest,
-                addRequest,
-                editRequest,
-                delRequest,
-            },
-            form: {
-                col: {span: 24},
-                labelWidth: '100px',
-                wrapper: {
-                    is: 'el-dialog',
-                    width: '600px',
-                },
-            },
-            columns: {
-                _index: {
-                    title: '序号',
-                    form: {show: false},
-                    column: {
-                        //type: 'index',
-                        align: 'center',
-                        width: '70px',
-                        columnSetDisabled: true, //禁止在列设置中选择
-                    },
-                },
-                search: {
-                    title: '关键词',
-                    column: {show: false},
-                    type: 'text',
-                    search: {show: true},
-                    form: {
-                        show: false,
-                        component: {
-                            placeholder: '输入关键词搜索',
-                        },
-                    },
-                },
-                id: {
-                    title: 'ID',
-                    type: 'text',
-                    column: {show: false},
-                    search: {show: false},
-                    form: {show: false},
-                },
-                name: {
-                    title: '权限名称',
-                    type: 'text',
-                    search: {show: true},
-                    column: {
-                        minWidth: 120,
-                        sortable: true,
-                    },
-                    form: {
-                        rules: [{required: true, message: '权限名称必填'}],
-                        component: {
-                            placeholder: '输入权限名称搜索',
-                            props: {
-                                clearable: true,
-                                allowCreate: true,
-                                filterable: true,
-
-                            }
-                        },
-                        helper: {
-                            render (h) {
-                                return (< el-alert title="手动输入" type="warning" description="页面中按钮的名称或者自定义一个名称"/>
-                                )
-                            }
-                        }
-                    },
-                },
-                value: {
-                    title: '权限值',
-                    type: 'text',
-                    search: {show: false},
-                    column: {
-                        width: 120,
-                        sortable: true,
-                    },
-                    form: {
-                        rules: [{required: true, message: '权限标识必填'}],
-                        placeholder: '输入权限标识',
-                        helper: {
-                            render (h) {
-                                return (< el-alert title="唯一值" type="warning" description="用于判断前端按钮权限或接口权限"/>
-                                )
-                            }
-                        }
-                    },
-
-                },
-                method: {
-                    title: '请求方式',
-                    search: {show: false},
-                    type: 'dict-select',
-                    column: {
-                        width: 120,
-                        sortable: true,
-                    },
-                    dict: dict({
-                        data: [
-                            {label: 'GET', value: 0},
-                            {label: 'POST', value: 1, color: 'success'},
-                            {label: 'PUT', value: 2, color: 'warning'},
-                            {label: 'DELETE', value: 3, color: 'danger'}
-                        ]
-                    }),
-                    form:{
-                        rules: [{required: true, message: '必填项'}],
-                    }
-                },
-                api: {
-                    title: '接口地址',
-                    search: {show: false},
-                    type: 'dict-select',
-                    dict: dict({
-                        getData() {
-                            return request({url: '/swagger.json'}).then((res: any) => {
-                                const ret = Object.keys(res.paths)
-                                const data = []
-                                for (const item of ret) {
-                                    const obj: any = {}
-                                    obj.label = item
-                                    obj.value = item
-                                    data.push(obj)
-                                }
-                                return data
-                            })
-                        }
-                    }),
-                    column: {
-                        minWidth: 200,
-                        sortable: true,
-                    },
-                    form: {
-                        rules: [{required: true, message: '必填项'}],
-                        component:{
-                          props:{
-                              allowCreate: true,
-                              filterable: true,
-                              clearable: true
-                          }
-                        },
-                        helper: {
-                            render (h) {
-                                return (< el-alert title="请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/" type="warning" />
-                                )
-                            }
-                        }
-                    },
-                }
-            },
-        },
-    };
+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);
+	};
+	const editRequest = async ({ form, row }: EditReq) => {
+		form.id = row.id;
+		return await api.UpdateObj(form);
+	};
+	const delRequest = async ({ row }: DelReq) => {
+		return await api.DelObj(row.id);
+	};
+	const addRequest = async ({ form }: AddReq) => {
+		return await api.AddObj(form);
+	};
+	return {
+		crudOptions: {
+			rowHandle: {
+				//固定右侧
+				fixed: 'right',
+				width: 200,
+				buttons: {
+					view: {
+						show: false,
+					},
+					edit: {
+						iconRight: 'Edit',
+						type: 'text',
+					},
+					remove: {
+						iconRight: 'Delete',
+						type: 'text',
+					},
+				},
+			},
+			request: {
+				pageRequest,
+				addRequest,
+				editRequest,
+				delRequest,
+			},
+			form: {
+				col: { span: 24 },
+				labelWidth: '100px',
+				wrapper: {
+					is: 'el-dialog',
+					width: '600px',
+				},
+			},
+			columns: {
+				_index: {
+					title: '序号',
+					form: { show: false },
+					column: {
+						type: 'index',
+						align: 'center',
+						width: '70px',
+						columnSetDisabled: true, //禁止在列设置中选择
+					},
+				},
+				search: {
+					title: '关键词',
+					column: { show: false },
+					type: 'text',
+					search: { show: true },
+					form: {
+						show: false,
+						component: {
+							placeholder: '输入关键词搜索',
+						},
+					},
+				},
+				id: {
+					title: 'ID',
+					type: 'text',
+					column: { show: false },
+					search: { show: false },
+					form: { show: false },
+				},
+				name: {
+					title: '权限名称',
+					type: 'text',
+					search: { show: true },
+					column: {
+						minWidth: 120,
+						sortable: true,
+					},
+					form: {
+						rules: [{ required: true, message: '权限名称必填' }],
+						component: {
+							placeholder: '输入权限名称搜索',
+							props: {
+								clearable: true,
+								allowCreate: true,
+								filterable: true,
+							},
+						},
+						helper: {
+							render(h) {
+								return <el-alert title="手动输入" type="warning" description="页面中按钮的名称或者自定义一个名称" />;
+							},
+						},
+					},
+				},
+				value: {
+					title: '权限值',
+					type: 'text',
+					search: { show: false },
+					column: {
+						width: 120,
+						sortable: true,
+					},
+					form: {
+						rules: [{ required: true, message: '权限标识必填' }],
+						placeholder: '输入权限标识',
+						helper: {
+							render(h) {
+								return <el-alert title="唯一值" type="warning" description="用于判断前端按钮权限或接口权限" />;
+							},
+						},
+					},
+				},
+				method: {
+					title: '请求方式',
+					search: { show: false },
+					type: 'dict-select',
+					column: {
+						width: 120,
+						sortable: true,
+					},
+					dict: dict({
+						data: [
+							{ label: 'GET', value: 0 },
+							{ label: 'POST', value: 1, color: 'success' },
+							{ label: 'PUT', value: 2, color: 'warning' },
+							{ label: 'DELETE', value: 3, color: 'danger' },
+						],
+					}),
+					form: {
+						rules: [{ required: true, message: '必填项' }],
+					},
+				},
+				api: {
+					title: '接口地址',
+					search: { show: false },
+					type: 'dict-select',
+					dict: dict({
+						getData() {
+							return request({ url: '/swagger.json' }).then((res: any) => {
+								const ret = Object.keys(res.paths);
+								const data = [];
+								for (const item of ret) {
+									const obj: any = {};
+									obj.label = item;
+									obj.value = item;
+									data.push(obj);
+								}
+								return data;
+							});
+						},
+					}),
+					column: {
+						minWidth: 200,
+						sortable: true,
+					},
+					form: {
+						rules: [{ required: true, message: '必填项' }],
+						component: {
+							props: {
+								allowCreate: true,
+								filterable: true,
+								clearable: true,
+							},
+						},
+						helper: {
+							render(h) {
+								return <el-alert title="请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/" type="warning" />;
+							},
+						},
+					},
+				},
+			},
+		},
+	};
 };

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

@@ -1,69 +1,83 @@
 <template>
-  <el-drawer
-      size="70%"
-      v-model="drawer"
-      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>
+	<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>
 </template>
 
 <script lang="ts" setup>
-import {ref, onMounted} from 'vue';
-import {useExpose, useCrud} from '@fast-crud/fast-crud';
-import {createCrudOptions} from './curd';
-import {ElMessageBox} from "element-plus";
-import * as api from './api'
+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';
 // 弹窗是否显示
-const drawer = ref(false)
+let menuButtonDrawer = ref(false);
 // 当前选择的菜单信息
-const selectOptions:any = ref({name:null})
+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) => {
+	selectOptions.value = val;
+	doRefresh();
+});
 
 //抽屉关闭确认
 const handleClose = (done: () => void) => {
-  ElMessageBox.confirm('您确定要关闭?', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  })
-      .then(() => {
-        done()
-      })
-      .catch(() => {
-        // catch error
-      })
-}
+	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 { crudExpose } = useExpose({ crudRef, crudBinding });
+
+const { doRefresh } = crudExpose;
 // 你的crud配置
-const {crudOptions} = createCrudOptions({crudExpose, selectOptions});
+const { crudOptions } = createCrudOptions({ crudExpose, selectOptions });
 // 初始化crud配置
-const {resetCrudOptions} = useCrud({crudExpose, crudOptions});
+// @ts-ignore
+const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
 // 你可以调用此方法，重新初始化crud配置
 // resetCrudOptions(options)
-const initGet = ()=>{
-  api.GetList({menu:selectOptions.value.id}).then((res:any)=>{
-    const {data} = res
-    crudExpose.crudBinding.value.data=data
-  })
-}
 
-defineExpose({drawer, selectOptions,initGet})
+defineExpose({ menuButtonDrawer, selectOptions });
 </script>

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

@@ -16,11 +16,19 @@
 						:data="data"
 						:props="treeProps"
 						:filter-node-method="filterNode"
+						:load="loadNode"
+						:allow-drag="allowDrag"
+						:allow-drop="allowDrop"
+						@node-drop="nodeDrop"
+						lazy
+						icon="ArrowRightBold"
+						:indent="12"
+						draggable
 						@node-click="handleNodeClick"
 					>
 						<template #default="{ node, data }">
-							<span v-if="data.status" class="text-center font-black text-xl">{{ node.label }}</span>
-							<span v-else class="text-center font-black text-xl text-red-700">{{ node.label }}</span>
+							<span v-if="data.status" class="text-center font-black text-xl"><SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}</span>
+							<span v-else class="text-center font-black text-xl text-red-700"><SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}</span>
 						</template>
 					</el-tree>
 				</el-card>
@@ -28,6 +36,7 @@
 			<el-col :span="20" class="p-1">
 				<el-card :body-style="{ height: '100%' }">
 					<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
+						<el-alert :title="content" type="success" effect="dark" :closable="false" center />
 						<el-divider>
 							<strong>菜单配置</strong>
 						</el-divider>
@@ -36,7 +45,7 @@
 								<el-form-item label="菜单ID" prop="id"> <el-input v-model="form.id" disabled /> </el-form-item>
 							</el-col>
 							<el-col :span="10">
-								<el-form-item label="父级ID" prop="parent"> <el-input v-model="form.parent" disabled /> </el-form-item>
+								<el-form-item label="父级ID" prop="parent"> <el-input v-model="form.parent" /> </el-form-item>
 							</el-col>
 							<el-col :span="10">
 								<el-form-item required label="菜单名称" prop="name"> <el-input v-model="form.name" /> </el-form-item>
@@ -71,16 +80,13 @@
 								</el-form-item>
 							</el-col>
 							<el-col :span="20">
-								<el-form-item label="权限">
-									<el-checkbox-group v-model="form.permission">
+								<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>
-										<el-checkbox label="查询(Search)" />
-										<el-checkbox label="新增(Add)" />
-										<el-checkbox label="删除(Delete)" />
-										<el-checkbox label="编辑(Update)" />
-										<el-checkbox label="导入(Import)" />
-										<el-checkbox label="导出(Export)" />
+										<!-- 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">
@@ -102,16 +108,15 @@
 				</el-card>
 			</el-col>
 		</el-row>
+		<menuButton :drawer-show="permissionDrawerVisible" @drawer-close="drawerClose()" :select-menu="form"></menuButton>
 	</fs-page>
 </template>
 
 <script lang="ts" setup>
 import * as api from './api';
-import { ElForm, ElTree, FormInstance, FormRules } from 'element-plus';
-import type Node from 'element-plus/es/components/tree/src/model/node';
-import { ref, onMounted, computed, watch, reactive, toRaw, defineAsyncComponent, nextTick, shallowRef } from 'vue';
-import { useExpose, useCrud } from '@fast-crud/fast-crud';
-import { createCrudOptions } from './crud';
+import * as menuButoonApi from './components/menuButton/api';
+import { ElForm, ElTree, FormRules } from 'element-plus';
+import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, nextTick, shallowRef } from 'vue';
 import XEUtils from 'xe-utils';
 import { errorMessage, successMessage } from '../../../utils/message';
 
@@ -121,21 +126,26 @@ interface Tree {
 	status: boolean;
 	children?: Tree[];
 }
+
 interface APIResponseData {
 	code?: number;
 	data: [];
 	msg?: string;
 }
+
 interface Form<T> {
 	[key: string]: T;
 }
+
 interface ComponentFileItem {
 	value: string;
 	label: string;
 }
 
 // 引入组件
+const menuButton = defineAsyncComponent(() => import('./components/menuButton/index.vue'));
 const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));
+const SvgIcon = defineAsyncComponent(() => import('/@/components/svgIcon/index.vue'));
 const placeholder = ref('请输入菜单名称');
 const filterText = ref('');
 const treeRef = ref<InstanceType<typeof ElTree>>();
@@ -143,6 +153,15 @@ const treeRef = ref<InstanceType<typeof ElTree>>();
 const treeProps = {
 	children: 'children',
 	label: 'name',
+	icon: 'icon',
+	isLeaf: (data: Tree[], node: Node) => {
+		// @ts-ignore
+		if (node.data.is_catalog) {
+			return false;
+		} else {
+			return true;
+		}
+	},
 };
 
 const validateWebPath = (rule: string, value: string, callback: Function) => {
@@ -163,17 +182,59 @@ const filterNode = (value: string, data: Tree) => {
 	return toRaw(data).name.indexOf(value) !== -1;
 };
 
+// 懒加载
+const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
+	// @ts-ignore
+	if (node.level !== 0) {
+		// @ts-ignore
+		api.lazyLoadMenu({ parent: node.data.id }).then((res: APIResponseData) => {
+			resolve(res.data);
+		});
+	}
+};
+
+// 判断是否可以拖动
+const allowDrag = (node: Node) => {
+	// @ts-ignore
+	if (node.data.is_catalog) {
+		return false;
+	} else {
+		return true;
+	}
+};
+
+// 判断是否可以被放置
+const allowDrop = (draggingNode: Node, dropNode: Node, type: string) => {
+	// @ts-ignore
+	if (!dropNode.isLeaf) {
+		return true;
+	}
+};
+
+const nodeDrop = (draggingNode: Node, dropNode: Node, dropType: string, event: any) => {
+	// @ts-ignore
+	if (!dropNode.isLeaf) {
+		// @ts-ignore
+		api.dragMenu({ menu_id: draggingNode.data.id, parent_id: dropNode.data.id }).then((res: APIResponseData) => {
+			successMessage(res.msg as string);
+		});
+	}
+};
+
 let data = ref([]);
 
 let isAddNewMenu = ref(false); // 判断当前是新增菜单，还是更新保存当前菜单
 
+const permissionDrawerVisible = ref(false);
+
 const content = `
 1.红色菜单代表状态禁用;
-2.添加菜单是，如果是目录，组件地址为空即可;
-3.添加根节点菜单，父级ID为空即可
+2.添加菜单，如果是目录，组件地址为空即可;
+3.添加根节点菜单，父级ID为空即可;
+4.支持拖拽菜单;
 `;
 
-let form: Form<string> = reactive({
+let form: Form<any> = reactive({
 	id: '',
 	parent: '',
 	name: '',
@@ -181,13 +242,17 @@ let form: Form<string> = reactive({
 	web_path: '',
 	sort: '',
 	status: '',
+	is_catalog: false,
 	permission: '',
 	icon: '',
 });
+
+let menuPermissonList = ref([]);
+
 const formRef = ref<InstanceType<typeof ElForm>>();
 
 const querySearch = (queryString: string, cb: any) => {
-	const files: any = import.meta.globEager('@views/**/*.vue');
+	const files: any = import.meta.glob('@views/**/*.vue');
 	let fileLists: Array<any> = [];
 	Object.keys(files).forEach((queryString: string) => {
 		fileLists.push({
@@ -196,6 +261,11 @@ const querySearch = (queryString: string, cb: any) => {
 		});
 	});
 	const results = queryString ? fileLists.filter(createFilter(queryString)) : fileLists;
+	// 统一去掉/src/views/前缀
+	results.forEach((val) => {
+		val.label = val.label.replace('/src/views/', '');
+		val.value = val.value.replace('/src/views/', '');
+	});
 	cb(results);
 };
 
@@ -211,7 +281,7 @@ const rules = reactive<FormRules>({
 });
 
 const getData = () => {
-	api.GetAllMenu({}).then((ret: APIResponseData) => {
+	api.GetList({}).then((ret: APIResponseData) => {
 		const responseData = ret.data;
 		const result = XEUtils.toArrayTree(responseData, {
 			parentKey: 'parent',
@@ -222,17 +292,26 @@ const getData = () => {
 	});
 };
 
+const getPermissions = (menu: object) => {
+	menuButoonApi.GetList(menu).then((res: APIResponseData) => {
+		menuPermissonList.value = res.data;
+	});
+};
+
 const saveMenu = () => {
 	formRef.value?.validate((valid, fields) => {
 		if (valid) {
 			if (!isAddNewMenu.value) {
 				// 保存菜单
+
+				form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
 				api.UpdateObj(form).then((res: APIResponseData) => {
 					successMessage(res.msg as string);
 					getData();
 				});
 			} else {
 				// 新增菜单
+				form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
 				api.AddObj(form).then((res: APIResponseData) => {
 					successMessage(res.msg as string);
 					getData();
@@ -243,22 +322,26 @@ const saveMenu = () => {
 		}
 	});
 };
+
 const newMenu = () => {
 	formRef.value?.resetFields();
 	isAddNewMenu.value = true;
 };
+
 const addChildMenu = () => {
 	let parentId = form.id;
 	formRef.value?.resetFields();
 	form.parent = parentId;
 	isAddNewMenu.value = true;
 };
+
 const addSameLevelMenu = () => {
 	let parentId = form.parent;
 	formRef.value?.resetFields();
 	form.parent = parentId;
 	isAddNewMenu.value = true;
 };
+
 const deleteMenu = () => {
 	api.DelObj(form).then((res: APIResponseData) => {
 		successMessage(res.msg as string);
@@ -270,8 +353,19 @@ const handleNodeClick = (data: any, node: any, prop: any) => {
 	Object.keys(toRaw(data)).forEach((key: string) => {
 		form[key] = data[key];
 	});
+	delete form.component_name;
 	form.id = data.id;
 	isAddNewMenu.value = false;
+
+	// 点击tree node时，加载对应的权限菜单
+	getPermissions({ menu: form.id });
+};
+
+const addPermission = () => {
+	!form.is_catalog ? (permissionDrawerVisible.value = true) : errorMessage('目录没有菜单权限');
+};
+const drawerClose = () => {
+	permissionDrawerVisible.value = false;
 };
 
 // 页面打开后获取列表数据
@@ -292,12 +386,4 @@ onMounted(() => {
 .el-card {
 	height: 100%;
 }
-.custom-tree-node {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	font-size: 14px;
-	padding-right: 8px;
-}
 </style>

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

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

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

@@ -1,14 +1,14 @@
 <template>
 	<fs-page>
-		<el-row>
-			<el-col :span="4">
+		<el-row class="mx-2">
+			<el-col :span="4" class="p-1">
 				<el-card :body-style="{ height: '100%' }">
 					<el-input v-model="filterText" :placeholder="placeholder" />
 
 					<el-tree ref="treeRef" class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" />
 				</el-card>
 			</el-col>
-			<el-col :span="20" :offset="0">
+			<el-col :span="20" :offset="0" class="p-1">
 				<el-card :body-style="{ height: '100%' }">
 					<fs-crud class="h-full w-full" ref="crudRef" v-bind="crudBinding"> </fs-crud>
 				</el-card>