<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增管理员</title>
<link rel="stylesheet" href="/static/component/pear/css/pear.css" />
</head>
<body>
<form class="layui-form" action="">
<div class="mainBox">
<div class="main-container">
<div class="layui-form-item">
<label class="layui-form-label">角色名</label>
<div class="layui-input-inline">
<input type="text" name="title" lay-verify="required" placeholder="请输入角色名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" id="test">
<label class="layui-form-label">权限范围</label>
{volist name="menus" id="vo1"}
<ul class="layui-input-block" style="margin-top: 10px ;">
<li>
<input type="checkbox" name="rules" class="parent" lay-skin="primary" data-level="{$vo1.level}" value="{$vo1.id}" title="【{$vo1.title}】">
<ul>
{if condition="isset($vo1['children'])"}
{volist name="vo1['children']" id="vo2"}
<li>
{if condition="isset($vo2['children'])"}
<input type="checkbox" name="rules" class="parent" lay-skin="primary" data-level="{$vo2.level}" value="{$vo2.id}" title="{$vo2.title}：">
{volist name="vo2['children']" id="vo3"}
<input type="checkbox" name="rules" lay-skin="primary" id="{$vo3.id}" data-level="{$vo3.level}" value="{$vo3.id}" title="{$vo3.title}">
{/volist}
{else /}
<input type="checkbox" name="rules" lay-skin="primary" id="{$vo2.id}" data-level="{$vo2.level}" value="{$vo2.id}" title="{$vo2.title}：">
{/if}
</li>
{/volist}
{/if}
</ul>
</li>
</ul>
{/volist}
</div>
<div class="layui-form-item">
<label class="layui-form-label">具体描述</label>
<div class="layui-input-block">
<textarea type="text" name="descr" lay-verify="required" autocomplete="off" class="layui-textarea"></textarea>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
lay-filter="user-save">
<i class="layui-icon layui-icon-ok"></i>
提交
</button>
<button type="reset" class="pear-btn pear-btn-sm">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
</div>
</div>
</form>
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script>
// 数据接口
const AUTHGROUP_ADD = "{:url('system.AuthGroup/add')}";
layui.use(['form', 'jquery'], function() {
let form = layui.form;
let $ = layui.jquery;
form.on('checkbox()', function(data){
//var pc = data.elem.classList; //获取选中的checkbox的class属性
var othis = $(data.elem);
var level = $(data.elem).attr('data-level');
//选择
if(data.elem.checked==true){
//主菜单
if(level === '0'){
var c =$(data.elem).siblings().find("input[type='checkbox']");
c.each(function(){
var e = $(this);
e.next().addClass("layui-form-checked");
});
}
//子菜单及子项
if(level === '1'){
var c = $(data.elem).siblings("input[type='checkbox']");
c.each(function(){
var e = $(this);
e.next().addClass("layui-form-checked");
});
$(data.elem).parent().parent().prev().addClass("layui-form-checked");
}
//子项
if(level === '2'){
$(data.elem).siblings('div:first').addClass("layui-form-checked");
$(data.elem).parent().parent().prev().addClass("layui-form-checked");
}
} else {
//取消
if(level === '0'){
var c =$(data.elem).siblings().find("input[type='checkbox']");
c.each(function(){
var e = $(this);
e.next().removeClass("layui-form-checked");
});
}
if(level === '1'){
var c = $(data.elem).siblings("input[type='checkbox']");
c.each(function(){
var e = $(this);
e.next().removeClass("layui-form-checked");
});
//子项为0，菜单取消选择
var s = $(data.elem).parent().parent().children('li').children('div:first-of-type .layui-form-checked');
if(s.length === 0){
$(data.elem).parent().parent().prev().removeClass("layui-form-checked");
}
}
//子项
if(level === '2'){
var t = othis.siblings('div .layui-form-checked');
if(t.length == 1){
$(data.elem).siblings('div:first').removeClass("layui-form-checked");
}
//子项为0，菜单取消选择
var s = $(data.elem).parent().parent().children('li').children('div:first-of-type .layui-form-checked');
if(s.length === 0){
$(data.elem).parent().parent().prev().removeClass("layui-form-checked");
}
}
}
});
form.on('submit(user-save)', function(data) {
//checkbox 父子级级联或取id
var mId = "";
var e = $(":checkbox");
e.each(function () {
if($(this).next().hasClass("layui-form-checked")){
mId+=$(this).val()+",";
};
})
data.field.rules = mId.substring(0,mId.length-1);
$.ajax({
url: AUTHGROUP_ADD,
data: JSON.stringify(data.field),
dataType: 'json',
contentType: 'application/json',
type: 'post',
success: function(result) {
if (result.code === 0) {
layer.msg(result.msg, {
icon: 1,
time: 1000
}, function() {
parent.layer.close(parent.layer.getFrameIndex(window
.name)); //关闭当前页
parent.layui.table.reload("role-table");
});
} else {
layer.msg(result.msg, {
icon: 2,
time: 1000
});
}
}
})
return false;
});
})
</script>
</body>
</html>