Преглед изворни кода

fix(inspection): 打卡详情照片列从 URL 文本改为 el-image 缩略图(支持多图/点击放大)

原代码 <span v-if=checkPhotos>{{ checkPhotos }}</span> 直接 dump 字符串
改成 <el-image> 60x60 缩略图 + preview 点击放大 + preview-src-list 拼多图

影响:plus-ui/src/views/risk/inspectionTask/index.vue, plus-ui/src/views/risk/qualityInspectionTask/index.vue
yangjingjing пре 2 дана
родитељ
комит
033448ef2a
2 измењених фајлова са 26 додато и 4 уклоњено
  1. 13 2
      src/views/risk/inspectionTask/index.vue
  2. 13 2
      src/views/risk/qualityInspectionTask/index.vue

+ 13 - 2
src/views/risk/inspectionTask/index.vue

@@ -411,9 +411,20 @@
             <span v-else>-</span>
           </template>
         </el-table-column>
-        <el-table-column label="照片" width="80">
+        <el-table-column label="照片" min-width="160">
           <template #default="scope">
-            <span v-if="scope.row.checkPhotos">{{ scope.row.checkPhotos }}</span>
+            <template v-if="scope.row.checkPhotos">
+              <el-image
+                v-for="(url, i) in String(scope.row.checkPhotos).split(',').filter((u) => u)"
+                :key="i"
+                :src="url.trim()"
+                :preview-src-list="String(scope.row.checkPhotos).split(',').map((u) => u.trim()).filter((u) => u)"
+                :initial-index="i"
+                :preview-teleported="true"
+                fit="cover"
+                style="width: 60px; height: 60px; margin-right: 6px; border-radius: 4px;"
+              />
+            </template>
             <span v-else>-</span>
           </template>
         </el-table-column>

+ 13 - 2
src/views/risk/qualityInspectionTask/index.vue

@@ -412,9 +412,20 @@
             <span v-else>-</span>
           </template>
         </el-table-column>
-        <el-table-column label="照片" width="80">
+        <el-table-column label="照片" min-width="160">
           <template #default="scope">
-            <span v-if="scope.row.checkPhotos">{{ scope.row.checkPhotos }}</span>
+            <template v-if="scope.row.checkPhotos">
+              <el-image
+                v-for="(url, i) in String(scope.row.checkPhotos).split(',').filter((u) => u)"
+                :key="i"
+                :src="url.trim()"
+                :preview-src-list="String(scope.row.checkPhotos).split(',').map((u) => u.trim()).filter((u) => u)"
+                :initial-index="i"
+                :preview-teleported="true"
+                fit="cover"
+                style="width: 60px; height: 60px; margin-right: 6px; border-radius: 4px;"
+              />
+            </template>
             <span v-else>-</span>
           </template>
         </el-table-column>