|
@@ -4,58 +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, onBeforeUnmount, ref } 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 receivedData = ref([])
|
|
|
-let eventSource = null
|
|
|
+let eventSource: EventSourcePolyfill | null = null
|
|
|
+
|
|
|
+// 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 = []
|
|
|
+ }
|
|
|
+ })
|
|
|
+ total.value = _total
|
|
|
+})
|
|
|
+
|
|
|
+const jumpMessageInfo = () => {
|
|
|
+ router.push('/message/list')
|
|
|
+}
|
|
|
+
|
|
|
+const jumpMessageDetail = (id: any) => {
|
|
|
+ router.push('/message/list?id=' + id)
|
|
|
+}
|
|
|
|
|
|
onMounted(() => {
|
|
|
eventSource = new EventSourcePolyfill(serviceUrlApi.value, {
|
|
|
headers: { accessToken: token }
|
|
|
})
|
|
|
|
|
|
- eventSource.onmessage = event => {
|
|
|
+ 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)
|
|
|
- receivedData.value.push(event.data)
|
|
|
// 处理接收到的消息
|
|
|
ElNotification({
|
|
|
- title: '您有一条新消息',
|
|
|
+ title: notificationTitle,
|
|
|
message: event.data,
|
|
|
- type: 'success'
|
|
|
+ type: 'success',
|
|
|
+ duration: 10000
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- eventSource.onerror = error => {
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ eventSource.onerror = (error: any) => {
|
|
|
console.error('EventSource failed:', error)
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-onBeforeUnmount(() => {
|
|
|
- if (eventSource) {
|
|
|
- eventSource.close()
|
|
|
- }
|
|
|
-})
|
|
|
+// onBeforeUnmount(() => {
|
|
|
+// if (eventSource) {
|
|
|
+// eventSource.close()
|
|
|
+// }
|
|
|
+// })
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
-/* 你的样式代码 */
|
|
|
+<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>
|