gitee
/
guns
mirror of https://gitee.com/stylefeng/guns
1
0
Fork 0
Code Issues Releases Wiki Activity

【message】首页消息功能开发

pull/65/head
liuhanqing 2021-01-11 20:51:45 +08:00
parent cceee80bfd
commit 88cfc71b7e
7 changed files with 134 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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";
}
}

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

@ -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;
}

50
src/main/java/cn/stylefeng/guns/modular/message/controller/MessageViewController.java Normal file
View File

@ -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";
}
}

97
src/main/webapp/assets/modular/frame/message.css
View File

@ -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 20px;
line-height: 24px;
position: relative;
padding: 10px 24px;
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-top: -20px;
border-radius: 50%;
position: absolute;
left: 20px;
top: 50%;
margin-right: 16px;
display: block;
margin-top: 4px;
}
.message-list-item .message-item-icon.layui-icon {
color: #fff;
font-size: 22px;
text-align: center;
background-color: #FE5D58;
.message-item-right {
display: block;
flex: 1 0;
line-height: 24px;
}
.message-list-item .message-item-icon + .message-item-right {
margin-left: 55px;
}
.message-list-item .message-item-title {
color: #666;
.message-item-title {
font-size: 14px;
color: rgba(0, 0, 0, .65);
}
.message-list-item .message-item-text {
color: #999;
.message-item-text {
color: rgba(0, 0, 0, .45);
font-size: 12px;
}
.message-list-item > .layui-badge {
position: absolute;
right: 20px;
top: 12px;
}
.message-list-item > .layui-badge + .message-item-right {
margin-right: 50px;
.pull-right {
float: right;
}
.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 {
color: #ccc;
display: block;
font-size: 45px;
margin-bottom: 15px;
}
.show-empty .message-list-empty {
display: block;
}
.show-empty .message-btn-clear, .show-empty .message-list {
display: none;
}
/** //消息列表样式结束 */
.message-list-empty img {
height: 76px;
margin-bottom: 16px;
}

25
src/main/webapp/assets/modular/frame/message.js
View File

@ -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()
});
});

4
src/main/webapp/pages/layout/_header.html
View File

@ -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>

112
src/main/webapp/pages/modular/index/message.html
View File

@ -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>私信(12)</li>
<li>待办(3)</li>
<li class="layui-this">消息(${msgUnReadCount})</li>
</ul>
<div class="layui-tab-content" style="padding: 0;">
<!-- tab1 -->
<div class="layui-tab-item layui-show">
<div class="message-list">
<!-- 实际项目请使用后台数据循环出来 -->
@if(isNotEmpty(msgUnReadList)){
<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>
<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>
<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>
<h2 class="message-item-title">${msg.messageTitle}</h2>
<p class="message-item-text">${msg.messageSendTime}</p>
</div>
</a>
@}
</div>
<!-- 列表为空 -->
<div class="message-list-empty">
<i class="layui-icon layui-icon-notice"></i>
<div>没有通知</div>
</div>
<a id="messageClearBtn1" class="message-btn-clear">全部标记已读</a>
<a id="messageClearBtn" class="message-btn-clear">全部标记已读</a>
</div>
<!-- tab2 -->
<div class="layui-tab-item">
<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>
@}else{
<div class="layui-tab-item layui-show show-empty">
<!-- 列表为空 -->
<div class="message-list-empty">
<i class="layui-icon layui-icon-dialogue"></i>
<div class="message-list-empty" id="message-list-empty">
<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>