<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/common_header :: common_header"></head>
<body>
<div class="x-body">
<form method="post" class="layui-form layui-form-pane" onsubmit="return false;" id="formId">
<div class="layui-form-item">
<label class="layui-form-label">
<span class="x-red">*</span>角色名
</label>
<div class="layui-input-inline">
<input type="text" name="roleName" required="" lay-verify="required"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">
权限设置
</label>
<div style="margin-left: 10%">
<ul id="menuTree" class="ztree"
style="width: 250px; height: 98%; overflow: auto; border: none; background: none">
</ul>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">
描述
</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" name="roleRemark" class="layui-textarea"></textarea>
</div>
</div>
<input type="text" name="roleId" style="display: none;" value="0">
<div class="layui-form-item" align="center">
<button class="layui-btn" lay-submit="" onclick="checkToSave()">保存</button>
<button class="layui-btn layui-btn-danger" onclick="closeLayer()">
取消
</button>
</div>
</form>
</div>
<link th:href="@{/js/zTree/css/metroStyle/metroStyle.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/js/zTree/css/zTreeApp.css}" rel="stylesheet" type="text/css"/>
<link th:href="@{/js/zTree/css/demo.css}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" th:src="@{/js/zTree/js/jquery.ztree.core.js}"></script>
<script type="text/javascript" th:src="@{/js/zTree/js/jquery.ztree.excheck.js}"></script>
<script type="text/javascript" th:src="@{/js/addOrEdit.js}"></script>
<script>
var treeNodes = '';
var setting = {
view: {
dblClickExpand: true,
showLine: true,
selectedMulti: true
},
check: {
enable: true,
chkStyle: "checkbox",
chkboxType: {
"Y": "ps",
"N": "ps"
}
},
data: {
simpleData: {
enable: true
}
},
};
$(function () {
getAllMenu();
})
function getAllMenu() {
$.ajax({
url: "/menu/getAllMenu",
data: {},
type: "POST",
dataType: "json",
success: function (result) {
treeNodes = result.allMenu;
showTree();
var id = [[${id}]];
getObjById(id);
}
})
}
function setOtherObj(obj) {
console.log(obj);
var menuList = obj.menuId.split(",");
for (var i = 0; i < menuList.length; i++) {
for (var j = 0; j < treeNodes.length; j++) {
if (treeNodes[j].id == menuList[i]) {
var ztree = $.fn.zTree.getZTreeObj("menuTree");
ztree.checkNode(ztree.getNodeByParam("id", menuList[i]));
break;
}
}
}
}
function showTree() {
$.fn.zTree.init($("#menuTree"), setting, treeNodes);
var ztree = $.fn.zTree.getZTreeObj("menuTree");
var nodes = ztree.getNodes();
ztree.expandNode(nodes[0], true);//展开第二层
}
//保存
function checkToSave() {
var roleName = $("#formId input[name='roleName']").val().trim();
if (roleName == '') {
layer.msg("请角色名不能为空!", {icon: 5});
return false;
}
var ztree = $.fn.zTree.getZTreeObj("menuTree");
var nodes = ztree.getCheckedNodes(true);
if (nodes.length == 0) {
layer.msg("请勾选权限!", {icon: 5});
return false;
}
var menuId = '';
for (var i = 0; i < nodes.length; i++) {
if (menuId == '') {
menuId = nodes[i].id;
} else {
menuId += ',' + nodes[i].id;
}
}
setFormData();
formdata.set("menuId", menuId);
save(formdata);
}
</script>
</body>
</html>