| | |
| | | <div class="notification-popover-content"> |
| | | <div class="popover-header"> |
| | | <span class="popover-title">消息通知</span> |
| | | <el-button type="primary" |
| | | size="small" |
| | | @click="handleMarkAllAsRead" |
| | | :disabled="unreadCount === 0"> |
| | | 一键已读 |
| | | </el-button> |
| | | <div class="popover-actions"> |
| | | <el-button type="primary" |
| | | size="small" |
| | | @click="handleMarkAllAsRead" |
| | | :disabled="unreadCount === 0"> |
| | | 一键已读 |
| | | </el-button> |
| | | <el-button type="danger" |
| | | size="small" |
| | | plain |
| | | @click="handleClearAll"> |
| | | 清除 |
| | | </el-button> |
| | | </div> |
| | | </div> |
| | | <div class="notification-content"> |
| | | <el-tabs v-model="activeTab" |
| | |
| | | listMessage, |
| | | markAsRead, |
| | | markAllAsRead, |
| | | clearAllMessage, |
| | | confirmMessage, |
| | | getUnreadCount, |
| | | } from "@/api/system/message"; |
| | | import { ElMessage } from "element-plus"; |
| | | import { ElMessage, ElMessageBox } from "element-plus"; |
| | | import useUserStore from "@/store/modules/user"; |
| | | import { useRouter } from "vue-router"; |
| | | |
| | |
| | | } |
| | | }; |
| | | |
| | | // 清除全部消息 |
| | | const handleClearAll = async () => { |
| | | try { |
| | | await ElMessageBox.confirm("确认清除全部消息吗?清除后无法恢复。", "提示", { |
| | | confirmButtonText: "确定", |
| | | cancelButtonText: "取消", |
| | | type: "warning", |
| | | }); |
| | | } catch (error) { |
| | | // 取消清除 |
| | | return; |
| | | } |
| | | try { |
| | | const res = await clearAllMessage(); |
| | | if (res.code === 200) { |
| | | ElMessage.success("清除成功"); |
| | | unreadList.value = []; |
| | | readList.value = []; |
| | | total.value = 0; |
| | | pageNum.value = 1; |
| | | loadMessages(); |
| | | loadUnreadCount(); |
| | | } |
| | | } catch (error) { |
| | | console.error("清除消息失败:", error); |
| | | ElMessage.error("清除失败"); |
| | | } |
| | | }; |
| | | |
| | | // 分页大小改变 |
| | | const handleSizeChange = size => { |
| | | pageSize.value = size; |
| | |
| | | font-weight: 500; |
| | | color: var(--text-primary); |
| | | } |
| | | |
| | | .popover-actions { |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | } |
| | | |
| | | .notification-content { |