From 955f6dfb8f3e1b8a733ba47bfd69354f5269d1f6 Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期四, 23 四月 2026 11:26:52 +0800
Subject: [PATCH] feat: 添加附件预览功能，支持在设备报修中查看上传的图片
---
src/views/equipmentManagement/repair/index.vue | 44 ++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 44 insertions(+), 0 deletions(-)
diff --git a/src/views/equipmentManagement/repair/index.vue b/src/views/equipmentManagement/repair/index.vue
index 1f37fd7..2879d00 100644
--- a/src/views/equipmentManagement/repair/index.vue
+++ b/src/views/equipmentManagement/repair/index.vue
@@ -155,6 +155,7 @@
:before-upload="handleAttachmentBeforeUpload"
:on-error="handleAttachmentUploadError"
:on-success="handleAttachmentUploadSuccess"
+ :on-preview="handleAttachmentPreview"
:on-remove="handleAttachmentRemove"
list-type="picture-card"
:limit="9"
@@ -169,6 +170,22 @@
<template #footer>
<el-button @click="attachment.visible = false">鍏抽棴</el-button>
</template>
+ </el-dialog>
+
+ <el-dialog
+ v-model="attachment.previewVisible"
+ title="鍥剧墖棰勮"
+ width="70%"
+ append-to-body
+ >
+ <div class="attachment-preview-wrap">
+ <img
+ v-if="attachment.previewUrl"
+ :src="attachment.previewUrl"
+ alt="preview"
+ class="attachment-preview-img"
+ />
+ </div>
</el-dialog>
</div>
</template>
@@ -208,6 +225,8 @@
deviceRepairId: undefined,
files: [],
fileList: [],
+ previewVisible: false,
+ previewUrl: "",
});
const normalizeFileUrl = (rawUrl = '') => {
@@ -440,6 +459,8 @@
attachment.deviceRepairId = undefined;
attachment.files = [];
attachment.fileList = [];
+ attachment.previewVisible = false;
+ attachment.previewUrl = "";
};
const handleAttachmentBeforeUpload = (file) => {
@@ -460,6 +481,16 @@
const handleAttachmentUploadError = () => {
ElMessage.error("涓婁紶澶辫触");
+};
+
+const handleAttachmentPreview = (file) => {
+ const rawUrl = file?.url || file?.response?.data?.url || "";
+ if (!rawUrl) {
+ ElMessage.warning("鍥剧墖鍦板潃鏃犳晥锛屾棤娉曢瑙�");
+ return;
+ }
+ attachment.previewUrl = normalizeFileUrl(rawUrl);
+ attachment.previewVisible = true;
};
const handleAttachmentRemove = async (file) => {
@@ -516,4 +547,17 @@
margin-bottom: 12px;
}
+.attachment-preview-wrap {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 360px;
+}
+
+.attachment-preview-img {
+ max-width: 100%;
+ max-height: 70vh;
+ object-fit: contain;
+}
+
</style>
--
Gitblit v1.9.3