站内信模块：vue3 站内信弹板
This commit is contained in:
YunaiV
parent
8cdae12b34
commit
91dd4a32b1
@ -31,3 +31,38 @@ export const getNotifyMessagePageApi = async (params: NotifyMessagePageReqVO) =>
|
||||
export const getNotifyMessageApi = async (id: number) => {
|
||||
return await request.get({ url: '/system/notify-message/get?id=' + id })
|
||||
}
|
||||
|
||||
// 获得我的站内信分页
|
||||
// export function getMyNotifyMessagePage(query) {
|
||||
// return request({
|
||||
// url: '/system/notify-message/my-page',
|
||||
// method: 'get',
|
||||
// params: query
|
||||
// })
|
||||
// }
|
||||
|
||||
// 批量标记已读
|
||||
// export function updateNotifyMessageRead(ids) {
|
||||
// return request({
|
||||
// url: '/system/notify-message/update-read?' + qs.stringify({ids: ids}, { indices: false }),
|
||||
// method: 'put'
|
||||
// })
|
||||
// }
|
||||
|
||||
// 标记所有站内信为已读
|
||||
// export function updateAllNotifyMessageRead() {
|
||||
// return request({
|
||||
// url: '/system/notify-message/update-all-read',
|
||||
// method: 'put'
|
||||
// })
|
||||
// }
|
||||
|
||||
// 获取当前用户的最新站内信列表
|
||||
export const getUnreadNotifyMessageListApi = async () => {
|
||||
return await request.get({ url: '/system/notify-message/get-unread-list' })
|
||||
}
|
||||
|
||||
// 获得当前用户的未读站内信数量
|
||||
export const getUnreadNotifyMessageCountApi = async () => {
|
||||
return await request.get({ url: '/system/notify-message/get-unread-count' })
|
||||
}
|
||||
|
||||
@ -1,77 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
const activeName = ref('notice')
|
||||
import dayjs from 'dayjs'
|
||||
import * as NotifyMessageApi from '@/api/system/notify/message'
|
||||
|
||||
const noticeList = ref([
|
||||
{ id: 1, title: '版本升级1', date: '2022-12-12 10:00:00' },
|
||||
{ id: 2, title: '版本升级2', date: '2022-12-12 10:00:00' },
|
||||
{ id: 3, title: '版本升级3', date: '2022-12-12 10:00:00' },
|
||||
{ id: 4, title: '版本升级4', date: '2022-12-12 10:00:00' },
|
||||
{ id: 5, title: '版本升级5', date: '2022-12-12 10:00:00' }
|
||||
])
|
||||
const messageList = ref([
|
||||
{ id: 1, title: '加班1', date: '2022-12-12 10:00:00' },
|
||||
{ id: 2, title: '加班2', date: '2022-12-12 10:00:00' },
|
||||
{ id: 3, title: '加班3', date: '2022-12-12 10:00:00' },
|
||||
{ id: 4, title: '加班4', date: '2022-12-12 10:00:00' },
|
||||
{ id: 5, title: '加班5', date: '2022-12-12 10:00:00' }
|
||||
])
|
||||
const needList = ref([
|
||||
{ id: 1, title: '审批1', date: '2022-12-12 10:00:00' },
|
||||
{ id: 2, title: '审批2', date: '2022-12-12 10:00:00' },
|
||||
{ id: 3, title: '审批3', date: '2022-12-12 10:00:00' },
|
||||
{ id: 4, title: '审批4', date: '2022-12-12 10:00:00' },
|
||||
{ id: 5, title: '审批5', date: '2022-12-12 10:00:00' }
|
||||
])
|
||||
const { push } = useRouter()
|
||||
const activeName = ref('notice')
|
||||
const count = ref(0) // 未读消息数量
|
||||
const list = ref([]) // 消息列表
|
||||
|
||||
// 获得消息列表
|
||||
const getList = async () => {
|
||||
list.value = await NotifyMessageApi.getUnreadNotifyMessageListApi()
|
||||
}
|
||||
|
||||
// 获得未读消息数
|
||||
const getUnreadCount = async () => {
|
||||
NotifyMessageApi.getUnreadNotifyMessageCountApi().then((data) => {
|
||||
count.value = data
|
||||
})
|
||||
}
|
||||
|
||||
// 跳转我的站内信
|
||||
const goMyList = () => {
|
||||
push({
|
||||
name: 'MyNotifyMessage'
|
||||
})
|
||||
}
|
||||
|
||||
// ========== 初始化 =========
|
||||
onMounted(() => {
|
||||
// 首次加载小红点
|
||||
getUnreadCount()
|
||||
// 轮询刷新小红点
|
||||
setInterval(() => {
|
||||
getUnreadCount()
|
||||
}, 1000 * 60 * 2)
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="message">
|
||||
<ElPopover placement="bottom" :width="310" trigger="click">
|
||||
<ElPopover placement="bottom" :width="400" trigger="click">
|
||||
<template #reference>
|
||||
<ElBadge :value="noticeList.length" class="item">
|
||||
<Icon icon="ep:bell" :size="18" class="cursor-pointer" />
|
||||
<ElBadge :is-dot="count > 0" class="item">
|
||||
<Icon icon="ep:bell" :size="18" class="cursor-pointer" @click="getList" />
|
||||
</ElBadge>
|
||||
</template>
|
||||
<ElTabs v-model="activeName">
|
||||
<ElTabPane label="通知(5)" name="notice">
|
||||
<ElTabPane label="我的站内信" name="notice">
|
||||
<div class="message-list">
|
||||
<template v-for="item in noticeList" :key="item.id">
|
||||
<template v-for="item in list" :key="item.id">
|
||||
<div class="message-item">
|
||||
<img src="@/assets/imgs/avatar.gif" alt="" class="message-icon" />
|
||||
<div class="message-content">
|
||||
<span class="message-title">{{ item.title }}</span>
|
||||
<span class="message-date">{{ item.date }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</ElTabPane>
|
||||
<ElTabPane label="消息(0)" name="message">
|
||||
<div class="message-list">
|
||||
<template v-for="item in messageList" :key="item.id">
|
||||
<div class="message-item">
|
||||
<img src="@/assets/imgs/avatar.gif" alt="" class="message-icon" />
|
||||
<div class="message-content">
|
||||
<span class="message-title">{{ item.title }}</span>
|
||||
<span class="message-date">{{ item.date }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</ElTabPane>
|
||||
<ElTabPane label="代办(0)" name="need">
|
||||
<div class="message-list">
|
||||
<template v-for="item in needList" :key="item.id">
|
||||
<div class="message-item">
|
||||
<img src="@/assets/imgs/avatar.gif" alt="" class="message-icon" />
|
||||
<div class="message-content">
|
||||
<span class="message-title">{{ item.title }}</span>
|
||||
<span class="message-date">{{ item.date }}</span>
|
||||
<span class="message-title">
|
||||
{{ item.templateNickname }}：{{ item.templateContent }}
|
||||
</span>
|
||||
<span class="message-date">
|
||||
{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</ElTabPane>
|
||||
</ElTabs>
|
||||
<!-- 更多 -->
|
||||
<div style="text-align: right; margin-top: 10px">
|
||||
<XButton type="primary" preIcon="ep:view" title="查看全部" @click="goMyList" />
|
||||
</div>
|
||||
</ElPopover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -43,6 +43,7 @@ export function getUnreadNotifyMessageList() {
|
||||
})
|
||||
}
|
||||
|
||||
// 获得当前用户的未读站内信数量
|
||||
export function getUnreadNotifyMessageCount() {
|
||||
return request({
|
||||
url: '/system/notify-message/get-unread-count',
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<!-- 弹出列表 -->
|
||||
<el-table v-loading="loading" :data="list">
|
||||
<el-table-column width="120" property="templateNickname" label="发送人" />
|
||||
<el-table-column width="180" property="title" label="发送时间">
|
||||
<el-table-column width="180" property="createTime" label="发送时间">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ parseTime(scope.row.createTime) }}</span>
|
||||
</template>
|
||||
@ -49,7 +49,7 @@ export default {
|
||||
// 首次加载小红点
|
||||
this.getUnreadCount()
|
||||
// 轮询刷新小红点
|
||||
window.timer = setInterval(()=>{
|
||||
setInterval(() => {
|
||||
this.getUnreadCount()
|
||||
},1000 * 60 * 2)
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user