From 7d821ed04389ef4141731c06ae4a470dec0136e9 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Wed, 28 Jan 2026 21:16:05 +0800
Subject: [PATCH] 优化代码
---
ruoyi-ui/src/views/system/menu/index.vue | 151 +++++++++++++++++++++++++++++---------------------
1 files changed, 88 insertions(+), 63 deletions(-)
diff --git a/ruoyi-ui/src/views/system/menu/index.vue b/ruoyi-ui/src/views/system/menu/index.vue
index 29285fd..a6b2f9c 100644
--- a/ruoyi-ui/src/views/system/menu/index.vue
+++ b/ruoyi-ui/src/views/system/menu/index.vue
@@ -117,6 +117,8 @@
/>
</el-form-item>
</el-col>
+ </el-row>
+ <el-row>
<el-col :span="24">
<el-form-item label="菜单类型" prop="menuType">
<el-radio-group v-model="form.menuType">
@@ -126,7 +128,9 @@
</el-radio-group>
</el-form-item>
</el-col>
- <el-col :span="24" v-if="form.menuType != 'F'">
+ </el-row>
+ <el-row>
+ <el-col :span="12" v-if="form.menuType != 'F'">
<el-form-item label="菜单图标" prop="icon">
<el-popover
placement="bottom-start"
@@ -148,15 +152,30 @@
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="菜单名称" prop="menuName">
- <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
- </el-form-item>
- </el-col>
- <el-col :span="12">
<el-form-item label="显示排序" prop="orderNum">
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
</el-form-item>
</el-col>
+ </el-row>
+ <el-row>
+ <el-col :span="12">
+ <el-form-item label="菜单名称" prop="menuName">
+ <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12" v-if="form.menuType == 'C'">
+ <el-form-item prop="routeName">
+ <el-input v-model="form.routeName" placeholder="请输入路由名称" />
+ <span slot="label">
+ <el-tooltip content="默认不填则和路由地址相同：如地址为：`user`，则名称为`User`（注意：为避免名字的冲突，特殊情况下请自定义，保证唯一性）" placement="top">
+ <i class="el-icon-question"></i>
+ </el-tooltip>
+ 路由名称
+ </span>
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row>
<el-col :span="12" v-if="form.menuType != 'F'">
<el-form-item prop="isFrame">
<span slot="label">
@@ -182,6 +201,8 @@
<el-input v-model="form.path" placeholder="请输入路由地址" />
</el-form-item>
</el-col>
+ </el-row>
+ <el-row>
<el-col :span="12" v-if="form.menuType == 'C'">
<el-form-item prop="component">
<span slot="label">
@@ -204,6 +225,8 @@
</span>
</el-form-item>
</el-col>
+ </el-row>
+ <el-row>
<el-col :span="12" v-if="form.menuType == 'C'">
<el-form-item prop="query">
<el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
@@ -229,6 +252,8 @@
</el-radio-group>
</el-form-item>
</el-col>
+ </el-row>
+ <el-row>
<el-col :span="12" v-if="form.menuType != 'F'">
<el-form-item prop="visible">
<span slot="label">
@@ -274,10 +299,10 @@
</template>
<script>
-import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
-import Treeselect from "@riophae/vue-treeselect";
-import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import IconSelect from "@/components/IconSelect";
+import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu"
+import Treeselect from "@riophae/vue-treeselect"
+import "@riophae/vue-treeselect/dist/vue-treeselect.css"
+import IconSelect from "@/components/IconSelect"
export default {
name: "Menu",
@@ -320,48 +345,48 @@
{ required: true, message: "路由地址不能为空", trigger: "blur" }
]
}
- };
+ }
},
created() {
- this.getList();
+ this.getList()
},
methods: {
// 选择图标
selected(name) {
- this.form.icon = name;
+ this.form.icon = name
},
/** 查询菜单列表 */
getList() {
- this.loading = true;
+ this.loading = true
listMenu(this.queryParams).then(response => {
- this.menuList = this.handleTree(response.data, "menuId");
- this.loading = false;
- });
+ this.menuList = this.handleTree(response.data, "menuId")
+ this.loading = false
+ })
},
/** 转换菜单数据结构 */
normalizer(node) {
if (node.children && !node.children.length) {
- delete node.children;
+ delete node.children
}
return {
id: node.menuId,
label: node.menuName,
children: node.children
- };
+ }
},
/** 查询菜单下拉树结构 */
getTreeselect() {
listMenu().then(response => {
- this.menuOptions = [];
- const menu = { menuId: 0, menuName: '主类目', children: [] };
- menu.children = this.handleTree(response.data, "menuId");
- this.menuOptions.push(menu);
- });
+ this.menuOptions = []
+ const menu = { menuId: 0, menuName: '主类目', children: [] }
+ menu.children = this.handleTree(response.data, "menuId")
+ this.menuOptions.push(menu)
+ })
},
// 取消按钮
cancel() {
- this.open = false;
- this.reset();
+ this.open = false
+ this.reset()
},
// 表单重置
reset() {
@@ -376,77 +401,77 @@
isCache: "0",
visible: "0",
status: "0"
- };
- this.resetForm("form");
+ }
+ this.resetForm("form")
},
/** 搜索按钮操作 */
handleQuery() {
- this.getList();
+ this.getList()
},
/** 重置按钮操作 */
resetQuery() {
- this.resetForm("queryForm");
- this.handleQuery();
+ this.resetForm("queryForm")
+ this.handleQuery()
},
/** 新增按钮操作 */
handleAdd(row) {
- this.reset();
- this.getTreeselect();
+ this.reset()
+ this.getTreeselect()
if (row != null && row.menuId) {
- this.form.parentId = row.menuId;
+ this.form.parentId = row.menuId
} else {
- this.form.parentId = 0;
+ this.form.parentId = 0
}
- this.open = true;
- this.title = "添加菜单";
+ this.open = true
+ this.title = "添加菜单"
},
/** 展开/折叠操作 */
toggleExpandAll() {
- this.refreshTable = false;
- this.isExpandAll = !this.isExpandAll;
+ this.refreshTable = false
+ this.isExpandAll = !this.isExpandAll
this.$nextTick(() => {
- this.refreshTable = true;
- });
+ this.refreshTable = true
+ })
},
/** 修改按钮操作 */
handleUpdate(row) {
- this.reset();
- this.getTreeselect();
+ this.reset()
+ this.getTreeselect()
getMenu(row.menuId).then(response => {
- this.form = response.data;
- this.open = true;
- this.title = "修改菜单";
- });
+ this.form = response.data
+ this.open = true
+ this.title = "修改菜单"
+ })
},
/** 提交按钮 */
submitForm: function() {
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.menuId != undefined) {
- updateMenu(this.form).then(response => {
- this.$modal.msgSuccess("修改成功");
- this.open = false;
- this.getList();
- });
+ updateMenu(this.form).then(() => {
+ this.$modal.msgSuccess("修改成功")
+ this.open = false
+ this.getList()
+ })
} else {
- addMenu(this.form).then(response => {
- this.$modal.msgSuccess("新增成功");
- this.open = false;
- this.getList();
- });
+ addMenu(this.form).then(() => {
+ this.$modal.msgSuccess("新增成功")
+ this.open = false
+ this.getList()
+ })
}
}
- });
+ })
},
/** 删除按钮操作 */
handleDelete(row) {
this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function() {
- return delMenu(row.menuId);
+ return delMenu(row.menuId)
}).then(() => {
- this.getList();
- this.$modal.msgSuccess("删除成功");
- }).catch(() => {});
+ this.getList()
+ this.$modal.msgSuccess("删除成功")
+ }).catch(() => {})
}
}
-};
+}
</script>
--
Gitblit v1.9.3