【system】完成菜单按钮管理界面

src/main/java/cn/stylefeng/guns/modular/menu/MenuButtonViewController.java

@@ -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 MenuButtonViewController {
+
+    /**
+     * 菜单按钮管理首页
+     *
+     * @author fengshuonan
+     * @date 2021/1/6 13:32
+     */
+    @GetResource(name = "菜单管理首页", path = "/view/menuButton")
+    public String menuIndex() {
+        return "/modular/auth/menu/button.html";
+    }
+
+    /**
+     * 新增菜单按钮界面
+     *
+     * @author q18idc.com QQ993143799
+     * @date 2021/1/9 13:56
+     */
+    @GetResource(name = "新增菜单按钮界面", path = "/view/menuButton/add")
+    public String menuAdd() {
+        return "/modular/auth/menu/button_add.html";
+    }
+
+    /**
+     * 修改菜单按钮界面
+     *
+     * @author q18idc.com QQ993143799
+     * @date 2021/1/9 14:14
+     */
+    @GetResource(name = "修改菜单按钮界面", path = "/view/menuButton/edit")
+    public String menuEdit() {
+        return "/modular/auth/menu/button_edit.html";
+    }
+
+}

src/main/webapp/assets/modular/auth/menu/button.js

@@ -0,0 +1,149 @@
+layui.use(['table', 'HttpRequest', 'func', 'form'], function () {
+    var $ = layui.$;
+    var table = layui.table;
+    var HttpRequest = layui.HttpRequest;
+    var func = layui.func;
+    var form = layui.form;
+
+    var menuId = Feng.getUrlParam("menuId");
+
+    /**
+     * 初始化参数
+     */
+    var MenuButton = {
+        tableId: "menuButtonTable"
+    };
+
+    /**
+     * 初始化表格的列
+     */
+    MenuButton.initColumn = function () {
+        return [[
+            {type: 'checkbox'},
+            {field: 'buttonId', hide: true, title: '主键'},
+            {field: 'buttonName', sort: true, align: "center", title: '按钮名称'},
+            {field: 'buttonCode', sort: true, align: "center", title: '按钮编码'},
+            {align: 'center', toolbar: '#tableBar', title: '操作'}
+        ]];
+    };
+
+    /**
+     * 点击查询按钮
+     */
+    MenuButton.search = function () {
+        var queryData = {};
+        queryData['buttonName'] = $("#buttonName").val();
+        table.reload(MenuButton.tableId, {
+            where: queryData, page: {curr: 1}
+        });
+    };
+
+    /**
+     * 添加菜单按钮对话框
+     */
+    MenuButton.openAddDlg = function () {
+        func.open({
+            height: 500,
+            title: '添加菜单按钮',
+            content: Feng.ctxPath + '/view/menuButton/add?menuId=' + menuId,
+            tableId: MenuButton.tableId
+        });
+    };
+
+    /**
+     * 编辑菜单按钮对话框
+     *
+     * @param data 点击按钮时候的行数据
+     */
+    MenuButton.openEditDlg = function (data) {
+        func.open({
+            height: 500,
+            title: '修改菜单按钮',
+            content: Feng.ctxPath + '/view/menuButton/edit?buttonId=' + data.buttonId,
+            tableId: MenuButton.tableId
+        });
+    };
+
+    /**
+     * 点击删除
+     *
+     * @param data 点击按钮时候的行数据
+     */
+    MenuButton.onDeleteItem = function (data) {
+        var operation = function () {
+            var request = new HttpRequest(Feng.ctxPath + "/sysMenuButton/delete", 'post', function (data) {
+                Feng.success("删除成功!");
+                table.reload(MenuButton.tableId);
+            }, function (data) {
+                Feng.error("删除失败!" + data.message + "!");
+            });
+            request.set("buttonId", data.buttonId);
+            request.start(true);
+        };
+        Feng.confirm("是否删除?", operation);
+    };
+
+    // 渲染表格
+    var tableResult = table.render({
+        elem: '#' + MenuButton.tableId,
+        url: Feng.ctxPath + '/sysMenuButton/pageList?menuId=' + menuId,
+        page: true,
+        height: "full-158",
+        cellMinWidth: 100,
+        cols: MenuButton.initColumn(),
+        request: {pageName: 'pageNo', limitName: 'pageSize'},
+        parseData: Feng.parseData
+    });
+
+    // 搜索按钮点击事件
+    $('#btnSearch').click(function () {
+        MenuButton.search();
+    });
+
+    // 添加按钮点击事件
+    $('#btnAdd').click(function () {
+        MenuButton.openAddDlg();
+    });
+
+    // 添加按钮点击事件
+    $('#btnBatchDelete').click(function () {
+        let checkStatus = table.checkStatus(MenuButton.tableId);
+        let dataArray = checkStatus.data;
+
+        if (dataArray.length === 0) {
+            Feng.error('请选择需要删除的数据');
+            return;
+        }
+
+        let reqData = [];
+        dataArray.forEach(d=>{
+            reqData.push(d.buttonId);
+        })
+
+        var operation = function () {
+            var request = new HttpRequest(Feng.ctxPath + "/sysMenuButton/batchDelete", 'post', function (data) {
+                Feng.success("删除成功!");
+                table.reload(MenuButton.tableId);
+            }, function (data) {
+                Feng.error("删除失败!" + data.message + "!");
+            });
+            request.set("buttonIds", reqData);
+            request.start(true);
+        };
+        Feng.confirm("是否删除选中的数据?", operation);
+
+    });
+
+    // 工具条点击事件
+    table.on('tool(' + MenuButton.tableId + ')', function (obj) {
+        var data = obj.data;
+        var layEvent = obj.event;
+
+        if (layEvent === 'edit') {
+            MenuButton.openEditDlg(data);
+        } else if (layEvent === 'delete') {
+            MenuButton.onDeleteItem(data);
+        }
+    });
+
+});

src/main/webapp/assets/modular/auth/menu/button_add.js

@@ -0,0 +1,29 @@
+/**
+ * 添加菜单按钮
+ */
+layui.use(['form', 'admin', 'HttpRequest'], function () {
+    var form = layui.form;
+    var admin = layui.admin;
+    var HttpRequest = layui.HttpRequest;
+
+    // 菜单id赋值
+    var menuId = Feng.getUrlParam("menuId");
+    form.val("menuButtonForm", {
+        "menuId": menuId
+    })
+
+    //表单提交事件
+    form.on('submit(btnSubmit)', function (data) {
+        var request = new HttpRequest(Feng.ctxPath + "/sysMenuButton/add", 'post', function (data) {
+            admin.closeThisDialog();
+            Feng.success("添加成功！");
+            admin.putTempData('formOk', true);
+        }, function (data) {
+            admin.closeThisDialog();
+            Feng.error("添加失败！" + data.message);
+        });
+        request.set(data.field);
+        request.start(true);
+    });
+
+});

src/main/webapp/assets/modular/auth/menu/button_edit.js

@@ -0,0 +1,29 @@
+/**
+ * 编辑菜单按钮
+ */
+layui.use(['form', 'admin', 'HttpRequest'], function () {
+    var form = layui.form;
+    var admin = layui.admin;
+    var HttpRequest = layui.HttpRequest;
+
+    // 获取菜单按钮详情
+    var request = new HttpRequest(Feng.ctxPath + "/sysMenuButton/detail?buttonId=" + Feng.getUrlParam("buttonId"), 'get');
+    var result = request.start();
+
+    form.val('menuButtonForm', result.data);
+
+    // 表单提交事件
+    form.on('submit(btnSubmit)', function (data) {
+        var request = new HttpRequest(Feng.ctxPath + "/sysMenuButton/edit", 'post', function (data) {
+            Feng.success("修改成功!");
+            admin.putTempData('formOk', true);
+            admin.closeThisDialog();
+        }, function (data) {
+            Feng.error("修改失败!" + data.message);
+            admin.closeThisDialog();
+        });
+        request.set(data.field);
+        request.start(true);
+    });
+
+});

src/main/webapp/assets/modular/auth/menu/menu.js

@@ -117,6 +117,23 @@ layui.use(['HttpRequest', 'treeTable', 'func'], function () {
         Feng.confirm("是否删除菜单" + data.menuName + "?", operation);
     };
 
+    /**
+     * 点击菜单 按钮管理 时
+     *
+     * @param data 点击菜单 按钮管理 时的行数据
+     */
+    Menu.onButtonMenu = function (data) {
+        func.open({
+            height: 720,
+            title: '菜单按钮管理',
+            content: Feng.ctxPath + "/view/menuButton?menuId=" + data.menuId,
+            tableId: Menu.tableId,
+            endCallback: function () {
+                Menu.initTable(Menu.tableId);
+            }
+        });
+    };
+
     /**
      * 初始化表格
      */
@@ -175,6 +192,8 @@ layui.use(['HttpRequest', 'treeTable', 'func'], function () {
             Menu.onEditMenu(data);
         } else if (layEvent === 'delete') {
             Menu.onDeleteMenu(data);
+        } else if (layEvent === 'button') {
+            Menu.onButtonMenu(data);
         }
     });
 

src/main/webapp/pages/modular/auth/menu/button.html

@@ -0,0 +1,36 @@
+@layout("/layout/_container.html",{js:["/assets/modular/auth/menu/button.js"]}){
+
+
+<div class="layui-body-header">
+    <span class="layui-body-header-title">菜单按钮管理</span>
+</div>
+
+<div class="layui-fluid">
+    <div class="layui-row layui-col-space15">
+        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
+            <div class="layui-card">
+                <div class="layui-card-body">
+                    <div class="layui-form toolbar">
+                        <div class="layui-form-item">
+                            <div class="layui-inline">
+                                <input id="buttonName" 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>
+                                <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
+                                <button id="btnBatchDelete" class="layui-btn layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除选中</button>
+                            </div>
+                        </div>
+                    </div>
+                    <table class="layui-table" id="menuButtonTable" lay-filter="menuButtonTable"></table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script type="text/html" id="tableBar">
+    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
+    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
+</script>
+@}

src/main/webapp/pages/modular/auth/menu/button_add.html

@@ -0,0 +1,31 @@
+@layout("/layout/_form.html",{js:["/assets/modular/auth/menu/button_add.js"]}){
+
+<form class="layui-form" id="menuButtonForm" lay-filter="menuButtonForm">
+    <div class="layui-fluid" style="padding-bottom: 75px;">
+        <div class="layui-card">
+            <div class="layui-card-body">
+                <div class="layui-form-item layui-row">
+                    <input id="menuId" name="menuId" type="hidden"/>
+                    <div class="layui-inline layui-col-md12">
+                        <label class="layui-form-label">菜单按钮名称<span style="color: red;">*</span></label>
+                        <div class="layui-input-block">
+                            <input name="buttonName" placeholder="请输入菜单按钮名称" type="text" class="layui-input" lay-verify="required" required autocomplete="off"/>
+                        </div>
+                    </div>
+                    <div class="layui-inline layui-col-md12">
+                        <label class="layui-form-label">菜单按钮编码<span style="color: red;">*</span></label>
+                        <div class="layui-input-block">
+                            <input name="buttonCode" placeholder="请输入菜单按钮编码" type="text" class="layui-input" lay-verify="required" required autocomplete="off"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="form-group-bottom text-center">
+        <button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;提交&emsp;</button>
+        <button type="reset" class="layui-btn layui-btn-primary" ew-event="closeDialog">&emsp;取消&emsp;</button>
+    </div>
+
+</form>
+@}

src/main/webapp/pages/modular/auth/menu/button_edit.html

@@ -0,0 +1,32 @@
+@layout("/layout/_form.html",{js:["/assets/modular/auth/menu/button_edit.js"]}){
+
+<form class="layui-form" id="menuButtonForm" lay-filter="menuButtonForm">
+    <div class="layui-fluid" style="padding-bottom: 75px;">
+        <div class="layui-card">
+            <div class="layui-card-body">
+                <div class="layui-form-item layui-row">
+                    <input id="buttonId" name="buttonId" type="hidden"/>
+                    <input id="menuId" name="menuId" type="hidden"/>
+                    <div class="layui-inline layui-col-md12">
+                        <label class="layui-form-label">菜单按钮名称<span style="color: red;">*</span></label>
+                        <div class="layui-input-block">
+                            <input name="buttonName" placeholder="请输入菜单按钮名称" type="text" class="layui-input" lay-verify="required" required autocomplete="off"/>
+                        </div>
+                    </div>
+                    <div class="layui-inline layui-col-md12">
+                        <label class="layui-form-label">菜单按钮编码<span style="color: red;">*</span></label>
+                        <div class="layui-input-block">
+                            <input name="buttonCode" placeholder="请输入菜单按钮编码" type="text" class="layui-input" lay-verify="required" required autocomplete="off"/>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="form-group-bottom text-center">
+        <button class="layui-btn" lay-filter="btnSubmit" lay-submit>&emsp;提交&emsp;</button>
+        <button type="reset" class="layui-btn layui-btn-primary" ew-event="closeDialog">&emsp;取消&emsp;</button>
+    </div>
+
+</form>
+@}

src/main/webapp/pages/modular/auth/menu/menu.html

@@ -35,6 +35,7 @@
 <script type="text/html" id="menuTableBar">
     <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
+    <a class="layui-btn layui-btn-default layui-btn-xs" lay-event="button">按钮管理</a>
 </script>
 
 @}