feat: 注册 noticeRead 消息已读事件，user.vue 组件订阅已读事件，更新消息状态

Web/src/layout/navBars/breadcrumb/user.vue

@@ -35,7 +35,7 @@
 		<div class="layout-navbars-breadcrumb-user-icon">
 			<el-popover placement="bottom" trigger="hover" transition="el-zoom-in-top" :width="300" :persistent="false">
 				<template #reference>
-					<el-badge :is-dot="true">
+					<el-badge :is-dot="hasUnreadNotice">
 						<el-icon :title="$t('message.user.title4')">
 							<ele-Bell />
 						</el-icon>
@@ -74,7 +74,7 @@
 </template>
 
 <script setup lang="ts" name="layoutBreadcrumbUser">
-import { defineAsyncComponent, ref, computed, reactive, onMounted } from 'vue';
+import { defineAsyncComponent, ref, computed, reactive, onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
 import screenfull from 'screenfull';
@@ -120,6 +120,10 @@ const layoutUserFlexNum = computed(() => {
 	else num = '';
 	return num;
 });
+// 是否有未读消息
+const hasUnreadNotice = computed(() => {
+	return state.noticeList.some((r: any) => r.readStatus == undefined || r.readStatus == 0);
+});
 // 全屏点击时
 const onScreenfullClick = () => {
 	if (!screenfull.isEnabled) {
@@ -212,9 +216,23 @@ onMounted(async () => {
 	state.noticeList = res.data.result ?? [];
 
 	// 接收站内信
-	signalR.on('PublicNotice', reciveNotice);
+	signalR.on('PublicNotice', receiveNotice);
+
+	// 处理消息已读
+	mittBus.on('noticeRead', (id) => {
+		const notice = state.noticeList.find((r: any) => r.id == id);
+		if (notice == undefined) return;
+
+		// 设置已读
+		notice.readStatus = 1;
+	});
+});
+// 页面卸载时
+onUnmounted(() => {
+	mittBus.off('noticeRead', () => {});
 });
-const reciveNotice = (msg: any) => {
+
+const receiveNotice = (msg: any) => {
 	state.noticeList.unshift(msg);
 
 	ElNotification({

Web/src/types/mitt.d.ts

@@ -33,6 +33,8 @@ declare type MittType<T = any> = {
 	submitRefreshFk?: string; // 代码生成主键刷新
 
 	uploadCropperImg?: any; // 上传裁剪图片
+
+	noticeRead: number; // 消息已读事件
 };
 
 // mitt 参数类型定义

Web/src/views/home/notice/index.vue

@@ -97,14 +97,8 @@ const state = reactive({
 });
 onMounted(async () => {
 	handleQuery();
-
-	mittBus.on('submitRefresh', () => {
-		handleQuery();
-	});
-});
-onUnmounted(() => {
-	mittBus.off('submitRefresh', () => {});
 });
+onUnmounted(() => {});
 // 查询操作
 const handleQuery = async () => {
 	state.loading = true;
@@ -135,6 +129,8 @@ const viewDetail = async (row: any) => {
 	state.dialogVisible = true;
 
 	row.readStatus = 1;
+
+	mittBus.emit('noticeRead', row.sysNotice.id);
 	await getAPI(SysNoticeApi).sysNoticeSetReadPost({ id: row.sysNotice.id });
 };