first commit
This commit is contained in:
@@ -0,0 +1,178 @@
|
||||
{extend name="../../base/view/common/base" /}
|
||||
{block name="style"}
|
||||
<style>
|
||||
.layui-form-checkbox[lay-skin=primary]{padding-left:20px;}
|
||||
.left-note{font-weight:800; vertical-align:top; padding-top:28px!important; text-align:center}
|
||||
.right-note .layui-checkbox-disabled span {color: #666666!important;}
|
||||
.note-0 {display: inline-block;vertical-align: middle;}
|
||||
</style>
|
||||
{/block}
|
||||
<!-- 主体 -->
|
||||
{block name="body"}
|
||||
|
||||
<form class="layui-form p-4">
|
||||
<h3 class="pb-3">权限组</h3>
|
||||
<table class="layui-table layui-table-form">
|
||||
<tr>
|
||||
<td class="layui-td-gray-2">权限组名称<font>*</font>
|
||||
</td>
|
||||
<td>
|
||||
<input type="hidden" name="id" value="{$id}" />
|
||||
<input class="layui-input" type="text" name="title" lay-verify="required" lay-reqText="请输入权限组名称" {notempty name="$role.title"
|
||||
}value="{$role.title}" {/notempty} placeholder="请输入权限组名称" autocomplete="off" />
|
||||
</td>
|
||||
<td class="layui-td-gray">状态<font>*</font>
|
||||
</td>
|
||||
<td>
|
||||
{if condition="$id eq 0"}
|
||||
<input type="radio" name="status" value="1" title="正常" checked>
|
||||
<input type="radio" name="status" value="-1" title="禁用">
|
||||
{else/}
|
||||
<input type="radio" name="status" value="1" title="正常" {eq name="$role.status" value="1" }checked{/eq}>
|
||||
<input type="radio" name="status" value="-1" title="禁用" {eq name="$role.status" value="-1" }checked{/eq}>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="layui-td-gray-2">权限配置说明<font>*</font></td>
|
||||
<td colspan="3"><strong class="red">注意:如果右侧子级权限有节点被勾选了,左侧的顶级权限就必须勾选,否则无法查看右侧的子级菜单。</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<table style="width:100%" id="rule">
|
||||
<tr>
|
||||
<td style="text-align:center; background-color:#f8f8f8; width:160px;"><font style="color:red">选择可操作的顶级权限 ↓</font></td>
|
||||
<td style="text-align:left; background-color:#f8f8f8;"><font style="color:red">选择可操作的子级权限 ↓</font></td>
|
||||
</tr>
|
||||
{volist name="role_rule" id="vo"}
|
||||
<tr>
|
||||
<td class="left-note">
|
||||
<input type="checkbox" name="rule[]" value="{$vo.id}" title="{$vo.title}" {eq name="$vo.checked" value="true" }checked{/eq}>
|
||||
</td>
|
||||
{gt name="vo.len" value="0"}
|
||||
<td class="right-note">
|
||||
<div style="padding:0 0 0 10px;">
|
||||
{volist name="vo.children" key="k" id="voo"}
|
||||
<div class="note-{$voo.len}" style="padding:10px 0;">
|
||||
<input type="checkbox" lay-filter="rule" data-pid="{$vo.id}" value="{$voo.id}" name="rule[]" lay-skin="primary" title="{$voo.title}" {eq name="$voo.checked" value="true" }checked{/eq}>
|
||||
</div>
|
||||
{gt name="voo.len" value="0"}
|
||||
<div style="padding:0 0 3px 22px; {if condition='$k != count($vo.children)'}margin-bottom:3px; padding-bottom:16px; border-bottom:1px solid #eee;{/if}">
|
||||
{volist name="voo.children" id="vooo"}
|
||||
<div class="note-{$vooo.len}" style="margin-right:10px;">
|
||||
<input type="checkbox" data-rule="{$voo.id}" name="rule[]" value="{$vooo.id}" lay-skin="primary" title="{$vooo.title}" {eq name="$vooo.checked" value="true" }checked{/eq}>
|
||||
</div>
|
||||
{gt name="vooo.len" value="0"}
|
||||
<div style="padding:6px 0 15px 22px; {if condition='$k != count($vo.children)'}margin-bottom:3px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #eee;{/if}">
|
||||
{volist name="vooo.children" id="voooo"}
|
||||
<div class="note-{$voooo.len}" style="margin-right:10px;">
|
||||
<input type="checkbox" data-rule="{$voo.id}" name="rule[]" value="{$voooo.id}" lay-skin="primary" title="{$voooo.title}" {eq name="$voooo.checked" value="true" }checked{/eq}>
|
||||
</div>
|
||||
{/volist}
|
||||
</div>
|
||||
{/gt}
|
||||
{/volist}
|
||||
</div>
|
||||
{/gt}
|
||||
{/volist}
|
||||
</div>
|
||||
</td>
|
||||
{/gt}
|
||||
</tr>
|
||||
{/volist}
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="layui-td-gray-3" style="vertical-align: top;">PC工作台展示模块</td>
|
||||
<td colspan="3">
|
||||
{volist name="layout" id="vo"}
|
||||
<div class="layui-input-inline" style="margin-right:10px;">
|
||||
<input type="checkbox" data-rule="{$vo.id}" name="layout[]" value="{$vo.id}" lay-skin="primary" title="{$vo.title}" {eq name="$vo.checked" value="true" }checked{/eq}>
|
||||
</div>
|
||||
{/volist}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="layui-td-gray-3" style="vertical-align: top;">手机工作台展示模块</td>
|
||||
<td colspan="3">
|
||||
{volist name="mobile_menu" id="v"}
|
||||
<dl>
|
||||
<dt style="padding:12px 0 6px; font-weight:600">{$v.title}</dt>
|
||||
<dd>
|
||||
{volist name="v.list" id="vo"}
|
||||
<div class="layui-input-inline" style="margin-right:10px;">
|
||||
<input type="checkbox" data-rule="{$vo.id}" name="mobile_menu[]" value="{$vo.id}" lay-skin="primary" title="{$vo.title}" {eq name="$vo.checked" value="true" }checked{/eq}>
|
||||
</div>
|
||||
{/volist}
|
||||
<dd>
|
||||
</dl>
|
||||
{/volist}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="layui-td-gray-3" style="vertical-align: top;">手机底部Bar菜单</td>
|
||||
<td colspan="3">
|
||||
<p style="color:red; padding-bottom:5px;">建议勾选5个,页面效果展示效果最佳</p>
|
||||
{volist name="mobile_bar" id="vo"}
|
||||
<div class="layui-input-inline" style="margin-right:10px;">
|
||||
<input type="checkbox" data-rule="{$vo.id}" name="mobile_bar[]" value="{$vo.id}" lay-skin="primary" title="{$vo.title}" {eq name="$vo.checked" value="true" }checked{/eq}>
|
||||
</div>
|
||||
{/volist}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="layui-td-gray" style="vertical-align: top;">备注内容</td>
|
||||
<td colspan="3">
|
||||
<textarea name="desc" placeholder="请输入备注" class="layui-textarea">{notempty name="$role.desc" }{$role.desc}{/notempty}</textarea>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="pt-4">
|
||||
<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</form>
|
||||
{/block}
|
||||
<!-- /主体 -->
|
||||
|
||||
<!-- 脚本 -->
|
||||
{block name="script"}
|
||||
<script>
|
||||
const moduleInit = ['tool'];
|
||||
function gouguInit() {
|
||||
var form = layui.form,tool=layui.tool, tree = layui.tree;
|
||||
//监听提交
|
||||
form.on('submit(webform)', function (obj) {
|
||||
$.ajax({
|
||||
url: "/home/role/add",
|
||||
data: obj.field,
|
||||
type: 'post',
|
||||
success: function (e) {
|
||||
layer.msg(e.msg);
|
||||
if (e.code == 0) {
|
||||
tool.sideClose(1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
//监听多选框点击事件 通过 lay-filter="rule"来监听
|
||||
form.on('checkbox(rule)', function (data) {
|
||||
let val = data.value;
|
||||
let pid =$(this).data('pid');
|
||||
if(data.elem.checked){
|
||||
//判断当前多选框是选中还是取消选中
|
||||
$("input[data-rule='"+val+"']").prop("checked", true);//true:选中 false:不选中
|
||||
$("input[value='"+pid+"']").prop("checked", true);//true:选中 false:不选中
|
||||
}
|
||||
else{
|
||||
$("input[data-rule='"+val+"']").prop("checked", false);
|
||||
}
|
||||
form.render();//实时渲染选中和不选中的样式
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{/block}
|
||||
<!-- /脚本 -->
|
||||
@@ -0,0 +1,77 @@
|
||||
{extend name="../../base/view/common/base" /}
|
||||
<!-- 主体 -->
|
||||
{block name="body"}
|
||||
<div class="p-page">
|
||||
<table class="layui-hide" id="role" lay-filter="role"></table>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="status">
|
||||
<i class="layui-icon {{# if(d.status == 1){ }}green layui-icon-ok{{# } else { }}red layui-icon-close{{# } }}"></i>
|
||||
</script>
|
||||
<script type="text/html" id="toolbarDemo">
|
||||
<div class="layui-btn-container">
|
||||
<button class="layui-btn layui-btn-sm" lay-event="add">+ 添加权限组</button>
|
||||
</div>
|
||||
</script>
|
||||
{/block}
|
||||
<!-- /主体 -->
|
||||
|
||||
<!-- 脚本 -->
|
||||
{block name="script"}
|
||||
<script>
|
||||
const moduleInit = ['tool'];
|
||||
function gouguInit() {
|
||||
var table = layui.table, tool = layui.tool, form = layui.form;
|
||||
layui.pageTable = table.render({
|
||||
elem: '#role',
|
||||
toolbar: '#toolbarDemo',
|
||||
defaultToolbar: false,
|
||||
url: "/home/role/index", //数据接口
|
||||
page: false, //开启分页
|
||||
limit: 20,
|
||||
cols: [[ //表头
|
||||
{ field: 'id', title: 'ID号', align: 'center', width: 80 }
|
||||
, { field: 'title', title: '权限组名称', width: 200 }
|
||||
, { field: 'desc', title: '备注' }
|
||||
, { field: 'status', title: '状态', toolbar: '#status', align: 'center', width: 80 }
|
||||
, { width: 100,title: '操作',align: 'center',templet: function (d) {
|
||||
var html = '<div class="layui-btn-group"><button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</button><button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button></div>';
|
||||
return html;
|
||||
}
|
||||
}
|
||||
]]
|
||||
});
|
||||
|
||||
//表头工具栏事件
|
||||
table.on('toolbar(role)', function(obj){
|
||||
if (obj.event === 'add') {
|
||||
tool.side("/home/role/add");
|
||||
return;
|
||||
}
|
||||
});
|
||||
//监听行工具事件
|
||||
table.on('tool(role)', function (obj) {
|
||||
var data = obj.data;
|
||||
if (obj.event === 'edit') {
|
||||
tool.side('/home/role/add?id='+obj.data.id);
|
||||
return;
|
||||
}
|
||||
if (obj.event === 'del') {
|
||||
layer.confirm('确定要删除该权限组吗?', { icon: 3, title: '提示' }, function (index) {
|
||||
let callback = function (e) {
|
||||
layer.msg(e.msg);
|
||||
if (e.code == 0) {
|
||||
layer.msg(res.msg);
|
||||
obj.del();
|
||||
}
|
||||
}
|
||||
tool.delete("/home/role/delete", { id: obj.data.id }, callback);
|
||||
layer.close(index);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
{/block}
|
||||
<!-- /脚本 -->
|
||||
Reference in New Issue
Block a user