修改订单查询的备注悬浮时多次请求的问题

src/views/recycleOrder/components/order-page-all.vue

@@ -62,8 +62,8 @@
               </el-icon>
             </template>
             <orderTimeline
-              :orderId="showOrderId"
               title="备注历史记录"
+              ref="remarkPopoverRef"
             ></orderTimeline>
           </el-popover>
         </template>
@@ -299,7 +299,7 @@
 </template>
 
 <script setup>
-  import { ref, getCurrentInstance } from 'vue';
+  import { ref, getCurrentInstance, nextTick } from 'vue';
   import { ElMessageBox } from 'element-plus/es';
   import { EleMessage } from 'ele-admin-plus/es';
   import { DownloadOutlined } from '@/components/icons';
@@ -514,8 +514,16 @@
 
   //备注弹窗显示
   const showOrderId = ref();
+  const remarkPopoverRef = ref(null);
   function handleShowPopover(row) {
-    showOrderId.value = row.orderId;
+    nextTick(() => {
+      console.log(remarkPopoverRef.value, 'row.orderId');
+      remarkPopoverRef.value?.getRemarks(row.orderId);
+    });
+
+    if (showOrderId.value !== row.orderId) {
+      showOrderId.value = row.orderId;
+    }
   }
 
   //弹窗确认操作

src/views/recycleOrder/components/order-timeline.vue

@@ -42,17 +42,31 @@
 
   const records = ref([]);
   const loading = ref(false);
+  // 添加缓存来存储已获取的数据
+  const dataCache = ref(new Map());
+  // 跟踪上一次请求的订单ID，防止重复请求
+  const lastRequestedOrderId = ref('');
 
   //获取备注
-  const getRemarks = async () => {
-    if (!props.orderId || loading.value) return;
+  const getRemarks = async (orderId) => {
+    if (!orderId || loading.value) return;
+
+    // 如果缓存中已有该数据，直接使用缓存
+    if (dataCache.value.has(orderId)) {
+      records.value = dataCache.value.get(orderId);
+      return;
+    }
+
+    // 防止对同一订单ID重复请求
+    if (lastRequestedOrderId.value === orderId) return;
+    lastRequestedOrderId.value = orderId;
 
     loading.value = true;
     try {
-      const res = await request.get(
-        `/order/remark/list?orderId=${props.orderId}`
-      );
+      const res = await request.get(`/order/remark/list?orderId=${orderId}`);
       records.value = res.data.data;
+      // 缓存结果
+      dataCache.value.set(orderId, res.data.data);
     } catch (error) {
       console.error('Failed to fetch remarks:', error);
     } finally {
@@ -60,14 +74,7 @@
     }
   };
 
-  watch(
-    () => props.orderId,
-    (newVal, oldVal) => {
-      if (newVal && newVal !== oldVal) {
-        records.value = [];
-        getRemarks();
-      }
-    },
-    { immediate: true }
-  );
+  defineExpose({
+    getRemarks
+  });
 </script>