From c4ec0fac48c9bef59fadba87404ea3d4bf9e087c Mon Sep 17 00:00:00 2001
From: fuliqi <fuliqi@qq.com>
Date: 星期二, 11 二月 2025 16:05:42 +0800
Subject: [PATCH] 工单、报备，图片预览功能
---
src/components/WorkOrder/WorkOrderAuditing.vue | 38 ++++++++++++++++++++++++++++++++------
1 files changed, 32 insertions(+), 6 deletions(-)
diff --git a/src/components/WorkOrder/WorkOrderAuditing.vue b/src/components/WorkOrder/WorkOrderAuditing.vue
index 60cf849..db9fd2d 100644
--- a/src/components/WorkOrder/WorkOrderAuditing.vue
+++ b/src/components/WorkOrder/WorkOrderAuditing.vue
@@ -32,11 +32,25 @@
>
<el-card>
<div v-html="condition.ywCondition"></div>
- <el-link type="primary"
- v-for="item in condition.ywProofMaterials != null ? condition.ywProofMaterials.split(',') : condition.ywProofMaterials"
- :underline="false" :key="item.id" @click="handleDownload(item)"
- >{{ item.substring(item.lastIndexOf('/') + 1) }}
- </el-link>
+ <div v-for="item in condition.ywProofMaterials != null ? condition.ywProofMaterials.split(',') : condition.ywProofMaterials"
+ :key="item.id">
+ <el-image
+ v-if="isImageFile(item)"
+ :src="getPreview(item)"
+ :preview-src-list="[getPreview(item)]"
+ fit="cover"
+ style="width: 100px; height: 100px; margin: 5px;"
+ >
+ </el-image>
+ <el-link
+ v-else
+ type="primary"
+ :underline="false"
+ @click="handleDownload(item)"
+ >
+ {{ getFileName(item) }}
+ </el-link>
+ </div>
</el-card>
</el-timeline-item>
</el-timeline>
@@ -82,6 +96,19 @@
}
},
methods: {
+ getPreview(url) {
+ // 浣跨敤鍏ㄥ眬閰嶇疆鐨勫浘鐗囧墠缂�
+ return this.$img + url;
+ },
+ isImageFile(url) {
+ const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
+ return imageExtensions.some(ext =>
+ url.toLowerCase().endsWith(ext)
+ );
+ },
+ getFileName(url) {
+ return url.substring(url.lastIndexOf('/') + 1);
+ },
/** 涓嬭浇鎸夐挳鎿嶄綔 */
handleDownload(data) {
this.$download.resource(data)
@@ -116,5 +143,4 @@
</script>
<style scoped>
-
</style>
--
Gitblit v1.8.0