角色，員工，權限之間的關係以及角色的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');
       }