root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加权限列表页面

v1.0
bobi1234 2018-08-14 20:19:32 +08:00
parent 4df8ba03ab
commit e19ed85d1b
4 changed files with 663 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

254
data/permission.json Normal file
View File

@ -0,0 +1,254 @@
{
"code": 0,
"msg": "",
"count": 19,
"data": [
{
"authorityId": 1,
"authorityName": "系统管理",
"orderNumber": 1,
"menuUrl": null,
"menuIcon": "layui-icon-set",
"createTime": "2018/06/29 11:05:41",
"authority": null,
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 0,
"parentId": -1
},
{
"authorityId": 2,
"authorityName": "用户管理",
"orderNumber": 2,
"menuUrl": "system/user",
"menuIcon": null,
"createTime": "2018/06/29 11:05:41",
"authority": null,
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 0,
"parentId": 1
},
{
"authorityId": 3,
"authorityName": "查询用户",
"orderNumber": 3,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/07/21 13:54:16",
"authority": "user:view",
"checked": 0,
"updateTime": "2018/07/21 13:54:16",
"isMenu": 1,
"parentId": 2
},
{
"authorityId": 4,
"authorityName": "添加用户",
"orderNumber": 4,
"menuUrl": null,
"menuIcon": null,
"createTime": "2018/06/29 11:05:41",
"authority": "user:add",
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 1,
"parentId": 2
},
{
"authorityId": 5,
"authorityName": "修改用户",
"orderNumber": 5,
"menuUrl": null,
"menuIcon": null,
"createTime": "2018/06/29 11:05:41",
"authority": "user:edit",
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 1,
"parentId": 2
},
{
"authorityId": 6,
"authorityName": "删除用户",
"orderNumber": 6,
"menuUrl": null,
"menuIcon": null,
"createTime": "2018/06/29 11:05:41",
"authority": "user:delete",
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 1,
"parentId": 2
},
{
"authorityId": 7,
"authorityName": "角色管理",
"orderNumber": 7,
"menuUrl": "system/role",
"menuIcon": null,
"createTime": "2018/06/29 11:05:41",
"authority": null,
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 0,
"parentId": 1
},
{
"authorityId": 8,
"authorityName": "查询角色",
"orderNumber": 8,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/07/21 13:54:59",
"authority": "role:view",
"checked": 0,
"updateTime": "2018/07/21 13:54:58",
"isMenu": 1,
"parentId": 7
},
{
"authorityId": 9,
"authorityName": "添加角色",
"orderNumber": 9,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/06/29 11:05:41",
"authority": "role:add",
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 1,
"parentId": 7
},
{
"authorityId": 10,
"authorityName": "修改角色",
"orderNumber": 10,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/06/29 11:05:41",
"authority": "role:edit",
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 1,
"parentId": 7
},
{
"authorityId": 11,
"authorityName": "删除角色",
"orderNumber": 11,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/06/29 11:05:41",
"authority": "role:delete",
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 1,
"parentId": 7
},
{
"authorityId": 12,
"authorityName": "角色权限管理",
"orderNumber": 12,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/06/29 11:05:41",
"authority": "role:auth",
"checked": 0,
"updateTime": "2018/07/13 15:27:18",
"isMenu": 1,
"parentId": 7
},
{
"authorityId": 13,
"authorityName": "权限管理",
"orderNumber": 13,
"menuUrl": "system/authorities",
"menuIcon": null,
"createTime": "2018/06/29 11:05:41",
"authority": null,
"checked": 0,
"updateTime": "2018/07/13 15:45:13",
"isMenu": 0,
"parentId": 1
},
{
"authorityId": 14,
"authorityName": "查询权限",
"orderNumber": 14,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/07/21 13:55:57",
"authority": "authorities:view",
"checked": 0,
"updateTime": "2018/07/21 13:55:56",
"isMenu": 1,
"parentId": 13
},
{
"authorityId": 15,
"authorityName": "添加权限",
"orderNumber": 15,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/06/29 11:05:41",
"authority": "authorities:add",
"checked": 0,
"updateTime": "2018/06/29 11:05:41",
"isMenu": 1,
"parentId": 13
},
{
"authorityId": 16,
"authorityName": "修改权限",
"orderNumber": 16,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/07/13 09:13:42",
"authority": "authorities:edit",
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 1,
"parentId": 13
},
{
"authorityId": 17,
"authorityName": "删除权限",
"orderNumber": 17,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/06/29 11:05:41",
"authority": "authorities:delete",
"checked": 0,
"updateTime": "2018/06/29 11:05:41",
"isMenu": 1,
"parentId": 13
},
{
"authorityId": 18,
"authorityName": "登录日志",
"orderNumber": 18,
"menuUrl": "system/loginRecord",
"menuIcon": null,
"createTime": "2018/06/29 11:05:41",
"authority": null,
"checked": 0,
"updateTime": "2018/06/29 11:05:41",
"isMenu": 0,
"parentId": 1
},
{
"authorityId": 19,
"authorityName": "查询登录日志",
"orderNumber": 19,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/07/21 13:56:43",
"authority": "loginRecord:view",
"checked": 0,
"updateTime": "2018/07/21 13:56:43",
"isMenu": 1,
"parentId": 18
}
]
}

18
lib/layui/lay/modules/treetable/treetable.css Normal file
View File

@ -0,0 +1,18 @@
.treeTable-empty {
width: 20px;
display: inline-block;
}
.treeTable-icon {
cursor: pointer;
}
.treeTable-icon .layui-icon-triangle-d:before {
content: "\e623";
}
.treeTable-icon.open .layui-icon-triangle-d:before {
content: "\e625";
background-color: transparent;
}

206
lib/layui/lay/modules/treetable/treetable.js Normal file
View File

@ -0,0 +1,206 @@
layui.define(['layer', 'table'], function (exports) {
var $ = layui.jquery;
var layer = layui.layer;
var table = layui.table;
var treetable = {
// 渲染树形表格
render: function (param) {
// 检查参数
if (!treetable.checkParam(param)) {
return;
}
// 获取数据
if (param.data) {
treetable.init(param, param.data);
} else {
$.getJSON(param.url, param.where, function (res) {
treetable.init(param, res.data);
});
}
},
// 渲染表格
init: function (param, data) {
var mData = [];
var doneCallback = param.done;
var tNodes = data;
// 补上id和pid字段
for (var i = 0; i < tNodes.length; i++) {
var tt = tNodes[i];
if (!tt.id) {
if (!param.treeIdName) {
layer.msg('参数treeIdName不能为空', {icon: 5});
return;
}
tt.id = tt[param.treeIdName];
}
if (!tt.pid) {
if (!param.treePidName) {
layer.msg('参数treePidName不能为空', {icon: 5});
return;
}
tt.pid = tt[param.treePidName];
}
}
// 对数据进行排序
var sort = function (s_pid, data) {
for (var i = 0; i < data.length; i++) {
if (data[i].pid == s_pid) {
var len = mData.length;
if (len > 0 && mData[len - 1].id == s_pid) {
mData[len - 1].isParent = true;
}
mData.push(data[i]);
sort(data[i].id, data);
}
}
};
sort(param.treeSpid, tNodes);
// 重写参数
param.url = undefined;
param.data = mData;
param.page = {
count: param.data.length,
limit: param.data.length
};
param.cols[0][param.treeColIndex].templet = function (d) {
var mId = d.id;
var mPid = d.pid;
var isDir = d.isParent;
var emptyNum = treetable.getEmptyNum(mPid, mData);
var iconHtml = '';
for (var i = 0; i < emptyNum; i++) {
iconHtml += '<span class="treeTable-empty"></span>';
}
if (isDir) {
iconHtml += '<i class="layui-icon layui-icon-triangle-d"></i> <i class="layui-icon layui-icon-layer"></i>';
} else {
iconHtml += '<i class="layui-icon layui-icon-file"></i>';
}
iconHtml += '&nbsp;&nbsp;';
var ttype = isDir ? 'dir' : 'file';
var vg = '<span class="treeTable-icon open" lay-tid="' + mId + '" lay-tpid="' + mPid + '" lay-ttype="' + ttype + '">';
return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '</span>'
};
param.done = function (res, curr, count) {
$(param.elem).next().addClass('treeTable');
$('.treeTable .layui-table-page').css('display', 'none');
$(param.elem).next().attr('treeLinkage', param.treeLinkage);
// 绑定事件换成对body绑定
/*$('.treeTable .treeTable-icon').click(function () {
treetable.toggleRows($(this), param.treeLinkage);
});*/
if (param.treeDefaultClose) {
treetable.foldAll(param.elem);
}
if (doneCallback) {
doneCallback(res, curr, count);
}
};
// 渲染表格
table.render(param);
},
// 计算缩进的数量
getEmptyNum: function (pid, data) {
var num = 0;
if (!pid) {
return num;
}
var tPid;
for (var i = 0; i < data.length; i++) {
if (pid == data[i].id) {
num += 1;
tPid = data[i].pid;
break;
}
}
return num + treetable.getEmptyNum(tPid, data);
},
// 展开/折叠行
toggleRows: function ($dom, linkage) {
var type = $dom.attr('lay-ttype');
if ('file' == type) {
return;
}
var mId = $dom.attr('lay-tid');
var isOpen = $dom.hasClass('open');
if (isOpen) {
$dom.removeClass('open');
} else {
$dom.addClass('open');
}
$dom.closest('tbody').find('tr').each(function () {
var $ti = $(this).find('.treeTable-icon');
var pid = $ti.attr('lay-tpid');
var ttype = $ti.attr('lay-ttype');
var tOpen = $ti.hasClass('open');
if (mId == pid) {
if (isOpen) {
$(this).hide();
if ('dir' == ttype && tOpen == isOpen) {
$ti.trigger('click');
}
} else {
$(this).show();
if (linkage && 'dir' == ttype && tOpen == isOpen) {
$ti.trigger('click');
}
}
}
});
},
// 检查参数
checkParam: function (param) {
if (!param.treeSpid && param.treeSpid != 0) {
layer.msg('参数treeSpid不能为空', {icon: 5});
return false;
}
if (!param.treeColIndex && param.treeColIndex != 0) {
layer.msg('参数treeColIndex不能为空', {icon: 5});
return false;
}
return true;
},
// 展开所有
expandAll: function (dom) {
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
var $ti = $(this).find('.treeTable-icon');
var ttype = $ti.attr('lay-ttype');
var tOpen = $ti.hasClass('open');
if ('dir' == ttype && !tOpen) {
$ti.trigger('click');
}
});
},
// 折叠所有
foldAll: function (dom) {
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
var $ti = $(this).find('.treeTable-icon');
var ttype = $ti.attr('lay-ttype');
var tOpen = $ti.hasClass('open');
if ('dir' == ttype && tOpen) {
$ti.trigger('click');
}
});
}
};
layui.link(layui.cache.base + 'treetable/treetable.css');
// 给图标列绑定事件
$('body').on('click', '.treeTable .treeTable-icon', function () {
var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage');
if ('true' == treeLinkage) {
treetable.toggleRows($(this), true);
} else {
treetable.toggleRows($(this), false);
}
});
exports('treetable', treetable);
});

187
permission.html
View File

@ -1,10 +1,193 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>权限列表</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="lib/layui/css/layui.css">
<link rel="stylesheet" href="css/scroll-bar.css">
<link rel="stylesheet" href="css/sub-page.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_693759_wytlyqhtdtj1nhfr.css">
<link rel="stylesheet" href="lib/nprogress/nprogress.css">
</head>
<body>
<h1>权限列表</h1>
<div class="ok-body">
<!--面包屑导航区域-->
<div class="ok-body-breadcrumb">
<span class="layui-breadcrumb">
<a><cite>首页</cite></a>
<a><cite>常用页面</cite></a>
<a><cite>权限列表</cite></a>
</span>
<a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
<i class="layui-icon layui-icon-refresh"></i>
</a>
</div>
<!--模糊搜索区域-->
<div class="layui-row">
<form class="layui-form layui-col-md12 ok-search">
<input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime">
<input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
<input class="layui-input" placeholder="请输入权限名" autocomplete="off">
<button class="layui-btn" lay-submit="" lay-filter="search">
<i class="layui-icon layui-icon-search"></i>
</button>
</form>
</div>
<!--工具栏-->
<okToolbar>
<button class="layui-btn layui-btn-danger" id="batchDel">
<i class="layui-icon layui-icon-delete"></i>批量删除
</button>
<button class="layui-btn" id="addPermission">
<i class="layui-icon">&#xe61f;</i>添加权限
</button>
<span>共有数据：<i id="countNum"></i> 条</span>
</okToolbar>
<!--数据表格-->
<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="lib/layui/layui.js"></script>
<script src="lib/nprogress/nprogress.js"></script>
<script>
NProgress.start();
window.onload = function () {
NProgress.done();
}
layui.config({
base: 'lib/layui/lay/modules/'
}).extend({
treetable: 'treetable/treetable'
}).use(['element', 'table', 'form', 'jquery', 'laydate', 'treetable'], function () {
var element = layui.element;
var form = layui.form;
var table = layui.table;
var $ = layui.jquery;
var laydate = layui.laydate;
var treetable = layui.treetable;
laydate.render({
elem: '#startTime',
type: "datetime"
});
laydate.render({
elem: '#endTime',
type: "datetime"
});
layer.load(2);
treetable.render({
treeColIndex: 1,
treeSpid: -1,
treeIdName: 'authorityId',
treePidName: 'parentId',
elem: '#tableId',
url: 'data/permission.json',
page: false,
cols: [[
{type: 'numbers'},
{field: 'authorityName', minWidth: 200, title: '权限名称'},
{field: 'authority', title: '权限标识'},
{field: 'menuUrl', title: '菜单url'},
{field: 'orderNumber', width: 80, align: 'center', title: '排序号'},
{
field: 'isMenu', width: 80, align: 'center', templet: function (d) {
if (d.isMenu == 1) {
return '<span class="layui-badge layui-bg-gray">按钮</span>';
}
if (d.parentId == -1) {
return '<span class="layui-badge layui-bg-blue">目录</span>';
} else {
return '<span class="layui-badge-rim">菜单</span>';
}
}, title: '类型'
},
{templet: '#operationTpl', width: 120, align: 'center', title: '操作'}
]],
done: function (res, curr, count) {
layer.closeAll('loading');
$("#countNum").text(count);
}
});
form.on('submit(search)', function () {
layer.msg('正在查询，请稍后...');
return false;
});
table.on('tool(tableFilter)', function (obj) {
var data = obj.data;
console.log("id值：" + data.id);
var layEvent = obj.event;
if (layEvent === 'edit') {
layer.open({
title: '编辑权限',
type: 2,
shade: false,
maxmin: true,
shade: 0.5,
area: ['90%', '90%'],
content: 'permission-edit.html?id' + data.id,
zIndex: layer.zIndex,
end: function () {
$(".layui-laypage-btn")[0].click();
}
});
} else if (layEvent === 'del') {
layer.confirm("确定要删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
layer.msg("操作成功！", {icon: 1, time: 1000});
});
}
});
$("#batchDel").click(function () {
layer.confirm("确定要批量删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
var checkStatus = table.checkStatus('tableId');
var rows = checkStatus.data.length;
if (rows > 0) {
var idsStr = "";
for (var i = 0; i < checkStatus.data.length; i++) {
idsStr += checkStatus.data[i].id + ',';
}
console.log("选择的id-->" + idsStr);
layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
$(".layui-laypage-btn")[0].click();
});
} else {
layer.msg('未选择有效数据', {
offset: 't',
anim: 6
});
}
});
})
$("#addPermission").click(function () {
layer.open({
title: '添加权限',
type: 2,
shade: false,
maxmin: true,
shade: 0.5,
anim: 4,
area: ['90%', '90%'],
content: 'permission-add.html',
zIndex: layer.zIndex,
// skin: 'layui-layer-molv',
end: function () {
$(".layui-laypage-btn")[0].click();
}
});
})
})
</script>
<!--模板-->
<script type="text/html" id="operationTpl">
<a href="javascript:;" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
<a href="javascript:;" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
</body>
</html>