refactor(菜单管理管理): 组件抽离

web/src/views/system/dept/components/TreeCom.vue

@@ -134,10 +134,10 @@ const handleLoadNode = (node: Node, resolve: Function) => {
 /**
  * 部门的点击事件
  */
-const handleNodeClick = (data: TreeItemType, node: Node) => {
+const handleNodeClick = (record: TreeItemType, node: Node) => {
-	treeSelectDept.value = data;
+	treeSelectDept.value = record;
 	treeSelectNode.value = node;
-	emit('treeClick', data.id);
+	emit('treeClick', record.id);
 };
 
 /**

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

@@ -120,10 +120,6 @@ onMounted(() => {
 .dept-left {
 	position: relative;
 	border-radius: 0 8px 8px 0;
-
-	.dl-nav {
-		margin-bottom: 10px;
-	}
 }
 
 .dept-table {

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

@@ -1,5 +1,5 @@
 import { request } from '/@/utils/service';
-import {UserPageQuery, AddReq, DelReq, EditReq, InfoReq} from '@fast-crud/fast-crud';
+import { UserPageQuery, AddReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
 
 export const apiPrefix = '/api/system/menu/';
 
@@ -34,9 +34,9 @@ export function UpdateObj(obj: EditReq) {
   });
 }
 
-export function DelObj(obj: DelReq) {
+export function DelObj(id: string | number) {
   return request({
-        url: apiPrefix + obj.id + '/',
+    url: apiPrefix + id + '/',
     method: 'delete',
   });
 }
@@ -65,7 +65,7 @@ export function dragMenu(obj: AddReq) {
   });
 }
 
-export function moveUp(obj: AddReq) {
+export function menuMoveUp(obj: AddReq) {
   return request({
     url: apiPrefix + 'move_up/',
     method: 'post',
@@ -73,7 +73,7 @@ export function moveUp(obj: AddReq) {
   });
 }
 
-export function moveDown(obj: AddReq) {
+export function menuMoveDown(obj: AddReq) {
   return request({
     url: apiPrefix + 'move_down/',
     method: 'post',

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

@@ -1,10 +1,10 @@
-import { AddReq, DelReq, EditReq, dict, CreateCrudOptionsRet, CreateCrudOptionsProps, UserPageQuery } from '@fast-crud/fast-crud';
+import { AddReq, DelReq, EditReq, dict, CreateCrudOptionsRet, CreateCrudOptionsProps } from '@fast-crud/fast-crud';
 import * as api from './api';
 
 import { request } from '/@/utils/service';
 //此处为crudOptions配置
 export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
-	const pageRequest = async (query: UserPageQuery) => {
+	const pageRequest = async () => {
 		if (context!.selectOptions.value.id) {
 			return await api.GetList({ menu: context!.selectOptions.value.id } as any);
 		} else {
@@ -113,7 +113,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 							},
 						},
 						helper: {
-							render(h) {
+							render() {
 								return <el-alert title="手动输入" type="warning" description="页面中按钮的名称或者自定义一个名称" />;
 							},
 						},
@@ -131,7 +131,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 						rules: [{ required: true, message: '权限标识必填' }],
 						placeholder: '输入权限标识',
 						helper: {
-							render(h) {
+							render() {
 								return <el-alert title="唯一值" type="warning" description="用于判断前端按钮权限或接口权限" />;
 							},
 						},
@@ -190,7 +190,7 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 							},
 						},
 						helper: {
-							render(h) {
+							render() {
 								return <el-alert title="请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/" type="warning" />;
 							},
 						},

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

@@ -3,27 +3,26 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, defineProps, watch } from 'vue';
+import { ref } from 'vue';
 import { useFs } from '@fast-crud/fast-crud';
 import { createCrudOptions } from './crud';
+import { MenuTreeItemType } from '../../types';
+
 // 当前选择的菜单信息
 let selectOptions: any = ref({ name: null });
-const props = defineProps<{
+
-	selectMenu: object;
-}>();
 const { crudRef, crudBinding, crudExpose, context } = useFs({ createCrudOptions, context: { selectOptions } });
 const { doRefresh, setTableData } = crudExpose;
 
-watch(props.selectMenu, (val: any) => {
+const handleRefreshTable = (record: MenuTreeItemType) => {
-	if (!val.is_catalog && val.id) {
+	if (!record.is_catalog && record.id) {
-		selectOptions.value = val;
+		selectOptions.value = record;
 		doRefresh();
 	} else {
 		//清空表格数据
-    setTableData([])
+		setTableData([]);
 	}
-});
+};
 
-
+defineExpose({ selectOptions, handleRefreshTable });
-defineExpose({ selectOptions });
 </script>

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

@@ -0,0 +1,203 @@
+<template>
+	<div class="menu-form-com">
+		<div class="menu-form-alert">
+			1.红色菜单代表状态禁用;<br />
+			2.添加菜单，如果是目录，组件地址为空即可;<br />
+			3.添加根节点菜单，父级ID为空即可;<br />
+			4.支持拖拽菜单;
+		</div>
+		<el-form ref="formRef" :rules="rules" :model="menuFormData" label-width="80px" label-position="right">
+			<el-form-item label="菜单名称" prop="name">
+				<el-input v-model="menuFormData.name" />
+			</el-form-item>
+			<el-form-item label="父级菜单" prop="parent">
+				<el-input v-model="menuFormData.parent" />
+			</el-form-item>
+			<el-form-item label="图标" prop="icon">
+				<IconSelector clearable v-model="menuFormData.icon" />
+			</el-form-item>
+
+			<el-row>
+				<el-col :span="12">
+					<el-form-item label="状态">
+						<el-switch v-model="menuFormData.status" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item v-if="menuFormData.status" label="侧边显示">
+						<el-switch v-model="menuFormData.visible" width="60" inline-prompt active-text="显示" inactive-text="隐藏" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+
+			<el-form-item label="菜单状态">
+				<el-radio-group v-model="menuFormData.menu_status">
+					<el-radio-button label="1">常规</el-radio-button>
+					<el-radio-button label="2">目录</el-radio-button>
+					<el-radio-button label="3">外链接</el-radio-button>
+				</el-radio-group>
+			</el-form-item>
+
+			<el-form-item label="备注">
+				<el-input v-model="menuFormData.description" maxlength="200" show-word-limit type="textarea" />
+			</el-form-item>
+
+			<el-divider></el-divider>
+
+			<div style="min-height: 184px">
+				<el-form-item v-if="menuFormData.menu_status === '3'" label="Url">
+					<el-input v-model="menuFormData.web_path" />
+				</el-form-item>
+
+				<el-form-item v-if="menuFormData.menu_status === '1'" label="路由地址">
+					<el-input v-model="menuFormData.web_path" />
+				</el-form-item>
+
+				<el-form-item v-if="menuFormData.menu_status === '1'" label="组件名称">
+					<el-input v-model="menuFormData.component_name" />
+				</el-form-item>
+
+				<el-form-item v-if="menuFormData.menu_status === '1'" label="组件地址">
+					<el-autocomplete
+						class="w-full"
+						v-model="menuFormData.component"
+						:fetch-suggestions="querySearch"
+						:trigger-on-focus="false"
+						clearable
+						:debounce="100"
+						placeholder="输入组件地址"
+					/>
+				</el-form-item>
+
+				<el-form-item v-if="menuFormData.menu_status === '1'" label="缓存">
+					<el-switch v-model="menuFormData.cache" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
+				</el-form-item>
+			</div>
+
+			<el-divider></el-divider>
+		</el-form>
+
+		<div class="menu-form-btns">
+			<el-button @click="handleSubmit" type="primary">保存</el-button>
+			<el-button @click="handleCancel">取消</el-button>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, reactive } from 'vue';
+import { ElForm, FormRules } from 'element-plus';
+import IconSelector from '/@/components/iconSelector/index.vue';
+import { MenuFormDataType, MenuTreeItemType, ComponentFileItem } from '../../types';
+
+interface IProps {
+	initFormData: Partial<MenuTreeItemType> | null;
+}
+
+const validateWebPath = (rule: any, value: string, callback: Function) => {
+	let pattern = /^\/.*?/;
+	if (!pattern.test(value)) {
+		callback(new Error('请输入正确的地址'));
+	} else {
+		callback();
+	}
+};
+
+const props = withDefaults(defineProps<IProps>(), {
+	initFormData: () => null,
+});
+const emit = defineEmits(['drawerClose']);
+
+const formRef = ref<InstanceType<typeof ElForm>>();
+
+const rules = reactive<FormRules>({
+	web_path: [{ validator: validateWebPath, trigger: 'blur' }],
+	name: [{ required: true, message: '菜单名称必填', trigger: 'blur' }],
+	parent: [{ required: true, message: '父级菜单必选', trigger: ['blur', 'change'] }],
+});
+
+let menuFormData = reactive<MenuFormDataType>({
+	parent: '',
+	name: '',
+	component: '',
+	web_path: '',
+	icon: '',
+	cache: true,
+	status: true,
+	visible: true,
+	menu_status: '1',
+	component_name: '',
+	description: '',
+});
+
+const setMenuFormData = () => {
+	if (props.initFormData?.id) {
+		menuFormData.id = props.initFormData?.id || '';
+		menuFormData.name = props.initFormData?.name || '';
+		menuFormData.parent = props.initFormData?.parent || '';
+		menuFormData.component = props.initFormData?.component || '';
+		menuFormData.web_path = props.initFormData?.web_path || '';
+		menuFormData.icon = props.initFormData?.icon || '';
+		menuFormData.status = props.initFormData?.status || true;
+		menuFormData.visible = props.initFormData?.visible || true;
+		menuFormData.cache = props.initFormData?.cache || true;
+		menuFormData.component_name = props.initFormData?.component_name || '';
+		menuFormData.description = props.initFormData?.description || '';
+	}
+};
+
+const querySearch = (queryString: string, cb: any) => {
+	const files: any = import.meta.glob('@views/**/*.vue');
+	let fileLists: Array<any> = [];
+	Object.keys(files).forEach((queryString: string) => {
+		fileLists.push({
+			label: queryString.replace(/(\.\/|\.vue)/g, ''),
+			value: queryString.replace(/(\.\/|\.vue)/g, ''),
+		});
+	});
+	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);
+};
+
+const createFilter = (queryString: string) => {
+	return (file: ComponentFileItem) => {
+		return file.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
+	};
+};
+
+const handleSubmit = () => {};
+
+const handleCancel = (type: string = '') => {
+	emit('drawerClose', type);
+	formRef.value?.resetFields();
+};
+
+onMounted(async () => {
+	setMenuFormData();
+});
+</script>
+
+<style lang="scss" scoped>
+.menu-form-com {
+	border-radius: 8px;
+	margin: 10px;
+	overflow-y: auto;
+	.menu-form-alert {
+		color: #fff;
+		line-height: 24px;
+		padding: 8px 16px;
+		margin-bottom: 20px;
+		border-radius: 4px;
+		background-color: var(--el-color-primary);
+	}
+	.menu-form-btns {
+		padding-bottom: 10px;
+		box-sizing: border-box;
+	}
+}
+</style>

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

@@ -0,0 +1,314 @@
+<template>
+	<el-input v-model="filterVal" :prefix-icon="Search" placeholder="请输入菜单名称" />
+	<div class="menu-tree-com">
+		<div class="mtc-head">
+			<el-icon size="16" color="#606266" class="mtc-head-icon">
+				<Menu />
+			</el-icon>
+			菜单列表
+			<el-tooltip
+				effect="dark"
+				placement="right"
+				content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;"
+			>
+				<el-icon size="16" color="var(--el-color-primary)" class="mtc-tooltip">
+					<QuestionFilled />
+				</el-icon>
+			</el-tooltip>
+		</div>
+
+		<el-tree
+			ref="treeRef"
+			:data="treeData"
+			:props="defaultTreeProps"
+			:filter-node-method="filterNode"
+			:load="handleTreeLoad"
+			lazy
+			:indent="45"
+			@node-click="handleNodeClick"
+			highlight-current
+		>
+			<template #default="{ node, data }">
+				<element-tree-line :node="node" :showLabelLine="false" :indent="32">
+					<span v-if="data.status" class="text-center font-black font-normal">
+						<SvgIcon :name="node.data.icon" color="var(--el-color-primary)" />
+						&nbsp;{{ node.label }}
+					</span>
+					<span v-else class="text-center font-black text-red-700 font-normal"> <SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }} </span>
+				</element-tree-line>
+			</template>
+		</el-tree>
+
+		<div class="mtc-tags">
+			<el-tooltip effect="dark" content="新增">
+				<el-icon size="16" @click="handleUpdateMenu('create')" class="mtc-tags-icon">
+					<Plus />
+				</el-icon>
+			</el-tooltip>
+
+			<el-tooltip effect="dark" content="编辑">
+				<el-icon size="16" @click="handleUpdateMenu('update')" class="mtc-tags-icon">
+					<Edit />
+				</el-icon>
+			</el-tooltip>
+
+			<el-tooltip effect="dark" content="上移">
+				<el-icon size="16" @click="handleSort('up')" class="mtc-tags-icon">
+					<Top />
+				</el-icon>
+			</el-tooltip>
+
+			<el-tooltip effect="dark" content="下移">
+				<el-icon size="16" @click="handleSort('down')" class="mtc-tags-icon">
+					<Bottom />
+				</el-icon>
+			</el-tooltip>
+
+			<el-tooltip effect="dark" content="删除">
+				<el-icon size="16" @click="handleDeleteMenu()" class="mtc-tags-icon">
+					<Delete />
+				</el-icon>
+			</el-tooltip>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ref, toRaw, watch, h } from 'vue';
+import { ElTree } from 'element-plus';
+import { getElementLabelLine } from 'element-tree-line';
+import { Search } from '@element-plus/icons-vue';
+import SvgIcon from '/@/components/svgIcon/index.vue';
+import { lazyLoadMenu, menuMoveUp, menuMoveDown } from '../../api';
+import { warningNotification } from '/@/utils/message';
+import { TreeTypes, MenuTreeItemType } from '../../types';
+import type Node from 'element-plus/es/components/tree/src/model/node';
+
+interface IProps {
+	treeData: TreeTypes[];
+}
+
+const ElementTreeLine = getElementLabelLine(h);
+
+const defaultTreeProps: any = {
+	children: 'children',
+	label: 'name',
+	icon: 'icon',
+	isLeaf: (data: TreeTypes[], node: Node) => {
+		if (node.data.is_catalog) {
+			return false;
+		} else {
+			return true;
+		}
+	},
+};
+
+const treeRef = ref<InstanceType<typeof ElTree>>();
+
+withDefaults(defineProps<IProps>(), {
+	treeData: () => [],
+});
+const emit = defineEmits(['treeClick', 'deleteDept', 'updateDept']);
+
+let filterVal = ref('');
+let sortDisable = ref(false);
+let treeSelectMenu = ref<TreeTypes>({});
+let treeSelectNode = ref<Node | null>(null);
+
+watch(filterVal, (val) => {
+	treeRef.value!.filter(val);
+});
+
+/**
+ * 树的搜索事件
+ */
+const filterNode = (value: string, data: any) => {
+	if (!value) return true;
+	return toRaw(data).name.indexOf(value) !== -1;
+};
+
+/**
+ * 树的懒加载
+ */
+const handleTreeLoad = (node: Node, resolve: Function) => {
+	if (node.level !== 0) {
+		lazyLoadMenu({ parent: node.data.id }).then((res: APIResponseData) => {
+			resolve(res.data);
+		});
+	}
+};
+
+/**
+ * 树的点击事件
+ */
+const handleNodeClick = (record: MenuTreeItemType, node: Node) => {
+	treeSelectMenu.value = record;
+	treeSelectNode.value = node;
+	emit('treeClick', record);
+};
+
+/**
+ * 点击左侧编辑按钮
+ */
+const handleUpdateMenu = (type: string) => {
+	if (type === 'update') {
+		if (!treeSelectMenu.value.id) {
+			warningNotification('请选择菜单！');
+			return;
+		}
+		emit('updateDept', type, treeSelectMenu.value);
+	} else {
+		emit('updateDept', type);
+	}
+};
+
+/**
+ * 删除菜单
+ */
+const handleDeleteMenu = () => {
+	if (!treeSelectMenu.value.id) {
+		warningNotification('请选择菜单！');
+		return;
+	}
+	emit('deleteDept', treeSelectMenu.value.id, () => {
+		treeSelectMenu.value = {};
+	});
+};
+
+/**
+ * 移动操作
+ */
+const handleSort = async (type: string) => {
+	if (!treeSelectMenu.value.id) {
+		warningNotification('请选择菜单！');
+		return;
+	}
+	if (sortDisable.value) return;
+
+	const parentList = treeSelectNode.value?.parent.childNodes || [];
+	const index = parentList.findIndex((i) => i.data.id === treeSelectMenu.value.id);
+	const record = parentList.find((i) => i.data.id === treeSelectMenu.value.id);
+
+	if (type === 'up') {
+		if (index === 0) return;
+		parentList.splice(index - 1, 0, record as any);
+		parentList.splice(index + 1, 1);
+		sortDisable.value = true;
+		await menuMoveUp({ menu_id: treeSelectMenu.value.id });
+		sortDisable.value = false;
+	}
+	if (type === 'down') {
+		parentList.splice(index + 2, 0, record as any);
+		parentList.splice(index, 1);
+		sortDisable.value = true;
+		await menuMoveDown({ menu_id: treeSelectMenu.value.id });
+		sortDisable.value = false;
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.menu-tree-com {
+	.mtc-head {
+		display: flex;
+		align-items: center;
+		margin-left: -8px;
+		color: #606266;
+		font-weight: 600;
+
+		.mtc-head-icon {
+			margin-right: 8px;
+			position: relative;
+			top: -1px;
+		}
+
+		.mtc-tooltip {
+			margin-left: 5px;
+			position: relative;
+			top: -1px;
+		}
+	}
+
+	.mtc-tags {
+		height: 40px;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 0 20px;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		box-sizing: border-box;
+
+		.mtc-tags-icon {
+			cursor: pointer;
+			color: var(--el-color-primary);
+		}
+	}
+}
+</style>
+
+<style lang="scss">
+.menu-tree-com {
+	height: calc(100% - 60px);
+	padding: 20px;
+	box-sizing: border-box;
+	overflow-y: auto;
+
+	.el-tree-node__content {
+		height: 32px !important;
+	}
+
+	.el-tree .el-tree-node__expand-icon svg {
+		display: none !important;
+		height: 0;
+		width: 0;
+	}
+
+	.el-tree-node__expand-icon {
+		font-size: 16px;
+	}
+
+	.el-tree-node__content > .el-tree-node__expand-icon {
+		padding: 0;
+		box-sizing: border-box;
+		margin-right: 5px;
+		margin-left: 24px;
+	}
+
+	.el-tree .el-tree-node__expand-icon.expanded {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+
+	.el-tree .el-tree-node__expand-icon.is-leaf {
+		margin-left: 0;
+	}
+
+	.el-tree .el-tree-node__expand-icon:before {
+		background: url('../../../../../assets/img/menu-tree-show-icon.png') no-repeat center / 100%;
+		content: '';
+		display: block;
+		width: 24px;
+		height: 24px;
+	}
+
+	.el-tree .el-tree-node__expand-icon.expanded:before {
+		background: url('../../../../../assets/img/menu-tree-hidden-icon.png') no-repeat center / 100%;
+		content: '';
+		display: block;
+		width: 24px;
+		height: 24px;
+	}
+
+	.el-tree .is-leaf.el-tree-node__expand-icon::before {
+		display: block;
+		background: none !important;
+		content: '';
+		width: 18px;
+		height: 18px;
+		border: none;
+	}
+}
+</style>

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

@@ -1,31 +0,0 @@
-import * as api from './api';
-import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from '@fast-crud/fast-crud';
-
-export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
-	const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
-		return await api.GetList(query);
-	};
-	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,
-			},
-			columns: {},
-		},
-	};
-}

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

@@ -3,322 +3,38 @@
 		<el-row class="menu-el-row">
 			<el-col :span="6">
 				<div class="menu-box menu-left-box">
-					<el-input v-model="filterText" :prefix-icon="Search" placeholder="请输入菜单名称" />
+					<MenuTreeCom :treeData="menuTreeData" @treeClick="handleTreeClick" @updateDept="handleUpdateMenu" @deleteDept="handleDeleteMenu" />
-					<div class="menu-left-tree">
-						<div class="mlt-head">
-							<el-icon size="16" color="#606266" class="mlt-head-icon">
-								<Menu />
-							</el-icon>
-							菜单列表
-							<el-tooltip
-								effect="dark"
-								placement="right"
-								content="1.红色菜单代表状态禁用; 2.添加菜单，如果是目录，组件地址为空即可; 3.添加根节点菜单，父级ID为空即可; 4.支持拖拽菜单;"
-							>
-								<el-icon size="16" color="var(--el-color-primary)" class="mlt-tooltip">
-									<QuestionFilled />
-								</el-icon>
-							</el-tooltip>
-						</div>
-						<el-tree
-							ref="treeRef"
-							:data="data"
-							:props="defaultTreeProps"
-							:filter-node-method="filterNode"
-							:load="loadNode"
-							@node-drop="nodeDrop"
-							lazy
-							:indent="45"
-							@node-click="handleNodeClick"
-							highlight-current
-						>
-							<template #default="{ node, data }">
-								<element-tree-line :node="node" :showLabelLine="false" :indent="32">
-									<span v-if="data.status" class="text-center font-black font-normal">
-										<SvgIcon :name="node.data.icon" color="var(--el-color-primary)" />
-										&nbsp;{{ node.label }}
-									</span>
-									<span v-else class="text-center font-black text-red-700 font-normal">
-										<SvgIcon :name="node.data.icon" />&nbsp;{{ node.label }}
-									</span>
-								</element-tree-line>
-							</template>
-						</el-tree>
-					</div>
-
-					<div class="menu-left-tags">
-						<el-tooltip effect="dark" content="新增">
-							<el-icon size="16" @click="handleUpdateMenu('create')" class="mlt-icon">
-								<Plus />
-							</el-icon>
-						</el-tooltip>
-
-						<el-tooltip effect="dark" content="编辑">
-							<el-icon size="16" @click="handleUpdateMenu('update')" class="mlt-icon">
-								<Edit />
-							</el-icon>
-						</el-tooltip>
-
-						<el-tooltip effect="dark" content="上移">
-							<el-icon size="16" @click="handleSort('up')" class="mlt-icon">
-								<Top />
-							</el-icon>
-						</el-tooltip>
-
-						<el-tooltip effect="dark" content="下移">
-							<el-icon size="16" @click="handleSort('down')" class="mlt-icon">
-								<Bottom />
-							</el-icon>
-						</el-tooltip>
-
-						<el-tooltip effect="dark" content="删除">
-							<el-icon size="16" @click="handleDeleteMenu()" class="mlt-icon">
-								<Delete />
-							</el-icon>
-						</el-tooltip>
-					</div>
 				</div>
 			</el-col>
 
 			<el-col :span="18">
 				<div class="menu-box menu-right-box">
-					<menuButton :select-menu="form" />
+					<MenuButtonCom ref="menuButtonRef" />
 				</div>
 			</el-col>
 		</el-row>
 
 		<el-drawer v-model="drawerVisible" title="菜单配置" direction="rtl" size="500px" :close-on-click-modal="false" :before-close="handleDrawerClose">
-			<div class="menu-box menu-drawer-box">
+			<MenuFormCom v-if="drawerVisible" :initFormData="drawerFormData" @drawerClose="handleDrawerClose" />
-				<div class="mcb-alert">
-					1.红色菜单代表状态禁用;<br />
-					2.添加菜单，如果是目录，组件地址为空即可;<br />
-					3.添加根节点菜单，父级ID为空即可;<br />
-					4.支持拖拽菜单;
-				</div>
-				<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
-					<el-form-item label="菜单名称" prop="name">
-						<el-input v-model="formData.name" />
-					</el-form-item>
-					<el-form-item label="父级菜单" prop="parent">
-						<el-input v-model="formData.parent" />
-					</el-form-item>
-					<el-form-item label="图标" prop="icon">
-						<IconSelector clearable v-model="formData.icon" />
-					</el-form-item>
-
-					<el-row>
-						<el-col :span="12">
-							<el-form-item label="状态">
-								<el-switch v-model="formData.show_status" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
-							</el-form-item>
-						</el-col>
-						<el-col :span="12">
-							<el-form-item v-if="formData.show_status" label="侧边显示">
-								<el-switch v-model="formData.slider_show" width="60" inline-prompt active-text="显示" inactive-text="隐藏" />
-							</el-form-item>
-						</el-col>
-					</el-row>
-
-					<el-form-item label="菜单状态">
-						<el-radio-group v-model="formData.menu_status">
-							<el-radio-button label="1" class="aaa">常规</el-radio-button>
-							<el-radio-button label="2">目录</el-radio-button>
-							<el-radio-button label="3">外链接</el-radio-button>
-						</el-radio-group>
-					</el-form-item>
-
-					<el-form-item label="备注" prop="remark">
-						<el-input v-model="formData.remark" maxlength="200" show-word-limit type="textarea" />
-					</el-form-item>
-
-					<el-divider></el-divider>
-
-					<div style="min-height: 184px">
-						<el-form-item v-if="formData.menu_status === '3'" required label="Url" prop="web_path">
-							<el-input v-model="formData.web_path" />
-						</el-form-item>
-
-						<el-form-item v-if="formData.menu_status === '1'" label="路由地址" prop="route_path">
-							<el-input v-model="formData.route_path" />
-						</el-form-item>
-
-						<el-form-item v-if="formData.menu_status === '1'" label="组件名称" prop="route_name">
-							<el-input v-model="formData.route_name" />
-						</el-form-item>
-
-						<el-form-item v-if="formData.menu_status === '1'" label="组件地址" prop="component">
-							<el-autocomplete
-								class="w-full"
-								v-model="formData.component"
-								:fetch-suggestions="querySearch"
-								:trigger-on-focus="false"
-								clearable
-								:debounce="100"
-								placeholder="输入组件地址"
-							/>
-						</el-form-item>
-
-						<el-form-item v-if="formData.menu_status === '1'" label="缓存">
-							<el-switch v-model="formData.cache" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
-						</el-form-item>
-					</div>
-
-					<el-divider></el-divider>
-				</el-form>
-
-				<div class="menus-btns">
-					<el-button @click="saveMenu()" type="primary">保存</el-button>
-					<!-- <el-button @click="newMenu()" type="primary" round :disabled="!form.id">新建</el-button>
-					<el-button @click="addChildMenu()" type="primary" round :disabled="!form.id">添加子级
-					</el-button> -->
-					<el-button @click="handleDrawerClose()">取消</el-button>
-				</div>
-			</div>
 		</el-drawer>
 	</fs-page>
 </template>
 
 <script lang="ts" setup name="menuPages">
-import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, h } from 'vue';
+import { ref, onMounted } from 'vue';
 import XEUtils from 'xe-utils';
-import { ElForm, ElTree, FormRules, ElMessageBox } from 'element-plus';
+import { ElMessageBox } from 'element-plus';
-import { getElementLabelLine } from 'element-tree-line';
+import MenuTreeCom from './components/MenuTreeCom/index.vue';
+import MenuButtonCom from './components/MenuButtonCom/index.vue';
+import MenuFormCom from './components/MenuFormCom/index.vue';
 import * as api from './api';
-import { Search } from '@element-plus/icons-vue';
+import { successNotification } from '/@/utils/message';
-import { errorMessage, successMessage, warningMessage } from '../../../utils/message';
+import { APIResponseData, MenuTreeItemType } from './types';
-import { FormTypes, TreeTypes, APIResponseData, ComponentFileItem } from './types';
-import type Node from 'element-plus/es/components/tree/src/model/node';
 
-const menuButton = defineAsyncComponent(() => import('./components/menuButton/index.vue'));
+let menuButtonRef = ref<InstanceType<typeof MenuButtonCom> | null>(null);
-const IconSelector = defineAsyncComponent(() => import('/@/components/iconSelector/index.vue'));
+let menuTreeData = ref([]);
-const SvgIcon = defineAsyncComponent(() => import('/@/components/svgIcon/index.vue'));
-
-const ElementTreeLine = getElementLabelLine(h);
-
-const filterText = ref('');
-const treeRef = ref<InstanceType<typeof ElTree>>();
 let drawerVisible = ref(false);
-let treeSelectNode = ref<Node | null>(null);
+let drawerFormData = ref<Partial<MenuTreeItemType>>({});
-let sortDisable = ref(false);
-
-let formData = reactive({
-	name: '',
-	parent: '',
-	icon: '',
-	show_status: true,
-	slider_show: true,
-	menu_status: '1',
-	remark: '',
-	component: '',
-	web_path: '',
-	route_path: '',
-	route_name: '',
-	cache: true,
-});
-
-watch(filterText, (val) => {
-	treeRef.value!.filter(val);
-});
-
-const defaultTreeProps: any = {
-	children: 'children',
-	label: 'name',
-	icon: 'icon',
-	isLeaf: (data: TreeTypes[], node: Node) => {
-		if (node.data.is_catalog) {
-			return false;
-		} else {
-			return true;
-		}
-	},
-};
-
-const validateWebPath = (rule: string, value: string, callback: Function) => {
-	let pattern = /^\/.*?/;
-	if (!pattern.test(value)) {
-		callback(new Error('请输入正确的地址'));
-	} else {
-		callback();
-	}
-};
-
-const filterNode = (value: string, data: any) => {
-	if (!value) return true;
-	return toRaw(data).name.indexOf(value) !== -1;
-};
-
-// 懒加载
-const loadNode = (node: Node, resolve: (data: TreeTypes[]) => void) => {
-	// @ts-ignore
-	if (node.level !== 0) {
-		// @ts-ignore
-		api.lazyLoadMenu({ parent: node.data.id }).then((res: APIResponseData) => {
-			resolve(res.data);
-		});
-	}
-};
-
-const nodeDrop = (draggingNode: Node, dropNode: Node) => {
-	// @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); // 判断当前是新增菜单，还是更新保存当前菜单
-
-let form: FormTypes<any> = reactive({
-	id: '',
-	parent: '',
-	name: '',
-	component: '',
-	web_path: '',
-	sort: 0,
-	status: true,
-	is_catalog: false,
-	permission: '',
-	icon: '',
-	visible: true,
-	cache: true,
-});
-
-const rules = reactive<FormRules>({
-	// @ts-ignore
-	web_path: [{ validator: validateWebPath, trigger: 'blur' }],
-	name: [{ required: true, message: '菜单名称必填', trigger: 'blur' }],
-	parent: [{ required: true, message: '父级菜单必选', trigger: ['blur', 'change'] }],
-});
-
-const formRef = ref<InstanceType<typeof ElForm>>();
-
-const querySearch = (queryString: string, cb: any) => {
-	const files: any = import.meta.glob('@views/**/*.vue');
-	let fileLists: Array<any> = [];
-	Object.keys(files).forEach((queryString: string) => {
-		fileLists.push({
-			label: queryString.replace(/(\.\/|\.vue)/g, ''),
-			value: queryString.replace(/(\.\/|\.vue)/g, ''),
-		});
-	});
-	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);
-};
-
-const createFilter = (queryString: string) => {
-	return (file: ComponentFileItem) => {
-		return file.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1;
-	};
-};
 
 const getData = () => {
 	api.GetList({}).then((ret: APIResponseData) => {
@@ -328,132 +44,52 @@ const getData = () => {
 			children: 'children',
 			strict: true,
 		});
-		data.value = result;
+		menuTreeData.value = result;
 	});
 };
 
-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();
-					handleDrawerClose();
-				});
-			} else {
-				// 新增菜单
-				form.component == '' ? (form.is_catalog = true) : (form.is_catalog = false);
-				api.AddObj(form).then((res: APIResponseData) => {
-					successMessage(res.msg as string);
-					getData();
-					handleDrawerClose();
-				});
-			}
-		} else {
-			errorMessage('请填写检查表单');
-		}
-	});
-};
-
-const newMenu = () => {
-	formRef.value?.resetFields();
-	isAddNewMenu.value = true;
-	handleDrawerClose();
-};
-
-const addChildMenu = () => {
-	let parentId = form.id;
-	formRef.value?.resetFields();
-	form.parent = parentId;
-	isAddNewMenu.value = true;
-	handleDrawerClose();
-};
-
-const handleNodeClick = (record: any, node: Node) => {
-	treeSelectNode.value = node;
-	Object.keys(toRaw(data)).forEach((key: string) => {
-		form[key] = record[key];
-	});
-	delete form.component_name;
-	form.id = record.id;
-	isAddNewMenu.value = false;
-};
-
 /**
- * 点击左侧编辑按钮
+ * 菜单的点击事件
  */
-const handleUpdateMenu = (type: string) => {
+const handleTreeClick = (record: MenuTreeItemType) => {
-	if (type === 'create') {
+	menuButtonRef.value?.handleRefreshTable(record);
-		drawerVisible.value = true;
+};
-		return;
+
-	}
+/**
-	if (!form.id) {
+ * 部门的 新增 or 编辑 事件
-		warningMessage('请选择菜单！');
+ */
-		return;
+const handleUpdateMenu = (type: string, record?: MenuTreeItemType) => {
+	if (type === 'update' && record) {
+		drawerFormData.value = record;
 	}
 	drawerVisible.value = true;
 };
-const handleDrawerClose = () => {
+const handleDrawerClose = (type?: string) => {
+	if (type === 'submit') {
+		getData();
+	}
 	drawerVisible.value = false;
+	drawerFormData.value = {};
 };
 
 /**
- * 删除菜单
+ * 部门的删除事件
  */
-const handleDeleteMenu = () => {
+const handleDeleteMenu = (id: string, callback: Function) => {
-	if (!form.id) {
-		warningMessage('请选择菜单！');
-		return;
-	}
 	ElMessageBox.confirm('您确认删除该菜单项吗?', '温馨提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
 		type: 'warning',
-	}).then(() => {
+	}).then(async () => {
-		api.DelObj(form).then((res: APIResponseData) => {
+		const res: APIResponseData = await api.DelObj(id);
-			successMessage(res.msg as string);
+		callback();
+		if (res?.code === 2000) {
+			successNotification(res.msg as string);
 			getData();
-			handleDrawerClose();
+		}
-		});
 	});
 };
 
-/**
- * 移动操作
- */
-const handleSort = async (type: string) => {
-	if (!form.id && treeSelectNode.value) {
-		warningMessage('请选择菜单！');
-		return;
-	}
-
-	if (sortDisable.value) return;
-	const parentList = treeSelectNode.value?.parent.childNodes || [];
-	const index = parentList.findIndex((i) => i.data.id === form.id);
-	const record = parentList.find((i) => i.data.id === form.id);
-
-	if (type === 'up') {
-		if (index === 0) return;
-		parentList.splice(index - 1, 0, record as any);
-		parentList.splice(index + 1, 1);
-		sortDisable.value = true;
-		await api.moveUp({ menu_id: form.id });
-		sortDisable.value = false;
-	}
-	if (type === 'down') {
-		parentList.splice(index + 2, 0, record as any);
-		parentList.splice(index, 1);
-		sortDisable.value = true;
-		await api.moveDown({ menu_id: form.id });
-		sortDisable.value = false;
-	}
-};
-
-// 页面打开后获取列表数据
 onMounted(() => {
 	getData();
 });
@@ -482,135 +118,9 @@ onMounted(() => {
 	position: relative;
 	border-radius: 0 8px 8px 0;
 	margin-right: 10px;
-
-	.mlt-head {
-		display: flex;
-		align-items: center;
-		margin-left: -8px;
-		color: #606266;
-		font-weight: 600;
-
-		.mlt-head-icon {
-			margin-right: 8px;
-			position: relative;
-			top: -1px;
-		}
-
-		.mlt-tooltip {
-			margin-left: 5px;
-			position: relative;
-			top: -1px;
-		}
-	}
-
-	.menu-left-tags {
-		height: 40px;
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		padding: 0 20px;
-		display: flex;
-		align-items: center;
-		justify-content: space-around;
-		box-sizing: border-box;
-
-		.mlt-icon {
-			cursor: pointer;
-			color: var(--el-color-primary);
-		}
-	}
 }
 
 .menu-right-box {
 	border-radius: 8px 0 0 8px;
 }
-
-.menus-btns {
-	padding-bottom: 10px;
-	box-sizing: border-box;
-}
-
-.menu-drawer-box {
-	border-radius: 8px;
-	margin: 0 10px;
-	overflow-y: auto;
-
-	.mcb-alert {
-		color: #fff;
-		line-height: 24px;
-		padding: 8px 16px;
-		margin-bottom: 20px;
-		border-radius: 4px;
-		background-color: var(--el-color-primary);
-	}
-}
-
-.font-normal {
-	font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
-}
-</style>
-
-<style lang="scss">
-.menu-left-tree {
-	height: calc(100% - 60px);
-	padding: 20px;
-	box-sizing: border-box;
-	overflow-y: auto;
-
-	.el-tree-node__content {
-		height: 32px !important;
-	}
-
-	.el-tree .el-tree-node__expand-icon svg {
-		display: none !important;
-		height: 0;
-		width: 0;
-	}
-
-	.el-tree-node__expand-icon {
-		font-size: 16px;
-	}
-
-	.el-tree-node__content > .el-tree-node__expand-icon {
-		padding: 0;
-		box-sizing: border-box;
-		margin-right: 5px;
-		margin-left: 24px;
-	}
-
-	.el-tree .el-tree-node__expand-icon.expanded {
-		-webkit-transform: rotate(0deg);
-		transform: rotate(0deg);
-	}
-
-	.el-tree .el-tree-node__expand-icon.is-leaf {
-		margin-left: 0;
-	}
-
-	.el-tree .el-tree-node__expand-icon:before {
-		background: url('../../../assets/img/menu-tree-show-icon.png') no-repeat center / 100%;
-		content: '';
-		display: block;
-		width: 24px;
-		height: 24px;
-	}
-
-	.el-tree .el-tree-node__expand-icon.expanded:before {
-		background: url('../../../assets/img/menu-tree-hidden-icon.png') no-repeat center / 100%;
-		content: '';
-		display: block;
-		width: 24px;
-		height: 24px;
-	}
-
-	.el-tree .is-leaf.el-tree-node__expand-icon::before {
-		display: block;
-		background: none !important;
-		content: '';
-		width: 18px;
-		height: 18px;
-		border: none;
-	}
-}
 </style>

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

@@ -1,7 +1,7 @@
 export interface TreeTypes {
-  id: number;
+  id?: number;
-  name: string;
+  name?: string;
-  status: boolean;
+  status?: boolean;
   children?: TreeTypes[];
 }
 
@@ -19,3 +19,44 @@ export interface ComponentFileItem {
   value: string;
   label: string;
 }
+
+export interface MenuTreeItemType {
+  id: number | string;
+  modifier_name: string;
+  creator_name: string;
+  create_datetime: string;
+  update_datetime: string;
+  menuPermission: string[];
+  hasChild: boolean;
+  description: string;
+  modifier: string;
+  dept_belong_id: string;
+  icon: string;
+  name: string;
+  sort: number;
+  is_link: boolean;
+  is_catalog: boolean;
+  web_path: string;
+  component: string;
+  component_name: string;
+  status: boolean;
+  cache: boolean;
+  visible: boolean;
+  creator: string;
+  parent: number | string;
+}
+
+export interface MenuFormDataType {
+  id?: number | string;
+  parent: number | string;
+  name: string;
+  component: string;
+  web_path: string;
+  icon: string;
+  cache: boolean;
+  status: boolean;
+  visible: boolean;
+  menu_status: string;
+  component_name: string;
+  description: string;
+}