|
@@ -4,67 +4,199 @@
|
|
|
<div class="menu--message-trigger">
|
|
|
<el-tooltip :content="$t('le.message.txt')" effect="dark" placement="bottom">
|
|
|
<div class="menu--message menu-item le-hover-effect--bg">
|
|
|
- <el-badge :value="90" :max="99">
|
|
|
+ <el-badge :value="total" :max="99">
|
|
|
<i class="le-iconfont le-notice"></i>
|
|
|
</el-badge>
|
|
|
</div>
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <ul>
|
|
|
- <li v-for="(item, idx) in receivedData" :key="idx">{{ item }}</li>
|
|
|
- </ul>
|
|
|
+ <el-tabs class="message-tabs" v-model="activeTab">
|
|
|
+ <el-tab-pane v-for="v of tabsConfig" :key="v.name" :name="v.name">
|
|
|
+ <template #label> {{ v.label }}({{ v.list.length }}) </template>
|
|
|
+ <template v-if="v.list.length">
|
|
|
+ <div class="message-list">
|
|
|
+ <div v-for="item of v.list" :key="item.id" class="message-item" @click="jumpMessageDetail(item.id)">
|
|
|
+ <!--<img src="" alt="" class="message-icon" />-->
|
|
|
+ <div class="message-content">
|
|
|
+ <div class="message-title">
|
|
|
+ <span class="txt text-overflow_ellipsis" :title="item.title">{{ item.title }}</span>
|
|
|
+ <span class="message-date">{{ item.createTime }}</span>
|
|
|
+ </div>
|
|
|
+ <span class="message-txt">{{ item.content }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="message-fix-item" @click="jumpMessageInfo">查看更多</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <LeNoData />
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
</el-popover>
|
|
|
</template>
|
|
|
-<script setup>
|
|
|
-import { onMounted, ref, onBeforeUnmount } from 'vue'
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
|
|
|
+import message from '@/api/system/message'
|
|
|
+import router from '@/router'
|
|
|
+import { EventSourcePolyfill } from 'event-source-polyfill'
|
|
|
import { ls } from '@/utils'
|
|
|
+import { ElNotification } from 'element-plus'
|
|
|
const token = ls.get('token')
|
|
|
const { VITE_APP_BASE_API } = import.meta.env
|
|
|
-const serviceUrlApi = ref(`${VITE_APP_BASE_API}/sys/sse/connect`);
|
|
|
-// const serviceUrlApi = ref(`http://localhost:3000/events`)
|
|
|
-let sseService = ref(null)
|
|
|
-let receivedData = ref([])
|
|
|
+const serviceUrlApi = ref(`${VITE_APP_BASE_API}/sys/sse/connect`)
|
|
|
+let eventSource: EventSourcePolyfill | null = null
|
|
|
|
|
|
-// 创建一个新的 EventSource,但首先使用 fetch API 发送带有 Authorization 头的请求
|
|
|
-function connectSSEWithHeaders(url, headers = {}) {
|
|
|
- return fetch(url, {
|
|
|
- method: 'GET',
|
|
|
- headers: headers,
|
|
|
- cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
|
|
|
- mode: 'cors', // no-cors, cors, *same-origin
|
|
|
- credentials: 'same-origin', // include, *same-origin, omit
|
|
|
- redirect: 'follow', // manual, *follow, error
|
|
|
- referrerPolicy: 'no-referrer' // no-referrer, *client
|
|
|
+// noticeList 通知 messageList 消息 todoList 待办
|
|
|
+const tabsConfig = reactive({
|
|
|
+ noticeList: {
|
|
|
+ name: 'noticeList',
|
|
|
+ label: '通知',
|
|
|
+ list: []
|
|
|
+ },
|
|
|
+ messageList: {
|
|
|
+ name: 'messageList',
|
|
|
+ label: '消息',
|
|
|
+ list: []
|
|
|
+ },
|
|
|
+ todoList: {
|
|
|
+ name: 'todoList',
|
|
|
+ label: '待办',
|
|
|
+ list: []
|
|
|
+ }
|
|
|
+})
|
|
|
+const activeTab = ref('noticeList')
|
|
|
+const total = ref(0)
|
|
|
+message.getMessage().then(res => {
|
|
|
+ let _total = 0
|
|
|
+ Object.keys(tabsConfig).map(key => {
|
|
|
+ if (res[key]) {
|
|
|
+ tabsConfig[key].list = res[key]
|
|
|
+ _total += res[key].length
|
|
|
+ } else {
|
|
|
+ res[key].list = []
|
|
|
+ }
|
|
|
})
|
|
|
- .then(response => {
|
|
|
- if (!response.ok) {
|
|
|
- throw new Error('网络响应失败')
|
|
|
- }
|
|
|
- return new EventSource(url)
|
|
|
- })
|
|
|
- .catch(error => {
|
|
|
- console.error('There was a problem with your fetch operation:', error)
|
|
|
- })
|
|
|
+ total.value = _total
|
|
|
+})
|
|
|
+
|
|
|
+const jumpMessageInfo = () => {
|
|
|
+ router.push('/message/list')
|
|
|
+}
|
|
|
+
|
|
|
+const jumpMessageDetail = (id: any) => {
|
|
|
+ router.push('/message/list?id=' + id)
|
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
|
- connectSSEWithHeaders(serviceUrlApi.value, { accessToken: token }).then(eventSource => {
|
|
|
- sseService.value = eventSource
|
|
|
- eventSource.onmessage = function (e) {
|
|
|
- console.log('后端返回的数据:', e.data)
|
|
|
- receivedData.value.push(e.data)
|
|
|
- }
|
|
|
- eventSource.onerror = function (err) {
|
|
|
- console.error('EventSource failed:', err)
|
|
|
+ eventSource = new EventSourcePolyfill(serviceUrlApi.value, {
|
|
|
+ headers: { accessToken: token }
|
|
|
+ })
|
|
|
+
|
|
|
+ eventSource.onmessage = (event: MessageEvent) => {
|
|
|
+ // const data = JSON.parse()
|
|
|
+ console.log('Received message-----:', event)
|
|
|
+
|
|
|
+ const eventType = event.type
|
|
|
+ const notificationTitles: { [key: string]: string } = {
|
|
|
+ message: '消息',
|
|
|
+ notice: '通知',
|
|
|
+ remind: '待办'
|
|
|
}
|
|
|
+ const notificationTitle = notificationTitles[eventType] || '您有一条新消息'
|
|
|
+ console.log('Received message:', event.data)
|
|
|
+ // 处理接收到的消息
|
|
|
+ ElNotification({
|
|
|
+ title: notificationTitle,
|
|
|
+ message: event.data,
|
|
|
+ type: 'success',
|
|
|
+ duration: 10000
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ eventSource.addEventListener('remind', (event: MessageEvent) => {
|
|
|
+ const data = JSON.parse(event.data)
|
|
|
+ console.log('Received remind event:', event)
|
|
|
+ // 处理接收到的提醒消息
|
|
|
+ ElNotification({
|
|
|
+ title: data.title,
|
|
|
+ message: data.content,
|
|
|
+ type: 'success',
|
|
|
+ duration: 10000
|
|
|
+ })
|
|
|
})
|
|
|
-})
|
|
|
|
|
|
-onBeforeUnmount(() => {
|
|
|
- if (sseService.value) {
|
|
|
- sseService.value.close()
|
|
|
- sseService.value = null
|
|
|
+ eventSource.onerror = (error: any) => {
|
|
|
+ console.error('EventSource failed:', error)
|
|
|
}
|
|
|
})
|
|
|
+
|
|
|
+// onBeforeUnmount(() => {
|
|
|
+// if (eventSource) {
|
|
|
+// eventSource.close()
|
|
|
+// }
|
|
|
+// })
|
|
|
</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.message-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ max-height: 390px;
|
|
|
+ overflow-y: auto;
|
|
|
+ .message-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px 0;
|
|
|
+ border-bottom: 1px solid var(--el-border-color-light);
|
|
|
+ cursor: pointer;
|
|
|
+ &:last-child {
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .message-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ .message-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--el-text-color-primary);
|
|
|
+ }
|
|
|
+ .message-date {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--el-text-color-secondary);
|
|
|
+ margin-left: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .message-txt {
|
|
|
+ //margin-bottom: 5px;
|
|
|
+ color: var(--el-text-color-regular);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .message-fix-item {
|
|
|
+ // flex 居中
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 40px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+.menu--message-trigger {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.menu--message {
|
|
|
+ width: 40px;
|
|
|
+ justify-content: center;
|
|
|
+ //.le-notice {
|
|
|
+ //.le-iconfont {
|
|
|
+ //}
|
|
|
+}
|
|
|
+</style>
|