优化日志列表页面

data/log.json

@@ -3,6 +3,186 @@
   "msg": "",
   "count": 12,
   "data": [
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
+    {
+      "id": "001",
+      "url": "http://ok-admin.xlbweb.cn",
+      "method": "GET",
+      "ip": "127.0.0.1",
+      "timeConsuming": 100,
+      "status": true,
+      "operator": "admin",
+      "operatingTime": "2019-05-15 12:08:08"
+    },
     {
       "id": "001",
       "url": "http://ok-admin.xlbweb.cn",

pages/role/role.html

@@ -22,9 +22,9 @@
     <!--模糊搜索区域-->
     <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="startTime" name="startTime">
-            <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
+            <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
-            <input class="layui-input" placeholder="请输入角色名" autocomplete="off">
+            <input class="layui-input" placeholder="请输入角色名" autocomplete="off" name="name">
             <button class="layui-btn" lay-submit="" lay-filter="search">
                 <i class="layui-icon layui-icon-search"></i>
             </button>
@@ -72,7 +72,10 @@
         });
 
         form.on("submit(search)", function () {
-            layer.msg("正在查询，请稍后...");
+            roleTable.reload({
+                where: data.field,
+                page: {curr: 1}
+            });
             return false;
         });
 

pages/system/system-log.html

@@ -5,7 +5,6 @@
     <title>系统日志</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <link rel="stylesheet" href="../../css/okadmin.css">
-    <link rel="stylesheet" href="../../lib/nprogress/nprogress.css">
 </head>
 <body>
 <div class="ok-body">
@@ -23,50 +22,28 @@
     <!--模糊搜索区域-->
     <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="startTime" name="startTime">
-            <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
+            <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
-            <input class="layui-input" placeholder="请输入用户名" autocomplete="off">
+            <input class="layui-input" placeholder="请输入地址" autocomplete="off" name="url">
             <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-normal" id="batchEnabled">
-            <i class="iconfont icon-shangsheng"></i>批量启用
-        </button>
-        <button class="layui-btn layui-btn-warm" id="batchDisabled">
-            <i class="iconfont icon-web-icon-"></i>批量停用
-        </button>
-        <button class="layui-btn layui-btn-danger" id="batchDel">
-            <i class="layui-icon layui-icon-delete"></i>批量删除
-        </button>
-        <button class="layui-btn" id="addUser">
-            <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_plugins/"
     }).extend({
         okLayer: "okLayer/okLayer",
         okUtils: "okUtils/okUtils"
-    }).use(["element", "table", "form", "jquery", "laydate", "okLayer", "okUtils"], function () {
+    }).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;
@@ -74,13 +51,13 @@
         laydate.render({elem: "#startTime", type: "datetime"});
         laydate.render({elem: "#endTime", type: "datetime"});
 
-        table.render({
+        var logTable = table.render({
             elem: "#tableId",
             url: "../../data/log.json",
             limit: 10,
             page: true,
 			toolbar: true,
-			toolbar: 'default',
+            toolbar: "#toolbarTpl",
             cols: [[
                 {type: "checkbox"},
                 {field: "id", title: "ID", width: 80, sort: true},
@@ -94,90 +71,74 @@
                 {title: "操作", width: 200, align: 'center', templet: "#operationTpl"}
             ]],
             done: function (res, curr, count) {
-                $("#countNum").text(count);
+                console.log(res, curr, count);
             }
         });
 
         form.on("submit(search)", function () {
-            layer.msg("正在查询，请稍后...");
+            logTable.reload({
+                where: data.field,
+                page: {curr: 1}
+            });
             return false;
         });
 
+        table.on("toolbar(tableFilter)", function (obj) {
+            switch (obj.event) {
+                case "batchDel":
+                    batchDel();
+                    break;
+            }
+        });
+
         table.on("tool(tableFilter)", function (obj) {
             var data = obj.data;
-            var layEvent = obj.event;
+            switch (obj.event) {
-            if (layEvent === "edit") {
+                case "del":
-                okLayer.open("编辑用户", "user-edit.html", "90%", "90%", true)
+                    del(data.id);
-            } else if (layEvent === "del") {
+                    break;
-                okLayer.confirm("确定要删除吗？", function () {
-                    okUtils.ajax("/user/batchDel", "post", {idsStr: data.id}).done(function (response) {
-                        console.log(response)
-                        okLayer.tableOperationMsg("删除成功");
-                    }).fail(function (error) {
-                        console.log(error)
-                    });
-                })
             }
         });
 
-        $("#batchEnabled").click(function () {
+        function batchDel () {
-            okLayer.confirm("确定要批量启用吗？", function (index) {
-                layer.close(index);
-                var idsStr = okLayer.tableCheck(table);
-                console.log("idsStr-->" + idsStr)
-                // ajax请求后台api
-                if (idsStr) {
-                    okUtils.ajax("/user/batchNormal", "post", {idsStr: idsStr}).done(function (response) {
-                        console.log(response)
-                        okLayer.tableOperationMsg("批量启用成功");
-                    }).fail(function (error) {
-                        console.log(error)
-                    });
-                }
-            });
-        })
-
-        $("#batchDisabled").click(function () {
-            okLayer.confirm("确定要批量停用吗？", function (index) {
-                layer.close(index);
-                var idsStr = okLayer.tableCheck(table);
-                if (idsStr) {
-                    okUtils.ajax("/user/batchStop", "post", {idsStr: idsStr}).done(function (response) {
-                        console.log(response)
-                        okLayer.tableOperationMsg("批量停用成功");
-                    }).fail(function (error) {
-                        console.log(error)
-                    });
-                }
-            });
-        })
-
-        $("#batchDel").click(function () {
             okLayer.confirm("确定要批量删除吗？", function (index) {
                 layer.close(index);
-                var idsStr = okLayer.tableCheck(table);
+                var idsStr = okUtils.table.batchCheck(table);
                 if (idsStr) {
-                    okUtils.ajax("/user/batchDel", "post", {idsStr: idsStr}).done(function (response) {
+                    okUtils.ajax("/log/batchDel", "post", {idsStr: idsStr}).done(function (response) {
                         console.log(response)
-                        okLayer.tableOperationMsg("批量删除成功");
+                        okUtils.table.successMsg("批量删除成功");
                     }).fail(function (error) {
                         console.log(error)
                     });
                 }
             });
-        })
+        }
 
-        $("#addUser").click(function () {
+        function del (id) {
-            okLayer.open("添加用户", "user-add.html", "90%", "90%", true)
+            okLayer.confirm("确定要删除吗？", function () {
-        })
+                okUtils.ajax("/log/batchDel", "post", {idsStr: id}).done(function (response) {
+                    console.log(response)
+                    okUtils.table.successMsg("删除成功");
+                }).fail(function (error) {
+                    console.log(error)
+                });
+            })
+        }
     })
 </script>
+<!-- 头工具栏模板 -->
+<script type="text/html" id="toolbarTpl">
+    <div class="layui-btn-container">
+        <div class="layui-inline" lay-event="batchDel"><i class="layui-icon layui-icon-delete"></i></div>
+    </div>
+</script>
 <!--模板-->
 <script type="text/html" id="statusTpl">
     {{ d.role == 0 ? '正常' : '异常'}}
 </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>