备货单 二手车添加vin 调整备货单显示 文件预览问题处理

src/components/custom/files_previews.vue

@@ -49,23 +49,34 @@
 
       <template v-else>
         <!-- IMAGE -->
-        <div v-if="fileType === 'image'" class="viewer-wrap">
+        <div v-if="fileType === 'image'" class="viewer-wrap" :key="`image-${currentFile.url}`">
           <div class="viewer" :style="viewerStyle">
-            <img :src="currentFile.url" @error="onError" @load="onLoadImage" />
+            <img
+              :src="currentFile.url"
+              :key="currentFile.url"
+              @error="onError"
+              @load="onLoadImage"
+            />
           </div>
         </div>
 
         <!-- PDF -->
-        <div v-else-if="fileType === 'pdf'" class="viewer-wrap">
+        <div v-else-if="fileType === 'pdf'" class="viewer-wrap" :key="`pdf-${currentFile.url}`">
           <div class="viewer" :style="viewerStyle">
             <!-- 使用 object / iframe 作为预览，支持大多数现代浏览器 -->
             <object
+              :key="`pdf-obj-${currentFile.url}`"
               :data="appendPdfParams(currentFile.url)"
               type="application/pdf"
               width="100%"
               height="100%"
             >
-              <iframe :src="appendPdfParams(currentFile.url)" width="100%" height="100%"></iframe>
+              <iframe
+                :key="`pdf-iframe-${currentFile.url}`"
+                :src="appendPdfParams(currentFile.url)"
+                width="100%"
+                height="100%"
+              ></iframe>
               <div class="fallback"
                 >无法在浏览器内预览 PDF。<a :href="currentFile.url" target="_blank"
                   >点击打开</a
@@ -76,10 +87,15 @@
         </div>
 
         <!-- OFFICE (Word, Excel, PPT) 使用微软 Office 在线查看器，仅当文件对外可访问时有效 -->
-        <div v-else-if="fileType === 'office'" class="viewer-wrap">
+        <div
+          v-else-if="fileType === 'office'"
+          class="viewer-wrap"
+          :key="`office-${currentFile.url}`"
+        >
           <div class="viewer" :style="viewerStyle">
             <template v-if="isHttpUrl(currentFile.url)">
               <iframe
+                :key="`office-iframe-${currentFile.url}`"
                 :src="officeViewerUrl(currentFile.url)"
                 width="100%"
                 height="100%"
@@ -99,7 +115,7 @@
         </div>
 
         <!-- 文本 / 代码 -->
-        <div v-else-if="fileType === 'text'" class="viewer-wrap">
+        <div v-else-if="fileType === 'text'" class="viewer-wrap" :key="`text-${currentFile.url}`">
           <div class="viewer text-viewer" :style="viewerStyle">
             <pre v-if="textContent !== null">{{ textContent }}</pre>
             <div v-else class="loading">正在加载文本内容...</div>
@@ -108,7 +124,7 @@
         </div>
 
         <!-- 未知 -->
-        <div v-else class="viewer-wrap unknown-viewer">
+        <div v-else class="viewer-wrap unknown-viewer" :key="`unknown-${currentFile.url}`">
           <div class="viewer" :style="viewerStyle">
             <div class="unknown">
               <p>无法在线预览此类型文件。</p>
@@ -159,6 +175,25 @@
   const textContent = ref<string | null>(null)
   const textError = ref<string | null>(null)
 
+  // --- Computed ---
+  const currentFile = computed((): FileItem | null => {
+    if (props.files && props.files.length > 0) {
+      const idx = Math.min(Math.max(0, currentIndex.value), props.files.length - 1)
+      return props.files[idx]
+    }
+    return props.file ?? null
+  })
+
+  function resetViewState(clearText = true) {
+    zoom.value = 1
+    rotate.value = 0
+    if (clearText) {
+      textContent.value = null
+      textError.value = null
+    }
+  }
+
+  // --- Watchers ---
   watch(
     () => props.modelValue,
     (v) => (visibleLocal.value = v)
@@ -188,31 +223,27 @@
     loadTextIfNeeded()
   })
 
-  function resetViewState(clearText = true) {
-    zoom.value = 1
-    rotate.value = 0
-    if (clearText) {
-      textContent.value = null
-      textError.value = null
+  // 监听当前文件变化，确保文件切换时正确更新
+  watch(
+    () => currentFile.value?.url,
+    (newUrl, oldUrl) => {
+      if (newUrl !== oldUrl && newUrl) {
+        resetViewState()
+        loadTextIfNeeded()
+      }
     }
-  }
-
-  const currentFile = computed((): FileItem | null => {
-    if (props.files && props.files.length > 0) {
-      const idx = Math.min(Math.max(0, currentIndex.value), props.files.length - 1)
-      return props.files[idx]
-    }
-    return props.file ?? null
-  })
+  )
 
   const hasNext = computed(
     () => !!(props.files && currentIndex.value < (props.files?.length ?? 0) - 1)
   )
   const hasPrev = computed(() => !!(props.files && currentIndex.value > 0))
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function prevFile() {
     if (hasPrev.value) currentIndex.value -= 1
   }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function nextFile() {
     if (hasNext.value) currentIndex.value += 1
   }
@@ -292,23 +323,29 @@
     } as Record<string, string>
   })
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function zoomIn() {
     zoom.value = Math.min(zoom.value + 0.25, 4)
   }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function zoomOut() {
     zoom.value = Math.max(zoom.value - 0.25, 0.25)
   }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function resetZoom() {
     zoom.value = 1
     rotate.value = 0
   }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function rotateLeft() {
     rotate.value = (rotate.value - 90) % 360
   }
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function rotateRight() {
     rotate.value = (rotate.value + 90) % 360
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function toggleFullscreen() {
     isFullscreen.value = !isFullscreen.value
   }
@@ -339,6 +376,7 @@
     // 可以在这里获取自然尺寸进行布局优化
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function downloadCurrent() {
     if (!currentFile.value) return
     // 打开下载链接（浏览器通常会下载）