wg-basic/service-role/src/main/resources/templates/role/list.html
2022-03-06 20:45:55 +08:00

340 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<base th:href="${#request.getContextPath() + '/'}">
<meta charset="utf-8">
<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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="layui-fluid layui-anim layui-anim-fadein" style="padding: 0;">
<div class="layui-row">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body">
<div class="test-table-reload-btn" style="margin-bottom: 10px;">
<div class="layui-inline">
<input type="text" id="keywords" class="layui-input search-item" placeholder="输入关键字">
</div>
<div class="layui-btn-group">
<button type="button" id="search" class="layui-btn layui-btn-sm">
<i class="fa fa-lg fa-search"></i> 搜索
</button>
<button type="button" id="adminRole" class="layui-btn layui-btn-normal layui-btn-sm">
<i class="fa fa-lg fa-address-card-o"></i> 超管列表
</button>
<button type="button" id="adminMenu" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="fa fa-lg fa-list"></i> 超管菜单
</button>
</div>
</div>
<table class="layui-hide" id="dataTable" lay-filter="dataTable"></table>
<!-- 表头按钮组 -->
<script type="text/html" id="headerToolBar">
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-sm" lay-event="save">
<i class="fa fa-lg fa-plus"></i>
</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-sm" lay-event="update">
<i class="fa fa-lg fa-edit"></i>
</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-sm" lay-event="remove">
<i class="fa fa-lg fa-trash"></i>
</button>
</div>
</script>
<!-- 序号 -->
<script type="text/html" id="rowNum">
{{d.LAY_INDEX}}
</script>
</div>
</div>
</div>
</div>
<input type="hidden" id="rolePermission" th:value="${rolePermission}"/>
</div>
<script src="assets/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
layui.config({
base: 'assets/layuiadmin/'
}).extend({
index: 'lib/index'
}).use(['index', 'table', 'laydate', 'ztree'], function() {
var $ = layui.$;
var $win = $(window);
var table = layui.table;
var admin = layui.admin;
var laydate = layui.laydate;
var parentId = top.restAjax.params(window.location.href).parentId;
var tableUrl = 'api/role/listpage?parentId={parentId}';
// 初始化表格
function initTable() {
var col = [
{type:'checkbox', fixed: 'left'},
{field:'rowNum', width:80, title: '序号', fixed: 'left', align:'center', templet: '#rowNum'},
{field:'users', width:100, title: '人员列表', align:'center',
templet: function(item) {
return '<button type="button" class="layui-btn layui-btn-xs" lay-event="userEvent"><i class="fa fa-users"></i> 查看</button>';
}
},
{field:'roleId', width:180, title: '角色ID', align:'center',},
{field:'roleName', width:170, title: '角色名称', align:'center',},
{field:'roleSummary', width:170, title: '角色说明', align:'center',},
{field:'roleCode', width:170, title: '角色编码', align:'center',},
]
if($('#rolePermission').val() == 'true') {
col.push({field:'permission', width:190, title: '接口权限', align:'center',
templet: function(item) {
return '<div class="layui-btn-group">' +
'<button type="button" class="layui-btn layui-btn-xs" lay-event="saveEvent"><i class="fa fa-plus"></i> 增</button>' +
'<button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="removeEvent"><i class="fa fa-minus"></i> 删</button>' +
'<button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="updateEvent"><i class="fa fa-pencil"></i> 改</button>' +
'<button type="button" class="layui-btn layui-btn-warm layui-btn-xs" lay-event="queryEvent"><i class="fa fa-search"></i> 查</button>'+
'</div>'
}
})
}
col.push({field:'jurisdiction', width:140, title: '其他权限', align:'center',
templet: function(item) {
return '<div class="layui-btn-group">' +
'<button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="dataEvent"><i class="fa fa-database"></i> 数据</button>' +
'<button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="menuEvent"><i class="fa fa-list"></i> 菜单</button>'+
'</div>'
}
});
table.render({
elem: '#dataTable',
id: 'dataTable',
url: top.restAjax.path(tableUrl, [parentId]),
width: admin.screen() > 1 ? '100%' : '',
height: $win.height() - 60,
limit: 20,
limits: [20, 40, 60, 80, 100, 200],
toolbar: '#headerToolBar',
request: {
pageName: 'page',
limitName: 'rows'
},
cols: [col],
page: true,
parseData: function(data) {
return {
'code': 0,
'msg': '',
'count': data.total,
'data': data.rows
};
}
});
}
// 重载表格
function reloadTable(currentPage) {
table.reload('dataTable', {
url: top.restAjax.path(tableUrl, [parentId]),
where: {
keywords: $('#keywords').val(),
},
page: {
curr: currentPage
},
height: $win.height() - 60,
});
}
// 初始化日期
function initDate() {
// 日期选择
laydate.render({
elem: '#startTime',
format: 'yyyy-MM-dd'
});
laydate.render({
elem: '#endTime',
format: 'yyyy-MM-dd'
});
}
// 删除
function removeData(ids) {
top.dialog.msg(top.dataMessage.delete, {
time: 0,
btn: [top.dataMessage.button.yes, top.dataMessage.button.no],
shade: 0.3,
yes: function (index) {
top.dialog.close(index);
var layIndex;
top.restAjax.delete(top.restAjax.path('api/role/remove/{ids}', [ids]), {}, null, function (code, data) {
top.dialog.msg(top.dataMessage.deleteSuccess, {time: 1000});
parent.common.refreshTree('leftTree');
reloadTable();
}, function (code, data) {
top.dialog.msg(data.msg);
}, function () {
layIndex = top.dialog.msg(top.dataMessage.deleting, {icon: 16, time: 0, shade: 0.3});
}, function () {
top.dialog.close(layIndex);
});
}
});
}
initTable();
initDate();
// 事件 - 页面变化
$win.on('resize', function() {
reloadTable();
});
// 事件 - 搜索
$(document).on('click', '#search', function() {
reloadTable(1);
});
// 事件 - 管理员菜单
$(document).on('click', '#adminMenu', function() {
roleMenu('admin', '超管菜单(不设置显示全部,慎用!!!');
});
$(document).on('click', '#adminRole', function() {
top.dialog.open({
url: top.restAjax.path('route/role/user/list?roleId=admin', []),
title: '【超管】用户列表与admin有相同权限',
width: '800px',
height: '500px',
onClose: function() {}
});
});
// 事件 - 增删改
table.on('toolbar(dataTable)', function(obj) {
var layEvent = obj.event;
var checkStatus = table.checkStatus('dataTable');
var checkDatas = checkStatus.data;
if(layEvent === 'save') {
layer.open({
type: 2,
title: false,
closeBtn: 0,
area: ['100%', '100%'],
shadeClose: true,
anim: 2,
content: top.restAjax.path('route/role/save?roleParentId={parentId}', [parentId]),
end: function() {
reloadTable();
}
});
} else if(layEvent === 'update') {
if(checkDatas.length === 0) {
top.dialog.msg(top.dataMessage.table.selectEdit);
} else if(checkDatas.length > 1) {
top.dialog.msg(top.dataMessage.table.selectOneEdit);
} else {
layer.open({
type: 2,
title: false,
closeBtn: 0,
area: ['100%', '100%'],
shadeClose: true,
anim: 2,
content: top.restAjax.path('route/role/update?roleId={roleId}', [checkDatas[0].roleId]),
end: function() {
reloadTable();
}
});
}
} else if(layEvent === 'remove') {
if(checkDatas.length === 0) {
top.dialog.msg(top.dataMessage.table.selectDelete);
} else {
var ids = '';
for(var i = 0, item; item = checkDatas[i++];) {
if(i > 1) {
ids += '_';
}
ids += item.roleId;
}
removeData(ids);
}
}
});
// 角色权限
function roleAuth(roleId, type) {
var title;
var permissionType;
switch (type) {
case 1:
title = '新增';
permissionType = 'permissionInsert';
break;
case 2:
title = '删除';
permissionType = 'permissionDelete';
break;
case 3:
title = '修改';
permissionType = 'permissionUpdate';
break;
default:
title = '查询';
permissionType = 'permissionQuery';
}
top.dialog.open({
url: top.restAjax.path('route/role/permission/update?roleId={roleId}&permissionType={permissionType}', [roleId, permissionType]),
title: title +'授权',
width: '900px',
height: '500px',
onClose: function() {}
});
}
/**
* 角色菜单
* @param roleId
*/
function roleMenu(roleId, title) {
top.dialog.open({
url: top.restAjax.path('route/role/menu/tree?roleId={roleId}', [roleId]),
title: title,
width: '400px',
height: '500px',
onClose: function() {}
});
}
table.on('tool(dataTable)', function(obj) {
var data = obj.data;
var layEvent = obj.event;
if(layEvent === 'saveEvent') {
roleAuth(data.roleId, 1);
} else if(layEvent === 'removeEvent') {
roleAuth(data.roleId, 2);
} else if(layEvent === 'updateEvent') {
roleAuth(data.roleId, 3);
} else if(layEvent === 'queryEvent') {
roleAuth(data.roleId, 4);
} else if(layEvent === 'menuEvent') {
roleMenu(data.roleId, '角色菜单');
} else if(layEvent === 'userEvent') {
top.dialog.open({
url: top.restAjax.path('route/role/user/list?roleId={roleId}', [data.roleId]),
title: '【'+ data.roleName +'】用户列表',
width: '800px',
height: '500px',
onClose: function() {}
});
} else if(layEvent === 'dataEvent') {
top.dialog.open({
url: top.restAjax.path('route/role/data-right/update?roleId={roleId}', [data.roleId]),
title: '修改数据权限',
width: '200px',
height: '350px',
onClose: function() {
}
});
}
});
});
</script>
</body>
</html>