- Header.vue:铃铛未读角标 + WS 客户端(25s 心跳/断线 5s 重连换新票/newMessage 红点+1+Notice 弹提示) - BaseApi.ts:getMsgCenterWsTicket(POST /api/msgCenter/wsTicket 代签一次性票据) - index.html:修复 lodash 引用路径(./libs/lodash.min.js,dev 404 致白屏) - CI:build.yml 照 notice/front 模板(构建→zip→Nexus front-hosted→webhook 建档); userhome deployMode=auto,webhook 后自动发布;凭据 prod.env+projman DB 直读(不走仓库 Secrets)
This commit is contained in:
+175
-43
@@ -27,33 +27,35 @@
|
||||
<Poptip class="fl" popper-class="message-wrap reset-panel" :width="360" trigger="click"
|
||||
placement="bottom-end" v-model="isMsgShow" :transfer="true">
|
||||
<div class="icon-box" v-wave>
|
||||
<SvgIcon name="header-2" color="#333333" />
|
||||
<Badge :count="unreadCount" :offset="[2, 0]" overflow-count="99">
|
||||
<SvgIcon name="header-2" color="#333333" />
|
||||
</Badge>
|
||||
</div>
|
||||
<template #content>
|
||||
<h3 class="title">查看消息</h3>
|
||||
<vuescroll>
|
||||
<ul class="msg-ul">
|
||||
<li class="no-msg-box" v-if="userMsgList.length == 0">暂无消息</li>
|
||||
<template v-else v-for="(item, index) in userMsgList">
|
||||
<li class="fix">
|
||||
<h4 :class="{
|
||||
'text-ellipsis': true,
|
||||
read: item.read,
|
||||
}">
|
||||
<span class="app-name-box">{{ item.name }}</span>
|
||||
<span class="content" :title="item.msg"
|
||||
@click="linkMessage(item.id, item.appPath, item.read)">
|
||||
{{ item.msg }}
|
||||
</span>
|
||||
</h4>
|
||||
<a href="javascript:;" @click="linkMessage(item.id, item.appPath, item.read)"
|
||||
title="查看详情">
|
||||
<SvgIcon name="arrow-right" color="#bbbbbb" />
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</vuescroll>
|
||||
<vuescroll>
|
||||
<ul class="msg-ul">
|
||||
<li class="no-msg-box" v-if="userMsgList.length == 0">暂无消息</li>
|
||||
<template v-else v-for="(item, index) in userMsgList">
|
||||
<li class="fix">
|
||||
<h4 :class="{
|
||||
'text-ellipsis': true,
|
||||
read: item.isRead === 1,
|
||||
}">
|
||||
<span class="app-name-box">{{ item.appName || msgTypeLabel(item.msgType) }}</span>
|
||||
<span class="content" :title="item.content"
|
||||
@click="onClickMsg(item)">
|
||||
{{ item.title }}:{{ item.content }}
|
||||
</span>
|
||||
</h4>
|
||||
<a v-if="item.jumpUrl" href="javascript:;" @click="onClickMsg(item)"
|
||||
title="查看详情">
|
||||
<SvgIcon name="arrow-right" color="#bbbbbb" />
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</vuescroll>
|
||||
<div class="footer fix">
|
||||
<a href="javascript:;" class="fl link-all" @click="showMsgList">查看全部</a>
|
||||
<a href="javascript:;" class="fr read-all" v-if="userMsgList.length > 0"
|
||||
@@ -288,6 +290,7 @@ import StatsBarModal from "@/components/StatsBarModal.vue";
|
||||
import TeacherCopilotModal from "@/components/TeacherCopilotModal.vue";
|
||||
import BaseApi from "@/api/BaseApi";
|
||||
import TablePage from "@/components/TablePage.vue";
|
||||
import { Notice } from "view-ui-plus";
|
||||
import { IframePageParmas, RoleInfo } from "@/types";
|
||||
import { isEqual, orderBy } from "lodash";
|
||||
import { PageParams } from "@/types/Basics";
|
||||
@@ -326,7 +329,96 @@ const isMsgShow = ref(false),
|
||||
searchAppText = ref<string | null>(null),
|
||||
wallpaperList = ref<any[]>([]),
|
||||
logoList = ref<any[]>([]),
|
||||
userMsgList = ref<any[]>([]);
|
||||
userMsgList = ref<any[]>([]),
|
||||
/** 未读消息数(msgCenter/summary 拉取 + WS newMessage 实时累加) */
|
||||
unreadCount = ref(0);
|
||||
|
||||
// ===== 消息中心 WS 实时推送(UserMsg /ws/msg,一次性票据握手;断线 5s 重连换新票) =====
|
||||
let msgWs: WebSocket | null = null;
|
||||
let msgWsPingTimer: any = null;
|
||||
let msgWsReconnectTimer: any = null;
|
||||
let msgWsClosed = false;
|
||||
|
||||
async function loadSummary() {
|
||||
try {
|
||||
const summary = await BaseApi.getMsgCenterSummary();
|
||||
unreadCount.value = (summary && summary.unreadCount) || 0;
|
||||
} catch (e) {
|
||||
/* 摘要失败不打扰页面 */
|
||||
}
|
||||
}
|
||||
|
||||
async function connectMsgWs() {
|
||||
if (msgWsClosed) return;
|
||||
let wsUrl: string | null = null;
|
||||
try {
|
||||
const res: any = await BaseApi.getMsgCenterWsTicket();
|
||||
wsUrl = res && res.url;
|
||||
} catch (e) {
|
||||
/* 未登录/不可达:走兜底重连 */
|
||||
}
|
||||
// 票据不可得(UserMsg 重启中/未配置)也要保持重连节奏:服务恢复后自动续上
|
||||
if (!wsUrl) {
|
||||
if (!msgWsClosed) {
|
||||
clearTimeout(msgWsReconnectTimer);
|
||||
msgWsReconnectTimer = setTimeout(connectMsgWs, 5000);
|
||||
}
|
||||
return;
|
||||
}
|
||||
const ws = new WebSocket(wsUrl);
|
||||
msgWs = ws;
|
||||
ws.onopen = () => {
|
||||
// 25s 心跳保活(服务端 90s 空闲回收)
|
||||
msgWsPingTimer = setInterval(() => {
|
||||
if (ws.readyState === WebSocket.OPEN) ws.send('{"type":"ping"}');
|
||||
}, 25000);
|
||||
};
|
||||
ws.onmessage = ev => {
|
||||
try {
|
||||
const frame = JSON.parse(ev.data);
|
||||
if (frame.type === "newMessage") onNewMessage(frame);
|
||||
} catch (e) {
|
||||
/* 非 JSON 帧忽略 */
|
||||
}
|
||||
};
|
||||
ws.onclose = () => {
|
||||
clearInterval(msgWsPingTimer);
|
||||
msgWsPingTimer = null;
|
||||
if (msgWs === ws) msgWs = null;
|
||||
// 票据一次性:重连必换新票;退避上限 30s 防服务端长时间不可用时空转
|
||||
if (!msgWsClosed) {
|
||||
clearTimeout(msgWsReconnectTimer);
|
||||
msgWsReconnectTimer = setTimeout(connectMsgWs, 5000);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function onNewMessage(frame: any) {
|
||||
unreadCount.value += 1;
|
||||
reloadMsg();
|
||||
if (isMsgListShow.value) resetMsgPage();
|
||||
Notice.info({
|
||||
title: frame.title || "新消息",
|
||||
desc: frame.content || "",
|
||||
duration: 5,
|
||||
});
|
||||
}
|
||||
|
||||
function closeMsgWs() {
|
||||
msgWsClosed = true;
|
||||
clearTimeout(msgWsReconnectTimer);
|
||||
msgWsReconnectTimer = null;
|
||||
clearInterval(msgWsPingTimer);
|
||||
msgWsPingTimer = null;
|
||||
if (msgWs) {
|
||||
try {
|
||||
msgWs.close();
|
||||
} catch (e) {
|
||||
/* 已断开 */
|
||||
}
|
||||
msgWs = null;
|
||||
}
|
||||
}
|
||||
|
||||
const headerClass = computed(() => {
|
||||
return { "default-header": true, "base-mask": route.name !== "index" };
|
||||
@@ -348,7 +440,7 @@ const userRole = computed(() => store.userRoleList);
|
||||
const toggleSearch: any = inject("toggleSearch");
|
||||
|
||||
const pageParams: PageParams = reactive({ page: 1, count: 10 });
|
||||
const tableApi = (params: PageParams) => BaseApi.getMessagePageList(params);
|
||||
const tableApi = (params: PageParams) => BaseApi.getMsgCenterList(params);
|
||||
const columns = ref<any[]>([
|
||||
{
|
||||
type: "index",
|
||||
@@ -358,33 +450,63 @@ const columns = ref<any[]>([
|
||||
},
|
||||
{
|
||||
title: "应用",
|
||||
width: 150,
|
||||
tooltip: true,
|
||||
width: 110,
|
||||
align: "center",
|
||||
key: "name",
|
||||
render(h: any, params: any) {
|
||||
return h("span", params.row.appName || msgTypeLabel(params.row.msgType));
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "消息内容",
|
||||
tooltip: true,
|
||||
key: "msg",
|
||||
render(h: any, params: any) {
|
||||
const row = params.row;
|
||||
return h("span", { attrs: { title: row.content } }, `${row.title || ""}:${row.content || ""}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
width: 100,
|
||||
render(h: any, params: any) {
|
||||
return h("span", params.row.read ? "已读" : "未读");
|
||||
return h("span", params.row.isRead === 1 ? "已读" : "未读");
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "日期",
|
||||
align: "center",
|
||||
width: 200,
|
||||
key: "date",
|
||||
key: "sendTime",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
width: 90,
|
||||
align: "center",
|
||||
render(h: any, params: any) {
|
||||
if (!params.row.jumpUrl) return h("span", "—");
|
||||
return h(
|
||||
"a",
|
||||
{
|
||||
attrs: { href: "javascript:;" },
|
||||
on: {
|
||||
click: () => {
|
||||
if (params.row.isRead !== 1 && params.row.msgId) {
|
||||
BaseApi.readMsgCenter(params.row.msgId);
|
||||
params.row.isRead = 1;
|
||||
unreadCount.value = Math.max(0, unreadCount.value - 1);
|
||||
}
|
||||
window.open(params.row.jumpUrl, "_blank");
|
||||
},
|
||||
},
|
||||
},
|
||||
"去处理"
|
||||
);
|
||||
},
|
||||
},
|
||||
]);
|
||||
onMounted(async () => {
|
||||
setTimeout(() => {
|
||||
reloadMsg();
|
||||
loadSummary();
|
||||
connectMsgWs();
|
||||
// isWallpaperShow.value = true;
|
||||
}, 200);
|
||||
loadLogoList();
|
||||
@@ -395,6 +517,7 @@ onMounted(async () => {
|
||||
});
|
||||
onUnmounted(() => {
|
||||
mittBus.off("searchReset");
|
||||
closeMsgWs();
|
||||
});
|
||||
watch(isSearching, val => {
|
||||
if (val) {
|
||||
@@ -407,13 +530,6 @@ watch(isSearching, val => {
|
||||
watch(searchAppText, val => {
|
||||
mittBus.emit("searchChange", val);
|
||||
});
|
||||
function linkMessage(msgId: number, path: string, isread: boolean) {
|
||||
if (!isread) BaseApi.readMessage(msgId);
|
||||
var index = userMsgList.value.findIndex(x => x.id == msgId);
|
||||
if (index !== -1) userMsgList.value[index].read = true;
|
||||
window.open(path);
|
||||
}
|
||||
|
||||
function getIsCheckRoles(item: RoleInfo) {
|
||||
return isEqual(item, store.curRoleInfo);
|
||||
}
|
||||
@@ -438,14 +554,30 @@ function onUserinfoClickRoles() {
|
||||
}
|
||||
|
||||
async function readMsgAll(type: 1 | 2) {
|
||||
await BaseApi.readMessageAll();
|
||||
await BaseApi.readMsgCenterAll();
|
||||
await reloadMsg();
|
||||
unreadCount.value = 0;
|
||||
if (type == 2) resetMsgPage();
|
||||
}
|
||||
|
||||
async function reloadMsg() {
|
||||
const result = await BaseApi.getMessageList();
|
||||
userMsgList.value = result.list;
|
||||
const result: any = await BaseApi.getMsgCenterList({ page: 1, count: 10 });
|
||||
userMsgList.value = result.list || [];
|
||||
}
|
||||
|
||||
/** 消息类型名(UserMsg msgType:0系统通知/1业务提醒/2审批待办) */
|
||||
function msgTypeLabel(msgType: number) {
|
||||
return { 0: "系统通知", 1: "业务提醒", 2: "审批待办" }[msgType as 0 | 1 | 2] || "系统通知";
|
||||
}
|
||||
|
||||
/** 点击消息:未读先标读;配了 jumpUrl(如 flow.task 待办)新窗口打开落地页 */
|
||||
async function onClickMsg(item: any) {
|
||||
if (item.isRead !== 1 && item.msgId) {
|
||||
await BaseApi.readMsgCenter(item.msgId);
|
||||
item.isRead = 1;
|
||||
unreadCount.value = Math.max(0, unreadCount.value - 1);
|
||||
}
|
||||
if (item.jumpUrl) window.open(item.jumpUrl, "_blank");
|
||||
}
|
||||
|
||||
function resetMsgPage() {
|
||||
|
||||
Reference in New Issue
Block a user