|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <el-popover placement="bottom" :width="310" trigger="click">
|
|
|
+ <el-popover placement="bottom" :width="320" popper-style="padding: 12px;" trigger="click">
|
|
|
<template #reference>
|
|
|
<div class="menu--message-trigger">
|
|
|
<el-tooltip :content="$t('le.message.txt')" effect="dark" placement="bottom">
|
|
@@ -11,19 +11,30 @@
|
|
|
</el-tooltip>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <el-tabs class="message-tabs" v-model="activeTab">
|
|
|
+
|
|
|
+ <el-tabs v-model="activeTab" class="message-tabs">
|
|
|
<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>
|
|
|
+ <el-avatar :style="{ backgroundColor: 'var(--el-color-primary)', color: 'var(--el-color-white)' }">
|
|
|
+ <span style="transform: scale(0.8)">
|
|
|
+ {{ item.createBy }}
|
|
|
+ </span>
|
|
|
+ </el-avatar>
|
|
|
+ </div>
|
|
|
+ <div class="message-content ml-2">
|
|
|
<div class="message-title">
|
|
|
- <span class="txt text-overflow_ellipsis" :title="item.title">{{ item.title }}</span>
|
|
|
- <span class="message-date">{{ item.createTime }}</span>
|
|
|
+ <el-tooltip :content="item.title" placement="top">
|
|
|
+ <span class="w-[160px] text-[16px] font-[600] sm:w-[180px] text-overflow_ellipsis" :title="item.title">{{ item.title }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ <span class="message-date">{{ formatTimeSecond(item.createTime) }}</span>
|
|
|
</div>
|
|
|
- <span class="message-txt">{{ item.content }}</span>
|
|
|
+ <el-tooltip :content="item.content" placement="top">
|
|
|
+ <span class="message-txt w-[220px] sm:w-[240px] text-overflow_ellipsis">{{ item.content }}</span>
|
|
|
+ </el-tooltip>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="message-fix-item" @click="jumpMessageInfo">查看更多</div>
|
|
@@ -38,11 +49,12 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
|
|
|
+import { ref, reactive, onMounted } from 'vue'
|
|
|
import message from '@/api/system/message'
|
|
|
import router from '@/router'
|
|
|
import { EventSourcePolyfill } from 'event-source-polyfill'
|
|
|
import { ls } from '@/utils'
|
|
|
+import { formatTimeSecond } from '@/utils/datetime'
|
|
|
import { ElNotification } from 'element-plus'
|
|
|
const token = ls.get('token')
|
|
|
const { VITE_APP_BASE_API } = import.meta.env
|
|
@@ -72,17 +84,17 @@ const total = ref(0)
|
|
|
|
|
|
const getMessage = () => {
|
|
|
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 = []
|
|
|
- }
|
|
|
+ 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
|
|
|
})
|
|
|
- total.value = _total
|
|
|
-})
|
|
|
}
|
|
|
|
|
|
const jumpMessageInfo = () => {
|