From da7b9833e734332d47a42fb8ba30daf263864b27 Mon Sep 17 00:00:00 2001 From: fuliqi <fuliqi@qq.com> Date: 星期二, 11 二月 2025 16:17:31 +0800 Subject: [PATCH] 文件上传组件图片预览、工单详情页图片预览 --- src/views/system/work-order/detail/index.vue | 51 ++++++++++++++++++++++++++++++++++++++++++++------- 1 files changed, 44 insertions(+), 7 deletions(-) diff --git a/src/views/system/work-order/detail/index.vue b/src/views/system/work-order/detail/index.vue index 52b102d..9a8d9ef 100644 --- a/src/views/system/work-order/detail/index.vue +++ b/src/views/system/work-order/detail/index.vue @@ -109,10 +109,24 @@ <el-tag :type="report.reportType === '浜嬪墠鎶ュ' ? 'warning' : 'danger'">{{report.reportType}}</el-tag> </div> <div style="margin: 8px 0"> - <el-link + <div v-for="item in report.reportMaterials != null ? report.reportMaterials.split(',') : report.reportMaterials" - :underline="false" type="primary" :key="item" @click="handleDownload(item)">{{ item.substring(item.lastIndexOf("/") + 1) - }}</el-link> + :key="item"> + <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 + :underline="false" type="primary" @click="handleDownload(item)">{{ + item.substring(item.lastIndexOf("/") + 1) + }} + </el-link> + </div> </div> <div v-html="report.reportContent"></div> </div> @@ -131,10 +145,24 @@ :timestamp="yw.createTime"> <div> <div style="margin: 8px 0"> - <el-link + <div v-for="item in yw.ywProofMaterials != null ? yw.ywProofMaterials.split(',') : yw.ywProofMaterials" - :underline="false" type="primary" :key="item" @click="handleDownload(item)">{{ item.substring(item.lastIndexOf("/") + 1) - }}</el-link> + :key="item"> + <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 + :underline="false" type="primary" @click="handleDownload(item)">{{ + item.substring(item.lastIndexOf("/") + 1) + }} + </el-link> + </div> </div> <div v-html="yw.ywCondition"></div> </div> @@ -223,7 +251,16 @@ this.getWorkOrder() }, methods: { - + getPreview(url) { + // 浣跨敤鍏ㄥ眬閰嶇疆鐨勫浘鐗囧墠缂� + return this.$img + url; + }, + isImageFile(url) { + const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp']; + return imageExtensions.some(ext => + url.toLowerCase().endsWith(ext) + ); + }, closeAuditing() { this.auditingOpen = false }, -- Gitblit v1.8.0