From bfaaa299a0aebd4ccc488cbe5a67e7d73304fb2c Mon Sep 17 00:00:00 2001
From: gongchunyi <deslre0381@gmail.com>
Date: 星期五, 24 四月 2026 15:56:03 +0800
Subject: [PATCH] fix: 图片预览路径替换为link
---
src/views/equipmentManagement/repair/index.vue | 287 +++++++++++++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 266 insertions(+), 21 deletions(-)
diff --git a/src/views/equipmentManagement/repair/index.vue b/src/views/equipmentManagement/repair/index.vue
index 2443123..e14ab37 100644
--- a/src/views/equipmentManagement/repair/index.vue
+++ b/src/views/equipmentManagement/repair/index.vue
@@ -75,10 +75,10 @@
瀵煎嚭
</el-button>
<el-button
- type="danger"
- icon="Delete"
- :disabled="multipleList.length <= 0"
- @click="delRepairByIds(multipleList.map((item) => item.id))"
+ type="danger"
+ icon="Delete"
+ :disabled="multipleList.length <= 0 || hasFinishedStatus"
+ @click="delRepairByIds(multipleList.map((item) => item.id))"
>
鎵归噺鍒犻櫎
</el-button>
@@ -104,25 +104,34 @@
</template>
<template #operation="{ row }">
<el-button
- type="primary"
- text
- @click="addMaintain(row)"
- >
- 鏂板缁翠慨
- </el-button>
- <el-button
- type="primary"
- text
- icon="editPen"
- @click="editRepair(row.id)"
+ type="primary"
+ link
+ :disabled="row.status === 1"
+ @click="editRepair(row.id)"
>
缂栬緫
</el-button>
<el-button
- type="danger"
- text
- icon="delete"
- @click="delRepairByIds(row.id)"
+ type="info"
+ link
+ :disabled="row.status === 1"
+ @click="openAttachment(row)"
+ >
+ 闄勪欢
+ </el-button>
+ <el-button
+ type="success"
+ link
+ :disabled="row.status === 1"
+ @click="addMaintain(row)"
+ >
+ 缁翠慨
+ </el-button>
+ <el-button
+ type="danger"
+ link
+ :disabled="row.status === 1"
+ @click="delRepairByIds(row.id)"
>
鍒犻櫎
</el-button>
@@ -131,23 +140,77 @@
</div>
<RepairModal ref="repairModalRef" @ok="getTableData"/>
<MaintainModal ref="maintainModalRef" @ok="getTableData"/>
+
+ <el-dialog v-model="attachment.visible" title="闄勪欢" width="860px" @closed="onAttachmentClosed">
+ <div v-loading="attachment.loading" class="attachment-wrap">
+ <div class="attachment-actions">
+ <el-upload
+ v-model:file-list="attachment.fileList"
+ :action="upload.url"
+ multiple
+ ref="attachmentFileUpload"
+ auto-upload
+ :headers="upload.headers"
+ :data="{ deviceRepairId: attachment.deviceRepairId }"
+ :before-upload="handleAttachmentBeforeUpload"
+ :on-error="handleAttachmentUploadError"
+ :on-success="handleAttachmentUploadSuccess"
+ :on-preview="handleAttachmentPreview"
+ :on-remove="handleAttachmentRemove"
+ list-type="picture-card"
+ :limit="9"
+ accept="image/png,image/jpeg,image/jpg"
+ >
+ +
+ </el-upload>
+ </div>
+
+ <el-empty v-if="!attachment.loading && attachment.files.length === 0" description="鏆傛棤闄勪欢" />
+ </div>
+ <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>
<script setup>
+import { onMounted, getCurrentInstance, computed } from "vue";
import {usePaginationApi} from "@/hooks/usePaginationApi";
-import {getRepairPage, delRepair} from "@/api/equipmentManagement/repair";
-import {onMounted, getCurrentInstance} from "vue";
+import {
+ getRepairPage,
+ delRepair,
+ getRepairFileList,
+ deleteRepairFile,
+} from "@/api/equipmentManagement/repair";
import RepairModal from "./Modal/RepairModal.vue";
import {ElMessageBox, ElMessage} from "element-plus";
import dayjs from "dayjs";
import MaintainModal from "./Modal/MaintainModal.vue";
+import { getToken } from "@/utils/auth";
defineOptions({
name: "璁惧鎶ヤ慨",
});
const {proxy} = getCurrentInstance();
+const javaApi = proxy?.javaApi || "";
// 妯℃�佹瀹炰緥
const repairModalRef = ref();
@@ -155,6 +218,57 @@
// 琛ㄦ牸澶氶�夋閫変腑椤�
const multipleList = ref([]);
+
+const attachment = reactive({
+ visible: false,
+ loading: false,
+ deviceRepairId: undefined,
+ files: [],
+ fileList: [],
+ previewVisible: false,
+ previewUrl: "",
+});
+
+const getFileAccessUrl = (file = {}) => {
+ if (file?.link) {
+ if (String(file.link).startsWith('http')) return file.link;
+ return normalizeFileUrl(file.link);
+ }
+ return normalizeFileUrl(file?.url || '');
+};
+
+const normalizeFileUrl = (rawUrl = '') => {
+ let fileUrl = rawUrl || '';
+
+ if (fileUrl && fileUrl.indexOf('\\') > -1) {
+ const lowerPath = fileUrl.toLowerCase();
+ const uploadPathIndex = lowerPath.indexOf('uploadpath');
+
+ if (uploadPathIndex > -1) {
+ fileUrl = fileUrl
+ .substring(uploadPathIndex)
+ .replace(/\\/g, '/');
+ } else {
+ fileUrl = fileUrl.replace(/\\/g, '/');
+ }
+ }
+ fileUrl = fileUrl.replace(/^\/?uploadPath/, '/profile');
+
+ if (!fileUrl.startsWith('http')) {
+ if (!fileUrl.startsWith('/')) fileUrl = '/' + fileUrl;
+ fileUrl = javaApi + fileUrl;
+ }
+
+ return fileUrl;
+};
+
+const attachmentUploadAction = "/device/repair/uploadFile";
+const upload = reactive({
+ url: import.meta.env.VITE_APP_BASE_API + attachmentUploadAction,
+ headers: {
+ Authorization: "Bearer " + getToken(),
+ },
+});
// 琛ㄦ牸閽╁瓙
const {
@@ -257,6 +371,11 @@
multipleList.value = selectionList;
};
+// 妫�鏌ラ�変腑鐨勮褰曚腑鏄惁鏈夊畬缁撶姸鎬佺殑
+const hasFinishedStatus = computed(() => {
+ return multipleList.value.some(item => item.status === 1)
+})
+
// 鏂板鎶ヤ慨
const addRepair = () => {
repairModalRef.value.openAdd();
@@ -280,6 +399,18 @@
// 鍗曡鍒犻櫎
const delRepairByIds = async (ids) => {
+ // 妫�鏌ユ槸鍚︽湁瀹岀粨鐘舵�佺殑璁板綍
+ const idsArray = Array.isArray(ids) ? ids : [ids];
+ const hasFinished = idsArray.some(id => {
+ const record = dataList.value.find(item => item.id === id);
+ return record && record.status === 1;
+ });
+
+ if (hasFinished) {
+ ElMessage.warning('涓嶈兘鍒犻櫎鐘舵�佷负瀹岀粨鐨勮褰�');
+ return;
+ }
+
ElMessageBox.confirm("纭鍒犻櫎鎶ヤ慨鏁版嵁, 姝ゆ搷浣滀笉鍙��?", "璀﹀憡", {
confirmButtonText: "纭畾",
cancelButtonText: "鍙栨秷",
@@ -308,6 +439,95 @@
});
};
+const openAttachment = async (row) => {
+ attachment.fileList = [];
+ attachment.visible = true;
+ attachment.deviceRepairId = row?.id;
+ await refreshAttachmentList();
+};
+
+const refreshAttachmentList = async () => {
+ if (!attachment.deviceRepairId) return;
+ attachment.loading = true;
+ try {
+ const res = await getRepairFileList(attachment.deviceRepairId);
+ attachment.files = Array.isArray(res?.data) ? res.data : [];
+ attachment.fileList = attachment.files.map((item) => ({
+ id: item.id,
+ name: item.name,
+ url: getFileAccessUrl(item),
+ }));
+ } finally {
+ attachment.loading = false;
+ }
+};
+
+const onAttachmentClosed = () => {
+ attachment.loading = false;
+ attachment.deviceRepairId = undefined;
+ attachment.files = [];
+ attachment.fileList = [];
+ attachment.previewVisible = false;
+ attachment.previewUrl = "";
+};
+
+const handleAttachmentBeforeUpload = (file) => {
+ const isImage = ["image/png", "image/jpeg", "image/jpg"].includes(file.type);
+ if (!isImage) {
+ ElMessage.error("鍙兘涓婁紶 png/jpg/jpeg 鍥剧墖");
+ return false;
+ }
+ return true;
+};
+
+const handleAttachmentUploadSuccess = async (res) => {
+ if (res?.code === 200) {
+ ElMessage.success("涓婁紶鎴愬姛");
+ await refreshAttachmentList();
+ }
+};
+
+const handleAttachmentUploadError = () => {
+ ElMessage.error("涓婁紶澶辫触");
+};
+
+const handleAttachmentPreview = (file) => {
+ const rawUrl = file?.url || file?.response?.data?.link || file?.response?.data?.url || "";
+ if (!rawUrl) {
+ ElMessage.warning("鍥剧墖鍦板潃鏃犳晥锛屾棤娉曢瑙�");
+ return;
+ }
+ attachment.previewUrl = normalizeFileUrl(rawUrl);
+ attachment.previewVisible = true;
+};
+
+const handleAttachmentRemove = async (file) => {
+ // 浠呯Щ闄ゅ墠绔湭鍏ュ簱鏂囦欢鏃讹紝涓嶈皟鐢ㄥ垹闄ゆ帴鍙�
+ const matched = attachment.files.find((item) => item.id === file?.id)
+ || attachment.files.find((item) => item.name === file?.name);
+ if (!matched) return;
+ try {
+ await confirmDeleteAttachment(matched);
+ } finally {
+ // 鍙栨秷鍒犻櫎鏃讹紝el-upload 宸插厛绉婚櫎锛屽埛鏂颁竴娆′繚鎸佷笌鍚庣涓�鑷�
+ await refreshAttachmentList();
+ }
+};
+
+const confirmDeleteAttachment = (fileRow) => {
+ return ElMessageBox.confirm("纭鍒犻櫎璇ラ檮浠讹紵", "璀﹀憡", {
+ confirmButtonText: "纭畾",
+ cancelButtonText: "鍙栨秷",
+ type: "warning",
+ }).then(async () => {
+ const { code } = await deleteRepairFile(fileRow.id);
+ if (code === 200) {
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ await refreshAttachmentList();
+ }
+ });
+};
+
onMounted(() => {
getTableData();
});
@@ -323,4 +543,29 @@
justify-content: space-between;
margin-bottom: 10px;
}
+
+.attachment-wrap {
+ min-height: 240px;
+}
+
+.attachment-actions {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ 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