gitee/snowy
1
0
Fork 0
mirror of https://gitee.com/xiaonuobase/snowy.git synced 2026-03-22 10:47:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
小诺
2023-07-19 21:01:54 +08:00
committed by xiaonuobase
parent d3375c259c
commit 7d62c31ceb
5 changed files with 73 additions and 79 deletions
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) {
return request('message/allMessageMarkRead', data, 'get')
return request('message/allMessageMarkRead', data)
},
// 获取当前用户访问日志列表
indexVisLogList(data) {

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

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

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

@@ -29,8 +29,8 @@
</s-table>
</div>
</a-col>
<detail ref="detailRef" @refresh="refresh" />
</a-row>
<detail ref="detailRef" @refresh="refresh"/>
</template>
<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">
import userCenterApi from '@/api/sys/userCenterApi'
const emits = defineEmits(["refresh"]);
const emits = defineEmits(['refresh'])
const receiveInfoList = ref([])
// 默认是关闭状态
@@ -78,7 +78,7 @@
const onClose = () => {
receiveInfoList.value = []
visible = false
emits("refresh");
emits('refresh')
}
// 调用这个函数将子组件的一些数据和方法暴露出去
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)
@ApiOperation("站内信全部标记已读")
@GetMapping("/dev/message/allMessageMarkRead")
@PostMapping("/sys/index/message/allMessageMarkRead")
public CommonResult<String> allMessageMarkRead() {
sysIndexService.allMessageMarkRead();
return CommonResult.ok();