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

优化角色列表代码

v1.0
bobi 2019-05-15 22:35:09 +08:00
parent 9c9cb23ab2
commit 3efbc2a3ab
7 changed files with 171 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
data/permission-tree.json
View File

@ -1,85 +1,89 @@
[
{
{
"status": 1000,
"msg": "查询成功",
"data": [{
"id": "1",
"name": "根目录",
"isParent": true
},
{
"id": "2",
"name": "会员管理",
"isParent": true,
"parentId": "1"
},
{
"id": "3",
"name": "用户管理",
"isParent": true,
"parentId": "2"
},
{
"id": "4",
"name": "增加",
"isParent": false,
"parentId": "3"
},
{
"id": "5",
"name": "修改",
"isParent": false,
"parentId": "3"
},
{
"id": "6",
"name": "删除",
"isParent": false,
"parentId": "3"
},
{
"id": "7",
"name": "角色管理",
"isParent": true,
"parentId": "2"
},
{
"id": "8",
"name": "增加",
"isParent": false,
"parentId": "7"
},
{
"id": "9",
"name": "修改",
"isParent": false,
"parentId": "7"
},
{
"id": "10",
"name": "删除",
"isParent": false,
"parentId": "7"
},
{
"id": "11",
"name": "权限管理",
"isParent": true,
"parentId": "2"
},
{
"id": "12",
"name": "增加",
"isParent": false,
"parentId": "11"
},
{
"id": "13",
"name": "修改",
"isParent": false,
"parentId": "11"
},
{
"id": "14",
"name": "删除",
"isParent": false,
"parentId": "11"
}
]
{
"id": "2",
"name": "会员管理",
"isParent": true,
"parentId": "1"
},
{
"id": "3",
"name": "用户管理",
"isParent": true,
"parentId": "2"
},
{
"id": "4",
"name": "增加",
"isParent": false,
"parentId": "3"
},
{
"id": "5",
"name": "修改",
"isParent": false,
"parentId": "3"
},
{
"id": "6",
"name": "删除",
"isParent": false,
"parentId": "3"
},
{
"id": "7",
"name": "角色管理",
"isParent": true,
"parentId": "2"
},
{
"id": "8",
"name": "增加",
"isParent": false,
"parentId": "7"
},
{
"id": "9",
"name": "修改",
"isParent": false,
"parentId": "7"
},
{
"id": "10",
"name": "删除",
"isParent": false,
"parentId": "7"
},
{
"id": "11",
"name": "权限管理",
"isParent": true,
"parentId": "2"
},
{
"id": "12",
"name": "增加",
"isParent": false,
"parentId": "11"
},
{
"id": "13",
"name": "修改",
"isParent": false,
"parentId": "11"
},
{
"id": "14",
"name": "删除",
"isParent": false,
"parentId": "11"
}
]
}

1
lib/layui_plugins/okLayer/okLayer.js
View File

@ -23,7 +23,6 @@ layui.define(["layer"], function (exports) {
layer.open({
title: title,
type: 2,
shade: false,
maxmin: true,
shade: 0.5,
anim: okLayer.animChoose(),

2
lib/layui_plugins/okUtils/okUtils.js
View File

@ -2,7 +2,7 @@
layui.define("layer", function (exports) {
var $ = layui.jquery;
var okUtils = {
isFrontendBackendSeparate: true,
isFrontendBackendSeparate: false,
baseUrl: "http://localhost:8080",
/**
* ajax()函数二次封装

59
pages/role/role-add.html
View File

@ -38,6 +38,7 @@
<div class="layui-form-item">
<label class="layui-form-label">权限</label>
<div class="layui-input-block">
<!--权限树-->
<ul class="ztree" id="permissionTree"></ul>
</div>
</div>
@ -54,8 +55,15 @@
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="../../lib/zTree_v3/js/jquery.ztree.all.js"></script>
<script type="text/javascript">
layui.use(["element", "form"], function () {
layui.config({
base: "../../lib/layui_plugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
}).use(["element", "form", "okLayer", "okUtils"], function () {
var form = layui.form;
var okLayer = layui.okLayer;
var okUtils = layui.okUtils;
// zTree设置
var setting = {
@ -66,31 +74,36 @@
};
// zTree异步请求所有权限树节点
var treeObj, loadIndex;
$.ajax({
url: "../../data/permission-tree.json",
type: "get",
dataType: "json",
data: {roleId: 1},
beforeSend: function () {
loadIndex = layer.load(0, {shade: 0.1});
},
complete: function () {
layer.close(loadIndex);
},
success: function (data) {
treeObj = $.fn.zTree.init($("#permissionTree"), setting, data);
treeObj.expandAll(true);
},
error: function () {
layer.msg("服务器错误", {icon: 5, time: 1000});
}
var treeObj;
okUtils.ajax("../../data/permission-tree.json", "get").done(function (response) {
treeObj = $.fn.zTree.init($("#permissionTree"), setting, response);
treeObj.expandAll(true);
}).fail(function (error) {
console.log(error)
});
form.on("submit(add)", function (data) {
console.log(data.field);
layer.msg("添加成功！", {icon: 6, time: 1000, anim: 4}, function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
// 权限节点校验
var nodes = treeObj.getCheckedNodes(true);
if (nodes.length == 0) {
okLayer.msg.redCross("请选择权限节点");
return false;
}
// 权限节点获取
var permissionIds = "";
for (var i = 0; i < nodes.length; i++) {
permissionIds = permissionIds + nodes[i].id + ",";
}
// 请求后台
okUtils.ajax("/role/add", "post", data.field).done(function (response) {
console.log(response)
okLayer.msg.greenTick("添加成功", function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
}).fail(function (error) {
console.log(error)
});
return false;
});

59
pages/role/role-edit.html
View File

@ -38,6 +38,7 @@
<div class="layui-form-item">
<label class="layui-form-label">权限</label>
<div class="layui-input-block">
<!--权限树-->
<ul class="ztree" id="permissionTree"></ul>
</div>
</div>
@ -54,8 +55,15 @@
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="../../lib/zTree_v3/js/jquery.ztree.all.js"></script>
<script type="text/javascript">
layui.use(["element", "form"], function () {
layui.config({
base: "../../lib/layui_plugins/"
}).extend({
okLayer: "okLayer/okLayer",
okUtils: "okUtils/okUtils"
}).use(["element", "form", "okLayer", "okUtils"], function () {
var form = layui.form;
var okLayer = layui.okLayer;
var okUtils = layui.okUtils;
// zTree设置
var setting = {
@ -66,31 +74,36 @@
};
// zTree异步请求所有权限树节点
var treeObj, loadIndex;
$.ajax({
url: "../../data/permission-tree.json",
type: "get",
dataType: "json",
data: {roleId: 1},
beforeSend: function () {
loadIndex = layer.load(0, {shade: 0.1});
},
complete: function () {
layer.close(loadIndex);
},
success: function (data) {
treeObj = $.fn.zTree.init($("#permissionTree"), setting, data);
treeObj.expandAll(true);
},
error: function () {
layer.msg("服务器错误", {icon: 5, time: 1000});
}
var treeObj;
okUtils.ajax("../../data/permission-tree.json", "get").done(function (response) {
treeObj = $.fn.zTree.init($("#permissionTree"), setting, response);
treeObj.expandAll(true);
}).fail(function (error) {
console.log(error)
});
form.on("submit(edit)", function (data) {
console.log(data.field);
layer.msg("编辑成功！", {icon: 6, time: 1000, anim: 4}, function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
// 权限节点校验
var nodes = treeObj.getCheckedNodes(true);
if (nodes.length == 0) {
okLayer.msg.redCross("请选择权限节点");
return false;
}
// 权限节点获取
var permissionIds = "";
for (var i = 0; i < nodes.length; i++) {
permissionIds = permissionIds + nodes[i].id + ",";
}
// 请求后台
okUtils.ajax("/role/edit", "post", data.field).done(function (response) {
console.log(response)
okLayer.msg.greenTick("编辑成功", function () {
parent.layer.close(parent.layer.getFrameIndex(window.name));
});
}).fail(function (error) {
console.log(error)
});
return false;
});

18
pages/role/role.html
View File

@ -44,7 +44,6 @@
}).use(["element", "table", "form", "laydate", "okLayer", "okUtils"], function () {
var table = layui.table;
var form = layui.form;
var $ = layui.jquery;
var laydate = layui.laydate;
var okLayer = layui.okLayer;
var okUtils = layui.okUtils;
@ -52,7 +51,7 @@
laydate.render({elem: "#startTime", type: "datetime"});
laydate.render({elem: "#endTime", type: "datetime"});
table.render({
var roleTable = table.render({
elem: "#tableId",
url: "../../data/role.json",
limit: 10,
@ -78,7 +77,6 @@
});
table.on("toolbar(tableFilter)", function (obj) {
var data = obj.data;
switch (obj.event) {
case "add":
add();
@ -103,7 +101,7 @@
function add () {
okLayer.open("添加角色", "role-add.html", "90%", "90%", function () {
$(".layui-laypage-btn")[0].click();
roleTable.reload();
})
}
@ -114,25 +112,25 @@
if (idsStr) {
okUtils.ajax("/role/batchDel", "post", {idsStr: idsStr}).done(function (response) {
console.log(response)
okUtils.table.operationSuccessMsg("批量删除成功");
okUtils.table.successMsg("批量删除成功");
}).fail(function (error) {
console.log(error)
});
}
});
}
function edit (id) {
okLayer.open("编辑角色", "role-edit.html?id=" + id, "90%", "90%", function () {
$(".layui-laypage-btn")[0].click();
roleTable.reload();
})
}
function del (id) {
okLayer.confirm("确定要删除吗？", function () {
okUtils.ajax("/user/batchDel", "post", {idsStr: id}).done(function (response) {
console.log(response)
okUtils.table.operationSuccessMsg("删除成功");
okUtils.table.successMsg("删除成功");
}).fail(function (error) {
console.log(error)
});
@ -142,7 +140,7 @@
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
<div class="layui-btn-container">
<div class="layui-btn-container">
<div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>
<div class="layui-inline" lay-event="batchDel"><i class="layui-icon layui-icon-delete"></i></div>
</div>

12
pages/user/user.html
View File

@ -44,7 +44,6 @@
}).use(["element", "table", "form", "laydate", "okLayer", "okUtils"], function () {
var table = layui.table;
var form = layui.form;
var $ = layui.jquery;
var laydate = layui.laydate;
var okLayer = layui.okLayer;
var okUtils = layui.okUtils;
@ -86,7 +85,6 @@
});
table.on("toolbar(tableFilter)", function (obj) {
var data = obj.data;
switch (obj.event) {
case "batchEnabled":
batchEnabled();
@ -129,7 +127,7 @@
}
});
}
function batchDisabled () {
okLayer.confirm("确定要批量停用吗？", function (index) {
layer.close(index);
@ -162,16 +160,16 @@
function add () {
okLayer.open("添加用户", "user-add.html", "90%", "90%", function () {
$(".layui-laypage-btn")[0].click();
userTable.reload();
})
}
function edit (id) {
okLayer.open("编辑用户", "user-edit.html?id=" + id, "90%", "90%", function () {
userTable.reload();
})
}
function del (id) {
okLayer.confirm("确定要删除吗？", function () {
okUtils.ajax("/user/batchDel", "post", {idsStr: id}).done(function (response) {
@ -186,7 +184,7 @@
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
<div class="layui-btn-container">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="batchEnabled"><i class="iconfont icon-shangsheng"></i>批量启用</button>
<button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="batchDisabled"><i class="iconfont icon-web-icon-"></i>批量停用</button>
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel"><i class="layui-icon layui-icon-delete"></i>批量删除</button>