多媒体采集同步策略。生产履历图片查看。

src/views/pro-steps/components/duomeiticaiji.vue

@@ -18,13 +18,13 @@
           fit="cover"
         />
       </div>
-      <div style="width: 70px;height: 70px;display: inline;">
+      <div style="width: 70px; height: 70px; display: inline">
         <RefreshRight
-        color="#0a59f7"
-        size="70px"
-        class="refresh-btn"
-        @click="clickReset"
-      />
+          color="#0a59f7"
+          size="70px"
+          class="refresh-btn"
+          @click="clickReset"
+        />
       </div>
     </div>
   </el-scrollbar>
@@ -57,11 +57,12 @@ const getListData = async () => {
     seqNo: proStore.scanInfo.seqNo,
     operationMediaId: proStore.scanInfo.operationId,
   };
-  await syncMedias(p);
-  pageMediasV2(p).then((res: any) => {
-    medias.value = res.data.records || [];
-    urlList.value = res.data.records.map((item: any) => {
-      return import.meta.env.VITE_APP_UPLOAD_URL + item.filePath;
+  syncMedias(p).finally(() => {
+    pageMediasV2(p).then((res: any) => {
+      medias.value = res.data.records || [];
+      urlList.value = res.data.records.map((item: any) => {
+        return import.meta.env.VITE_APP_UPLOAD_URL + item.filePath;
+      });
     });
   });
 };

src/views/traceability/components/media.vue

@@ -5,17 +5,22 @@
     <el-table-column prop="created" label="上传时间" />
     <el-table-column label="操作" prop="operation">
       <template #default="{ row }">
-        <span @click="handleLook(row.filePath)">查看</span>
+        <el-button link type="primary" @click="handleLook(row.filePath)">查看</el-button>
       </template>
     </el-table-column>
     <template #empty>
-              <div class="empty">
-                <Empty />
-              </div>
-            </template>
+      <div class="empty">
+        <Empty />
+      </div>
+    </template>
   </el-table>
-  <el-image id="showImg" style="width: 0; height: 0" :min-scale="0.2" :src="srcList[0]" :preview-src-list="srcList"
-    fit="cover" />
+  <el-image-viewer
+    v-if="showPreview"
+    :url-list="preSrcList"
+    show-progress
+    :initial-index="0"
+    @close="showPreview = false"
+  />
   <Pagination position="right" :page="page" :limit="limit" :total="total" @pagination="getPagination" />
 </template>
 
@@ -28,19 +33,20 @@ const limit = ref(10);
 const total = ref(10);
 const tableData = ref([]);
 const tableHeight = ref(null);
-const srcList = ref([]);
+
 const baseUrl = import.meta.env.VITE_APP_UPLOAD_URL;
+
+// 图片查看器相关
+const showPreview = ref(false);
+const preSrcList = ref([]);
+
 const handleLook = (path: string) => {
-  srcList.value = [];
-  srcList.value.push(baseUrl + path);
-  setTimeout(() => {
-    document.getElementById("showImg").click();
-  }, 0);
+  preSrcList.value = [baseUrl + path];
+  showPreview.value = true;
 };
 //动态控制表格高度
 const setTableHeight = () => {
-  tableHeight.value =
-    Number(document.getElementById("tabBox").offsetHeight) - 60;
+  tableHeight.value = Number(document.getElementById("tabBox").offsetHeight) - 60;
 };
 
 const getPagination = async () => {