页面美化：菜单管理页面优化

web/.env.development

@@ -3,6 +3,7 @@ ENV = 'development'
 
 # 本地环境接口地址
 VITE_API_URL = 'https://demo.dvadmin.com/api'
+#VITE_API_URL = 'http://192.168.1.160:8000'
 
 # 是否启用按钮权限
 VITE_PM_ENABLED = true

web/src/assets/style/reset.scss

@@ -0,0 +1,9 @@
+.fs-crud-container {
+	.el-table thead {
+		color: #606266;
+	}
+	.el-input__inner::placeholder {
+		color: #dcdfe6;
+		font-size: 12px;
+	}
+}

web/src/main.ts

@@ -30,7 +30,9 @@ import { scanAndInstallPlugins } from '/@/views/plugins/index';
 import VXETable from 'vxe-table'
 import 'vxe-table/lib/style.css'
 
+import '/@/assets/style/reset.scss';
 import 'element-tree-line/dist/style.css'
+
 let forIconfont = analyzingIconForIconfont(iconfont); //解析class
 iconList.addIcon(forIconfont.list); // 添加iconfont dvadmin3的icon
 iconList.addIcon(elementPlus); // 添加element plus的图标

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

@@ -1,27 +1,23 @@
 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 { request } from '/@/utils/service';
 //此处为crudOptions配置
 export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
 	const pageRequest = async (query: UserPageQuery) => {
-		if(context!.selectOptions.value.id){
+		if (context!.selectOptions.value.id) {
 			return await api.GetList({ menu: context!.selectOptions.value.id } as any);
-		}else{
+		} else {
-			return undefined
+			return undefined;
 		}
-
 	};
 	const editRequest = async ({ form, row }: EditReq) => {
 		return await api.UpdateObj({ ...form, menu: row.menu });
@@ -35,15 +31,15 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 	return {
 		crudOptions: {
 			search: {
-        container: {
+				container: {
-          action: {
+					action: {
-            //按钮栏配置
+						//按钮栏配置
-            col: {
+						col: {
-              span: 8
+							span: 8,
-            }
+						},
-          }
+					},
-        },
+				},
-      },
+			},
 			rowHandle: {
 				//固定右侧
 				fixed: 'right',
@@ -53,12 +49,12 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
 						show: false,
 					},
 					edit: {
-						iconRight: 'Edit',
+						icon: '',
-						type: 'text',
+						type: 'primary',
 					},
 					remove: {
-						iconRight: 'Delete',
+						icon: '',
-						type: 'text',
+						type: 'primary',
 					},
 				},
 			},

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

@@ -3,25 +3,27 @@
 		<el-row class="s-el-row">
 			<el-col :span="6">
 				<div class="menu-box menu-left-box">
-					<el-input v-model="filterText" :placeholder="placeholder" />
+					<el-input v-model="filterText" :prefix-icon="Search" placeholder="请输入菜单名称" />
 					<div class="menu-left-tree">
 						<div class="mlt-head">
-							<img src="../../../assets/img/menu-tree-head-icon.png" alt="" />
+							<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" class="mlt-tooltip">
+								<el-icon size="16" color="var(--el-color-primary)" class="mlt-tooltip">
 									<QuestionFilled />
 								</el-icon>
 							</el-tooltip>
 						</div>
-						<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="treeProps"
+						<el-tree ref="treeRef" class="font-mono font-bold leading-6 text-7xl" :data="data" :props="defaultTreeProps"
-							:filter-node-method="filterNode" :load="loadNode" :allow-drag="allowDrag" :allow-drop="allowDrop"
+							:filter-node-method="filterNode" :load="loadNode" @node-drop="nodeDrop" lazy :indent="45"
-							@node-drop="nodeDrop" lazy :indent="45" draggable @node-click="handleNodeClick" default-expand-all>
+							@node-click="handleNodeClick" highlight-current default-expand-all>
 							<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" />
+										<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">
@@ -32,128 +34,142 @@
 							</template>
 						</el-tree>
 					</div>
-				</div>
+
-			</el-col>
+					<div class="menu-left-tags">
-			<el-col :span="8">
+						<el-tooltip effect="dark" content="新增">
-				<div class="menu-box menu-center-box">
+							<el-icon size="16" @click="handleUpdateMenu('create')" class="mlt-icon">
-					<div class="mcb-alert">
+								<Plus />
-						1.红色菜单代表状态禁用;<br />
+							</el-icon>
-						2.添加菜单，如果是目录，组件地址为空即可;<br />
+						</el-tooltip>
-						3.添加根节点菜单，父级ID为空即可;<br />
+
-						4.支持拖拽菜单;
+						<el-tooltip effect="dark" content="编辑">
-					</div>
+							<el-icon size="16" @click="handleUpdateMenu('update')" class="mlt-icon">
-					<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" label-position="right">
+								<Edit />
-						<el-divider>
+							</el-icon>
-							<strong>菜单配置</strong>
+						</el-tooltip>
-						</el-divider>
+
-						<el-form-item label="菜单ID" prop="id">
+						<el-tooltip effect="dark" content="上移">
-							<el-input v-model="form.id" disabled />
+							<el-icon size="16" class="mlt-icon">
-						</el-form-item>
+								<Top />
-						<el-form-item label="父级ID" prop="parent">
+							</el-icon>
-							<el-input v-model="form.parent" />
+						</el-tooltip>
-						</el-form-item>
+
-						<el-form-item required label="菜单名称" prop="name">
+						<el-tooltip effect="dark" content="下移">
-							<el-input v-model="form.name" />
+							<el-icon size="16" class="mlt-icon">
-						</el-form-item>
+								<Bottom />
-						<el-form-item label="组件地址" prop="component">
+							</el-icon>
-							<el-autocomplete class="w-full" v-model="form.component" :fetch-suggestions="querySearch"
+						</el-tooltip>
-								:trigger-on-focus="false" clearable :debounce="100" placeholder="输入组件地址" />
+
-						</el-form-item>
+						<el-tooltip effect="dark" content="删除">
-						<el-form-item required label="Url" prop="web_path">
+							<el-icon size="16" @click="handleDeleteMenu()" class="mlt-icon">
-							<el-input v-model="form.web_path" />
+								<Delete />
-						</el-form-item>
+							</el-icon>
-						<el-form-item label="排序" prop="sort">
+						</el-tooltip>
-							<el-input-number v-model="form.sort" controls-position="right" />
-						</el-form-item>
-						<el-form-item label="状态">
-							<el-radio-group v-model="form.status">
-								<el-radio :label="true">启用</el-radio>
-								<el-radio :label="false">禁用</el-radio>
-							</el-radio-group>
-						</el-form-item>
-						<el-form-item label="侧边可见">
-							<el-radio-group v-model="form.visible">
-								<el-radio :label="true">启用</el-radio>
-								<el-radio :label="false">禁用</el-radio>
-							</el-radio-group>
-						</el-form-item>
-						<el-form-item label="缓存">
-							<el-radio-group v-model="form.cache">
-								<el-radio :label="true">启用</el-radio>
-								<el-radio :label="false">禁用</el-radio>
-							</el-radio-group>
-						</el-form-item>
-						<el-form-item label="图标" prop="icon">
-							<IconSelector clearable v-model="form.icon" />
-						</el-form-item>
-					</el-form>
-					<el-divider></el-divider>
-					<div class="menus-btns">
-						<el-button @click="saveMenu()" type="primary" round>保存</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="deleteMenu()" type="primary" round :disabled="!form.id">删除菜单
-						</el-button>
 					</div>
 				</div>
 			</el-col>
-			<el-col :span="10">
+
+			<el-col :span="18">
 				<div class="menu-box menu-right-box">
 					<menuButton :select-menu="form" />
 				</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">
+				<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="菜单ID" prop="id">
+						<el-input v-model="form.id" disabled />
+					</el-form-item>
+					<el-form-item label="父级ID" prop="parent">
+						<el-input v-model="form.parent" />
+					</el-form-item>
+					<el-form-item required label="菜单名称" prop="name">
+						<el-input v-model="form.name" />
+					</el-form-item>
+					<el-form-item label="组件地址" prop="component">
+						<el-autocomplete class="w-full" v-model="form.component" :fetch-suggestions="querySearch"
+							:trigger-on-focus="false" clearable :debounce="100" placeholder="输入组件地址" />
+					</el-form-item>
+					<el-form-item required label="Url" prop="web_path">
+						<el-input v-model="form.web_path" />
+					</el-form-item>
+					<el-form-item label="排序" prop="sort">
+						<el-input-number v-model="form.sort" controls-position="right" />
+					</el-form-item>
+					<el-form-item label="状态">
+						<el-radio-group v-model="form.status">
+							<el-radio :label="true">启用</el-radio>
+							<el-radio :label="false">禁用</el-radio>
+						</el-radio-group>
+					</el-form-item>
+					<el-form-item label="侧边可见">
+						<el-radio-group v-model="form.visible">
+							<el-radio :label="true">启用</el-radio>
+							<el-radio :label="false">禁用</el-radio>
+						</el-radio-group>
+					</el-form-item>
+					<el-form-item label="缓存">
+						<el-radio-group v-model="form.cache">
+							<el-radio :label="true">启用</el-radio>
+							<el-radio :label="false">禁用</el-radio>
+						</el-radio-group>
+					</el-form-item>
+					<el-form-item label="图标" prop="icon">
+						<IconSelector clearable v-model="form.icon" />
+					</el-form-item>
+				</el-form>
+				<el-divider></el-divider>
+				<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="menu">
+<script lang="ts" setup name="menuPages">
+import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, h } from 'vue';
+import XEUtils from 'xe-utils';
+import { ElForm, ElTree, FormRules, ElMessageBox } from 'element-plus';
 import { getElementLabelLine } from "element-tree-line";
 import * as api from './api';
-import * as menuButoonApi from './components/menuButton/api';
+import { Search } from '@element-plus/icons-vue'
-import { ElForm, ElTree, FormRules, ElMessageBox } from 'element-plus';
+import { errorMessage, successMessage, warningMessage } from '../../../utils/message';
-import { ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, onActivated, h } from 'vue';
+import { FormTypes, TreeTypes, APIResponseData, ComponentFileItem } from './types'
-import XEUtils from 'xe-utils';
+import type Node from 'element-plus/es/components/tree/src/model/node'
-import { errorMessage, successMessage } from '../../../utils/message';
 
-interface Tree {
-	id: number;
-	name: string;
-	status: boolean;
-	children?: Tree[];
-}
-
-interface APIResponseData {
-	code?: number;
-	data: [];
-	msg?: string;
-}
-
-interface Form<T> {
-	[key: string]: T;
-}
-
-interface ComponentFileItem {
-	value: string;
-	label: string;
-}
-
-const ElementTreeLine = getElementLabelLine(h);
-
-// 引入组件
 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 ElementTreeLine = getElementLabelLine(h);
+
 const filterText = ref('');
 const treeRef = ref<InstanceType<typeof ElTree>>();
+let drawerVisible = ref(false)
 
-const treeProps = {
+watch(filterText, (val) => {
+	treeRef.value!.filter(val);
+});
+
+const defaultTreeProps: any = {
 	children: 'children',
 	label: 'name',
 	icon: 'icon',
-	isLeaf: (data: Tree[], node: Node) => {
+	isLeaf: (data: TreeTypes[], node: Node) => {
-		// @ts-ignore
 		if (node.data.is_catalog) {
 			return false;
 		} else {
@@ -171,17 +187,13 @@ const validateWebPath = (rule: string, value: string, callback: Function) => {
 	}
 };
 
-watch(filterText, (val) => {
+const filterNode = (value: string, data: any) => {
-	treeRef.value!.filter(val);
-});
-
-const filterNode = (value: string, data: Tree) => {
 	if (!value) return true;
 	return toRaw(data).name.indexOf(value) !== -1;
 };
 
 // 懒加载
-const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
+const loadNode = (node: Node, resolve: (data: TreeTypes[]) => void) => {
 	// @ts-ignore
 	if (node.level !== 0) {
 		// @ts-ignore
@@ -191,25 +203,7 @@ const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
 	}
 };
 
-// 判断是否可以拖动
+const nodeDrop = (draggingNode: Node, dropNode: Node) => {
-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
@@ -223,15 +217,13 @@ let data = ref([]);
 
 let isAddNewMenu = ref(false); // 判断当前是新增菜单，还是更新保存当前菜单
 
-const permissionDrawerVisible = ref(false);
+let form: FormTypes<any> = reactive({
-
-let form: Form<any> = reactive({
 	id: '',
 	parent: '',
 	name: '',
 	component: '',
 	web_path: '',
-	sort: '',
+	sort: 0,
 	status: true,
 	is_catalog: false,
 	permission: '',
@@ -239,8 +231,10 @@ let form: Form<any> = reactive({
 	visible: true,
 	cache: true,
 });
-
+const rules = reactive<FormRules>({
-let menuPermissonList = ref([]);
+	// @ts-ignore
+	web_path: [{ validator: validateWebPath, trigger: 'blur' }],
+});
 
 const formRef = ref<InstanceType<typeof ElForm>>();
 
@@ -268,11 +262,6 @@ const createFilter = (queryString: string) => {
 	};
 };
 
-const rules = reactive<FormRules>({
-	// @ts-ignore
-	web_path: [{ validator: validateWebPath, trigger: 'blur' }],
-});
-
 const getData = () => {
 	api.GetList({}).then((ret: APIResponseData) => {
 		const responseData = ret.data;
@@ -285,12 +274,6 @@ 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) {
@@ -301,6 +284,7 @@ const saveMenu = () => {
 				api.UpdateObj(form).then((res: APIResponseData) => {
 					successMessage(res.msg as string);
 					getData();
+					handleDrawerClose()
 				});
 			} else {
 				// 新增菜单
@@ -308,6 +292,7 @@ const saveMenu = () => {
 				api.AddObj(form).then((res: APIResponseData) => {
 					successMessage(res.msg as string);
 					getData();
+					handleDrawerClose()
 				});
 			}
 		} else {
@@ -319,6 +304,7 @@ const saveMenu = () => {
 const newMenu = () => {
 	formRef.value?.resetFields();
 	isAddNewMenu.value = true;
+	handleDrawerClose()
 };
 
 const addChildMenu = () => {
@@ -326,16 +312,44 @@ const addChildMenu = () => {
 	formRef.value?.resetFields();
 	form.parent = parentId;
 	isAddNewMenu.value = true;
+	handleDrawerClose();
 };
 
-const addSameLevelMenu = () => {
+const handleNodeClick = (data: any) => {
-	let parentId = form.parent;
+	Object.keys(toRaw(data)).forEach((key: string) => {
-	formRef.value?.resetFields();
+		form[key] = data[key];
-	form.parent = parentId;
+	});
-	isAddNewMenu.value = true;
+	delete form.component_name;
+	form.id = data.id;
+	isAddNewMenu.value = false;
 };
 
-const deleteMenu = () => {
+/**
+ * 点击左侧编辑按钮
+ */
+const handleUpdateMenu = (type: string) => {
+	if (type === 'create') {
+		drawerVisible.value = true
+		return
+	}
+	if (!form.id) {
+		warningMessage('请选择菜单！')
+		return
+	}
+	drawerVisible.value = true
+}
+const handleDrawerClose = () => {
+	drawerVisible.value = false
+}
+
+/**
+ * 删除菜单
+ */
+const handleDeleteMenu = () => {
+	if (!form.id) {
+		warningMessage('请选择菜单！')
+		return
+	}
 	ElMessageBox.confirm(
 		'您确认删除该菜单项吗?',
 		'温馨提示',
@@ -348,37 +362,15 @@ const deleteMenu = () => {
 		api.DelObj(form).then((res: APIResponseData) => {
 			successMessage(res.msg as string);
 			getData();
+			handleDrawerClose();
 		});
 	})
-
-};
-
-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;
 };
 
 // 页面打开后获取列表数据
 onMounted(() => {
 	getData();
 });
-onActivated(() => {
-	console.log('keep-alive成功')
-});
 </script>
 
 <style lang="scss" scoped>
@@ -397,24 +389,22 @@ onActivated(() => {
 	height: 100%;
 	padding: 10px;
 	background-color: #fff;
-	overflow-y: auto;
 	box-sizing: border-box;
 }
 
 .menu-left-box {
+	position: relative;
 	border-radius: 0 8px 8px 0;
+	margin-right: 10px;
 
-	//margin-right: 10px;
 	.mlt-head {
 		display: flex;
 		align-items: center;
 		margin-left: -8px;
 		color: #606266;
+		font-weight: 600;
 
-		img {
+		.mlt-head-icon {
-			display: block;
-			width: 16px;
-			height: 16px;
 			margin-right: 8px;
 			position: relative;
 			top: -1px;
@@ -426,18 +416,23 @@ onActivated(() => {
 			top: -1px;
 		}
 	}
-}
 
-.menu-center-box {
+	.menu-left-tags {
-	border-radius: 8px;
+		height: 40px;
-	margin: 0 10px;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 0 20px;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		box-sizing: border-box;
 
-	.mcb-alert {
+		.mlt-icon {
-		color: #fff;
+			cursor: pointer;
-		line-height: 24px;
+			color: var(--el-color-primary);
-		padding: 8px 16px;
+		}
-		border-radius: 4px;
-		background-color: var(--el-color-primary);
 	}
 }
 
@@ -450,6 +445,21 @@ onActivated(() => {
 	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;
 }
@@ -457,8 +467,10 @@ onActivated(() => {
 
 <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;

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

@@ -0,0 +1,21 @@
+export interface TreeTypes {
+  id: number;
+  name: string;
+  status: boolean;
+  children?: TreeTypes[];
+}
+
+export interface APIResponseData {
+  code?: number;
+  data: [];
+  msg?: string;
+}
+
+export interface FormTypes<T> {
+  [key: string]: T;
+}
+
+export interface ComponentFileItem {
+  value: string;
+  label: string;
+}