vue2-client 1.22.15 → 1.22.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.22.15",
+  "version": "1.22.16",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/FileImage/FileImageGroup.vue

@@ -99,7 +99,9 @@ export default {
     emptyText: { type: String, default: '暂无图片' },
     columns: { type: Number, default: 3, validator: v => v >= 1 && v <= 6 },
     imageSize: { type: [String, Number], default: 90 },
-    gap: { type: [String, Number], default: 10 }
+    gap: { type: [String, Number], default: 10 },
+    /** 为 true 时禁止内部预览弹窗；点击图片触发 image-click 事件，由父组件接管预览逻辑 */
+    noPreview: { type: Boolean, default: false }
   },
   data () {
     return {
@@ -186,7 +188,13 @@ export default {
       this.galleryVisible = false
     },
 
+    /** 点击图片：noPreview 模式下仅抛事件，由父组件处理预览；否则打开内部画廊 */
     handleImageClick (index) {
+      if (this.noPreview) {
+        const allUrls = this.fileIds.map((fd, i) => this.urlsMap[i] || (fd && typeof fd === 'object' && fd.url) || '')
+        this.$emit('image-click', { index, url: allUrls[index] || '', fileData: this.fileIds[index], allUrls })
+        return
+      }
       this.currentIndex = index
       this.galleryVisible = true
     },
@@ -201,6 +209,11 @@ export default {
 
     nextImage () {
       if (this.currentIndex < this.fileIds.length - 1) this.currentIndex++
+    },
+
+    /** 返回当前所有已解析的图片 URL 数组（外部通过此方法拉取，而非事件推） */
+    getAllResolvedUrls () {
+      return this.fileIds.map((fd, i) => this.urlsMap[i] || (fd && typeof fd === 'object' && fd.url) || '')
     }
   }
 }

package/src/base-client/components/common/ImagePreviewModal/ImagePreviewModal.vue

@@ -40,6 +40,7 @@
     <!-- 底部工具栏 -->
     <div class="preview-toolbar bottom-toolbar" @wheel.prevent.stop>
       <div class="toolbar-content">
+        <slot name="toolbarPrepend" />
         <a-tooltip title="放大">
           <a-button type="primary" icon="zoom-in" @click="zoomIn" size="small" class="toolbar-btn" />
         </a-tooltip>
@@ -71,6 +72,9 @@
         </a-tooltip>
       </div>
     </div>
+    <div class="bottom-slot">
+      <slot name="thumbnailStrip" />
+    </div>
   </div>
 </template>
 
@@ -305,10 +309,10 @@ export default {
     // 鼠标滚轮缩放（居中缩放，与按钮行为一致）
     handleWheel(event) {
       event.preventDefault()
-      
+
       const delta = event.deltaY > 0 ? -ZOOM_CONFIG.STEP : ZOOM_CONFIG.STEP
       const newScale = Math.min(Math.max(ZOOM_CONFIG.MIN, this.scale + delta), ZOOM_CONFIG.MAX)
-      
+
       // 如果缩放值没有变化，直接返回
       if (newScale === this.scale) return
 
@@ -486,11 +490,19 @@ export default {
     margin-bottom: 8px;
   }
 }
-
+.bottom-slot{
+  position: fixed;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  z-index: 1011;
+  display: flex;
+  justify-content: center;
+}
 // 底部工具栏样式
 .bottom-toolbar {
   position: fixed;
-  bottom: 40px;
+  bottom: 60px;
   left: 0;
   right: 0;
   z-index: 1011;

package/src/base-client/components/common/XInspectionDetailDrawer/components/AiDeviceStatus.vue

@@ -54,6 +54,9 @@
                       :columns="2"
                       :image-size="60"
                       :gap="8"
+                      :no-preview="true"
+                      @image-click="handleFileImageClick"
+                      :ref="el => registerFig(el)"
                     />
                   </div>
                   <div v-else class="violation-images-empty"></div>
@@ -102,6 +105,9 @@
                       :columns="2"
                       :image-size="60"
                       :gap="8"
+                      :no-preview="true"
+                      @image-click="handleFileImageClick"
+                      :ref="el => registerFig(el)"
                     />
                     <span v-else></span></div>
                   <div class="inconsistent-item">
@@ -164,6 +170,9 @@
                       :columns="2"
                       :image-size="60"
                       :gap="8"
+                      :no-preview="true"
+                      @image-click="handleFileImageClick"
+                      :ref="el => registerFig(el)"
                     />
                     <span v-else></span></div>
                   <div class="danger-item">{{ item.aiVal }}</div>
@@ -222,6 +231,20 @@ export default {
       return  unmatched + add
     },
   },
+  data () {
+    return {
+      /** 储存本组件内所有 FileImageGroup 实例（通过函数 ref 注册） */
+      figInstances: []
+    }
+  },
+  watch: {
+    /** 设备列表变化时清空实例缓存，重新渲染时会重新注册 */
+    deviceList: {
+      handler () { this.figInstances = [] },
+      deep: true,
+      immediate: true
+    }
+  },
   methods: {
 
     /**
@@ -287,12 +310,36 @@ export default {
         : []
     },
 
-    /**
-     * 预览隐患照片
-     */
-    handlePreviewHazardPhotos(hazardPhotos, currentIndex = 0) {
-      const photos = hazardPhotos.map(photo => photo.url)
-      this.$emit('preview-photos', photos, currentIndex)
+    /** 通过函数 ref 收集 FileImageGroup 实例 */
+    registerFig (fig) {
+      if (fig && this.figInstances.indexOf(fig) === -1) {
+        this.figInstances.push(fig)
+      }
+    },
+
+    /** 收集本组件内所有 FileImageGroup 的已解析图片 URL，去重后返回 */
+    _collectAllUrls () {
+      const urls = []
+      this.figInstances.forEach(fig => {
+        if (fig && fig.getAllResolvedUrls) {
+          fig.getAllResolvedUrls().forEach(u => { if (u && urls.indexOf(u) === -1) urls.push(u) })
+        }
+      })
+      return urls
+    },
+
+    /** 父组件通过 ref 调用的公共方法：获取本组件全部图片 URL */
+    getAllPhotoUrls () {
+      return this._collectAllUrls()
+    },
+
+    /** 点击 FileImageGroup 图片：收集全组件 URL 抛给父组件统一预览 */
+    handleFileImageClick({ index, url }) {
+      const urls = this._collectAllUrls()
+      if (urls.length > 0) {
+        const globalIdx = url ? urls.indexOf(url) : Math.min(index, urls.length - 1)
+        this.$emit('preview-photos', urls, globalIdx >= 0 ? globalIdx : 0)
+      }
     }
   }
 }

package/src/base-client/components/common/XInspectionDetailDrawer/components/CheckItems.vue

@@ -123,27 +123,14 @@
       </div>
     </a-card>
 
-    <!-- 图片全屏预览 -->
-    <image-preview-modal
-      v-if="previewVisible"
-      :visible="previewVisible"
-      :image-url="currentPreviewUrl"
-      :file-id="currentPreviewUrl ? null : currentPreviewFileId"
-      :service-name="currentPreviewUrl ? '' : injectedServiceName"
-      :image-name="`照片${previewIndex + 1}`"
-      :append-to-body="true"
-      @close="previewVisible = false"
-    />
   </div>
 </template>
 
 <script>
-import ImagePreviewModal from '@vue2-client/base-client/components/common/ImagePreviewModal/ImagePreviewModal.vue'
 import { createFileImageService } from '@vue2-client/utils/fileImageService'
 
 export default {
   name: 'CheckItems',
-  components: { ImagePreviewModal },
   inject: {
     serviceName: { default: '' }
   },
@@ -159,9 +146,6 @@ export default {
   },
   data () {
     return {
-      previewVisible: false,
-      previewIndex: 0,
-      previewPhotos: [],
       thumbUrlMap: {},
       thumbStateMap: {}
     }
@@ -169,22 +153,6 @@ export default {
   computed: {
     injectedServiceName () {
       return this.serviceName || ''
-    },
-    currentPhoto () {
-      return this.previewPhotos[this.previewIndex] || null
-    },
-    currentPreviewUrl () {
-      if (!this.currentPhoto) return ''
-      if (this.currentPhoto.url) return this.currentPhoto.url
-      if (this.currentPhoto.fileId) {
-        const key = this.thumbCacheKey(this.currentPhoto)
-        return this.thumbUrlMap[key] || ''
-      }
-      return ''
-    },
-    currentPreviewFileId () {
-      if (!this.currentPhoto) return null
-      return this.currentPhoto.fileId || null
     }
   },
   watch: {
@@ -213,6 +181,30 @@ export default {
       })
     },
 
+    /** 父组件通过 ref 调用的公共方法：获取本组件全部图片 URL（含已解析的 fileId 缩略图） */
+    getAllPhotoUrls () {
+      const urls = []
+      if (!this.checkItems) return urls
+      this.checkItems.forEach(category => {
+        if (!category.items) return
+        category.items.forEach(item => {
+          if (item.photos) {
+            item.photos.forEach(p => {
+              const u = p.url || this.thumbUrlMap[this.thumbCacheKey(p)]
+              if (u && urls.indexOf(u) === -1) urls.push(u)
+            })
+          }
+          if (this.isResultPhotos(item.result)) {
+            this.parseResultPhotos(item.result).forEach(p => {
+              const u = p.url
+              if (u && urls.indexOf(u) === -1) urls.push(u)
+            })
+          }
+        })
+      })
+      return urls
+    },
+
     /**
      * 缩略图缓存必须用字符串键。若用对象作 fileId，JS 会统一变成 "[object Object]"，导致所有缩略图共用一张图。
      * 优先使用业务侧已生成的 photo.id，其次从 fileId 上解析 id。
@@ -281,9 +273,10 @@ export default {
      * 打开预览
      */
     openPreview (photos, index) {
-      this.previewPhotos = photos
-      this.previewIndex = index
-      this.previewVisible = true
+      const urls = photos.map(p => p.url || this.thumbUrlMap[this.thumbCacheKey(p)] || '').filter(Boolean)
+      if (urls.length > 0) {
+        this.$emit('preview-photos', urls, Math.min(index, urls.length - 1))
+      }
     },
 
     /**

package/src/base-client/components/common/XInspectionDetailDrawer/components/DeviceStatus.vue

@@ -59,6 +59,9 @@
                       :image-size="60"
                       :gap="8"
                       :alt-prefix="field.label + '图片'"
+                      :no-preview="true"
+                      @image-click="handleFileImageClick"
+                      :ref="el => registerFig(el)"
                     />
                   </div>
                   <span v-else class="tag-value">{{ formatFieldValue(field) }}</span>
@@ -93,10 +96,12 @@
                 :gap="8"
                 :alt-prefix="device.name + '照片'"
                 empty-text="暂无设备照片"
+                :no-preview="true"
+                @image-click="handleFileImageClick"
+                :ref="el => registerFig(el)"
               />
             </div>
-
-            <!-- 隐患照片 -->
+            <!-- 隐患照片 -->
             <div class="hazard-photos-section" v-if="device.hazardPhotos && device.hazardPhotos.length > 0">
               <div class="section-title">隐患照片</div>
               <!-- 隐患照片使用FileImageGroup -->
@@ -109,6 +114,9 @@
                 :gap="8"
                 :alt-prefix="device.name + '隐患'"
                 empty-text="暂无隐患照片"
+                :no-preview="true"
+                @image-click="handleFileImageClick"
+                :ref="el => registerFig(el)"
               />
               <!-- 备用显示方式 -->
               <div v-else class="hazard-photos-grid">
@@ -166,6 +174,20 @@ export default {
       default: () => []
     }
   },
+  data () {
+    return {
+      /** 储存本组件内所有 FileImageGroup 实例（通过函数 ref 注册） */
+      figInstances: []
+    }
+  },
+  watch: {
+    /** 设备列表变化时清空实例缓存，下一帧重新渲染时会重新注册 */
+    deviceList: {
+      handler () { this.figInstances = [] },
+      deep: true,
+      immediate: true
+    }
+  },
   methods: {
     /**
      * 根据设备信息获取图标类型
@@ -256,12 +278,48 @@ export default {
       return new Date().toISOString().substring(0, 16).replace('T', ' ')
     },
 
+    /** 通过函数 ref 收集 FileImageGroup 实例 */
+    registerFig (fig) {
+      if (fig && this.figInstances.indexOf(fig) === -1) {
+        this.figInstances.push(fig)
+      }
+    },
+
+    /** 收集本组件内所有 FileImageGroup 的已解析图片 URL，去重后返回 */
+    _collectAllUrls () {
+      const urls = []
+      this.figInstances.forEach(fig => {
+        if (fig && fig.getAllResolvedUrls) {
+          fig.getAllResolvedUrls().forEach(u => { if (u && urls.indexOf(u) === -1) urls.push(u) })
+        }
+      })
+      return urls
+    },
+
+    /** 父组件通过 ref 调用的公共方法：获取本组件全部图片 URL */
+    getAllPhotoUrls () {
+      return this._collectAllUrls()
+    },
+
     /**
-     * 预览隐患照片
+     * 点击隐患照片（非 FileImageGroup 容灾展示）：收集全组件 URL 抛给父组件
      */
     handlePreviewHazardPhotos (hazardPhotos, currentIndex = 0) {
       const photos = hazardPhotos.map(photo => photo.url)
-      this.$emit('preview-photos', photos, currentIndex)
+      const all = this._collectAllUrls()
+      const urls = all.length > 0 ? all : photos
+      if (urls.length > 0) {
+        this.$emit('preview-photos', urls, Math.min(currentIndex, urls.length - 1))
+      }
+    },
+
+    /** 点击 FileImageGroup 图片：收集全组件 URL 抛给父组件统一预览 */
+    handleFileImageClick ({ index, url }) {
+      const urls = this._collectAllUrls()
+      if (urls.length > 0) {
+        const globalIdx = url ? urls.indexOf(url) : Math.min(index, urls.length - 1)
+        this.$emit('preview-photos', urls, globalIdx >= 0 ? globalIdx : 0)
+      }
     },
 
     /**

package/src/base-client/components/common/XInspectionDetailDrawer/components/HazardPhotos.vue

@@ -68,6 +68,9 @@
               :gap="10"
               alt-prefix="隐患照片"
               empty-text="暂无隐患照片"
+              :no-preview="true"
+              @image-click="handleImageClick"
+              :ref="el => registerFig(el)"
             />
           </div>
 
@@ -91,6 +94,9 @@
               :gap="10"
               alt-prefix="现场处理照片"
               empty-text="暂无现场处理照片"
+              :no-preview="true"
+              @image-click="handleImageClick"
+              :ref="el => registerFig(el)"
             />
           </div>
         </div>
@@ -130,7 +136,17 @@ export default {
   },
   data () {
     return {
-      hazardLevelConfig: []
+      hazardLevelConfig: [],
+      /** 储存本组件内所有 FileImageGroup 实例（通过函数 ref 注册） */
+      figInstances: []
+    }
+  },
+  watch: {
+    /** 隐患列表数据变化时清空实例缓存，下一帧重新渲染时会重新注册 */
+    hazardList: {
+      handler () { this.figInstances = [] },
+      deep: true,
+      immediate: true
     }
   },
   methods: {
@@ -206,6 +222,38 @@ export default {
         minor: 'info-circle'
       }
       return iconMap[level] || 'warning'
+    },
+
+    /** 通过函数 ref 收集 FileImageGroup 实例（v-for 中无法使用静态 ref） */
+    registerFig (fig) {
+      if (fig && this.figInstances.indexOf(fig) === -1) {
+        this.figInstances.push(fig)
+      }
+    },
+
+    /** 收集本组件内所有 FileImageGroup 的已解析图片 URL，去重后返回 */
+    _collectAllUrls () {
+      const urls = []
+      this.figInstances.forEach(fig => {
+        if (fig && fig.getAllResolvedUrls) {
+          fig.getAllResolvedUrls().forEach(u => { if (u && urls.indexOf(u) === -1) urls.push(u) })
+        }
+      })
+      return urls
+    },
+
+    /** 父组件通过 ref 调用的公共方法：获取本组件全部图片 URL */
+    getAllPhotoUrls () {
+      return this._collectAllUrls()
+    },
+
+    /** 点击图片：收集本组件全部 URL 抛给父组件统一预览 */
+    handleImageClick ({ index, url }) {
+      const urls = this._collectAllUrls()
+      if (urls.length > 0) {
+        const globalIdx = url ? urls.indexOf(url) : index
+        this.$emit('preview-photos', urls, globalIdx >= 0 ? globalIdx : 0)
+      }
     }
   },
   mounted() {

package/src/base-client/components/common/XInspectionDetailDrawer/index.vue

@@ -74,6 +74,7 @@
               </div>
               <div class="device-section" v-show="showAiDeviceTab">
                 <ai-device-status
+                  ref="aiDeviceStatus"
                   :device-list="aiDeviceItem"
                   :config="AICheckConfig?.XInspectionDetailDrawer?.AiDeviceStatus"
                   :check-total-count="checkTotalCount"
@@ -83,6 +84,7 @@
               </div>
               <div class="device-section" v-show="inspectionData.deviceList.length > 0">
                 <device-status
+                  ref="deviceStatus"
                   :device-list="inspectionData.deviceList"
                   @preview-photos="(photos, idx) => handlePreviewPhotos(photos, idx)"
                 />
@@ -90,14 +92,20 @@
 
               <div class="check-items-section" v-show="inspectionData.checkItems.length > 0">
                 <check-items
+                  ref="checkItems"
                   :check-items="inspectionData.checkItems"
+                  @preview-photos="(photos, idx) => handlePreviewPhotos(photos, idx)"
                 />
               </div>
 
               <div class="hazard-gallery-section" v-show="inspectionData.basicInfo.f_entry_status === '入户'">
                 <a-card class="section-card" :bordered="false">
                   <div class="section-grid">
-                    <hazard-photos :hazard-list="inspectionData.hazardList" />
+                    <hazard-photos
+                      ref="hazardPhotos"
+                      :hazard-list="inspectionData.hazardList"
+                      @preview-photos="(photos, idx) => handlePreviewPhotos(photos, idx)"
+                    />
                     <div class="overall-photos">
                       <div class="photos-header">
                         <div class="photos-title">
@@ -124,6 +132,9 @@
                                     :gap="10"
                                     :alt-prefix="field.name"
                                     :empty-text="`暂无${field.name}`"
+                                    :no-preview="true"
+                                    @image-click="handleFormFileImageClick"
+                                    :ref="el => registerFormFig(el)"
                                   />
                                   <span v-else class="empty-text">暂无</span>
                                 </template>
@@ -138,6 +149,9 @@
                                     :gap="10"
                                     :alt-prefix="field.name"
                                     :empty-text="`暂无${field.name}`"
+                                    :no-preview="true"
+                                    @image-click="handleFormFileImageClick"
+                                    :ref="el => registerFormFig(el)"
                                   />
                                   <span v-else class="empty-text">暂无</span>
                                 </template>
@@ -167,7 +181,45 @@
         :image-name="`预览图片${previewModal.current + 1}`"
         :append-to-body="true"
         @close="previewModal.visible = false"
-      />
+      >
+        <template #toolbarPrepend v-if="allPhotoList.length > 0">
+          <a-tooltip title="上一张">
+            <a-button
+              type="primary"
+              icon="left"
+              @click="goPrevPhoto"
+              size="small"
+              :disabled="previewModal.current <= 0"
+              style="background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.2);color:#fff;"
+            />
+          </a-tooltip>
+          <span style="color:#fff;font-size:13px;min-width:50px;text-align:center;display:inline-block;">{{ previewModal.current + 1 }} / {{ allPhotoList.length }}</span>
+          <a-tooltip title="下一张">
+            <a-button
+              type="primary"
+              icon="right"
+              @click="goNextPhoto"
+              size="small"
+              :disabled="previewModal.current >= allPhotoList.length - 1"
+              style="background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.2);color:#fff;"
+            />
+          </a-tooltip>
+          <span style="width:1px;height:20px;background:rgba(255,255,255,0.2);margin:0 4px;display:inline-block;"></span>
+        </template>
+        <template #thumbnailStrip v-if="allPhotoList.length > 1">
+          <div class="thumbnail-strip">
+            <div
+              v-for="(thumb, i) in allPhotoList"
+              :key="i"
+              class="thumbnail-item"
+              :class="{ active: i === previewModal.current }"
+              @click="previewModal.current = i"
+            >
+              <img :src="thumb" :alt="`缩略图 ${i + 1}`" />
+            </div>
+          </div>
+        </template>
+      </image-preview-modal>
 
       <a-modal
         v-if="approveModal"
@@ -271,6 +323,9 @@ export default {
         }
       },
       previewModal: { visible: false, images: [], current: 0 },
+      allPhotoList: [],
+      /** 收集"拍照签名信息"区域中 FileImageGroup 实例（通过函数 ref 注册） */
+      formFigInstances: [],
       approveModal: { visible: false, type: 'approve', form: { note: '' }, loading: false },
       approveRules: {
         note: [
@@ -366,6 +421,8 @@ export default {
           hazardList: [],
           attachments: { signature: null, recordings: [], filePhotos: [], imagePhotos: [] }
         }
+        this.allPhotoList = []
+        this.formFigInstances = []
 
         this.showHistoryPanel = !params?.id && !!params?.f_userinfo_id
 
@@ -406,10 +463,12 @@ export default {
         console.error('getPcAiInspectionAssistResultLogic', e)
       }
       console.warn('datra', data)
+      this.formFigInstances = []
       this.inspectionData = {
         ...data,
         historyList: this.inspectionData.historyList || data.historyList || []
       }
+      this.allPhotoList = this._rebuildAllPhotoList()
       if (this.inspectionData.historyList && this.inspectionData.historyList.length > 0) {
         const activeItem = this.inspectionData.historyList.find(item => item.isActive)
         if (activeItem) this.currentHistoryId = activeItem.id
@@ -423,6 +482,7 @@ export default {
         this.currentHistoryId = historyId
         const data = await inspectionService.switchToHistoryDetail(historyId, this.currentId, this.f_userinfo_id)
         this.inspectionData = { ...data, historyList: this.inspectionData.historyList || data.historyList || [] }
+        this.allPhotoList = this._rebuildAllPhotoList()
       } catch (error) {
         this.$message.error('切换历史记录失败')
       } finally {
@@ -479,11 +539,99 @@ export default {
       this.$message.info('录音播放功能待实现')
     },
 
+    /** 打开图片预览：先按固定顺序重新构建全量列表，再定位点击的图片位置 */
     handlePreviewPhotos (photos, current = 0) {
+      if (!Array.isArray(photos) || photos.length === 0) return
+      const urls = typeof photos[0] === 'string' ? photos : photos.map(p => p?.url || p?.imageUrl).filter(Boolean)
+      this.allPhotoList = this._rebuildAllPhotoList()
+      const merged = [...this.allPhotoList]
+      urls.forEach(url => {
+        if (url && merged.indexOf(url) === -1) merged.push(url)
+      })
+      this.allPhotoList = merged
+      const clickedUrl = urls[Math.min(current, urls.length - 1)]
+      const globalIdx = clickedUrl ? merged.indexOf(clickedUrl) : 0
       this.previewModal = {
         visible: true,
-        images: Array.isArray(photos) ? (typeof photos[0] === 'string' ? photos : photos.map(p => p?.url || p?.imageUrl).filter(Boolean)) : [photos],
-        current
+        images: merged,
+        current: globalIdx >= 0 ? globalIdx : 0
+      }
+    },
+
+    /** 点击"拍照签名信息"区域中的 FileImageGroup：合并到全量列表后打开预览 */
+    handleFormFileImageClick ({ index, url, fileData, allUrls }) {
+      const urls = allUrls.filter(Boolean)
+      if (urls.length > 0) {
+        this.handlePreviewPhotos(urls, Math.min(index, urls.length - 1))
+      }
+    },
+
+    /** 通过函数 ref 收集"拍照签名信息"区域的 FileImageGroup 实例 */
+    registerFormFig (fig) {
+      if (!this.formFigInstances) this.formFigInstances = []
+      if (fig && this.formFigInstances.indexOf(fig) === -1) {
+        this.formFigInstances.push(fig)
+      }
+    },
+
+    /** 收集"拍照签名信息"区域中所有 FileImageGroup 的已解析 URL + 表单字段原始 url */
+    _collectFormFigPhotoUrls () {
+      const urls = []
+      ;(this.formFigInstances || []).forEach(fig => {
+        if (fig && fig.getAllResolvedUrls) {
+          fig.getAllResolvedUrls().forEach(u => { if (u && urls.indexOf(u) === -1) urls.push(u) })
+        }
+      })
+      // 兜底：直接取表单字段中的 url（未通过 FIG 解析的 fileId 在此处无法获取）
+      const form = this.inspectionData && this.inspectionData.signatureForm
+      if (form && form.formConfig && form.formConfig.formJson) {
+        form.formConfig.formJson.forEach(field => {
+          if (!this.shouldShowField || !this.shouldShowField(field)) return
+          const files = field.type === 'file'
+            ? (this.getFieldFiles && this.getFieldFiles(field.model) || [])
+            : ((field.type === 'image' || field.type === 'signature')
+              ? (this.getFieldImages && this.getFieldImages(field.model) || [])
+              : [])
+          files.forEach(f => {
+            const u = f && (f.url || f.imageUrl)
+            if (u && urls.indexOf(u) === -1) urls.push(u)
+          })
+        })
+      }
+      return urls
+    },
+
+    /** 按固定顺序构建全量图片列表：附件 → 子组件（隐患、设备、AI、检查项）→ 签名表单 */
+    _rebuildAllPhotoList () {
+      const list = []
+      const att = this.inspectionData.attachments
+      if (att) {
+        if (att.signature?.imageUrl && list.indexOf(att.signature.imageUrl) === -1) list.push(att.signature.imageUrl)
+        if (Array.isArray(att.refusephotos)) {
+          att.refusephotos.forEach(p => { if (p?.imageUrl && list.indexOf(p.imageUrl) === -1) list.push(p.imageUrl) })
+        }
+      }
+      ;['hazardPhotos', 'deviceStatus', 'aiDeviceStatus', 'checkItems'].forEach(ref => {
+        const child = this.$refs[ref]
+        if (child && child.getAllPhotoUrls) {
+          const urls = child.getAllPhotoUrls()
+          urls.forEach(u => { if (u && list.indexOf(u) === -1) list.push(u) })
+        }
+      })
+      const formUrls = this._collectFormFigPhotoUrls()
+      formUrls.forEach(u => { if (u && list.indexOf(u) === -1) list.push(u) })
+      return list
+    },
+
+    goPrevPhoto () {
+      if (this.previewModal.current > 0) {
+        this.previewModal.current--
+      }
+    },
+
+    goNextPhoto () {
+      if (this.previewModal.current < this.allPhotoList.length - 1) {
+        this.previewModal.current++
       }
     },
 
@@ -619,6 +767,8 @@ export default {
         hazardList: [],
         attachments: { signature: null, recordings: [], filePhotos: [], imagePhotos: [] }
       }
+      this.allPhotoList = []
+      this.formFigInstances = []
     },
 
     /**
@@ -832,4 +982,41 @@ export default {
     }
   }
 }
+
+/* 预览模态框底部缩略图条 */
+.thumbnail-strip {
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+  margin-top: 12px;
+  padding: 0 20px;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  max-width: 100vw;
+
+  &::-webkit-scrollbar { height: 4px; }
+  &::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }
+}
+
+.thumbnail-item {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: 4px;
+  overflow: hidden;
+  cursor: pointer;
+  border: 2px solid transparent;
+  opacity: 0.6;
+  transition: all 0.2s ease;
+
+  &:hover { opacity: 0.9; border-color: rgba(255,255,255,0.4); }
+  &.active { opacity: 1; border-color: #1890ff; }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+}
 </style>