gitee
/
snowy
mirror of https://gitee.com/xiaonuobase/snowy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

【更新】更新消息通知功能细节

pull/137/head
小诺 2023-07-19 21:01:54 +08:00 committed by xiaonuobase
parent d3375c259c
commit 7d62c31ceb
5 changed files with 73 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
snowy-admin-web/src/api/sys/indexApi.js
View File

@ -40,7 +40,7 @@ export default {
}, },
//站内信全部标记已读 //站内信全部标记已读
indexMessageAllMarkRead(data) { indexMessageAllMarkRead(data) {
return request('message/allMessageMarkRead', data, 'get') return request('message/allMessageMarkRead', data)
}, },
// 获取当前用户访问日志列表 // 获取当前用户访问日志列表
indexVisLogList(data) { indexVisLogList(data) {

142
snowy-admin-web/src/layout/components/message.vue
View File

@ -3,7 +3,7 @@
<a-badge :count="unreadMessageNum" class="badge"> <a-badge :count="unreadMessageNum" class="badge">
<comment-outlined /> <comment-outlined />
</a-badge> </a-badge>
<a-drawer v-model:visible="msgVisible" title="新消息" placement="right"> <a-drawer v-model:visible="msgVisible" title="新消息" placement="right" :width="500">
<a-list :data-source="messageList" size="small" class="mb-3" :loading="miniMessageLoading"> <a-list :data-source="messageList" size="small" class="mb-3" :loading="miniMessageLoading">
<template #renderItem="{ item }"> <template #renderItem="{ item }">
<a-list-item> <a-list-item>
@ -15,58 +15,59 @@
</a-list-item> </a-list-item>
</template> </template>
</a-list> </a-list>
<a-space> <a-space style="float: right">
<a-button v-if="unreadMessageNum > 0" @click="markRead">全部设为已读</a-button>
<a-button type="primary" @click="leaveFor('/usercenter')">消息中心</a-button> <a-button type="primary" @click="leaveFor('/usercenter')">消息中心</a-button>
<a-button @click="markRead">全部设为已读</a-button>
</a-space> </a-space>
</a-drawer> </a-drawer>
</div> <xn-form-container
<xn-form-container title="详情"
title="详情" :width="700"
:width="700" :visible="visible"
:visible="visible" :destroy-on-close="true"
:destroy-on-close="true" @close="onClose"
@close="onClose" >
> <a-form ref="formRef" :model="formData" layout="vertical">
<a-form ref="formRef" :model="formData" layout="vertical"> <a-form-item label="主题：" name="subject">
<a-form-item label="主题：" name="subject"> <span>{{ formData.subject }}</span>
<span>{{ formData.subject }}</span> </a-form-item>
</a-form-item> <a-form-item label="发送时间：" name="createTime">
<a-form-item label="发送时间：" name="createTime"> <span>{{ formData.createTime }}</span>
<span>{{ formData.createTime }}</span> </a-form-item>
</a-form-item> <a-form-item label="内容：" name="content">
<a-form-item label="内容：" name="content"> <span>{{ formData.content }}</span>
<span>{{ formData.content }}</span> </a-form-item>
</a-form-item> <a-form-item label="查收情况：" name="receiveInfoList">
<a-form-item label="查收情况：" name="receiveInfoList"> <s-table
<s-table ref="table"
ref="table" :columns="columns"
:columns="columns" :data="loadData"
:data="loadData" :alert="false"
:alert="false" :showPagination="false"
:showPagination="false" bordered
bordered :row-key="(record) => record.id"
:row-key="(record) => record.id" >
> <template #bodyCell="{ column, record }">
<template #bodyCell="{ column, record }"> <template v-if="column.dataIndex === 'read'">
<template v-if="column.dataIndex === 'read'"> <span v-if="record.read" style="color: #d9d9d9">已读</span>
<span v-if="record.read" style="color: #d9d9d9">已读</span> <span v-else style="color: #ff4d4f">未读</span>
<span v-else style="color: #ff4d4f">未读</span> </template>
</template> </template>
</template> </s-table>
</s-table> </a-form-item>
</a-form-item> </a-form>
</a-form> </xn-form-container>
</xn-form-container> </div>
</template> </template>
<script setup name="devUserMessage"> <script setup name="devUserMessage">
import indexApi from '@/api/sys/indexApi' import indexApi from '@/api/sys/indexApi'
import { message } from 'ant-design-vue'
import router from '@/router' import router from '@/router'
import {onMounted} from "vue"; import { onMounted } from 'vue'
import sysConfig from "@/config"; import sysConfig from '@/config'
import { EventSourcePolyfill } from "event-source-polyfill"; import { EventSourcePolyfill } from 'event-source-polyfill'
import tool from "@/utils/tool"; import tool from '@/utils/tool'
const miniMessageLoading = ref(false) const miniMessageLoading = ref(false)
const msgVisible = ref(false) const msgVisible = ref(false)
@ -80,41 +81,31 @@
// 创建sse连接 // 创建sse连接
const createSseConnect = () => { const createSseConnect = () => {
if (window.EventSource) { if (window.EventSource) {
let clientId = tool.data.get("CLIENTID") ? tool.data.get("CLIENTID") : ""; let clientId = tool.data.get('CLIENTID') ? tool.data.get('CLIENTID') : ''
let url = sysConfig.API_URL+'/dev/message/createSseConnect?clientId='+clientId; let url = sysConfig.API_URL + '/dev/message/createSseConnect?clientId=' + clientId
//heartbeatTimeout:心跳超时监测 30s // heartbeatTimeout:心跳超时监测 30s
let source = new EventSourcePolyfill(url,{headers: {token: tool.data.get('TOKEN')},heartbeatTimeout: 30000}) let source = new EventSourcePolyfill(url, { headers: { token: tool.data.get('TOKEN') }, heartbeatTimeout: 30000 })
// 监听打开事件 // 监听打开事件
source.addEventListener('open', (e) => { source.addEventListener('open', (e) => {})
//console.log("设备连接成功",e)
})
// 监听消息事件 // 监听消息事件
source.addEventListener("message", (e) => { source.addEventListener('message', (e) => {
const result = JSON.parse(e.data) const result = JSON.parse(e.data)
const code = result.code const code = result.code
const msg = result.msg
const data = result.data const data = result.data
if (code === 200) { if (code === 200) {
console.log("see推送消息:",data) unreadMessageNum.value = data
unreadMessageNum.value = data;
} else if (code === 0) { } else if (code === 0) {
// 初次建立连接，客户端id储存本地 // 初次建立连接，客户端id储存本地
tool.data.set("CLIENTID", data) tool.data.set('CLIENTID', data)
console.log("客户端id:",data)
} }
}) })
// 监听错误事件 // 监听错误事件
source.addEventListener("error", (e) => { source.addEventListener('error', (e) => {
console.log("发生错误，已断开与服务器的连接:",e) console.error('发生错误，消息事实获取已断开与服务器的连接')
source.close(); source.close()
}) })
} else { } else {
console.log("该浏览器不支持sse") message.warning('该浏览器不支持消息功能')
} }
} }
@ -139,7 +130,9 @@
const markRead = () => { const markRead = () => {
messageList.value = [] messageList.value = []
unreadMessageNum.value = 0 unreadMessageNum.value = 0
indexApi.indexMessageAllMarkRead().then((data) => {}) indexApi.indexMessageAllMarkRead().then((data) => {
message.success('操作成功')
})
} }
// 跳转，用于点击消息中心 // 跳转，用于点击消息中心
const leaveFor = (url = '/') => { const leaveFor = (url = '/') => {
@ -158,7 +151,7 @@
receiveInfoList.value = data.receiveInfoList receiveInfoList.value = data.receiveInfoList
table.value.refresh(true) table.value.refresh(true)
}) })
unreadMessageNum.value = Math.max(unreadMessageNum.value - 1, 0); unreadMessageNum.value = Math.max(unreadMessageNum.value - 1, 0)
} }
const loadData = () => { const loadData = () => {
@ -188,14 +181,15 @@
visible.value = false visible.value = false
formData.value = {} formData.value = {}
receiveInfoList.value = [] receiveInfoList.value = []
getMessageList()
} }
</script> </script>
<style scoped> <style scoped>
/deep/ .ant-badge-count{ :deep(.ant-badge-count) {
padding: 0px; padding: 0px;
min-width: 15px; min-width: 15px;
height: 15px; height: 15px;
line-height: 15px; line-height: 15px;
} }
</style> </style>

2
snowy-admin-web/src/views/sys/user/userTab/userMessage.vue
View File

@ -29,8 +29,8 @@
</s-table> </s-table>
</div> </div>
</a-col> </a-col>
<detail ref="detailRef" @refresh="refresh" />
</a-row> </a-row>
<detail ref="detailRef" @refresh="refresh"/>
</template> </template>
<script setup name="userMessage"> <script setup name="userMessage">

4
snowy-admin-web/src/views/sys/user/userTab/userMessage/detail.vue
View File

@ -32,7 +32,7 @@
<script setup name="messageDetail"> <script setup name="messageDetail">
import userCenterApi from '@/api/sys/userCenterApi' import userCenterApi from '@/api/sys/userCenterApi'
const emits = defineEmits(["refresh"]); const emits = defineEmits(['refresh'])
const receiveInfoList = ref([]) const receiveInfoList = ref([])
// 默认是关闭状态 // 默认是关闭状态
@ -78,7 +78,7 @@
const onClose = () => { const onClose = () => {
receiveInfoList.value = [] receiveInfoList.value = []
visible = false visible = false
emits("refresh"); emits('refresh')
} }
// 调用这个函数将子组件的一些数据和方法暴露出去 // 调用这个函数将子组件的一些数据和方法暴露出去
defineExpose({ defineExpose({

2
snowy-plugin/snowy-plugin-sys/src/main/java/vip/xiaonuo/sys/modular/index/controller/SysIndexController.java
View File

@ -127,7 +127,7 @@ public class SysIndexController {
*/ */
@ApiOperationSupport(order = 6) @ApiOperationSupport(order = 6)
@ApiOperation("站内信全部标记已读") @ApiOperation("站内信全部标记已读")
@GetMapping("/dev/message/allMessageMarkRead") @PostMapping("/sys/index/message/allMessageMarkRead")
public CommonResult<String> allMessageMarkRead() { public CommonResult<String> allMessageMarkRead() {
sysIndexService.allMessageMarkRead(); sysIndexService.allMessageMarkRead();
return CommonResult.ok(); return CommonResult.ok();