更新菜单列表,查询,删除

pull/64/head
fengshuonan 2021-01-06 20:31:53 +08:00
parent cbcbd85a8c
commit c829c6cea8
8 changed files with 242 additions and 199 deletions

View File

@ -0,0 +1,52 @@
package cn.stylefeng.guns.modular.menu;
import cn.stylefeng.roses.kernel.resource.api.annotation.ApiResource;
import cn.stylefeng.roses.kernel.resource.api.annotation.GetResource;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Controller;
/**
*
*
* @author fengshuonan
* @date 2021/1/6 16:43
*/
@Controller
@Slf4j
@ApiResource(name = "菜单管理界面")
public class MenuViewController {
/**
*
*
* @author fengshuonan
* @date 2021/1/6 13:32
*/
@GetResource(name = "菜单管理首页", path = "/view/menu")
public String menuIndex() {
return "/modular/auth/menu/menu.html";
}
/**
*
*
* @author fengshuonan
* @date 2021/1/6 13:37
*/
@GetResource(name = "新增菜单界面", path = "/view/menu/add")
public String menuAdd() {
return "/modular/auth/menu/menu_add.html";
}
/**
*
*
* @author fengshuonan
* @date 2021/1/6 13:37
*/
@GetResource(name = "修改菜单界面", path = "/view/menu/edit")
public String menuEdit() {
return "/modular/auth/menu/menu_edit.html";
}
}

View File

@ -0,0 +1,181 @@
layui.use(['HttpRequest', 'treeTable', 'func'], function () {
var HttpRequest = layui.HttpRequest;
var treeTable = layui.treeTable;
var func = layui.func;
/**
* 系统管理--菜单管理
*/
var Menu = {
tableId: "menuTable",
condition: {
menuName: "",
menuCode: ""
},
// treeTable实例
treeTableInstance: null
};
/**
* 初始化表格的列
*/
Menu.initColumn = function () {
return [
{type: 'numbers'},
{field: 'menuName', align: "left", sort: true, title: '菜单名称', minWidth: 120},
{field: 'menuCode', align: "center", sort: true, title: '菜单编号', minWidth: 120},
{field: 'appName', align: "center", sort: true, title: '应用名称'},
{field: 'layuiPath', align: "center", sort: true, title: '请求地址', minWidth: 180},
{
field: 'layuiIcon', align: "center", sort: true, title: '图标', templet: '<p><i class="{{d.layuiIcon}}"></i></p>'
},
{
field: 'visible', align: "center", sort: true, title: '是否可见', templet: function (data) {
if (data.visible === 'Y') {
return '<span class="layui-badge layui-badge-green">可见</span>';
} else {
return '<span class="layui-badge layui-badge-gray">不可见</span>';
}
}
},
{field: 'menuSort', align: "center", sort: true, title: '排序'},
{
field: 'statusFlag', align: "center", sort: true, title: '状态', templet: function (data) {
if (data.statusFlag === 1) {
return '<span class="layui-badge layui-badge-green">启用</span>';
} else {
return '<span class="layui-badge layui-badge-gray">禁用</span>';
}
}
},
{field: 'createTime', align: "center", sort: true, title: '创建时间', minWidth: 120},
{field: 'updateTime', align: "center", sort: true, title: '更新时间', minWidth: 120},
{align: 'center', toolbar: '#menuTableBar', title: '操作', minWidth: 120}
];
};
/**
* 点击查询按钮
*/
Menu.search = function () {
var queryData = {};
queryData['menuName'] = $("#menuName").val();
queryData['menuCode'] = $("#menuCode").val();
Menu.initTable(Menu.tableId, queryData);
};
/**
* 弹出添加菜单对话框
*/
Menu.openAddMenu = function () {
func.open({
height: 720,
title: '添加菜单',
content: Feng.ctxPath + '/view/menu/add',
tableId: Menu.tableId,
endCallback: function () {
Menu.initTable(Menu.tableId);
}
});
};
/**
* 点击编辑菜单按钮时
*
* @param data 点击按钮时候的行数据
*/
Menu.onEditMenu = function (data) {
func.open({
height: 720,
title: '修改菜单',
content: Feng.ctxPath + "/view/menu/edit?menuId=" + data.menuId,
tableId: Menu.tableId,
endCallback: function () {
Menu.initTable(Menu.tableId);
}
});
};
/**
* 点击删除菜单按钮
*
* @param data 点击按钮时候的行数据
*/
Menu.onDeleteMenu = function (data) {
var operation = function () {
var request = new HttpRequest(Feng.ctxPath + "/sysMenu/delete", 'post', function () {
Feng.success("删除成功!");
Menu.condition.menuId = "";
Menu.initTable(Menu.tableId);
}, function (data) {
Feng.error("删除失败!" + data.message + "!");
});
request.set("menuId", data.menuId);
request.start(true);
};
Feng.confirm("是否删除菜单" + data.menuName + "?", operation);
};
/**
* 初始化表格
*/
Menu.initTable = function (menuId, reqData) {
return treeTable.render({
elem: '#' + menuId,
tree: {
iconIndex: 1, // 折叠图标显示在第几列
idName: 'menuId', // 自定义id字段的名称
pidName: 'menuParentId', // 自定义标识是否还有子节点的字段名称
isPidData: true // 是否是pid形式数据
},
height: "full-98",
cols: Menu.initColumn(),
reqData: function (data, callback) {
var request = new HttpRequest(Feng.ctxPath + '/sysMenu/layuiList', 'get', function (res) {
callback(res.data);
}, function (res) {
Feng.error("删除失败!" + res.message + "!");
});
request.set(reqData);
request.start();
}
});
};
// 渲染表格
Menu.treeTableInstance = Menu.initTable(Menu.tableId);
// 展开所有按钮
$('#expandAll').click(function () {
Menu.treeTableInstance.expandAll();
});
// 折叠所有按钮
$('#foldAll').click(function () {
Menu.treeTableInstance.foldAll();
});
// 搜索按钮点击事件
$('#btnSearch').click(function () {
Menu.search();
});
// 添加按钮点击事件
$('#btnAdd').click(function () {
Menu.openAddMenu();
});
// 工具条点击事件
treeTable.on('tool(menuTable)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
if (layEvent === 'edit') {
Menu.onEditMenu(data);
} else if (layEvent === 'delete') {
Menu.onDeleteMenu(data);
}
});
});

View File

@ -8,9 +8,9 @@ var MenuInfoDlg = {
}
};
layui.use(['layer', 'form', 'admin', 'laydate', 'ax', 'iconPicker'], function () {
layui.use(['layer', 'form', 'admin', 'laydate', 'HttpRequest', 'iconPicker'], function () {
var $ = layui.jquery;
var $ax = layui.ax;
var HttpRequest = layui.HttpRequest;
var form = layui.form;
var admin = layui.admin;
var laydate = layui.laydate;
@ -85,4 +85,4 @@ layui.use(['layer', 'form', 'admin', 'laydate', 'ax', 'iconPicker'], function ()
ajax.set("dictTypeCode", "SYSTEM_TYPE");
ajax.start();
});
});

View File

@ -1,184 +0,0 @@
layui.use(['layer', 'form', 'ztree', 'laydate', 'admin', 'ax', 'treeTable', 'func'], function () {
var layer = layui.layer;
var form = layui.form;
var $ZTree = layui.ztree;
var $ax = layui.ax;
var laydate = layui.laydate;
var admin = layui.admin;
var treeTable = layui.treeTable;
var func = layui.func;
//table的初始化实例
var insTb;
/**
* 系统管理--菜单管理
*/
var Menu = {
tableId: "menuTable", //表格id
condition: {
menuId: "",
menuName: "",
level: ""
}
};
/**
* 初始化表格的列
*/
Menu.initColumn = function () {
return [
{type: 'numbers'},
{field: 'name', align: "left", sort: true, title: '菜单名称', minWidth: 240},
{field: 'code', align: "center", sort: true, title: '菜单编号', minWidth: 120},
{field: 'pcode', align: "center", sort: true, title: '菜单父编号'},
{field: 'url', align: "center", sort: true, title: '请求地址'},
{field: 'sort', align: "center", sort: true, title: '排序'},
{field: 'levels', align: "center", sort: true, title: '层级'},
{field: 'isMenuName', align: "center", sort: true, title: '是否是菜单'},
{field: 'statusName', align: "center", sort: true, title: '状态'},
{align: 'center', toolbar: '#menuTableBar', title: '操作', minWidth: 200}
];
};
/**
* 点击菜单树时
*/
Menu.onClickMenu = function (e, treeId, treeNode) {
Menu.condition.menuId = treeNode.id;
Menu.search();
};
/**
* 点击查询按钮
*/
Menu.search = function () {
var queryData = {};
queryData['menuName'] = $("#menuName").val();
queryData['level'] = $("#level").val();
Menu.initTable(Menu.tableId, queryData);
};
/**
* 弹出添加菜单对话框
*/
Menu.openAddMenu = function () {
func.open({
height: 720,
title: '添加菜单',
content: Feng.ctxPath + '/menu/menu_add',
tableId: Menu.tableId,
endCallback: function () {
Menu.initTable(Menu.tableId);
}
});
};
/**
* 点击编辑菜单按钮时
*
* @param data 点击按钮时候的行数据
*/
Menu.onEditMenu = function (data) {
func.open({
height: 720,
title: '修改菜单',
content: Feng.ctxPath + "/menu/menu_edit?menuId=" + data.menuId,
tableId: Menu.tableId,
endCallback: function () {
Menu.initTable(Menu.tableId);
}
});
};
/**
* 点击删除菜单按钮
*
* @param data 点击按钮时候的行数据
*/
Menu.onDeleteMenu = function (data) {
var operation = function () {
var ajax = new $ax(Feng.ctxPath + "/menu/remove", function () {
Feng.success("删除成功!");
Menu.condition.menuId = "";
Menu.initTable(Menu.tableId);
}, function (xhr) {
Feng.error("删除失败!" + xhr.responseJSON.message + "!");
});
ajax.set("menuId", data.menuId);
ajax.start();
};
Feng.confirm("是否删除菜单" + data.name + "?", operation);
};
/**
* 初始化表格
*/
Menu.initTable = function (menuId, reqData) {
return treeTable.render({
elem: '#' + menuId,
tree: {
iconIndex: 1, // 折叠图标显示在第几列
idName: 'code', // 自定义id字段的名称
pidName: 'pcode', // 自定义标识是否还有子节点的字段名称
haveChildName: 'haveChild', // 自定义标识是否还有子节点的字段名称
isPidData: true // 是否是pid形式数据
},
height: "full-98",
cols: Menu.initColumn(),
reqData: function (data, callback) {
var ajax = new $ax(Feng.ctxPath + '/menu/listTree', function (res) {
callback(res.data);
}, function (res) {
Feng.error("删除失败!" + res.responseJSON.message + "!");
});
ajax.setData(reqData);
ajax.start();
}
});
};
// 渲染表格
insTb = Menu.initTable(Menu.tableId);
$('#expandAll').click(function () {
insTb.expandAll();
});
$('#foldAll').click(function () {
insTb.foldAll();
});
//渲染时间选择框
laydate.render({
elem: '#timeLimit',
range: true,
max: Feng.currentDate()
});
//初始化左侧部门树
var ztree = new $ZTree("menuTree", "/menu/selectMenuTreeList");
ztree.bindOnClick(Menu.onClickMenu);
ztree.init();
// 搜索按钮点击事件
$('#btnSearch').click(function () {
Menu.search();
});
// 添加按钮点击事件
$('#btnAdd').click(function () {
Menu.openAddMenu();
});
// 工具条点击事件
treeTable.on('tool(menuTable)', function (obj) {
var data = obj.data;
var layEvent = obj.event;
if (layEvent === 'edit') {
Menu.onEditMenu(data);
} else if (layEvent === 'delete') {
Menu.onDeleteMenu(data);
}
});
});

View File

@ -1,4 +1,4 @@
@layout("/layout/_container.html",{plugins:["ztree"],js:["/assets/modular/system/menu/menu.js"]}){
@layout("/layout/_container.html",{plugins:["ztree"], js:["/assets/modular/auth/menu/menu.js"]}){
<div class="layui-body-header">
<span class="layui-body-header-title">菜单管理</span>
@ -12,16 +12,14 @@
<div class="layui-form toolbar">
<div class="layui-form-item">
<div class="layui-inline">
<input id="menuName" class="layui-input" type="text" placeholder="菜单名称/编码"/>
<input id="menuName" class="layui-input" type="text" placeholder="菜单名称"/>
</div>
<div class="layui-inline">
<input id="level" class="layui-input" type="text" placeholder="层级"/>
<input id="menuCode" class="layui-input" type="text" placeholder="菜单编码"/>
</div>
<div class="layui-inline">
<button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
@if(shiro.hasPermission("/menu/add")){
<button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
@}
<button id="expandAll" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>展开所有</button>
<button id="foldAll" class="layui-btn icon-btn"><i class="layui-icon">&#xe656;</i>折叠所有</button>
</div>
@ -35,12 +33,8 @@
</div>
<script type="text/html" id="menuTableBar">
@if(shiro.hasPermission("/menu/edit")){
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
@}
@if(shiro.hasPermission("/menu/remove")){
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
@}
</script>
@}
@}

View File

@ -1,4 +1,4 @@
@layout("/layout/_form.html",{js:["/assets/modular/system/menu/menu_add.js"]}){
@layout("/layout/_form.html",{js:["/assets/modular/auth/menu/menu_add.js"]}){
<form class="layui-form" id="menuForm" lay-filter="menuForm">
<div class="layui-fluid" style="padding-bottom: 75px;">

View File

@ -1,4 +1,4 @@
@layout("/layout/_form.html",{js:["/assets/modular/system/menu/menu_edit.js"]}){
@layout("/layout/_form.html",{js:["/assets/modular/auth/menu/menu_edit.js"]}){
<form class="layui-form" id="menuForm" lay-filter="menuForm">
<div class="layui-fluid" style="padding-bottom: 75px;">