소스 검색

增加sse消息接收的弹窗及列表显示

yanglzh 2 년 전
부모
커밋
0bce8826d0
2개의 변경된 파일18개의 추가작업 그리고 13개의 파일을 삭제
  1. 17 13
      src/layout/navBars/breadcrumb/userNews.vue
  2. 1 0
      src/views/login/component/account.vue

+ 17 - 13
src/layout/navBars/breadcrumb/userNews.vue

@@ -25,12 +25,11 @@ import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 import getOrigin from '/@/utils/origin';
 import api from '/@/api/message';
-import { ElNotification } from 'element-plus'
+import { ElNotification } from 'element-plus';
 
 const router = useRouter();
 const emit = defineEmits(['closePopover']);
 
-
 const newsList = ref<any[]>([
 	// {
 	// 	title: '关于发布的通知',
@@ -39,21 +38,26 @@ const newsList = ref<any[]>([
 	// },
 ]);
 
-api.allUnRead().then((res: any) => {
-	// console.log(res.Info)
-	newsList.value = res.Info.map((item: any) => item.MessageInfo).slice(0, 5)
-  // ElNotification({
-  //   title: '测试消息',
-  //   message: '测试消息',
-  //   type: 'error',
-  // })
-})
+// api.allUnRead().then((res: any) => {
+// 	// console.log(res.Info)
+// 	newsList.value = res.Info.map((item: any) => item.MessageInfo).slice(0, 5);
+// });
 
 // 监听系统消息的SSE
-const es = new EventSource(getOrigin(import.meta.env.VITE_SERVER_URL + '/subscribe/sysMessage'));
+const es = new EventSource(getOrigin(import.meta.env.VITE_SERVER_URL + '/subscribe/sysMessage?userId=' + localStorage.userId));
 es.addEventListener('lastUnRead', ({ data }) => {
 	if (!data || data === 'null') return;
-	console.log(data);
+	const list = JSON.parse(data);
+	newsList.value = list.concat(newsList.value).slice(0,5)
+	list.forEach((item: any) => {
+		setTimeout(() => {
+			ElNotification({
+				title: item.MessageInfo.title,
+				message: item.MessageInfo.content,
+				type: 'error',
+			});
+		}, 100);
+	});
 });
 
 // 全部已读点击

+ 1 - 0
src/views/login/component/account.vue

@@ -131,6 +131,7 @@ export default defineComponent({
     // 获取登录用户信息
     const currentUser = async () => {
       api.login.currentUser().then(async (res: any) => {
+        localStorage.setItem('userId', res.Info.id)
         // 设置用户菜单
         Session.set('userMenu', res.Data || []);
         store.dispatch('requestOldRoutes/setBackEndControlRoutes', res || []);