Merge branch 'dev_新疆_大罗素马铃薯new' of http://114.132.189.42:9002/r/product-inv...

huminmin

2026-06-01 a563ea879ef5fb6897e76d2df661e465dce2ab9b

 src/layout/components/NotificationCenter/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,386 @@
<template>
  <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>
    <div class="notification-content">
      <el-tabs v-model="activeTab"
               @tab-change="handleTabChange">
        <el-tab-pane :label="`未读(${unreadCount})`"
                     name="unread">
          <div v-if="unreadList.length === 0"
               class="empty-state">
            <el-empty description="暂无未读消息" />
          </div>
          <div v-else
               class="notification-list">
            <div v-for="item in unreadList"
                 :key="item.id"
                 class="notification-item">
              <div class="notification-icon">
                <el-icon :size="24"
                         color="#67C23A">
                  <Bell />
                </el-icon>
              </div>
              <div class="notification-content-wrapper">
                <div class="notification-title">{{ item.noticeTitle }}</div>
                <div class="notification-detail">{{ item.noticeContent }}</div>
                <div class="notification-time">{{ item.createTime }}</div>
              </div>
              <div class="notification-action">
                <el-button type="primary"
                           size="small"
                           @click="handleConfirm(item)">
                  ç¡®è®¤
                </el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已读"
                     name="read">
          <div v-if="readList.length === 0"
               class="empty-state">
            <el-empty description="暂无已读消息" />
          </div>
          <div v-else
               class="notification-list">
            <div v-for="item in readList"
                 :key="item.id"
                 class="notification-item read">
              <div class="notification-icon">
                <el-icon :size="24"
                         color="#909399">
                  <Bell />
                </el-icon>
              </div>
              <div class="notification-content-wrapper">
                <div class="notification-title">{{ item.noticeTitle }}</div>
                <div class="notification-detail">{{ item.noticeContent }}</div>
                <div class="notification-time">{{ item.createTime }}</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- åˆ†é¡µ -->
      <div class="pagination-wrapper"
           v-if="total > 0">
        <el-pagination v-model:current-page="pageNum"
                       v-model:page-size="pageSize"
                       :page-sizes="[10, 20, 50, 100]"
                       :total="total"
                       layout="prev, pager, next, sizes"
                       @size-change="handleSizeChange"
                       @current-change="handlePageChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
  import { Bell } from "@element-plus/icons-vue";
  import {
    listMessage,
    markAsRead,
    markAllAsRead,
    confirmMessage,
    getUnreadCount,
  } from "@/api/system/message";
  import { ElMessage } from "element-plus";
  import useUserStore from "@/store/modules/user";
  import { useRouter } from "vue-router";

  const userStore = useUserStore();
  const router = useRouter();
  const emit = defineEmits(["unreadCountChange"]);

  const activeTab = ref("unread");
  const unreadList = ref([]);
  const readList = ref([]);
  const unreadCount = ref(0);
  const total = ref(0);
  const pageNum = ref(1);
  const pageSize = ref(10);

  // åŠ è½½æ¶ˆæ¯åˆ—表
  const loadMessages = async () => {
    try {
      const consigneeId = userStore.id;
      if (!consigneeId) {
        console.warn("未获取到当前登录用户ID");
        return;
      }
      const params = {
        consigneeId: consigneeId,
        current: pageNum.value,
        size: pageSize.value,
        status: activeTab.value === "read" ? 1 : 0,
      };
      const res = await listMessage(params);
      if (res.code === 200) {
        if (activeTab.value === "unread") {
          unreadList.value = res.data.records || [];
        } else {
          readList.value = res.data.records || [];
        }
        total.value = res.data.total || 0;
      }
    } catch (error) {
      console.error("加载消息列表失败:", error);
    }
  };

  // åŠ è½½æœªè¯»æ•°é‡
  const loadUnreadCount = async () => {
    try {
      const consigneeId = userStore.id;
      if (!consigneeId) {
        console.warn("未获取到当前登录用户ID");
        return;
      }
      const res = await getUnreadCount(consigneeId);
      if (res.code === 200) {
        unreadCount.value = res.data || 0;
        emit("unreadCountChange", unreadCount.value);
      }
    } catch (error) {
      console.error("加载未读数量失败:", error);
    }
  };

  // æ ‡ç­¾é¡µåˆ‡æ¢
  const handleTabChange = tab => {
    pageNum.value = 1;
    loadMessages();
  };

  // ç¡®è®¤æ¶ˆæ¯
  const handleConfirm = async item => {
    try {
      console.log("item", item);
      const res = await confirmMessage(item.noticeId, 1);
      if (res.code === 200) {
        ElMessage.success("确认成功");
        // é‡æ–°åŠ è½½æ•°æ®
        loadMessages();
        loadUnreadCount();

        // æ ¹æ® jumpPath è¿›è¡Œé¡µé¢è·³è½¬
        if (item.jumpPath) {
          try {
            // è§£æž jumpPath，分离路径和查询参数
            const [path, queryString] = item.jumpPath.split("?");
            let query = {};

            if (queryString) {
              // è§£æžæŸ¥è¯¢å‚æ•°
              queryString.split("&").forEach(param => {
                const [key, value] = param.split("=");
                if (key && value) {
                  query[key] = decodeURIComponent(value);
                }
              });
            }

            // è·³è½¬åˆ°æŒ‡å®šé¡µé¢
            router.push({
              path: path,
              query: query,
            });
          } catch (error) {
            console.error("页面跳转失败:", error);
          }
        }
      }
    } catch (error) {
      console.error("确认消息失败:", error);
      ElMessage.error("确认失败");
    }
  };

  // ä¸€é”®å·²è¯»
  const handleMarkAllAsRead = async () => {
    try {
      const res = await markAllAsRead();
      if (res.code === 200) {
        ElMessage.success("已全部标记为已读");
        loadMessages();
        loadUnreadCount();
      }
    } catch (error) {
      console.error("一键已读失败:", error);
      ElMessage.error("操作失败");
    }
  };

  // åˆ†é¡µå¤§å°æ”¹å˜
  const handleSizeChange = size => {
    pageSize.value = size;
    pageNum.value = 1;
    loadMessages();
  };

  // é¡µç æ”¹å˜
  const handlePageChange = page => {
    pageNum.value = page;
    loadMessages();
  };

  // ç»„件挂载时加载未读数量
  onMounted(() => {
    loadUnreadCount();
  });

  // ç›‘听父组件传递的 visible çŠ¶æ€ï¼ˆé€šè¿‡ watch åœ¨ Navbar ä¸­å¤„理）
  // è¿™é‡Œåªè´Ÿè´£æ•°æ®åŠ è½½ï¼Œä¸æŽ§åˆ¶æ˜¾ç¤º

  // æš´éœ²æ–¹æ³•ä¾›å¤–部调用
  defineExpose({
    loadUnreadCount,
    loadMessages,
  });
</script>

<style lang="scss" scoped>
  .notification-popover-content {
    display: flex;
    flex-direction: column;
    width: 500px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.92);
  }

  .popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--surface-border);

    .popover-title {
      font-size: 18px;
      font-weight: 500;
      color: var(--text-primary);
    }
  }

  .notification-content {
    max-height: 60vh;
    display: flex;
    flex-direction: column;

    :deep(.el-tabs) {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;

      .el-tabs__header {
        margin-bottom: 0;
        flex-shrink: 0;
        padding: 0;
      }

      .el-tabs__content {
        flex: 1;
        overflow-y: auto;
        min-height: 0;
        padding-top: 16px;
      }

      .el-tab-pane {
        height: 100%;
      }
    }
  }

  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    padding: 40px 0;
  }

  .notification-list {
    .notification-item {
      display: flex;
      padding: 12px 0;
      border-bottom: 1px solid rgba(148, 163, 184, 0.18);
      transition: background-color 0.3s;

      &:hover {
        background-color: #f8fbff;
      }

      &.read {
        opacity: 0.7;
      }

      .notification-icon {
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(59, 130, 246, 0.12);
        border-radius: 50%;
        margin-right: 12px;
      }

      .notification-content-wrapper {
        flex: 1;
        min-width: 0;

        .notification-title {
          font-size: 14px;
          font-weight: 500;
          color: var(--text-primary);
          margin-bottom: 8px;
        }

        .notification-detail {
          font-size: 13px;
          color: var(--text-secondary);
          line-height: 1.5;
          margin-bottom: 8px;
          word-break: break-all;
        }

        .notification-time {
          font-size: 12px;
          color: var(--text-tertiary);
        }
      }

      .notification-action {
        flex-shrink: 0;
        margin-left: 12px;
        display: flex;
        align-items: center;
      }
    }
  }

  .pagination-wrapper {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--surface-border);
    display: flex;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
</style>