角色，员工，权限之间的关系以及角色的CRUD

1 Role与Permission的CRUD

1.1 domain创建

1. 权限

@Entity
@Table(name = "permission")
public class Permission extends BaseDomain {

    //权限名称
   private String name;
   //权限资源(路径)
   private String url;
   //描述
   private String descs;
   //编码
   private String sn;
   ...
}

1. 角色
2. 与权限多对多关系

@Entity
@Table(name = "role")
public class Role extends BaseDomain{
    //角色名称
    private String name;
    //角色编码
    private String sn;
    /**
     * 角色权限是多对多的关系
     * JoinTable:配置的是中间表的信息
     */
    @ManyToMany
    @JoinTable(name = "role_permission",
            joinColumns = @JoinColumn(name = "role_id"),
            inverseJoinColumns = @JoinColumn(name = "permission_id")
    )
    private List<Permission> permissions = new ArrayList<>();

   //...
}

1. 用户
2. 与角色多对多关系

@Entity
@Table(name = "employee")
public class Employee extends BaseDomain {

    ...
    /**
     * 员工与角色是多对多的关系
     * JoinTable:配置的是中间表的信息
     */
    @ManyToMany
    @JoinTable(name = "employee_role",
            joinColumns = @JoinColumn(name = "employee_id"),
            inverseJoinColumns = @JoinColumn(name = "role_id")
    )
    private List<Role> roles = new ArrayList<>();
   ...
}

Role中对Permission的操作

1. Permission布局 -> layout
2. 左右两个grid

<%--添加和修改的弹出框--%>
<div id="editDialog" class="easyui-dialog" title="菜单管理" style="width: 700px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#editButtons'">
    <form id="editForm" method="post">
        <%--隐藏域 id属性--%>
        <input id="roleId" type="hidden" name="id" />
        <table cellpadding="5">
            <tr>
                <td>编 号:</td>
                <td><input class="easyui-textbox" type="text" name="sn" data-options="required:true"></input></td>
                <td>名 称:</td>
                <td><input class="easyui-textbox" type="text" name="name" data-options="required:true"></input></td>
            </tr>
        </table>
        <div  class="easyui-layout" style="width:100%;height:400px;">
            <div data-options="region:'west'" style="width:50%;">
                <%--当前角色拥有的权限--%>
                <table id="rolePermsGrid">
                    <thead>
                    <tr>
                        <th data-options="field:'name',width:100">名称</th>
                        <th data-options="field:'sn',width:100">编码</th>
                        <th data-options="field:'url',width:100">路径</th>
                    </tr>
                    </thead>
                </table>

            </div>
            <div data-options="region:'center'">
                <%--所有权限--%>
                <table id="allPermsGrid">
                    <thead>
                    <tr>
                        <th data-options="field:'name',width:100">名称</th>
                        <th data-options="field:'sn',width:100">编码</th>
                        <th data-options="field:'url',width:100">路径</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </form>
    <%--弹出框的功能按钮--%>
    <div id="editButtons">
        <a href="#" data-method="save" class="easyui-linkbutton c1">保存</a>
        <a href="#" data-method="close" class="easyui-linkbutton c5">关闭</a>
    </div>
</div>

      3.grid的双击事件

1. 点击右边，把这一行交给左边(不能重复)
2. 点击左边，把这一行删除掉

//双击时，给该用户添加权限
        addPerms(index, row){
            //拿到当前角色的所有行数据
            let rows = rolePermsGrid.datagrid("getRows");
            //遍历所有行数据(出现重复则给出提示,后面不执行)
            for(var r of rows){
                if(r==row){
                    $.messager.show({
                        title:'错误',
                        msg:'<h2 style="color: red;">数据已经存在,看不见吗</h2>',
                        showType:'slide',
                        timeout:1000,
                        style:{
                            right:'',
                            top:document.body.scrollTop+document.documentElement.scrollTop,
                            bottom:''
                        }
                    });
                    return;
                }
            }
            //把相应的数据追加进去
            rolePermsGrid.datagrid("appendRow",row);
        },
        //双击，删除该用户选定的权限
        removePerms(index, row){
            rolePermsGrid.datagrid("deleteRow",index);
        }

    };
    //创建两个grid
    //1.当前角色拥有的权限Grid
    rolePermsGrid.datagrid({
        fitColumns:true,
        singleSelect:true,
        fit:true,
        onDblClickRow:itsource.removePerms
    })
    //2.所有权限的Grid
    allPermsGrid.datagrid({
        url:'/permission/list',
        fitColumns:true,
        singleSelect:true,
        fit:true,
        onDblClickRow:itsource.addPerms
    })

1. 添加时清空，修改时回显
   1. rolePermsGrid.datagrid("loadData",本地路径);

rolePermsGrid.datagrid("loadData",[]);

1. 回显时权限需要复制 var newPerms = [...row.permissions]

   var perms = [...row.permissions];
   rolePermsGrid.datagrid("loadData",perms);

1. 提交时权限数据

 onSubmit: function(param){
      //拼接出相应的权限(List<Permission> permissions)对应的格式
        /**
         *SringMVC需要的格式是：
         *  permissions[0].id = 1
         *  permissions[1].id = 2
         *  ...
         */
        //1.拿到左边grid的所有值
        var rows = rolePermsGrid.datagrid("getRows");
        //2.遍历它，拿到每个id
        for(var i=0;i<rows.length;i++){
            param[`permissions[${i}].id`] = rows[i].id;
        }
        return $(this).form('validate');
    }

  关注公众号，获取免费软件、资料，笔记等。