layuiAdmin首頁加載權限
// layuimini.init('api/init.json');原項目請求的是這些靜態資源
layuimini.init('/permission/initMenu');
init.json格式
所以要從后台定義請求這些數據
特別注意：一定要按照要求格式，采用遞歸，由上到下獲取數據
/**
* 初始化菜單
* @return
*/
@RequestMapping(value = "/initMenu")
@ResponseBody
public Map<String,Object> initMenu(){
Map<String,Object>map=new HashMap<>();
Map<String,Object>clearInfo=new HashMap<>();
clearInfo.put("clearUrl","api/clear.json");
map.put("clearInfo",clearInfo);
Map<String,Object>homeInfo=new HashMap<>();
homeInfo.put("title","首頁");
homeInfo.put("icon","fa fa-home");
homeInfo.put("href","page/welcome-1.html?mpi=m-p-i-0");
map.put("homeInfo",homeInfo);
Map<String,Object>logoInfo=new HashMap<>();
logoInfo.put("title","layuiAdmin");
logoInfo.put("image","images/logo.png");
logoInfo.put("href","");
map.put("logoInfo",logoInfo);
Map<String,Object>menuInfo=new LinkedHashMap<>();//保證菜單的順序
List<Permission> permission = getPermission(1, 0);
permission.forEach(t->{
menuInfo.put(t.getTitle(),t);
});
map.put("menuInfo",menuInfo);
return map;
}
/**
* 按照需求獲取角色的權限
* @return
*/
@RequestMapping(value = "/getPermissionBySelect")
@ResponseBody
public List<Permission>getPermissionBySelect(){
List<Permission> permission = getPermission(1, 0);
return permission;
}
/**
* 遞歸獲取權限
* @param roleId
* @param permissionId
* @return
*/
public List<Permission> getPermission(Integer roleId, Integer permissionId){
List<Permission> list=new ArrayList<>();
List<RolePermission>rolePermission = permissionDao.getListRolePermission(roleId,permissionId);
rolePermission.forEach(t->{
if (t.getPermission().getHasSon()!=0){//嚴格按照layuiadmin菜單格式
List<Permission> permission = getPermission(roleId, t.getPermissionId());
t.getPermission().setChild(permission);
}
list.add(t.getPermission());
});
return list;
}
而權限列表頁面邏輯分為三個部分
權限列表，可以更新刪除權限，刪除的同時必須刪除角色權限表中的數據，同樣采用遞歸由上到下全部刪除
角色列表，實現用戶即角色，刪除時，所有角色權限相應內容刪除。
樹形權限菜單，給某個級別的權限添加子集。賦予某個角色相應的權限。
其他的操作再用戶管理，操作用戶角色關系，可做到用戶即角色。
關於權限頁面的代碼：
//模擬數據有children的才叫節點
data = null;
/**
* 通過角色Id直接獲取權限數據
* @param roleId
*/
function getPermissionByRoleId(roleId) {
var sendDate = (new Date()).getTime();
$.ajax({
url: "/permission/getTreePermissionList",
type: "get",
data: {
roleId: roleId
},
async: false,
beforeSend: function () {
var icon_load = `<i id="icon_loading" class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="display: inline-block;
position: absolute;
top: 50%;
left: 50%; margin: auto;
"></i>`;
$("#test12").html(icon_load);
//在請求后台數據之前顯示loading圖標
},
success: function (msg) {
var receiveDate = (new Date()).getTime();
var responseTimeMs = receiveDate - sendDate;
setTimeout(function () {
$("#icon_loading").remove();
data = msg;
console.log(data);
initTreePermission();
}, responseTimeMs);
},
dataType: "json"
});
}
/**
* 初始化權限
*/
function initTreePermission() {
//基本演示
tree.render({
elem: '#test12',
data: data,
showCheckbox: true //是否顯示復選框
,
id: 'demoId1',
isJump: true //是否允許點擊節點時彈出新窗口跳轉
, oncheck: function (obj) {///復選框點擊觸發的事件，，直接和角色綁定添加即可
console.log(obj.data); //得到當前點擊的節點數據
console.log(obj.checked); //得到當前節點的展開狀態：open、close、normal
console.log(obj.elem); //得到當前節點元素
},
click: function (obj) {
console.log(obj);
var data = obj.data; //獲取當前點擊的節點數據
console.log(data);
layer.open({
type: 1,
// closeBtn:0,
title: ['添加子集權限', 'font-size:20px;font-weight:bolder;text-align:center;'],
content: $('#updatePermissionForm'), //這里content是一個DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對元素所影響
skin: 'layui-layer-lan',
area: ['500px', '480px'],
offset: '40px',
// 彈出后，渲染表格
success: function (layero, index) {
$("#updatePermissionForm form")[0].reset();//清空之前彈出的內容
form.val("updatePermissionForm", { //formTest 即 class="layui-form" 所在元素屬性 lay-filter="" 對應的值
"fatherId": data.id
, "level": data.level + 1
, "hasSon": 0
});
},
cancel: function (index, layero) {
}
});
// layer.msg('狀態：' + obj.state + '<br>節點數據：' + JSON.stringify(data));
}
});
}
//按鈕事件test12
util.event('lay-demo', {
getChecked: function (othis) {
var checkedData = tree.getChecked('demoId1'); //獲取選中節點的數據
console.log("---獲取選中的數據--");
console.log(checkedData);
var roleId = $("#editRoleNameByLeft").attr("role_id");
$.ajax({
url: "/permission/savePermissionWithRoleId",
type: "post",
async: false,
data: {
roleId: roleId,
permissionList: JSON.stringify(checkedData)
},
success: function (msg) {
layer.msg("權限保存成功!");
},
dataType: "json"
});
},
setChecked: function () {
tree.setChecked('demoId1', [12, 18]); //勾選指定節點
},
reload: function () {
//重載實例
tree.reload('demoId1', {});
},
addFirstMenu: function () {
//添加一級菜單
// $("#updatePermissionForm form input[name='hasSon']").parent().parent().remove();
// $("#updatePermissionForm form input[name='href']").parent().parent().remove();
layer.open({
type: 1,
// closeBtn:0,
title: ['添加子集權限', 'font-size:20px;font-weight:bolder;text-align:center;'],
content: $('#updatePermissionForm'), //這里content是一個DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對元素所影響
skin: 'layui-layer-lan',
area: ['500px', '480px'],
offset: '40px',
// 彈出后，渲染表格
success: function (layero, index) {
$("#updatePermissionForm form")[0].reset();//清空之前彈出的內容
form.val("updatePermissionForm", { //formTest 即 class="layui-form" 所在元素屬性 lay-filter="" 對應的值
"fatherId": 0
, "level": 1,
"hasSon": 0
});
},
cancel: function (index, layero) {
}
});
}
});
至此，完成了layuiAdmin的權限菜單的管理設置。