wenyongda/ZrAdminNetCore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

⚡优化菜单管理

Browse Source
This commit is contained in:
不做码农 2023-09-24 16:50:57 +08:00
parent dda94fd572
commit 1db16082be
2 changed files with 151 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ZR.Admin.WebApi/Controllers/System/SysMenuController.cs
View File

@ -28,16 +28,28 @@ namespace ZR.Admin.WebApi.Controllers.System
this.sysRoleMenuService = sysRoleMenuService; this.sysRoleMenuService = sysRoleMenuService;
} }
/// <summary>
/// 获取菜单树列表
/// </summary>
/// <returns></returns>
[ActionPermissionFilter(Permission = "system:menu:list")]
[HttpGet("treelist")]
public IActionResult TreeMenuList([FromQuery] MenuQueryDto menu)
{
long userId = HttpContext.GetUId();
return SUCCESS(sysMenuService.SelectTreeMenuList(menu, userId), "yyyy-MM-dd HH:mm:ss");
}
/// <summary> /// <summary>
/// 获取菜单列表 /// 获取菜单列表
/// </summary> /// </summary>
/// <returns></returns> /// <returns></returns>
[ActionPermissionFilter(Permission = "system:menu:list")] [ActionPermissionFilter(Permission = "system:menu:list")]
[HttpGet("list")] [HttpGet("list")]
public IActionResult TreeMenuList([FromQuery] MenuQueryDto menu) public IActionResult MenuList([FromQuery] MenuQueryDto menu)
{ {
long userId = HttpContext.GetUId(); long userId = HttpContext.GetUId();
return SUCCESS(sysMenuService.SelectTreeMenuList(menu, userId), "yyyy-MM-dd HH:mm:ss"); return SUCCESS(sysMenuService.SelectMenuList(menu, userId), "yyyy-MM-dd HH:mm:ss");
} }
/// <summary> /// <summary>

272
ZR.Vue/src/views/system/menu/index.vue
View File

@ -25,13 +25,15 @@
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row> </el-row>
<el-table v-if="refreshTable" v-loading="loading" :data="menuList" :default-expand-all="isExpandAll" <el-table
v-if="refreshTable"
v-loading="loading"
:data="menuList"
:default-expand-all="isExpandAll"
row-key="menuId" row-key="menuId"
node-key="menuId"
border border
lazy :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
:load="loadMenu" >
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column> <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
<el-table-column prop="icon" label="图标" align="center" width="80"> <el-table-column prop="icon" label="图标" align="center" width="80">
<template slot-scope="scope"> <template slot-scope="scope">
@ -49,8 +51,13 @@
<el-table-column prop="orderNum" label="排序" width="90" align="center"> <el-table-column prop="orderNum" label="排序" width="90" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-show="editIndex != scope.$index" @click="editCurrRow(scope.$index, 'rowkeY')">{{ scope.row.orderNum }}</span> <span v-show="editIndex != scope.$index" @click="editCurrRow(scope.$index, 'rowkeY')">{{ scope.row.orderNum }}</span>
<el-input :id="scope.$index+'rowkeY'" size="mini" v-show="(editIndex == scope.$index)" v-model="scope.row.orderNum" <el-input
@blur="handleChangeSort(scope.row)"></el-input> :id="scope.$index + 'rowkeY'"
size="mini"
v-show="editIndex == scope.$index"
v-model="scope.row.orderNum"
@blur="handleChangeSort(scope.row)"
></el-input>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
@ -70,7 +77,9 @@
<template slot-scope="scope"> <template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
<el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button> <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']"
>删除</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -81,8 +90,14 @@
<el-row> <el-row>
<el-col :lg="24"> <el-col :lg="24">
<el-form-item label="上级菜单"> <el-form-item label="上级菜单">
<treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true" @select="handleTreeSelect" <treeselect
placeholder="选择上级菜单" /> v-model="form.parentId"
:options="menuOptions"
:normalizer="normalizer"
:show-count="true"
@select="handleTreeSelect"
placeholder="选择上级菜单"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :lg="24"> <el-col :lg="24">
@ -109,7 +124,7 @@
<el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()"> <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
<IconSelect ref="iconSelect" @selected="selected" /> <IconSelect ref="iconSelect" @selected="selected" />
<el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" clearable="" readonly> <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" clearable="" readonly>
<svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px;width: 16px;" /> <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" class="el-input__icon" style="height: 32px; width: 16px" />
<i v-else slot="prefix" class="el-icon-search el-input__icon"></i> <i v-else slot="prefix" class="el-icon-search el-input__icon"></i>
</el-input> </el-input>
</el-popover> </el-popover>
@ -215,21 +230,13 @@
</template> </template>
<script> <script>
import { import { listMenu, getMenu, delMenu, addMenu, changeMenuSort, updateMenu, listMenuById } from '@/api/system/menu'
listMenu, import Treeselect from '@riophae/vue-treeselect'
getMenu, import '@riophae/vue-treeselect/dist/vue-treeselect.css'
delMenu, import IconSelect from '@/components/IconSelect'
addMenu,
changeMenuSort,
updateMenu,
listMenuById
} 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 { export default {
name: "menu1", name: 'menu1',
components: { Treeselect, IconSelect }, components: { Treeselect, IconSelect },
data() { data() {
return { return {
@ -242,7 +249,7 @@ export default {
// 菜单树选项 // 菜单树选项
menuOptions: [], menuOptions: [],
// 弹出层标题 // 弹出层标题
title: "", title: '',
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
// 是否展开，默认全部折叠 // 是否展开，默认全部折叠
@ -267,230 +274,219 @@ export default {
form: {}, form: {},
// 表单校验 // 表单校验
rules: { rules: {
menuName: [ menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
{ required: true, message: "菜单名称不能为空", trigger: "blur" }, orderNum: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
], path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
orderNum: [
{ required: true, message: "菜单顺序不能为空", trigger: "blur" },
],
path: [
{ required: true, message: "路由地址不能为空", trigger: "blur" },
],
}, },
// table树节点 // table树节点
tableTreeNodeMap: new Map(), tableTreeNodeMap: new Map(),
}; }
}, },
created() { created() {
// this.getList(); this.getList()
this.getDicts("sys_show_hide").then((response) => { this.getDicts('sys_show_hide').then((response) => {
this.visibleOptions = response.data; this.visibleOptions = response.data
});
this.getDicts("sys_normal_disable").then((response) => {
this.statusOptions = response.data;
});
listMenuById(0).then((response) => {
this.menuList = response.data
}) })
this.getDicts('sys_normal_disable').then((response) => {
this.statusOptions = response.data
})
// listMenuById(0).then((response) => {
// this.menuList = response.data
// })
}, },
methods: { methods: {
// 选择图标 // 选择图标
selected(name) { selected(name) {
this.form.icon = name; this.form.icon = name
}, },
/** 查询菜单列表 */ /** 查询菜单列表 */
getList() { getList() {
this.loading = true; this.loading = true
listMenu(this.queryParams).then((response) => { listMenu(this.queryParams).then((response) => {
this.menuList = response.data; // this.menuList = response.data
// this.menuList = this.handleTree(response.data, "menuId"); this.menuList = this.handleTree(response.data, 'menuId')
this.loading = false; this.loading = false
}); })
}, },
/** 转换菜单数据结构 */ /** 转换菜单数据结构 */
normalizer(node) { normalizer(node) {
if (node.children && !node.children.length) { if (node.children && !node.children.length) {
delete node.children; delete node.children
} }
return { return {
id: node.menuId, id: node.menuId,
label: node.menuName, label: node.menuName,
children: node.children, children: node.children,
}; }
}, },
/** 查询菜单下拉树结构 */ /** 查询菜单下拉树结构 */
getTreeselect() { getTreeselect() {
listMenu({ menuTypeIds: 'M,C,F' }).then((response) => { listMenu({ menuTypeIds: 'M,C,F' }).then((response) => {
this.menuOptions = []; this.menuOptions = []
const menu = { menuId: 0, menuName: "根菜单", children: [] }; const menu = { menuId: 0, menuName: '根菜单', children: [] }
menu.children = response.data; menu.children = response.data
//menu.children = this.handleTree(response.data, "menuId"); //menu.children = this.handleTree(response.data, "menuId");
this.menuOptions.push(menu); this.menuOptions.push(menu)
}); })
}, },
// 显示状态字典翻译 // 显示状态字典翻译
visibleFormat(row, column) { visibleFormat(row, column) {
if (row.menuType == "F") { if (row.menuType == 'F') {
return ""; return ''
} }
return this.selectDictLabel(this.visibleOptions, row.visible); return this.selectDictLabel(this.visibleOptions, row.visible)
}, },
// 菜单状态字典翻译 // 菜单状态字典翻译
statusFormat(row, column) { statusFormat(row, column) {
if (row.menuType == "F") { if (row.menuType == 'F') {
return ""; return ''
} }
return this.selectDictLabel(this.statusOptions, row.status); return this.selectDictLabel(this.statusOptions, row.status)
}, },
// 取消按钮 // 取消按钮
cancel() { cancel() {
this.open = false; this.open = false
this.reset(); this.reset()
}, },
// 表单重置 // 表单重置
reset() { reset() {
this.btnSubmitVisible = true; this.btnSubmitVisible = true
this.form = { this.form = {
menuId: undefined, menuId: undefined,
parentId: 0, parentId: 0,
menuName: undefined, menuName: undefined,
icon: undefined, icon: undefined,
menuType: "M", menuType: 'M',
orderNum: 999, orderNum: 999,
isFrame: "0", isFrame: '0',
isCache: "0", isCache: '0',
visible: "0", visible: '0',
status: "0", status: '0',
}; }
this.resetForm("form"); this.resetForm('form')
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
handleQuery() { handleQuery() {
this.getList(); this.getList()
}, },
/** 重置按钮操作 */ /** 重置按钮操作 */
resetQuery() { resetQuery() {
this.resetForm("queryForm"); this.resetForm('queryForm')
this.handleQuery(); this.handleQuery()
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd(row) { handleAdd(row) {
this.reset(); this.reset()
this.getTreeselect(); this.getTreeselect()
this.form.parentId = row != null && row.menuId ? row.menuId : 0; this.form.parentId = row != null && row.menuId ? row.menuId : 0
this.open = true; this.open = true
this.title = "添加菜单"; this.title = '添加菜单'
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset()
this.getTreeselect(); this.getTreeselect()
getMenu(row.menuId).then((response) => { getMenu(row.menuId).then((response) => {
this.form = response.data; this.form = response.data
this.open = true; this.open = true
this.title = "修改菜单"; this.title = '修改菜单'
}); })
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm: function () { submitForm: function () {
this.$refs["form"].validate((valid) => { this.$refs['form'].validate((valid) => {
if (valid) { if (valid) {
if (this.form.menuId != undefined) { if (this.form.menuId != undefined) {
updateMenu(this.form).then((response) => { updateMenu(this.form).then((response) => {
this.msgSuccess("修改成功"); this.msgSuccess('修改成功')
this.open = false; this.open = false
if (this.form.parentId === 0) { if (this.form.parentId === 0) {
this.getList(); this.getList()
} else { } else {
this.refreshTableTree(this.form.parentId); this.refreshTableTree(this.form.parentId)
} }
}); })
} else { } else {
addMenu(this.form).then((response) => { addMenu(this.form).then((response) => {
this.msgSuccess("新增成功"); this.msgSuccess('新增成功')
this.open = false; this.open = false
if (this.form.parentId === 0) { if (this.form.parentId === 0) {
this.getList(); this.getList()
} else { } else {
this.refreshTableTree(this.form.parentId); this.refreshTableTree(this.form.parentId)
} }
}); })
} }
} }
}); })
}, },
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
this.$confirm( this.$confirm('是否确认删除名称为"' + row.menuName + '"的数据项?', '警告', {
'是否确认删除名称为"' + row.menuName + '"的数据项?', confirmButtonText: '确定',
"警告", cancelButtonText: '取消',
{ type: 'warning',
confirmButtonText: "确定", })
cancelButtonText: "取消",
type: "warning",
}
)
.then(function () { .then(function () {
return delMenu(row.menuId); return delMenu(row.menuId)
}) })
.then(() => { .then(() => {
if (row.parentId === 0) { if (row.parentId === 0) {
this.getList(); this.getList()
} else { } else {
this.refreshTableTree(row.parentId); this.refreshTableTree(row.parentId)
} }
this.msgSuccess("删除成功"); this.msgSuccess('删除成功')
}); })
}, },
/** /**
* 保存排序 * 保存排序
*/ */
handleChangeSort(item) { handleChangeSort(item) {
this.editIndex = -1; this.editIndex = -1
changeMenuSort({ value: item.orderNum, id: item.menuId }).then( changeMenuSort({ value: item.orderNum, id: item.menuId }).then((response) => {
(response) => { this.msgSuccess('修改成功')
this.msgSuccess("修改成功"); this.getList()
this.getList(); })
}
);
}, },
handleTreeSelect(node, instanceId) { handleTreeSelect(node, instanceId) {
//如果是链接隐藏提交按钮 //如果是链接隐藏提交按钮
this.btnSubmitVisible = node.menuType == "L" ? false : true; this.btnSubmitVisible = node.menuType == 'L' ? false : true
}, },
// 显示编辑排序 // 显示编辑排序
editCurrRow(rowId, str) { editCurrRow(rowId, str) {
this.editIndex = rowId; this.editIndex = rowId
let id = rowId + str; let id = rowId + str
setTimeout(() => { setTimeout(() => {
document.getElementById(id).focus(); document.getElementById(id).focus()
}, 100); }, 100)
}, },
//展开/折叠操作 //展开/折叠操作
toggleExpandAll() { toggleExpandAll() {
this.refreshTable = false; this.refreshTable = false
this.isExpandAll = !this.isExpandAll; this.isExpandAll = !this.isExpandAll
this.$nextTick(() => { this.$nextTick(() => {
this.refreshTable = true; this.refreshTable = true
}); })
}, },
loadMenu(row, treeNode, resolve) { loadMenu(row, treeNode, resolve) {
this.tableTreeNodeMap.set(row.menuId, { row, treeNode, resolve }); this.tableTreeNodeMap.set(row.menuId, { row, treeNode, resolve })
listMenuById(row.menuId).then((res) => { listMenuById(row.menuId).then((res) => {
resolve(res.data) resolve(res.data)
}) })
}, },
//新增/修改/删除子节点时刷新子节点 //新增/修改/删除子节点时刷新子节点
refreshTableTree(key) { refreshTableTree(key) {
const node = this.tableTreeNodeMap.get(key); // const node = this.tableTreeNodeMap.get(key)
if (!node) { // if (!node) {
return; // return
// }
// const { row, treeNode, resolve } = node
// this.loadMenu(row, treeNode, resolve)
this.getList()
},
},
} }
const { row, treeNode, resolve } = node;
this.loadMenu(row, treeNode, resolve);
},
},
};
</script> </script>