dev_oa/app/home/view/role/add.html

176 lines
6.7 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{extend name="common/base"/}
<!-- 主体 -->
{block name="body"}
<form class="layui-form body-content">
<h3 class="h3-title">权限角色</h3>
<table class="layui-table">
<tr>
<td class="layui-td-gray2">角色名称<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-gray2">状态<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-gray2" style="vertical-align:top">权限配置<br>操作菜单可见</td>
<td colspan="3">
<table style="width:100%">
<tr>
<td style="text-align:left; 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_menu" id="vo"}
<tr>
<td style="font-weight:800">
<input type="checkbox" name="menu[]" value="{$vo.id}" title="{$vo.title}" {eq name="$vo.checked" value="true" }checked{/eq}>
</td>
{notempty name="vo.children"}
<td>
<div style="padding:10px 0;">
{volist name="vo.children" key="k" id="voo"}
<div class="layui-input-inline" style="margin-right:10px; font-weight:800">
<input type="checkbox" lay-filter="menu" name="menu[]" value="{$voo.id}" lay-skin="primary" title="{$voo.title}" {eq name="$voo.checked" value="true" }checked{/eq}>
</div>
{notempty name="voo.children"}
<div style="padding:10px 0 0 28px; {if condition='$k != count($vo.children)'}margin-bottom:12px; padding-bottom:16px; border-bottom:1px solid #eee;{/if}">
{volist name="voo.children" id="vooo"}
<div class="layui-input-inline" style="margin-right:10px;">
<input type="checkbox" data-menu="{$voo.id}" name="menu[]" value="{$vooo.id}" lay-skin="primary" title="{$vooo.title}" {eq name="$vooo.checked" value="true" }checked{/eq}>
</div>
{/volist}
</div>
{/notempty}
{/volist}
</div>
</td>
{/notempty}
</tr>
{/volist}
</table>
</td>
</tr>
<tr>
<td class="layui-td-gray2" style="vertical-align:top">权限配置<br>操作节点可用</td>
<td colspan="3">
<table style="width:100%" id="rule">
<tr>
<td style="text-align:left; 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 style="font-weight:800">
<input type="checkbox" name="rule[]" value="{$vo.id}" title="{$vo.title}" {eq name="$vo.checked" value="true" }checked{/eq}>
</td>
{notempty name="vo.children"}
<td>
<div style="padding:10px 0;">
{volist name="vo.children" key="k" id="voo"}
<div class="layui-input-inline" style="margin-right:10px; font-weight:800">
<input type="checkbox" lay-filter="rule" name="rule[]" value="{$voo.id}" lay-skin="primary" title="{$voo.title}" {eq name="$voo.checked" value="true" }checked{/eq}>
</div>
{notempty name="voo.children"}
<div style="padding:10px 0 0 28px; {if condition='$k != count($vo.children)'}margin-bottom:12px; padding-bottom:16px; border-bottom:1px solid #eee;{/if}">
{volist name="voo.children" id="vooo"}
<div class="layui-input-inline" 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>
{/volist}
</div>
{/notempty}
{/volist}
</div>
</td>
{/notempty}
</tr>
{/volist}
</table>
</td>
</tr>
<tr>
<td class="layui-td-gray2" 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 style="padding: 10px 0">
<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>
function init(layui) {
var tree = layui.tree;
var form = layui.form;
var layer = layui.layer;
//监听提交
form.on('submit(webform)', function (obj) {
console.log(obj.field);
$.ajax({
url: "/home/role/add",
data: obj.field,
type: 'post',
success: function (e) {
if (e.code == 0) {
layer.confirm('保存成功,返回列表页吗?', { icon: 3, title: '提示' }, function (index) {
parent.location.reload();
});
} else {
layer.msg(e.msg);
}
}
});
return false;
});
//监听多选框点击事件 通过 lay-filter="menu"来监听
form.on('checkbox(menu)', function (data) {
  let val = data.value;
if(data.elem.checked){
//判断当前多选框是选中还是取消选中
$("input[data-menu='"+val+"']").prop("checked", true);//true:选中 false:不选中
}
else{
$("input[data-menu='"+val+"']").prop("checked", false);
}
form.render();//实时渲染选中和不选中的样式
});
//监听多选框点击事件 通过 lay-filter="rule"来监听
form.on('checkbox(rule)', function (data) {
  let val = data.value;
if(data.elem.checked){
//判断当前多选框是选中还是取消选中
$("input[data-rule='"+val+"']").prop("checked", true);//true:选中 false:不选中
}
else{
$("input[data-rule='"+val+"']").prop("checked", false);
}
form.render();//实时渲染选中和不选中的样式
});
}
</script>
{include file="common/layui" base="base" extend="[]" callback="init" /}
{/block}
<!-- /脚本 -->