From 1bab7c630d81155cc9678c00347d3da68625af01 Mon Sep 17 00:00:00 2001
From: bobi <bobi1234@foxmail.com>
Date: Wed, 26 Jun 2019 23:47:34 +0800
Subject: [PATCH] add message page

---
 lib/layui/lay/okmodules/okUtils.js |   3 +
 pages/often/message.html           | 168 ++++++++++++++++++++++++++++-
 2 files changed, 169 insertions(+), 2 deletions(-)
diff --git a/lib/layui/lay/okmodules/okUtils.js b/lib/layui/lay/okmodules/okUtils.js
index a76aa41..b8bcc11 100644
--- a/lib/layui/lay/okmodules/okUtils.js
+++ b/lib/layui/lay/okmodules/okUtils.js
@@ -163,6 +163,9 @@ layui.define("layer", function (exports) {
             },
             log: {
                 list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/log/list"
+            },
+            message: {
+                list: "https://easy-mock.com/mock/5d0ce725424f15399a6c2068/okadmin/message/list"
             }
         }
     }
diff --git a/pages/often/message.html b/pages/often/message.html
index 6d516bb..b016f7e 100644
--- a/pages/often/message.html
+++ b/pages/often/message.html
@@ -1,10 +1,174 @@
 <!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="../../css/okadmin.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-sm" 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" name="startTime">
+            <input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime" name="endTime">
+            <input class="layui-input" placeholder="请输入内容" autocomplete="off" name="title">
+            <button class="layui-btn" lay-submit="" lay-filter="search">
+                <i class="layui-icon layui-icon-search"></i>
+            </button>
+        </form>
+    </div>
+    <!--数据表格-->
+    <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
+</div>
+<!--js逻辑-->
+<script src="../../lib/layui/layui.js"></script>
+<script>
+    layui.use(["element", "table", "form", "laydate", "okLayer", "okUtils"], function () {
+        var table = layui.table;
+        var form = layui.form;
+        var util = layui.util;
+        var laydate = layui.laydate;
+        var okLayer = layui.okLayer;
+        var okUtils = layui.okUtils;
+
+        util.fixbar({});
+
+        laydate.render({elem: "#startTime", type: "datetime"});
+        laydate.render({elem: "#endTime", type: "datetime"});
+
+        var articleTable = table.render({
+            elem: "#tableId",
+            url: okUtils.mockApi.message.list,
+            limit: 20,
+            page: true,
+            even: true,
+            toolbar: "#toolbarTpl",
+            size: "sm",
+            cols: [[
+                {type: "checkbox"},
+                {field: "id", title: "ID", width: 80, sort: true},
+                {field: "content", title: "留言内容", width: 350},
+                {field: "username", title: "留言人", width: 100},
+                {field: "createTime", title: "留言时间", width: 150},
+                {field: "status", title: "状态", width: 110, align: "center", templet: "#statusTpl"},
+                {title: "操作", width: 200, align: "center", templet: "#operationTpl"}
+            ]],
+            done: function (res, curr, count) {
+                console.log(res, curr, count)
+            }
+        });
+
+        form.on("submit(search)", function () {
+            articleTable.reload({
+                where: data.field,
+                page: {curr: 1}
+            });
+            return false;
+        });
+
+        table.on("toolbar(tableFilter)", function (obj) {
+            switch (obj.event) {
+                case "batchRead":
+                    batchEnabled();
+                    break;
+                case "batchDel":
+                    batchDel();
+                    break;
+            }
+        });
+
+        table.on("tool(tableFilter)", function (obj) {
+            var data = obj.data;
+            switch (obj.event) {
+                case "edit":
+                    edit(data.id);
+                    break;
+                case "del":
+                    del(data.id);
+                    break;
+            }
+        });
+
+        function batchEnabled() {
+            okLayer.confirm("确定要批量已读吗？", function (index) {
+                layer.close(index);
+                var idsStr = okUtils.table.batchCheck(table);
+                if (idsStr) {
+                    okUtils.ajax("/message/batchRead", "post", {idsStr: idsStr}).done(function (response) {
+                        console.log(response)
+                        okUtils.table.successMsg("批量已读成功");
+                    }).fail(function (error) {
+                        console.log(error)
+                    });
+                }
+            });
+        }
+
+        function batchDel(){
+            okLayer.confirm("确定要批量删除吗？", function (index) {
+                layer.close(index);
+                var idsStr = okUtils.table.batchCheck(table);
+                if (idsStr) {
+                    okUtils.ajax("/message/batchDel", "post", {idsStr: idsStr}).done(function (response) {
+                        console.log(response)
+                        okUtils.table.successMsg("批量删除成功");
+                    }).fail(function (error) {
+                        console.log(error)
+                    });
+                }
+            });
+        }
+
+        function edit (id) {
+            okLayer.open("留言回复", "message-reply.html?id=" + id, "90%", "90%", null, function () {
+                articleTable.reload();
+            })
+        }
+
+        function del (id) {
+            okLayer.confirm("确定要删除吗？", function () {
+                okUtils.ajax("/message/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">
+        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="batchRead">批量已读</button>
+        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">批量删除</button>
+    </div>
+</script>
+<!-- 状态模板 -->
+<script type="text/html" id="statusTpl">
+    {{#  if(d.status == true){ }}
+    <span class="layui-btn layui-btn-normal layui-btn-xs">已读</span>
+    {{#  } else if(d.status == false) { }}
+    <span class="layui-btn layui-btn-warm layui-btn-xs">未读</span>
+    {{#  } }}
+</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>
