智能商贸系统04-添加role/permission/menu类、主页面布局

最新推荐文章于 2023-01-16 09:31:04 发布

vi-vi-

最新推荐文章于 2023-01-16 09:31:04 发布

阅读量389

点赞数

分类专栏： Java #SpringDataJpa 文章标签： java jquery html js

本文链接：https://blog.csdn.net/vivid9527/article/details/103532513

版权

本文档介绍了智能商贸系统中角色（Role）、权限（Permission）和菜单（Menu）的创建过程，包括类的构建、各层（repository、service、controller）的实现，以及页面设计。对于Menu部分，特别强调了主页面布局中菜单的配置，如何通过查询展示父子级菜单，并在页面中使用formatter进行格式化显示。最后，概述了主页面（layout）的控制器（MainController）、页面（main.jsp、main.js）以及tabs首页的设计。

摘要由CSDN通过智能技术生成

1、role

暂时只是完成本类的CRUD，与其他类的关系暂时没有写

1.1、新建Role类

@Entity
@Table(name = "role")
public class Role extends BaseDomain {
   
    private String name;
    private String sn;
    //get set toString
}

1.2、新建rolequery

public class RoleQuery extends BaseQuery {
   
    private String name;
    private String sn;
    @Override
    public Specification createSpecification() {
   
        Specification<Role> specification = Specifications.<Role>and()
                .like(StringUtils.isNotBlank(name), "name", "%" + name + "%")
                .like(StringUtils.isNotBlank(sn), "sn", "%" + sn + "%")
                .build();
        return specification;
    }

    public Specification createSpecification2() {
   
        Specification<Role> specification = Specifications.<Role>and().build();
        return specification;
    }
 }
 //set get toString

1.3、其他层

通过Ctr+F查找替换，勾选mach case区分大小写，将Employee有的复制一份并修改

repository
service
controller

1.4、页面

/role/index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/views/head.jsp" %>
<html>
<head>
    <title>Title</title>
    <%--引入当前页面对应的js文件--%>
    <script src="/js/model/role.js"></script>
</head>
<body>

<div id="toolbar">
    <div style="margin-bottom:5px">
        <a href="#" data-method="add" class="easyui-linkbutton" iconCls="icon-add" plain="true">添加</a>
        <a href="#" data-method="edit" class="easyui-linkbutton" iconCls="icon-edit" plain="true">修改</a>
        <a href="#" data-method="deletes" class="easyui-linkbutton" iconCls="icon-remove" plain="true">删除</a>
    </div>

    <form id="searchForm" method="post">
        名称: <input name="name" class="easyui-textbox" style="width:80px">
        <a href="#" data-method="search" class="easyui-linkbutton" iconCls="icon-search">查询</a>
    </form>
</div>

<%--pagination:true分页条--%>
<table id="datagrid" class="easyui-datagrid"
       data-options="url:'/role/page',
       fitColumns:true,
       singleSelect:false,
       fit:true,pagination:true,
       toolbar:'#toolbar',
       onRowContextMenu:showMenu,
       iconCls: 'icon-edit',
       checkOnSelect: true
        ">
    <thead>
    <tr>

        <th data-options="field:'',width:100,checkbox:true">多选</th>
        <th data-options="field:'id',width:100">编码</th>
        <th data-options="field:'name',width:100" sortable="true">名称</th>
        <th data-options="field:'sn',width:100">sn</th>
    </tr>
    </thead>
</table>

<%--添加或者修改的弹出框--%>
<div id="editDialog" class="easyui-dialog"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#btns'">
    <form id="editForm" method="post">
        <input id="roleId" type="hidden" name="id"/>
        <table cellpadding="5">
            <tr>
                <td>名称</td>
                <td><input class="easyui-textbox" type="text" name="name" data-options="required:true"/></td>
            </tr>
            <tr>
                <td> sn</td>
                <td><input class="easyui-textbox" type="text" name="sn" data-options="required:true"/></td>
            </tr>
        </table>
    </form>
    <div id="btns">
        <a href="javascript:;" data-method="save" class="easyui-linkbutton c3" data-options="iconCls:'icon-ok'">确定</a>
        <a href="javascript:;" data-method="close" class="easyui-linkbutton c5"
           data-options="iconCls:'icon-cancel'">取消</a>
    </div>
</div>
<div id="gridMenu" class="easyui-menu" style="width:120px;">
    <div data-options="iconCls:'icon-add'" data-method="add">添加</div>
    <div data-options="iconCls:'icon-edit'" data-method="edit">修改</div>
    <div data-options="iconCls:'icon-remove'" data-method="del">删除</div>
</div>


</body>
</html>

role.js

$(function () {
   
    //常用的元素都先在这里获取到
    var datagrid = $("#datagrid");
    var searchForm = $("#searchForm");
    var editForm = $("#editForm");
    var editDialog = $("#editDialog");
    $("*[data-method]").on("click", function () {
   
        //拿到点击触发的方法名
        var methodName = $(this).data("method");
        //动态调用方法
        xuxusheng[methodName]();
    })
    xuxusheng = {
   
        //方法的简写，需要javascript language version 6版本才行
        add() {
   
            //打开面板前把里面的数据清除
            editForm.form("clear");
            //修改添加框的标题
            editDialog.dialog({
   title: '添加菜单'});
            //将密码框显示
            $("*[data-hide]").show();
            //禁用防止传参数
            $("*[data-hide]>td>input").textbox("enable");
            //把添加框(editDialog)打开
            editDialog.dialog("center").dialog("open");
        },
        save() {
   
            var url = "/role/save";
            if ($("#roleId").val()) {
   
                url = "/role/u