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;
}
/// <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>
/// <returns></returns>
[ActionPermissionFilter(Permission = "system:menu:list")]
[HttpGet("list")]
public IActionResult TreeMenuList([FromQuery] MenuQueryDto menu)
public IActionResult MenuList([FromQuery] MenuQueryDto menu)
{
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>

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

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