|
|
@@ -0,0 +1,373 @@
|
|
|
+<template>
|
|
|
+ <div class="message-container">
|
|
|
+ <div class="message-header">
|
|
|
+ <div class="title">消息通知</div>
|
|
|
+ <el-button @click="handleReadAll">全部已读</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 顶部页签 -->
|
|
|
+ <el-tabs v-model="activeTab" @tab-click="handleTabClick">
|
|
|
+ <el-tab-pane label="全部消息" name="all"></el-tab-pane>
|
|
|
+ <el-tab-pane label="未读消息" name="unread"></el-tab-pane>
|
|
|
+ <el-tab-pane label="拒单通知" name="reject"></el-tab-pane>
|
|
|
+ <el-tab-pane label="异常上报" name="anomaly"></el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
+ <!-- 消息列表 -->
|
|
|
+ <div class="message-list" v-loading="loading">
|
|
|
+ <template v-if="noticeList && noticeList.length > 0">
|
|
|
+ <div
|
|
|
+ class="message-item"
|
|
|
+ v-for="item in noticeList"
|
|
|
+ :key="item.id"
|
|
|
+ :class="{'is-unread': !(item.readFlag || item.readFlag === '1' || item.readFlag === 1)}"
|
|
|
+ @click="handleDetail(item)"
|
|
|
+ >
|
|
|
+ <el-badge
|
|
|
+ :is-dot="!(item.readFlag || item.readFlag === '1' || item.readFlag === 1)"
|
|
|
+ class="icon-badge top-left-dot"
|
|
|
+ >
|
|
|
+ <div class="item-icon" :style="{ backgroundColor: getIconConfig(item).bgColor }">
|
|
|
+ <svg-icon :icon-class="getIconConfig(item).icon" />
|
|
|
+ </div>
|
|
|
+ </el-badge>
|
|
|
+
|
|
|
+ <div class="item-content">
|
|
|
+ <div class="item-title">{{ item.title }}</div>
|
|
|
+ <div class="item-desc">{{ item.content }}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="item-time">
|
|
|
+ {{ parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}') }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <el-empty v-else description="暂无消息数据" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="pagination-container" v-show="total > 0">
|
|
|
+ <el-pagination
|
|
|
+ v-model:current-page="queryParams.pageNum"
|
|
|
+ v-model:page-size="queryParams.pageSize"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ @current-change="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 消息详情对话框 -->
|
|
|
+ <el-dialog title="消息详情" v-model="detailDialog.open" width="600px" append-to-body destroy-on-close>
|
|
|
+ <div class="dialog-content-wrapper">
|
|
|
+ <div class="dialog-header">
|
|
|
+ <el-tag :type="detailDialog.tagType" effect="plain" size="small">{{ detailDialog.tagLabel }}</el-tag>
|
|
|
+ <span class="dialog-time">{{ detailDialog.createTime }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-main-title">{{ detailDialog.title }}</div>
|
|
|
+ <div class="dialog-desc-block">
|
|
|
+ {{ detailDialog.content }}
|
|
|
+ </div>
|
|
|
+ <div class="dialog-action-link" @click="handleProcess">
|
|
|
+ <el-link type="primary" :underline="false">前往处理 >></el-link>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button @click="detailDialog.open = false">关闭</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref, reactive, toRefs, getCurrentInstance, ComponentInternalInstance } from 'vue';
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { listMyNotice, readNotice, readAllNotice } from '@/api/system/notice';
|
|
|
+import { NoticeQuery, NoticeVO } from '@/api/system/notice/types';
|
|
|
+
|
|
|
+const router = useRouter();
|
|
|
+// eslint-disable-next-line camelcase
|
|
|
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
+
|
|
|
+const activeTab = ref('all');
|
|
|
+const noticeList = ref<NoticeVO[]>([]);
|
|
|
+const loading = ref(true);
|
|
|
+const total = ref(0);
|
|
|
+
|
|
|
+const detailDialog = reactive({
|
|
|
+ open: false,
|
|
|
+ title: '',
|
|
|
+ content: '',
|
|
|
+ createTime: '',
|
|
|
+ tagLabel: '',
|
|
|
+ tagType: '' as any
|
|
|
+});
|
|
|
+
|
|
|
+const data = reactive({
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ title: undefined,
|
|
|
+ type: undefined,
|
|
|
+ readFlag: undefined
|
|
|
+ } as NoticeQuery
|
|
|
+});
|
|
|
+
|
|
|
+const { queryParams } = toRefs(data);
|
|
|
+
|
|
|
+/** 获取图标和颜色配置 */
|
|
|
+const getIconConfig = (item: any) => {
|
|
|
+ const title = item.title || '';
|
|
|
+ if (title.includes('异常')) return { icon: 'bug', bgColor: '#f56c6c' };
|
|
|
+ if (title.includes('拒单')) return { icon: 'message-center', bgColor: '#f56c6c' };
|
|
|
+ if (title.includes('入驻') || title.includes('申请')) return { icon: 'user', bgColor: '#e6a23c' };
|
|
|
+ if (title.includes('派单') || title.includes('新订单')) return { icon: 'guide', bgColor: '#409eff' };
|
|
|
+ if (title.includes('完成')) return { icon: 'finish', bgColor: '#67c23a' };
|
|
|
+ return { icon: 'message-center', bgColor: '#909399' };
|
|
|
+};
|
|
|
+
|
|
|
+/** 查询我的消息列表 */
|
|
|
+function getList() {
|
|
|
+ loading.value = true;
|
|
|
+ listMyNotice(queryParams.value).then((response: any) => {
|
|
|
+ noticeList.value = response.rows;
|
|
|
+ total.value = response.total;
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+/** 切换页签 */
|
|
|
+function handleTabClick(tab: any) {
|
|
|
+ queryParams.value.pageNum = 1;
|
|
|
+ queryParams.value.type = undefined;
|
|
|
+ queryParams.value.title = undefined;
|
|
|
+ queryParams.value.readFlag = undefined;
|
|
|
+
|
|
|
+ const paneName = tab.paneName as string;
|
|
|
+ if (paneName === 'unread') {
|
|
|
+ queryParams.value.readFlag = false as any;
|
|
|
+ } else if (paneName === 'reject') {
|
|
|
+ queryParams.value.title = '拒单' as any;
|
|
|
+ } else if (paneName === 'anomaly') {
|
|
|
+ queryParams.value.title = '异常' as any;
|
|
|
+ }
|
|
|
+
|
|
|
+ getList();
|
|
|
+}
|
|
|
+
|
|
|
+/** 消息详情点击与设为已读 */
|
|
|
+function handleDetail(item: NoticeVO) {
|
|
|
+ const title = item.title || '';
|
|
|
+ detailDialog.title = title;
|
|
|
+ detailDialog.content = item.content || '';
|
|
|
+ detailDialog.createTime = proxy?.parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}') || '';
|
|
|
+
|
|
|
+ if (title.includes('异常')) {
|
|
|
+ detailDialog.tagLabel = '异常上报';
|
|
|
+ detailDialog.tagType = 'danger';
|
|
|
+ } else if (title.includes('拒单')) {
|
|
|
+ detailDialog.tagLabel = '拒单通知';
|
|
|
+ detailDialog.tagType = 'danger';
|
|
|
+ } else if (title.includes('入驻') || title.includes('申请')) {
|
|
|
+ detailDialog.tagLabel = '自主注册审核';
|
|
|
+ detailDialog.tagType = 'warning';
|
|
|
+ } else if (title.includes('派单') || title.includes('新订单')) {
|
|
|
+ detailDialog.tagLabel = '新订单';
|
|
|
+ detailDialog.tagType = 'primary';
|
|
|
+ } else if (title.includes('完成')) {
|
|
|
+ detailDialog.tagLabel = '服务完成';
|
|
|
+ detailDialog.tagType = 'success';
|
|
|
+ } else {
|
|
|
+ detailDialog.tagLabel = '系统消息';
|
|
|
+ detailDialog.tagType = 'info';
|
|
|
+ }
|
|
|
+
|
|
|
+ detailDialog.open = true;
|
|
|
+
|
|
|
+ // 如果状态未读，发请求
|
|
|
+ if (!(item.readFlag || item.readFlag === '1' || item.readFlag === 1)) {
|
|
|
+ readNotice(item.id as number).then(() => {
|
|
|
+ item.readFlag = true as any; // 本地变更为已读
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/** 前往处理 */
|
|
|
+function handleProcess() {
|
|
|
+ detailDialog.open = false;
|
|
|
+ if (detailDialog.title.includes('拒单') || detailDialog.title.includes('派单') || detailDialog.title.includes('异常')) {
|
|
|
+ router.push({ path: '/order/orderList' });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/** 全部标为已读操作 */
|
|
|
+function handleReadAll() {
|
|
|
+ proxy?.$modal.confirm('是否确认将全部未读消息标记为已读？').then(function () {
|
|
|
+ return readAllNotice();
|
|
|
+ }).then(() => {
|
|
|
+ proxy?.$modal.msgSuccess('全部已读操作成功');
|
|
|
+ getList();
|
|
|
+ }).catch(() => {});
|
|
|
+}
|
|
|
+
|
|
|
+getList();
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.message-container {
|
|
|
+ padding: 24px;
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-shadow: 0 1px 3px rgba(0,0,0,0.05);
|
|
|
+
|
|
|
+ .message-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-tabs__nav-wrap::after) {
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ height: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-list {
|
|
|
+ min-height: 400px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .message-item {
|
|
|
+ display: flex;
|
|
|
+ padding: 20px 24px;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: #fff;
|
|
|
+ align-items: flex-start;
|
|
|
+ transition: background-color 0.3s ease;
|
|
|
+
|
|
|
+ &.is-unread {
|
|
|
+ background-color: #f3faee;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #f5f7fa;
|
|
|
+ &.is-unread {
|
|
|
+ background-color: #ecf3e5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-badge.top-left-dot {
|
|
|
+ margin-right: 20px;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ :deep(.el-badge__content.is-fixed.is-dot) {
|
|
|
+ right: auto;
|
|
|
+ left: 0;
|
|
|
+ transform: translateY(-30%) translateX(-30%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-icon {
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .svg-icon {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-content {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .item-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-time {
|
|
|
+ width: 150px;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: monospace;
|
|
|
+ color: #909399;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pagination-container {
|
|
|
+ margin-top: 24px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-content-wrapper {
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ .dialog-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .dialog-time {
|
|
|
+ font-size: 13px;
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-main-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #303133;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-desc-block {
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ padding: 16px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ line-height: 1.6;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-action-link {
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ .el-link {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
