no commit message

pgweb/src/components/menu/nxMenu.vue

@@ -3,27 +3,85 @@
     <div style="height: 100%;">
       <!-- 如果有子菜单，则渲染子菜单 -->
       <el-submenu style="height: 100%;" v-if="item.children && item.children.length > 0" :index="item.routerName" >
-        <template slot="title">          
+        <template slot="title">
           {{ item.title  }}
+          <!-- 一级菜单【回价】显示无数量红点 -->
+          <span v-if="isHuiJiaMenu && unreturnedCount >= 1" class="push-dot-badge"></span>
+          <!-- 二级菜单【未回价】显示带数量红点 -->
+          <span v-else-if="isUnreturnedPriceMenu && unreturnedCount > 0" class="push-value-badge">{{ unreturnedCount }}</span>
         </template>
         <!-- 递归调用MenuItem组件 -->
         <menu-item v-for="(child, index) in item.children" :key="index" :item="child" class="menu-custom"></menu-item>
       </el-submenu>
-      
+
       <!-- 如果没有子菜单，则渲染菜单项 -->
       <el-menu-item v-else :index="item.routerName" class="menu-custom">
         <!-- <i class="el-icon-document"></i> -->
         {{ item.title }}
+        <!-- 三级菜单【未回价列表】显示带数量红点 -->
+        <span v-if="isUnreturnedPriceListMenu && unreturnedCount > 0" class="push-value-badge">{{ unreturnedCount }}</span>
       </el-menu-item>
     </div>
   </template>
-  
+
   <script>
   import "@/styles/globalSetting.less";
+  import { EventBus } from '@/libs/eventBus'
+  import socket from '@/libs/socket'
   export default {
     name: 'MenuItem',
     props: {
       item: Object
+    },
+    data() {
+      return {
+        unreturnedCount: 0
+      }
+    },
+    computed: {
+      // 判断是否是一级菜单【回价项目】
+      isHuiJiaMenu() {
+        const isMatch = this.item.title === '回价项目' || this.item.routerName === 'priceReturn'
+        return isMatch
+      },
+      // 判断是否是二级菜单【未回价】
+      isUnreturnedPriceMenu() {
+        const isMatch = this.item.path === '/priceReturn/unreturnedPrice' || this.item.title === '未回价' || this.item.routerName === 'unreturnedPrice'
+        return isMatch
+      },
+      // 判断是否是三级菜单【未回价列表】
+      isUnreturnedPriceListMenu() {
+        const isMatch = this.item.title === '未回价列表'
+        return isMatch
+      }
+    },
+    mounted() {
+      console.log('菜单组件mounted - item:', this.item)
+
+      // 保存回调引用用于销毁时移除
+      this.eventBusCallback = (count) => {
+        this.unreturnedCount = count
+        console.log('EventBus收到未回价数量更新:', count, '当前item:', this.item.name || this.item.title)
+      }
+
+      this.socketCallback = (data) => {
+        if (data && data.count !== undefined) {
+          // 使用Vue.set确保响应式更新
+          this.$set(this, 'unreturnedCount', data.count)
+          console.log('WebSocket收到未回价数量更新:', data.count, '当前item:', this.item.name || this.item.title)
+        }
+      }
+
+      // 监听EventBus事件（页面初始化时）
+      EventBus.$on('updateUnreturnedCount', this.eventBusCallback)
+
+      // 监听WebSocket推送的未回价数量更新
+      socket.on('updateUnreturnedCount', this.socketCallback)
+    },
+    beforeDestroy() {
+      // 移除监听
+      EventBus.$off('updateUnreturnedCount', this.eventBusCallback)
+      socket.off('updateUnreturnedCount', this.socketCallback)
     }
   }
   </script>
@@ -37,4 +95,26 @@
   :deep .el-menu-item.is-active.menu-custom {
     color: var(--main-color);
   }
-</style>
+  .push-value-badge {
+    display: inline-block;
+    min-width: 20px;
+    height: 20px;
+    line-height: 20px;
+    padding: 0 6px;
+    font-size: 12px;
+    color: #fff;
+    background-color: #f56c6c;
+    border-radius: 10px;
+    margin-left: 8px;
+    text-align: center;
+  }
+  .push-dot-badge {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background-color: #f56c6c;
+    border-radius: 50%;
+    margin-left: 8px;
+    margin-top: 4px;
+  }
+</style>