<!DOCTYPE html>
|
<html lang="en">
|
<head>
|
<meta charset="utf-8">
|
<title></title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<link rel="stylesheet" href="../../static/layui/css/layui.css" media="all">
|
<link rel="stylesheet" href="../../static/css/admin.css?v=318" media="all">
|
<link rel="stylesheet" href="../../static/css/cool.css" media="all">
|
<link rel="stylesheet" href="../../static/css/common.css" media="all">
|
<style>
|
#detail {
|
padding: 25px 30px 0 0;
|
}
|
.ew-tree-table-box {
|
height: 100%;
|
}
|
</style>
|
</head>
|
<body>
|
|
|
<!-- 正文开始 -->
|
<div class="layui-fluid">
|
<div class="layui-card">
|
<div class="layui-card-body">
|
<!-- 数据表格 -->
|
<table id="resource"></table>
|
</div>
|
</div>
|
</div>
|
|
<script type="text/html" id="operate">
|
<a class="layui-btn layui-btn-primary layui-btn-xs btn-edit" lay-event="edit">修改</a>
|
<a class="layui-btn layui-btn-danger layui-btn-xs btn-del" lay-event="del">删除</a>
|
</script>
|
|
<!-- 表单弹窗 -->
|
<script type="text/html" id="editDialog">
|
<form id="detail" lay-filter="detail" class="layui-form" style="margin: 0">
|
<input name="id" type="hidden">
|
<input name="uuid" type="hidden">
|
<input name="level" type="hidden">
|
<div class="layui-row">
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">上级菜单</label>
|
<div class="layui-input-block">
|
<div id="resourceParentSel" class="ew-xmselect-tree"></div>
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label layui-form-required">菜单编码</label>
|
<div class="layui-input-block">
|
<input name="code" placeholder="请输入菜单编码" class="layui-input" lay-vertype="tips" lay-verify="required" required="">
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label layui-form-required">类型</label>
|
<div class="layui-input-block">
|
<select name="level" lay-vertype="tips" lay-verify="required" required="">
|
<option value="">请选择类型</option>
|
<option value="1">一级菜单</option>
|
<option value="2">二级菜单</option>
|
<option value="3">按钮</option>
|
</select>
|
</div>
|
</div>
|
|
</div>
|
|
<div class="layui-col-md6">
|
|
<div class="layui-form-item">
|
<label class="layui-form-label layui-form-required">菜单名称</label>
|
<div class="layui-input-block">
|
<input name="name" placeholder="请输入菜单名称" class="layui-input" lay-vertype="tips" lay-verify="required" required="">
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">排序</label>
|
<div class="layui-input-block">
|
<input name="sort" placeholder="请输入排序" class="layui-input" lay-verify="number">
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label layui-form-required">状态</label>
|
<div class="layui-input-block">
|
<select name="status" lay-vertype="tips" lay-verify="required" required="">
|
<option value="">请选择状态</option>
|
<option value="1">正常</option>
|
<option value="0">禁用</option>
|
</select>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<hr class="layui-bg-gray">
|
<div class="layui-form-item text-right">
|
<button class="layui-btn" lay-filter="editSubmit" lay-submit="">保存</button>
|
<button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
|
</div>
|
</form>
|
</script>
|
<script type="text/html" id="typeTpl">
|
{{# if( d.level === 1 ){ }}
|
<span name="level" class="layui-badge layui-badge-green">菜单</span>
|
{{# } else if(d.level === 2){ }}
|
<span name="level" class="layui-badge layui-badge-green">菜单</span>
|
{{# } else if(d.level === 3){ }}
|
<span name="level" class="layui-badge layui-badge-gray">按钮</span>
|
{{# } }}
|
</script>
|
<script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script>
|
<script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
|
<script type="text/javascript" src="../../static/js/cool.js" charset="utf-8"></script>
|
|
<script>
|
layui.config({
|
base: baseUrl + "/static/layui/lay/modules/"
|
}).use(['form','treeTable', 'admin', 'xmSelect'], function() {
|
var $ = layui.jquery;
|
var layer = layui.layer;
|
var form = layui.form;
|
var admin = layui.admin;
|
var treeTable = layui.treeTable;
|
var xmSelect = layui.xmSelect;
|
var tbDataList = [];
|
|
var insTb = treeTable.render({
|
elem: '#resource',
|
url: baseUrl+'/resource/tree/auth',
|
headers: {token: localStorage.getItem('token')},
|
height: 'full-200',
|
toolbar: ['<p>',
|
'<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon"></i>添加</button> ',
|
'<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon"></i>删除</button>',
|
'</p>'].join(''),
|
tree: {
|
iconIndex: 2, // 折叠图标显示在第几列
|
isPidData: true, // 是否是id、pid形式数据
|
idName: 'id', // id字段名称
|
pidName: 'resourceId' // pid字段名称
|
},
|
cols: [[
|
{type: 'checkbox',width: 50, fixed: 'left'}
|
,{field: 'id', title: 'ID', sort: true,align: 'center', fixed: 'left', width: 80, hide: true}
|
,{field: 'name', align: 'left',title: '菜单名称'}
|
,{field: 'code', align: 'center',title: '菜单编码'}
|
// ,{field: 'resourceName', align: 'center',title: '父级菜单'}
|
// ,{field: 'level$', align: 'center',title: '菜单等级'}
|
,{field: 'type', align: 'center',title: '类型', templet: '#typeTpl', width: 120}
|
,{field: 'sort', align: 'center',title: '排序'}
|
,{field: 'status$', align: 'center',title: '状态'}
|
,{fixed: 'right', title:'操作', align: 'center', toolbar: '#operate', width:150}
|
]],
|
done: function (data) {
|
$('.ew-tree-table-box').css('height', '100%');
|
// insTb.expandAll();
|
tbDataList = data;
|
limit();
|
}
|
});
|
|
/* 表格头工具栏点击事件 */
|
treeTable.on('toolbar(resource)', function (obj) {
|
if (obj.event === 'add') { // 添加
|
showEditModel();
|
} else if (obj.event === 'del') { // 删除
|
var checkRows = insTb.checkStatus();
|
if (checkRows.length === 0) {
|
layer.msg('请选择要删除的数据', {icon: 2});
|
return;
|
}
|
var ids = checkRows.map(function (d) {
|
if (!d.LAY_INDETERMINATE) {
|
return d.id;
|
} else {
|
return null;
|
}
|
});
|
doDel({ids: ids});
|
}
|
});
|
|
/* 表格操作列点击事件 */
|
treeTable.on('tool(resource)', function (obj) {
|
if (obj.event === 'edit') { // 修改
|
showEditModel(obj.data);
|
} else if (obj.event === 'del') { // 删除
|
doDel(obj);
|
}
|
});
|
|
/* 显示表单弹窗 */
|
function showEditModel(mData) {
|
admin.open({
|
type: 1,
|
area: '600px',
|
title: (mData ? '修改' : '添加') + '权限',
|
content: $('#editDialog').html(),
|
success: function (layero, dIndex) {
|
// 回显表单数据
|
form.val('detail', mData);
|
// 表单提交事件
|
form.on('submit(editSubmit)', function (data) {
|
data.field.resourceId = insXmSel.getValue('valueStr');
|
var loadIndex = layer.load(2);
|
$.ajax({
|
url: baseUrl+"/resource/"+(mData?'update':'add')+"/auth",
|
headers: {'token': localStorage.getItem('token')},
|
data: data.field,
|
method: 'POST',
|
success: function (res) {
|
layer.close(loadIndex);
|
if (res.code === 200){
|
layer.close(dIndex);
|
layer.msg(res.msg, {icon: 1});
|
insTb.refresh();
|
setTimeout(function () {
|
insTb.expand(data.field.resourceId);
|
}, 200)
|
} else if (res.code === 403){
|
top.location.href = baseUrl+"/";
|
}else {
|
layer.msg(res.msg, {icon: 2});
|
}
|
}
|
})
|
return false;
|
});
|
|
// 渲染下拉树
|
var insXmSel = xmSelect.render({
|
el: '#resourceParentSel',
|
height: '250px',
|
data: insTb.options.data,
|
initValue: mData&&mData.resourceId!=null ? [mData.resourceId] : [],
|
model: {label: {type: 'text'}},
|
prop: {
|
name: 'name',
|
value: 'id'
|
},
|
radio: true,
|
clickClose: true,
|
tree: {
|
show: true,
|
indent: 15,
|
strict: false,
|
expandedKeys: false
|
}
|
});
|
// 弹窗不出现滚动条
|
$(layero).children('.layui-layer-content').css('overflow', 'visible');
|
layui.form.render('select');
|
}
|
});
|
}
|
|
/* 删除 */
|
function doDel(obj) {
|
layer.confirm('确定要删除选中数据吗？', {
|
skin: 'layui-layer-admin',
|
shade: .1
|
}, function (i) {
|
layer.close(i);
|
var loadIndex = layer.load(2);
|
var ids;
|
if (obj.data) {
|
ids = [];
|
ids[0] = obj.data.id;
|
} else {
|
ids = obj.ids;
|
}
|
$.ajax({
|
url: baseUrl+"/resource/delete/auth",
|
headers: {'token': localStorage.getItem('token')},
|
data: {ids: ids},
|
method: 'POST',
|
success: function (res) {
|
layer.close(loadIndex);
|
if (res.code === 200){
|
layer.msg(res.msg, {icon: 1});
|
insTb.refresh();
|
} else if (res.code === 403){
|
top.location.href = baseUrl+"/";
|
} else {
|
layer.msg(res.msg, {icon: 2});
|
}
|
}
|
})
|
});
|
}
|
|
});
|
</script>
|
</body>
|
</html>
|
