【message】首页消息功能开发

src/main/java/cn/stylefeng/guns/modular/index/controller/IndexViewController.java

@@ -88,15 +88,4 @@ public class IndexViewController {
         return "/modular/index/change_password.html";
     }
 
-
-    /**
-     * 系统消息界面
-     *
-     * @author liuhanqing
-     * @date 2021/1/10 17:42
-     */
-    @GetResource(name = "系统消息界面", path = "/view/message", requiredPermission = false)
-    public String message() {
-        return "/modular/index/message.html";
-    }
 }

src/main/java/cn/stylefeng/guns/modular/index/service/IndexService.java

@@ -7,6 +7,9 @@ import cn.stylefeng.roses.kernel.auth.api.pojo.login.LoginUser;
 import cn.stylefeng.roses.kernel.auth.api.pojo.login.basic.SimpleRoleInfo;
 import cn.stylefeng.roses.kernel.auth.api.pojo.login.basic.SimpleUserInfo;
 import cn.stylefeng.roses.kernel.menu.modular.service.SysMenuService;
+import cn.stylefeng.roses.kernel.message.api.MessageApi;
+import cn.stylefeng.roses.kernel.message.api.enums.MessageReadFlagEnum;
+import cn.stylefeng.roses.kernel.message.api.pojo.MessageParam;
 import cn.stylefeng.roses.kernel.system.modular.organization.entity.HrOrganization;
 import cn.stylefeng.roses.kernel.system.modular.organization.service.HrOrganizationService;
 import cn.stylefeng.roses.kernel.system.modular.user.service.SysUserService;
@@ -36,6 +39,8 @@ public class IndexService {
     @Resource
     private HrOrganizationService hrOrganizationService;
 
+    @Resource
+    private MessageApi messageApi;
     /**
      * 获取首页需要渲染的参数
      *
@@ -59,6 +64,11 @@ public class IndexService {
         // 获取人员姓名
         renderMap.put("name", simpleUserInfo.getRealName());
 
+        // 未读消息数量
+        MessageParam messageParam = new MessageParam();
+        messageParam.setReadFlag(MessageReadFlagEnum.UNREAD.getCode());
+        renderMap.put("msgUnReadCount", messageApi.queryCountCurrentUser(messageParam));
+
         return renderMap;
     }
 

src/main/java/cn/stylefeng/guns/modular/message/controller/MessageViewController.java

@@ -0,0 +1,50 @@
+package cn.stylefeng.guns.modular.message.controller;
+
+import cn.stylefeng.guns.modular.index.service.IndexService;
+import cn.stylefeng.roses.kernel.auth.api.context.LoginContext;
+import cn.stylefeng.roses.kernel.message.api.MessageApi;
+import cn.stylefeng.roses.kernel.message.api.enums.MessageReadFlagEnum;
+import cn.stylefeng.roses.kernel.message.api.pojo.MessageParam;
+import cn.stylefeng.roses.kernel.message.api.pojo.MessageResponse;
+import cn.stylefeng.roses.kernel.resource.api.annotation.ApiResource;
+import cn.stylefeng.roses.kernel.resource.api.annotation.GetResource;
+import lombok.extern.slf4j.Slf4j;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+
+import javax.annotation.Resource;
+import java.util.List;
+
+/**
+ * 系统消息相关的界面渲染
+ *
+ * @author liuhanqing
+ * @date 2021/1/11 19:37
+ */
+@Controller
+@Slf4j
+@ApiResource(name = "系统消息相关的界面渲染")
+public class MessageViewController {
+
+    @Resource
+    private MessageApi messageApi;
+
+
+
+    /**
+     * 系统消息界面
+     *
+     * @author liuhanqing
+     * @date 2021/1/10 17:42
+     */
+    @GetResource(name = "系统消息界面", path = "/view/message", requiredPermission = false)
+    public String message(Model model) {
+        MessageParam messageParam = new MessageParam();
+        messageParam.setReadFlag(MessageReadFlagEnum.UNREAD.getCode());
+        Integer messageCount = messageApi.queryCountCurrentUser(messageParam);
+        List<MessageResponse> messageList = messageApi.queryListCurrentUser(messageParam);
+        model.addAttribute("msgUnReadCount", messageCount);
+        model.addAttribute("msgUnReadList", messageList);
+        return "/modular/index/message.html";
+    }
+}

src/main/webapp/assets/modular/frame/message.css

@@ -1,82 +1,68 @@
-/** 消息列表样式 */
 .message-list {
     position: absolute;
-    top: 48px;
+    top: 51px;
+    bottom: 44px;
     left: 0;
     right: 0;
-    bottom: 45px;
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
 }
 
 .message-list-item {
-    display: block;
+    padding: 10px 24px;
-    padding: 10px 20px;
-    line-height: 24px;
-    position: relative;
     border-bottom: 1px solid #e8e8e8;
+    -ms-flex-align: start;
+    align-items: flex-start;
+    display: flex;
+    -ms-flex: 1 1;
+    flex: 1 1;
 }
 
 .message-list-item:hover, .message-btn-clear:hover, .message-btn-more:hover {
     background: #F2F2F2;
 }
 
-.message-list-item .message-item-icon {
+.message-item-icon {
     width: 40px;
     height: 40px;
-    line-height: 40px;
+    margin-right: 16px;
-    margin-top: -20px;
+    display: block;
-    border-radius: 50%;
+    margin-top: 4px;
-    position: absolute;
-    left: 20px;
-    top: 50%;
 }
 
-.message-list-item .message-item-icon.layui-icon {
+.message-item-right {
-    color: #fff;
+    display: block;
-    font-size: 22px;
+    flex: 1 0;
-    text-align: center;
+    line-height: 24px;
-    background-color: #FE5D58;
 }
 
-.message-list-item .message-item-icon + .message-item-right {
+.message-item-title {
-    margin-left: 55px;
-}
-
-.message-list-item .message-item-title {
-    color: #666;
     font-size: 14px;
+    color: rgba(0, 0, 0, .65);
 }
 
-.message-list-item .message-item-text {
+.message-item-text {
-    color: #999;
+    color: rgba(0, 0, 0, .45);
     font-size: 12px;
 }
 
-.message-list-item > .layui-badge {
+.pull-right {
-    position: absolute;
+    float: right;
-    right: 20px;
-    top: 12px;
-}
-
-.message-list-item > .layui-badge + .message-item-right {
-    margin-right: 50px;
 }
 
 .message-btn-clear, .message-btn-more {
-    color: #666;
     display: block;
     padding: 10px 5px;
-    line-height: 24px;
     text-align: center;
-    cursor: pointer;
+    line-height: 24px;
+    color: #333;
 }
 
 .message-btn-clear {
     position: absolute;
-    left: 0;
-    right: 0;
     bottom: 0;
+    left: 0;
+    background: white;
+    right: 0;
     border-top: 1px solid #e8e8e8;
 }
 
@@ -85,30 +71,13 @@
     font-size: 13px;
 }
 
-.message-btn-more.ew-btn-loading > .ew-btn-loading-text {
-    font-size: 13px !important;
-}
-
 .message-list-empty {
-    color: #999;
-    padding: 100px 0;
     text-align: center;
-    display: none;
+    color: rgba(0, 0, 0, .45);
+    padding: 73px 0 88px;
 }
 
-.message-list-empty > .layui-icon {
+.message-list-empty img {
-    color: #ccc;
+    height: 76px;
-    display: block;
+    margin-bottom: 16px;
-    font-size: 45px;
+}
-    margin-bottom: 15px;
-}
-
-.show-empty .message-list-empty {
-    display: block;
-}
-
-.show-empty .message-btn-clear, .show-empty .message-list {
-    display: none;
-}
-
-/** //消息列表样式结束 */

src/main/webapp/assets/modular/frame/message.js

@@ -1,20 +1,35 @@
-layui.use(['element', 'admin'], function () {
+var Message = {}
+layui.use(['element', 'admin', 'ax'], function () {
     var $ = layui.jquery;
     var admin = layui.admin;
+    var $ax = layui.ax;
 
     /* 加载更多按钮点击事件 */
-    $('#messageMoreBtn2').click(function () {
+    /*$('#messageMoreBtn2').click(function () {
         var $that = $(this);
         admin.btnLoading($that);
         setTimeout(function () {
             admin.btnLoading($that, false);
             $that.before($that.prev()[0].outerHTML);
         }, 300);
-    });
+    });*/
-
+    /**
+     * 全部标记为已读
+     */
+    Message.allReadMessage = function () {
+        var ajax = new $ax(Feng.ctxPath + "/sysMessage/allMessageReadFlag", function (data) {
+            Feng.success("已读成功!");
+        }, function (data) {
+            Feng.error("标记已读失败!" + data.responseJSON.message + "!");
+        });
+        ajax.setAsync(true)
+        ajax.start();
+    };
     /* 清空消息点击事件 */
-    $('#messageClearBtn1,#messageClearBtn2,#messageClearBtn3').click(function () {
+    $('#messageClearBtn').click(function () {
+        debugger
         $(this).parents('.layui-tab-item').addClass('show-empty');
+        Message.allReadMessage()
     });
 
 });

src/main/webapp/pages/layout/_header.html

@@ -24,7 +24,9 @@
         <li class="layui-nav-item" lay-unselect="">
             <a ew-event="message" title="消息" data-url="${ctxPath}/view/message">
                 <i class="layui-icon layui-icon-notice"></i>
-                <span class="layui-badge-dot"></span>
+                @if(msgUnReadCount>0){
+                <span id="msg-dot" class="layui-badge-dot "></span>
+                @}
             </a>
         </li>
         <li class="layui-nav-item layui-hide-xs" lay-unselect>

src/main/webapp/pages/modular/index/message.html

@@ -1,114 +1,38 @@
-<link  rel="stylesheet" href="${ctxPath}/assets/modular/frame/message.css" />
+<link rel="stylesheet" href="${ctxPath}/assets/modular/frame/message.css"/>
 <div class="layui-card" style="box-shadow: none;border: none;">
     <div class="layui-tab layui-tab-brief">
         <ul class="layui-tab-title" style="text-align: center;">
-            <li class="layui-this">通知(5)</li>
+            <li class="layui-this">消息(${msgUnReadCount})</li>
-            <li>私信(12)</li>
-            <li>待办(3)</li>
         </ul>
         <div class="layui-tab-content" style="padding: 0;">
             <!-- tab1 -->
-            <div class="layui-tab-item layui-show">
+            @if(isNotEmpty(msgUnReadList)){
-                <div class="message-list">
+            <div class="layui-tab-item layui-show ">
-                    <!-- 实际项目请使用后台数据循环出来 -->
+
+                <div class="message-list" id="message-list">
+                    <!-- 后台数据循环出来 -->
+                    @for(msg in msgUnReadList){
                     <a class="message-list-item" href="javascript:;">
                         <i class="layui-icon layui-icon-speaker message-item-icon"></i>
                         <div class="message-item-right">
-                            <h2 class="message-item-title">你收到了14份新周报</h2>
+                            <h2 class="message-item-title">${msg.messageTitle}</h2>
-                            <p class="message-item-text">10个月前</p>
+                            <p class="message-item-text">${msg.messageSendTime}</p>
-                        </div>
-                    </a>
-                    <a class="message-list-item" href="javascript:;">
-                        <i class="layui-icon layui-icon-speaker message-item-icon"></i>
-                        <div class="message-item-right">
-                            <h2 class="message-item-title">你收到了14份新周报</h2>
-                            <p class="message-item-text">10个月前</p>
-                        </div>
-                    </a>
-                    <a class="message-list-item" href="javascript:;">
-                        <i class="layui-icon layui-icon-speaker message-item-icon"></i>
-                        <div class="message-item-right">
-                            <h2 class="message-item-title">你收到了14份新周报</h2>
-                            <p class="message-item-text">10个月前</p>
                         </div>
                     </a>
+                    @}
                 </div>
-                <!-- 列表为空 -->
+                <a id="messageClearBtn" class="message-btn-clear">全部标记已读</a>
-                <div class="message-list-empty">
-                    <i class="layui-icon layui-icon-notice"></i>
-                    <div>没有通知</div>
-                </div>
-                <a id="messageClearBtn1" class="message-btn-clear">全部标记已读</a>
             </div>
-            <!-- tab2 -->
+            @}else{
-            <div class="layui-tab-item">
+            <div class="layui-tab-item layui-show show-empty">
-                <div class="message-list">
-                    <a class="message-list-item" href="javascript:;">
-                        <img class="message-item-icon" src="${ctxPath}/assets/common/images/head.jpg" alt="">
-                        <div class="message-item-right">
-                            <h2 class="message-item-title">xx评论了你</h2>
-                            <p class="message-item-text">哈哈哈哈哈哈</p>
-                            <p class="message-item-text">10个月前</p>
-                        </div>
-                    </a>
-                    <a class="message-list-item" href="javascript:;">
-                        <img class="message-item-icon" src="${ctxPath}/assets/common/images/head.jpg" alt="">
-                        <div class="message-item-right">
-                            <h2 class="message-item-title">xx评论了你</h2>
-                            <p class="message-item-text">哈哈哈哈哈哈</p>
-                            <p class="message-item-text">10个月前</p>
-                        </div>
-                    </a>
-                    <a class="message-list-item" href="javascript:;">
-                        <img class="message-item-icon" src="${ctxPath}/assets/common/images/head.jpg" alt="">
-                        <div class="message-item-right">
-                            <h2 class="message-item-title">xx评论了你</h2>
-                            <p class="message-item-text">哈哈哈哈哈哈</p>
-                            <p class="message-item-text">10个月前</p>
-                        </div>
-                    </a>
-                    <a id="messageMoreBtn2" class="message-btn-more">加载更多</a>
-                </div>
                 <!-- 列表为空 -->
-                <div class="message-list-empty">
+                <div class="message-list-empty" id="message-list-empty">
-                    <i class="layui-icon layui-icon-dialogue"></i>
+                    <i class="layui-icon layui-icon-notice"></i>
                     <div>没有消息</div>
                 </div>
-                <a id="messageClearBtn2" class="message-btn-clear">清空消息</a>
-            </div>
-            <!-- tab3 -->
-            <div class="layui-tab-item">
-                <div class="message-list">
-                    <a class="message-list-item" href="javascript:;">
-                        <span class="layui-badge layui-badge-yellow">待完成</span>
-                        <div class="message-item-right">
-                            <h2 class="message-item-title">你收到了14份新周报</h2>
-                            <p class="message-item-text">10个月前</p>
-                        </div>
-                    </a>
-                    <a class="message-list-item" href="javascript:;">
-                        <span class="layui-badge layui-badge-green">已完成</span>
-                        <div class="message-item-right">
-                            <h2 class="message-item-title">你收到了14份新周报</h2>
-                            <p class="message-item-text">10个月前</p>
-                        </div>
-                    </a>
-                    <a class="message-list-item" href="javascript:;">
-                        <span class="layui-badge layui-badge-red">未完成</span>
-                        <div class="message-item-right">
-                            <h2 class="message-item-title">你收到了14份新周报</h2>
-                            <p class="message-item-text">10个月前</p>
-                        </div>
-                    </a>
-                </div>
-                <!-- 列表为空 -->
-                <div class="message-list-empty">
-                    <i class="layui-icon layui-icon-flag"></i>
-                    <div>没有待办</div>
-                </div>
-                <a id="messageClearBtn3" class="message-btn-clear">清空待办</a>
             </div>
+            @}
         </div>
     </div>
 </div>
-<script type="text/javascript" href="${ctxPath}/assets/modular/frame/message.js"></script>
+<script type="text/javascript" src="${ctxPath}/assets/modular/frame/message.js"></script>