From 3efbc2a3ab28544494e9b925cc63fc03df07e7f2 Mon Sep 17 00:00:00 2001
From: bobi <bobi1234@foxmail.com>
Date: Wed, 15 May 2019 22:35:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=A7=92=E8=89=B2=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 data/permission-tree.json            | 166 ++++++++++++++-------------
 lib/layui_plugins/okLayer/okLayer.js |   1 -
 lib/layui_plugins/okUtils/okUtils.js |   2 +-
 pages/role/role-add.html             |  59 ++++++----
 pages/role/role-edit.html            |  59 ++++++----
 pages/role/role.html                 |  18 ++-
 pages/user/user.html                 |  12 +-
 7 files changed, 171 insertions(+), 146 deletions(-)

diff --git a/data/permission-tree.json b/data/permission-tree.json
index bee672b..cc98dcd 100644
--- a/data/permission-tree.json
+++ b/data/permission-tree.json
@@ -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"
+    }
+  ]
+
+}
diff --git a/lib/layui_plugins/okLayer/okLayer.js b/lib/layui_plugins/okLayer/okLayer.js
index 8155701..e4e67fa 100644
--- a/lib/layui_plugins/okLayer/okLayer.js
+++ b/lib/layui_plugins/okLayer/okLayer.js
@@ -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(),
diff --git a/lib/layui_plugins/okUtils/okUtils.js b/lib/layui_plugins/okUtils/okUtils.js
index eb68c7c..12855b8 100644
--- a/lib/layui_plugins/okUtils/okUtils.js
+++ b/lib/layui_plugins/okUtils/okUtils.js
@@ -2,7 +2,7 @@
 layui.define("layer", function (exports) {
     var $ = layui.jquery;
     var okUtils = {
-        isFrontendBackendSeparate: true,
+        isFrontendBackendSeparate: false,
         baseUrl: "http://localhost:8080",
         /**
          * ajax()函数二次封装
diff --git a/pages/role/role-add.html b/pages/role/role-add.html
index 294113f..c0f65aa 100644
--- a/pages/role/role-add.html
+++ b/pages/role/role-add.html
@@ -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;
         });
diff --git a/pages/role/role-edit.html b/pages/role/role-edit.html
index eae5bd6..dad9c71 100644
--- a/pages/role/role-edit.html
+++ b/pages/role/role-edit.html
@@ -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;
         });
diff --git a/pages/role/role.html b/pages/role/role.html
index 47395e5..95e0483 100644
--- a/pages/role/role.html
+++ b/pages/role/role.html
@@ -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>
diff --git a/pages/user/user.html b/pages/user/user.html
index b78e168..fa41c89 100644
--- a/pages/user/user.html
+++ b/pages/user/user.html
@@ -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>