From dcd942e0d838406741234caa667fefc9a786f692 Mon Sep 17 00:00:00 2001 From: hxr <1490493387@qq.com> Date: Mon, 27 May 2024 00:15:12 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20:sparkles:=20=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E8=B7=AF=E7=94=B1=E5=8F=82=E6=95=B0=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/menu/model.ts | 11 +- src/views/demo/route-param.vue | 16 +++ src/views/system/menu/index.vue | 244 +++++++++++++++++++++----------- 3 files changed, 186 insertions(+), 85 deletions(-) create mode 100644 src/views/demo/route-param.vue diff --git a/src/api/menu/model.ts b/src/api/menu/model.ts index 408a577e..a9e846f5 100644 --- a/src/api/menu/model.ts +++ b/src/api/menu/model.ts @@ -89,7 +89,7 @@ export interface MenuForm { /** * 排序 */ - sort: number; + sort?: number; /** * 组件路径 */ @@ -106,7 +106,7 @@ export interface MenuForm { /** * 菜单类型 */ - type: MenuTypeEnum; + type?: MenuTypeEnum; /** * 权限标识 @@ -121,6 +121,13 @@ export interface MenuForm { * 【目录】只有一个子路由是否始终显示 */ alwaysShow?: number; + + params?: KeyValue[]; +} + +interface KeyValue { + key: string; + value: string; } /** diff --git a/src/views/demo/route-param.vue b/src/views/demo/route-param.vue new file mode 100644 index 00000000..a904ee23 --- /dev/null +++ b/src/views/demo/route-param.vue @@ -0,0 +1,16 @@ + + + + + diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue index db6e07fb..dd1ffe45 100644 --- a/src/views/system/menu/index.vue +++ b/src/views/system/menu/index.vue @@ -14,7 +14,7 @@ 搜索 - + 重置 @@ -27,7 +27,7 @@ 新增 新增 @@ -120,13 +120,13 @@ type="primary" link size="small" - @click.stop="openDialog(undefined, scope.row.id)" + @click.stop="handleDialogOpen(undefined, scope.row.id)" > 编辑 - - 目录 - 菜单 - 按钮 - 外链 + + 目录 + 菜单 + 按钮 + 外链 @@ -190,9 +192,22 @@ formData.type == MenuTypeEnum.CATALOG || formData.type == MenuTypeEnum.MENU " - label="路由路径" + label="" prop="path" > + - + + + + + +
+ 添加路由参数 +
+ +
+
+ + + = + + + + + + + + + +
+
+ + - 显示 - 隐藏 + 显示 + 隐藏 @@ -237,14 +324,14 @@ formData.type === MenuTypeEnum.CATALOG || formData.type === MenuTypeEnum.MENU " - label="是否始终显示" > - 是 - 否 + 是 + 否 - 是 - 否 + 开启 + 关闭 @@ -327,66 +414,67 @@ const menuFormRef = ref(ElForm); const loading = ref(false); const dialog = reactive({ - title: "", + title: "新增菜单", visible: false, }); +// 查询参数 const queryParams = reactive({}); -const menuList = ref([]); - +// 菜单表格数据 +const menuTableData = ref([]); +// 顶级菜单下拉选项 const menuOptions = ref([]); -const formData = reactive({ +// 初始菜单表单数据 +const initialMenuFormData = ref({ + id: undefined, parentId: 0, visible: 1, sort: 1, - type: MenuTypeEnum.MENU, + type: MenuTypeEnum.MENU, // 默认“菜单” alwaysShow: 0, - keepAlive: 0, + keepAlive: 1, + params: [], }); +// 菜单表单数据 +const formData = ref({ ...initialMenuFormData.value }); + +// 表单验证规则 const rules = reactive({ parentId: [{ required: true, message: "请选择顶级菜单", trigger: "blur" }], name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }], type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }], path: [{ required: true, message: "请输入路由路径", trigger: "blur" }], - component: [{ required: true, message: "请输入组件路径", trigger: "blur" }], visible: [{ required: true, message: "请输入路由路径", trigger: "blur" }], }); // 选择表格的行菜单ID -const selectedRowMenuId = ref(); +const selectedMenuId = ref(); -const menuCacheData = reactive({ - type: "", - path: "", -}); - -/** - * 查询 - */ +// 查询 function handleQuery() { - // 重置父组件 loading.value = true; MenuAPI.getList(queryParams) .then((data) => { - menuList.value = data; + menuTableData.value = data; }) - .then(() => { + .finally(() => { loading.value = false; }); } -/** 重置查询 */ -function resetQuery() { +// 重置查询 +function handleResetQuery() { queryFormRef.value.resetFields(); handleQuery(); } -/**行点击事件 */ -function onRowClick(row: MenuVO) { - selectedRowMenuId.value = row.id; +// 行点击事件 +function handleRowClick(row: MenuVO) { + // 记录表格选择的菜单ID，新增子菜单作为父菜单ID + selectedMenuId.value = row.id; } /** @@ -395,7 +483,7 @@ function onRowClick(row: MenuVO) { * @param parentId 父菜单ID * @param menuId 菜单ID */ -function openDialog(parentId?: number, menuId?: number) { +function handleDialogOpen(parentId?: number, menuId?: number) { MenuAPI.getOptions() .then((data) => { menuOptions.value = [{ value: 0, label: "顶级菜单", children: data }]; @@ -405,24 +493,30 @@ function openDialog(parentId?: number, menuId?: number) { if (menuId) { dialog.title = "编辑菜单"; MenuAPI.getFormData(menuId).then((data) => { - Object.assign(formData, data); - menuCacheData.type = data.type; - menuCacheData.path = data.path ?? ""; + initialMenuFormData.value = { ...data }; + formData.value = data; }); } else { dialog.title = "新增菜单"; - formData.parentId = parentId; + formData.value.parentId = parentId; } }); } -/** 菜单类型切换事件处理 */ -function onMenuTypeChange() { - // 如果菜单类型改变，清空路由路径；未改变在切换后还原路由路径 - if (formData.type !== menuCacheData.type) { - formData.path = ""; - } else { - formData.path = menuCacheData.path; +// 菜单类型切换 +function handleMenuTypeChange() { + // 如果菜单类型改变 + if (formData.value.type !== initialMenuFormData.value.type) { + if (formData.value.type === MenuTypeEnum.MENU) { + // 目录切换到菜单时，清空组件路径 + if (initialMenuFormData.value.type === MenuTypeEnum.CATALOG) { + formData.value.component = ""; + } else { + // 其他情况，保留原有的组件路径 + formData.value.path = initialMenuFormData.value.path; + formData.value.component = initialMenuFormData.value.component; + } + } } } @@ -430,15 +524,15 @@ function onMenuTypeChange() { function submitForm() { menuFormRef.value.validate((isValid: boolean) => { if (isValid) { - const menuId = formData.id; + const menuId = formData.value.id; if (menuId) { - MenuAPI.update(menuId, formData).then(() => { + MenuAPI.update(menuId, formData.value).then(() => { ElMessage.success("修改成功"); closeDialog(); handleQuery(); }); } else { - MenuAPI.add(formData).then(() => { + MenuAPI.add(formData.value).then(() => { ElMessage.success("新增成功"); closeDialog(); handleQuery(); @@ -448,7 +542,7 @@ function submitForm() { }); } -/** 删除菜单 */ +// 删除菜单 function handleDelete(menuId: number) { if (!menuId) { ElMessage.warning("请勾选删除项"); @@ -469,27 +563,11 @@ function handleDelete(menuId: number) { .catch(() => ElMessage.info("已取消删除")); } -/** 关闭弹窗 */ +// 关闭弹窗 function closeDialog() { dialog.visible = false; - resetForm(); -} - -/** 重置表单 */ -function resetForm() { menuFormRef.value.resetFields(); menuFormRef.value.clearValidate(); - - formData.id = undefined; - formData.parentId = 0; - formData.visible = 1; - formData.sort = 1; - formData.perm = undefined; - formData.component = undefined; - formData.path = undefined; - formData.redirect = undefined; - formData.alwaysShow = undefined; - formData.keepAlive = undefined; } onMounted(() => {