200 lines
8.4 KiB
HTML
200 lines
8.4 KiB
HTML
{extend name="$layout"}
|
||
{block name="title"}角色管理{/block}
|
||
{block name="search"}
|
||
<div class="layui-form toolbar">
|
||
<div class="layui-form-item">
|
||
<!--<div class="layui-inline">
|
||
<div class="layui-input-inline mr0">
|
||
<input id="edtSearchAuth" class="layui-input" type="text" placeholder="输入角色名称"/>
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<button id="btnSearchAuth" class="layui-btn icon-btn"><i class="layui-icon"></i>搜索
|
||
</button>-->
|
||
<button id="btnAddAuth" class="layui-btn icon-btn"><i class="layui-icon"></i>添加</button>
|
||
<!--</div>-->
|
||
</div>
|
||
</div>
|
||
{/block}
|
||
{block name="table"}
|
||
<table class="layui-table" id="tablePermission" lay-filter="tablePermission"></table>
|
||
<!-- 表格操作列 -->
|
||
<script type="text/html" id="tableBarAuth">
|
||
{:editButton()}
|
||
{:addButton('新增子菜单')}
|
||
{:deleteButton()}
|
||
</script>
|
||
{/block}
|
||
{block name="script"}
|
||
<script>
|
||
layui.use(['layer', 'form', 'table', 'admin', 'util', 'treeTable'], function () {
|
||
var $ = layui.jquery;
|
||
var layer = layui.layer;
|
||
var form = layui.form;
|
||
var table = layui.table;
|
||
var util = layui.util;
|
||
var admin = layui.admin;
|
||
var treeTable = layui.treeTable;
|
||
|
||
var treeTb = treeTable.render({
|
||
tree: {
|
||
arrowType: 'arrow2',
|
||
iconIndex: 1, // 折叠图标显示在第几列
|
||
idName: 'id', // 自定义id字段的名称
|
||
childName: 'children', // 自定义标识是否还有子节点的字段名称
|
||
pidName: 'parent_id',
|
||
isPidData: true,
|
||
getIcon: function(d) { // 自定义图标
|
||
// d是当前行的数据
|
||
if (d.children.length) { // 判断是否有子集
|
||
return '<i class="ew-tree-icon ew-tree-icon-folder"></i>';
|
||
} else {
|
||
return '<i class="ew-tree-icon ew-tree-icon-file"></i>';
|
||
}
|
||
}
|
||
},
|
||
elem: '#tablePermission',
|
||
cellMinWidth: 100,
|
||
cols: [
|
||
{type: 'numbers', title: '#'},
|
||
{field: 'permission_name', title: '菜单名称', minWidth: 200},
|
||
{field: 'route', title: '菜单路由', templet: function (d) {
|
||
return escapeChars(d.route);
|
||
}
|
||
},
|
||
{field: 'method', title: '请求方法', width: 90},
|
||
{field: 'permission_mark', title: '权限标识'},
|
||
{field: 'type', title: '菜单类型', templet: function (d) {
|
||
return d.type == 1 ? '<button class="layui-btn layui-btn-primary layui-btn-xs">菜单</button>' :
|
||
'<button class="layui-btn layui-btn-primary layui-btn-xs">按钮</button>'
|
||
}, width: 90, align: 'center'
|
||
},
|
||
{field: 'sort', title: '排序', width:60, align: 'center'},
|
||
{
|
||
field: 'created_at', sort: true, templet: function (d) {
|
||
return util.toDateString(d.created_at);
|
||
}, title: '创建时间', maxWidth: 100
|
||
},
|
||
{templet: '#tableBarAuth', title: '操作', align: 'center', minWidth: 150}
|
||
],
|
||
reqData: function(data, callback) {
|
||
// 在这里写ajax请求，通过callback方法回调数据
|
||
$.get('{:url("permissions")}', function (res) {
|
||
callback(res.data); // 参数是数组类型
|
||
});
|
||
}
|
||
});
|
||
|
||
// 添加按钮点击事件
|
||
$('#btnAddAuth').click(function () {
|
||
showEditModel();
|
||
});
|
||
function escapeChars(str) {
|
||
str = str.replace(/&/g, '&');
|
||
str = str.replace(/</g, '<');
|
||
str = str.replace(/>/g, '>');
|
||
str = str.replace(/'/g, '´');
|
||
str = str.replace(/"/g, '"');
|
||
str = str.replace(/\|/g, '¦');
|
||
return str;
|
||
}
|
||
// 工具条点击事件
|
||
treeTable.on('tool(tablePermission)', function (obj) {
|
||
var data = obj.data;
|
||
var layEvent = obj.event;
|
||
if (layEvent === 'edit') { // 修改
|
||
showEditModel(data);
|
||
} else if (layEvent === 'del') { // 删除
|
||
doDel(obj);
|
||
} else {
|
||
showEditModel(data, true);
|
||
}
|
||
});
|
||
treeTable.on('row(tablePermission)', function(obj){
|
||
console.log(obj.value); //得到修改后的值
|
||
console.log(obj.field); //当前编辑的字段名
|
||
console.log(obj.data); //所在行的所有相关数据
|
||
});
|
||
// 删除
|
||
function doDel(obj) {
|
||
layer.confirm('确定要删除“' + obj.data.permission_name + '”吗？', {
|
||
skin: 'layui-layer-admin',
|
||
shade: .1
|
||
}, function (index) {
|
||
layer.close(index);
|
||
admin.req('/permission/'+ obj.data.id, {}, function (response) {
|
||
if (response.code === 10000) {
|
||
layer.msg(response.msg, {icon: 1});
|
||
obj.del()
|
||
} else {
|
||
layer.msg(response.msg, {icon: 2});
|
||
}
|
||
}, 'delete');
|
||
});
|
||
}
|
||
|
||
// 显示表单弹窗
|
||
// 显示表单弹窗
|
||
function showEditModel(permission, addPermission= false) {
|
||
var layIndex = admin.open({
|
||
title: addPermission ? '新增子菜单' : ((permission ? '修改' : '添加') + '菜单'),
|
||
url: addPermission ? '/permission/create' + '?id='+permission.id : (permission ? '/permission/'+permission.id + '/edit': '/permission/create'),
|
||
data: addPermission ? '' : permission, // 传递数据到表单页面
|
||
end: function () {
|
||
if (admin.getLayerData(layIndex, 'formOk')) { // 判断表单操作成功标识
|
||
if (addPermission) {
|
||
treeTb.reload();
|
||
setTimeout(function () {
|
||
treeTb.expand(permission.id)
|
||
}, 200)
|
||
} else {
|
||
if (permission) {
|
||
treeTb.reload();
|
||
setTimeout(function () {
|
||
treeTb.expand(permission.id)
|
||
}, 200)
|
||
} else {
|
||
treeTb.reload(); // 成功刷新表格
|
||
}
|
||
}
|
||
}
|
||
},
|
||
success: function (layero, dIndex) {
|
||
// 弹窗超出范围不出现滚动条
|
||
$(layero).children('.layui-layer-content').css('overflow', 'visible');
|
||
}
|
||
});
|
||
}
|
||
|
||
// 搜索按钮点击事件
|
||
$('#btnSearchAuth').click(function () {
|
||
$('#edtSearchAuth').removeClass('layui-form-danger');
|
||
var keyword = $('#edtSearchAuth').val();
|
||
var $tds = $('#tableAuth').next('.treeTable').find('.layui-table-body tbody tr td');
|
||
$tds.css('background-color', 'transparent');
|
||
if (!keyword) {
|
||
layer.tips('请输入关键字', '#edtSearchAuth', {tips: [1, '#ff4c4c']});
|
||
$('#edtSearchAuth').addClass('layui-form-danger');
|
||
$('#edtSearchAuth').focus();
|
||
return;
|
||
}
|
||
var searchCount = 0;
|
||
$tds.each(function () {
|
||
if ($(this).text().indexOf(keyword) >= 0) {
|
||
$(this).css('background-color', '#FAE6A0');
|
||
if (searchCount == 0) {
|
||
$('body,html').stop(true);
|
||
$('body,html').animate({scrollTop: $(this).offset().top - 150}, 500);
|
||
}
|
||
searchCount++;
|
||
}
|
||
});
|
||
if (searchCount == 0) {
|
||
layer.msg("没有匹配结果", {icon: 5, anim: 6});
|
||
} else {
|
||
treetable.expandAll('#tableAuth');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
{/block} |