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 ++++++++++++++++---
src/views/system/report/index.vue | 66 ++++++++++++++++++++++++++++-----
2 files changed, 88 insertions(+), 16 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>
diff --git a/src/views/system/report/index.vue b/src/views/system/report/index.vue
index a7ad736..df53f4e 100644
--- a/src/views/system/report/index.vue
+++ b/src/views/system/report/index.vue
@@ -60,8 +60,17 @@
<div class="info-item">
<div class="info-label">鎶ュ鏉愭枡</div>
<div class="info-list">
- <div style="margin-bottom: 8px" v-for="file in formatFileList(scope.row.reportMaterials)" :key="file">
- <el-link type="primary" @click="handleDownload(file)">
+ <div style="margin-bottom: 8px" v-for="file in scope.row.reportMaterials!=null ? scope.row.reportMaterials.split(',') : scope.row.reportMaterials" :key="file">
+ <el-image
+ v-if="isImageFile(file)"
+ :src="getPreview(file)"
+ :preview-src-list="[getPreview(file)]"
+ fit="cover"
+ class="material-preview"
+ style="width: 100px; height: 100px; margin: 5px;"
+ >
+ </el-image>
+ <el-link v-else type="primary" @click="handleDownload(file)">
{{file.match(/\/([^\/]*)$/)[1]}}
</el-link>
</div>
@@ -181,11 +190,22 @@
<div class="content" v-html="getHtmlContent(record.reportContent)"></div>
</el-descriptions-item>
<el-descriptions-item label="鎶ュ鏉愭枡">
- <el-link
+ <div
v-for="item in record.reportMaterials != null ? record.reportMaterials.split(',') : record.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>
</el-descriptions-item>
</el-descriptions>
</el-card>
@@ -252,10 +272,24 @@
<span v-html="auditingForm.reportContent"></span>
</el-form-item>
<el-form-item label="鎶ュ鏉愭枡">
- <el-link
+ <!-- 娣诲姞绌鸿 -->
+ <div class="material-spacer">{{''}}</div>
+ <div
v-for="item in auditingForm.reportMaterials != null ? auditingForm.reportMaterials.split(',') : auditingForm.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>
</el-form-item>
</el-form>
</div>
@@ -266,7 +300,6 @@
<el-button type="primary" @click="auditingSubmit">瀹� 鏍�</el-button>
</div>
</el-dialog>
-
</div>
</template>
@@ -373,6 +406,16 @@
this.getList();
},
methods: {
+ getPreview(url) {
+ // 浣跨敤鍏ㄥ眬閰嶇疆鐨勫浘鐗囧墠缂�
+ return this.$img + url;
+ },
+ isImageFile(url) {
+ const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
+ return imageExtensions.some(ext =>
+ url.toLowerCase().endsWith(ext)
+ );
+ },
getHtmlContent(content) {
if (content) {
return content
@@ -631,6 +674,9 @@
</script>
<style lang="scss" scoped>
+.material-spacer {
+ height: 50px; /* 鍙互璋冩暣绌鸿鐨勯珮搴� */
+}
.content {
height: 100px;
max-height: 300px;
--
Gitblit v1.8.0