规范role.html

pages/role/role.html

@@ -31,16 +31,6 @@
             </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="addRole">
-            <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>
@@ -48,16 +38,23 @@
 <script src="../../lib/layui/layui.js"></script>
 <script src="../../lib/nprogress/nprogress.js"></script>
 <script>
-    NProgress.start();
+//     NProgress.start();
-    window.onload = function () {
+//     window.onload = function () {
-        NProgress.done();
+//         NProgress.done();
-    }
+//     }
 
-    layui.use(["element", "table", "form", "jquery", "laydate"], function () {
+    layui.config({
+        base: "../../lib/layui_plugins/"
+    }).extend({
+        okLayer: "okLayer/okLayer",
+        okUtils: "okUtils/okUtils"
+    }).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;
 
         laydate.render({elem: "#startTime", type: "datetime"});
         laydate.render({elem: "#endTime", type: "datetime"});
@@ -67,6 +64,7 @@
             url: "../../data/role.json",
             limit: 10,
             page: true,
+			toolbar: "#toolbarTpl",
             cols: [[
                 {type: "checkbox"},
                 {field: "id", title: "ID", width: 80, sort: true},
@@ -77,7 +75,7 @@
                 {title: "操作", width: 200, align: "center", templet: "#operationTpl"}
             ]],
             done: function (res, curr, count) {
-                $("#countNum").text(count);
+                console.log(res, curr, count);
             }
         });
 
@@ -86,69 +84,77 @@
             return false;
         });
 
-        table.on("tool(tableFilter)", function (obj) {
+		table.on("toolbar(tableFilter)", function (obj) {
             var data = obj.data;
-            var layEvent = obj.event;
+			switch (obj.event) {
-            if (layEvent === "edit") {
+				case "add":
-                layer.open({
+					add();
-                    title: "编辑角色",
+					break;
-                    type: 2,
+				case "batchDel":
-                    shade: false,
+					batchDel();
-                    maxmin: true,
+					break;
-                    shade: 0.5,
+			}
-                    area: ["90%", "90%"],
-                    content: "role-edit.html",
-                    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 () {
+        table.on("tool(tableFilter)", function (obj) {
-            layer.confirm("确定要批量删除吗？", {skin: "layui-layer-lan", icon: 2, title: "提示", anim: 6}, function () {
+            var data = obj.data;
-                var checkStatus = table.checkStatus("tableId");
+			switch (obj.event) {
-                var rows = checkStatus.data.length;
+				case "edit":
-                if (rows > 0) {
+					edit(data.id);
-                    var idsStr = "";
+					break;
-                    for (var i = 0; i < checkStatus.data.length; i++) {
+				case "del":
-                        idsStr += checkStatus.data[i].id + ",";
+					del(data.id);
-                    }
+					break;
-                    console.log("选择的id-->" + idsStr);
+			}
-                    layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
+        });
-                        $(".layui-laypage-btn")[0].click();
-                    });
-                } else {
-                    layer.msg("未选择有效数据", {offset: "t", anim: 6});
-                }
-            });
-        })
 
-        $("#addRole").click(function () {
+		function add () {
-            layer.open({
+			okLayer.open("添加角色", "role-add.html", "90%", "90%", function () {
-                title: "添加角色",
+				$(".layui-laypage-btn")[0].click();
-                type: 2,
+			})
-                shade: false,
+		}
-                maxmin: true,
+
-                shade: 0.5,
+		function batchDel () {
-                anim: 4,
+			okLayer.confirm("确定要批量删除吗？", function (index) {
-                area: ["90%", "90%"],
+			    layer.close(index);
-                content: "role-add.html",
+			    var idsStr = okUtils.table.batchCheck(table);
-                zIndex: layer.zIndex,
+			    if (idsStr) {
-                // skin: "layui-layer-molv",
+			        okUtils.ajax("/role/batchDel", "post", {idsStr: idsStr}).done(function (response) {
-                end: function () {
+			            console.log(response)
-                    $(".layui-laypage-btn")[0].click();
+			            okUtils.table.operationSuccessMsg("批量删除成功");
-                }
+			        }).fail(function (error) {
-            });
+			            console.log(error)
-        })
+			        });
+			    }
+			});
+		}
+		
+		function edit (id) {
+			okLayer.open("编辑角色", "role-edit.html?id=" + id, "90%", "90%", function () {
+				$(".layui-laypage-btn")[0].click();
+			})
+		}
+		
+		function del (id) {
+			okLayer.confirm("确定要删除吗？", function () {
+			    okUtils.ajax("/user/batchDel", "post", {idsStr: id}).done(function (response) {
+			        console.log(response)
+			        okUtils.table.operationSuccessMsg("删除成功");
+			    }).fail(function (error) {
+			        console.log(error)
+			    });
+			})
+		}
     })
 </script>
-<!--模板-->
+<!-- 头工具栏模板 -->
+<script type="text/html" id="toolbarTpl">
+	<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>
+</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>