From 4b7cf12b4654c27ce84341261ab2c9832ce323f9 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期六, 14 三月 2026 13:19:42 +0800
Subject: [PATCH] fix: 报修可上传附件
---
src/pages/equipmentManagement/repair/index.vue | 364 +++++++++++++++++++++++++++++++++
src/pages/equipmentManagement/repair/add.vue | 290 ++++++++++++++++++++++++++
2 files changed, 652 insertions(+), 2 deletions(-)
diff --git a/src/pages/equipmentManagement/repair/add.vue b/src/pages/equipmentManagement/repair/add.vue
index e734cd5..171b89e 100644
--- a/src/pages/equipmentManagement/repair/add.vue
+++ b/src/pages/equipmentManagement/repair/add.vue
@@ -85,6 +85,53 @@
count
maxlength="200" />
</u-form-item>
+ <view class="simple-upload-area">
+ <view class="upload-buttons">
+ <u-button type="primary"
+ @click="chooseRepairMedia"
+ :loading="uploading"
+ :disabled="repairFileList.length >= uploadConfig.limit"
+ :customStyle="{ marginRight: '10px', flex: 1 }">
+ <u-icon name="camera"
+ size="18"
+ color="#fff"
+ style="margin-right: 5px;"></u-icon>
+ {{ uploading ? "涓婁紶涓�..." : "鎷嶇収" }}
+ </u-button>
+ </view>
+ <view v-if="uploading"
+ class="upload-progress">
+ <u-line-progress :percentage="uploadProgress"
+ :showText="true"
+ activeColor="#409eff"></u-line-progress>
+ </view>
+ <view v-if="repairFileList.length > 0"
+ class="file-list">
+ <view v-for="(file, index) in repairFileList"
+ :key="index"
+ class="file-item">
+ <view class="file-preview-container">
+ <view class="delete-btn"
+ @click="removeRepairFile(index)">
+ <u-icon name="close"
+ size="12"
+ color="#fff"></u-icon>
+ </view>
+ <image :src="file.url || file.tempFilePath || file.path || file.downloadUrl"
+ class="file-preview"
+ mode="aspectFill" />
+ </view>
+ <view class="file-info">
+ <text class="file-name">{{ file.bucketFilename || file.name || "鍥剧墖" }}</text>
+ <text class="file-size">{{ formatFileSize(file.size) }}</text>
+ </view>
+ </view>
+ </view>
+ <view v-if="repairFileList.length === 0"
+ class="empty-state">
+ <text>璇烽�夋嫨瑕佷笂浼犵殑鐜板満鐓х墖</text>
+ </view>
+ </view>
</u-cell-group>
<!-- 鎻愪氦鎸夐挳 -->
<view class="footer-btns">
@@ -115,6 +162,8 @@
editRepair,
getRepairById,
} from "@/api/equipmentManagement/repair";
+ import config from "@/config";
+ import { getToken } from "@/utils/auth";
import dayjs from "dayjs";
import { formatDateToYMD } from "@/utils/ruoyi";
const showToast = message => {
@@ -134,6 +183,16 @@
const loading = ref(false);
const showDate = ref(false);
const pickerDateValue = ref(Date.now());
+
+ // 涓婁紶閰嶇疆锛堜笌宸℃涓�鑷达級
+ const uploadConfig = {
+ action: "/file/upload",
+ limit: 10,
+ };
+ const uploadFileUrl = computed(() => config.baseUrl + uploadConfig.action);
+ const repairFileList = ref([]);
+ const uploading = ref(false);
+ const uploadProgress = ref(0);
// 璁惧閫夐」
const deviceOptions = ref([]);
@@ -231,6 +290,15 @@
if (device) {
deviceNameText.value = device.deviceName;
}
+ // 鍥炴樉闄勪欢鍒楄〃锛堝悗绔繑鍥� fileList 鏃讹級
+ const list = data.fileList || data.commonFileList || [];
+ repairFileList.value = (Array.isArray(list) ? list : []).map(f => ({
+ url: f.url || f.downloadUrl,
+ name: f.bucketFilename || f.originalFilename || f.name,
+ bucketFilename: f.bucketFilename || f.originalFilename || f.name,
+ size: f.size || f.byteSize,
+ uploadResponse: f,
+ }));
}
} catch (e) {
showToast("鑾峰彇璇︽儏澶辫触");
@@ -249,6 +317,128 @@
form.value.deviceLedgerId = item.id;
setDeviceModel(item.id);
}
+ };
+
+ // 鏍煎紡鍖栨枃浠跺ぇ灏�
+ const formatFileSize = size => {
+ if (!size) return "";
+ if (size < 1024) return size + "B";
+ if (size < 1024 * 1024) return (size / 1024).toFixed(1) + "KB";
+ return (size / (1024 * 1024)).toFixed(1) + "MB";
+ };
+
+ // 鎷嶇収閫夋嫨锛堜笌宸℃涓�鑷达級
+ const chooseRepairMedia = () => {
+ if (repairFileList.value.length >= uploadConfig.limit) {
+ showToast(`鏈�澶氬彧鑳介�夋嫨${uploadConfig.limit}涓枃浠禶);
+ return;
+ }
+ const remaining = uploadConfig.limit - repairFileList.value.length;
+ if (typeof uni.chooseMedia === "function") {
+ uni.chooseMedia({
+ count: Math.min(remaining, 9),
+ mediaType: ["image"],
+ sizeType: ["compressed", "original"],
+ sourceType: ["camera", "album"],
+ success: res => {
+ const files = res?.tempFiles || [];
+ files.forEach((tf, idx) => {
+ const filePath = tf.tempFilePath || tf.path || "";
+ const file = {
+ tempFilePath: filePath,
+ path: filePath,
+ type: "image",
+ name: `repair_${Date.now()}_${idx}.jpg`,
+ size: tf.size || 0,
+ uid: Date.now() + Math.random() + idx,
+ };
+ uploadRepairFile(file);
+ });
+ },
+ fail: () => showToast("閫夋嫨鍥剧墖澶辫触"),
+ });
+ } else {
+ uni.chooseImage({
+ count: remaining,
+ sizeType: ["compressed", "original"],
+ sourceType: ["camera", "album"],
+ success: res => {
+ (res.tempFilePaths || []).forEach((path, idx) => {
+ uploadRepairFile({
+ tempFilePath: path,
+ path: path,
+ type: "image",
+ name: `repair_${Date.now()}_${idx}.jpg`,
+ size: 0,
+ uid: Date.now() + Math.random(),
+ });
+ });
+ },
+ fail: () => showToast("閫夋嫨鍥剧墖澶辫触"),
+ });
+ }
+ };
+
+ const uploadRepairFile = file => {
+ const filePath = file.tempFilePath || file.path;
+ if (!filePath) return;
+ uploading.value = true;
+ uploadProgress.value = 0;
+ const token = getToken();
+ if (!token) {
+ showToast("璇峰厛鐧诲綍");
+ uploading.value = false;
+ return;
+ }
+ const uploadTask = uni.uploadFile({
+ url: uploadFileUrl.value,
+ filePath,
+ name: "file",
+ header: { Authorization: "Bearer " + token },
+ success: res => {
+ try {
+ if (res.statusCode === 200) {
+ const response = typeof res.data === "string" ? JSON.parse(res.data) : res.data;
+ const d = response?.data !== undefined ? response.data : response;
+ if (response && (response.code === 200 || response.code === 0) && d) {
+ const fileData = {
+ ...file,
+ id: d.id,
+ tempId: d.tempId ?? d.tempFileId ?? d.id,
+ url: d.url || d.downloadUrl || filePath,
+ bucketFilename: d.bucketFilename || d.originalFilename || file.name,
+ downloadUrl: d.downloadUrl || d.url,
+ size: d.size ?? d.byteSize ?? file.size,
+ uploadResponse: response,
+ };
+ repairFileList.value.push(fileData);
+ } else {
+ showToast(response?.msg || "涓婁紶澶辫触");
+ }
+ } else {
+ showToast("涓婁紶澶辫触");
+ }
+ } catch (e) {
+ showToast("涓婁紶澶辫触");
+ }
+ uploading.value = false;
+ uploadProgress.value = 0;
+ },
+ fail: () => {
+ showToast("涓婁紶澶辫触");
+ uploading.value = false;
+ uploadProgress.value = 0;
+ },
+ });
+ if (uploadTask && uploadTask.onProgressUpdate) {
+ uploadTask.onProgressUpdate(e => {
+ uploadProgress.value = e.progress;
+ });
+ }
+ };
+
+ const removeRepairFile = index => {
+ repairFileList.value.splice(index, 1);
};
// 鏄剧ず鏃ユ湡閫夋嫨鍣�
@@ -307,8 +497,13 @@
loading.value = true;
const id = getPageId();
- // 鍑嗗鎻愪氦鏁版嵁
+ // 闄勪欢鏁扮粍锛氫笂浼犳帴鍙ｈ繑鍥炵殑闄勪欢淇℃伅锛堜笌宸℃涓�鑷翠紶 fileList锛�
+ const fileList = repairFileList.value.map(f => {
+ const d = f.uploadResponse?.data !== undefined ? f.uploadResponse.data : f.uploadResponse;
+ return d ? { ...d } : null;
+ }).filter(Boolean);
const submitData = { ...form.value };
+ if (fileList.length) submitData.fileList = fileList;
const { code } = id
? await editRepair({ id: id, ...submitData })
@@ -456,4 +651,97 @@
.picker-input-text.placeholder {
color: #c0c4cc;
}
+
+ .simple-upload-area {
+ padding: 15px 20px;
+ }
+
+ .upload-buttons {
+ display: flex;
+ gap: 10px;
+ margin-bottom: 10px;
+ }
+
+ .upload-progress {
+ margin: 15px 0;
+ padding: 0 10px;
+ }
+
+ .file-list {
+ margin-top: 15px;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+ }
+
+ .file-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background: #fff;
+ border-radius: 12px;
+ padding: 8px;
+ border: 1px solid #e9ecef;
+ width: calc(50% - 6px);
+ min-width: 120px;
+ }
+
+ .file-preview-container {
+ position: relative;
+ margin-bottom: 8px;
+ }
+
+ .file-preview {
+ width: 80px;
+ height: 80px;
+ border-radius: 8px;
+ object-fit: cover;
+ border: 2px solid #f0f0f0;
+ }
+
+ .delete-btn {
+ position: absolute;
+ top: -6px;
+ right: -6px;
+ width: 20px;
+ height: 20px;
+ background: #ff4757;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+ }
+
+ .file-info {
+ text-align: center;
+ width: 100%;
+ }
+
+ .file-name {
+ font-size: 12px;
+ color: #333;
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 100px;
+ }
+
+ .file-size {
+ font-size: 10px;
+ color: #999;
+ margin-top: 2px;
+ display: block;
+ }
+
+ .empty-state {
+ text-align: center;
+ padding: 24px 16px;
+ color: #999;
+ font-size: 14px;
+ background: #f8f9fa;
+ border-radius: 8px;
+ border: 2px dashed #ddd;
+ }
</style>
\ No newline at end of file
diff --git a/src/pages/equipmentManagement/repair/index.vue b/src/pages/equipmentManagement/repair/index.vue
index a9bfe4b..4dd7c1e 100644
--- a/src/pages/equipmentManagement/repair/index.vue
+++ b/src/pages/equipmentManagement/repair/index.vue
@@ -82,6 +82,14 @@
缂栬緫
</u-button>
<u-button
+ type="success"
+ size="small"
+ class="action-btn"
+ @click="viewAttachments(item)"
+ >
+ 鏌ョ湅闄勪欢
+ </u-button>
+ <u-button
type="warning"
size="small"
class="action-btn"
@@ -107,6 +115,72 @@
<view v-else class="no-data">
<text>鏆傛棤璁惧鎶ヤ慨鏁版嵁</text>
</view>
+ <!-- 鏌ョ湅闄勪欢寮圭獥 -->
+ <view v-if="showAttachmentDialog" class="custom-modal-overlay" @click="closeAttachmentDialog">
+ <view class="custom-modal-container" @click.stop>
+ <view class="attachment-popup-content">
+ <view class="attachment-popup-header">
+ <text class="attachment-popup-title">鏌ョ湅闄勪欢 - {{ currentViewRepair?.deviceName || '鎶ヤ慨' }}</text>
+ <view class="close-btn-attachment" @click="closeAttachmentDialog">
+ <u-icon name="close" size="16" color="#666"></u-icon>
+ </view>
+ </view>
+ <view class="attachment-popup-body">
+ <view class="attachment-content">
+ <view v-if="attachmentList.length > 0" class="attachment-list">
+ <view
+ v-for="(file, index) in attachmentList"
+ :key="index"
+ class="attachment-item"
+ @click="previewAttachment(file)"
+ >
+ <view class="attachment-preview-container">
+ <image
+ v-if="isImageFile(file)"
+ :src="formatFileUrl(file.url || file.downloadUrl)"
+ class="attachment-preview"
+ mode="aspectFill"
+ />
+ <view v-else class="attachment-video-preview">
+ <u-icon name="video" size="24" color="#409eff"></u-icon>
+ <text class="video-text">瑙嗛</text>
+ </view>
+ </view>
+ <view class="attachment-info">
+ <text class="attachment-name">{{ file.originalFilename || file.bucketFilename || file.name || '闄勪欢' }}</text>
+ <text class="attachment-size">{{ formatFileSize(file.byteSize || file.size) }}</text>
+ </view>
+ </view>
+ </view>
+ <view v-else class="attachment-empty">
+ <text>鏆傛棤闄勪欢</text>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+ </view>
+ <!-- 瑙嗛棰勮寮圭獥 -->
+ <view v-if="showVideoDialog" class="video-modal-overlay" @click="closeVideoPreview">
+ <view class="video-modal-container" @click.stop>
+ <view class="video-modal-header">
+ <text class="video-modal-title">{{ currentVideoFile?.originalFilename || currentVideoFile?.bucketFilename || '瑙嗛棰勮' }}</text>
+ <view class="close-btn-video" @click="closeVideoPreview">
+ <u-icon name="close" size="16" color="#fff"></u-icon>
+ </view>
+ </view>
+ <view class="video-modal-body">
+ <video
+ v-if="currentVideoFile"
+ :src="currentVideoFile.url || currentVideoFile.downloadUrl"
+ class="video-player"
+ controls
+ autoplay
+ @error="handleVideoError"
+ ></video>
+ </view>
+ </view>
+ </view>
<!-- 娴姩鎿嶄綔鎸夐挳 -->
<view class="fab-button" @click="addRepair">
<up-icon name="plus" size="24" color="#ffffff"></up-icon>
@@ -118,7 +192,8 @@
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import PageHeader from '@/components/PageHeader.vue'
-import { getRepairPage, delRepair } from '@/api/equipmentManagement/repair'
+import { getRepairPage, delRepair, getRepairById } from '@/api/equipmentManagement/repair'
+import config from '@/config'
import useUserStore from "@/store/modules/user"
const showToast = (message) => {
@@ -135,6 +210,81 @@
// 璁惧鎶ヤ慨鏁版嵁
const repairList = ref([])
+
+// 鏌ョ湅闄勪欢
+const showAttachmentDialog = ref(false)
+const attachmentList = ref([])
+const currentViewRepair = ref(null)
+const showVideoDialog = ref(false)
+const currentVideoFile = ref(null)
+
+const filePreviewBase = config.fileUrl || config.baseUrl || ''
+
+const formatFileUrl = (url) => {
+ if (!url) return ''
+ if (url.startsWith('http://') || url.startsWith('https://')) return url
+ const base = (filePreviewBase || '').replace(/\/$/, '')
+ const path = (url || '').replace(/^\/+/, '')
+ return path ? `${base}/${path}` : base
+}
+
+const isImageFile = (file) => {
+ if (file?.contentType && file.contentType.startsWith('image/')) return true
+ if (file?.type === 'image') return true
+ const name = file?.bucketFilename || file?.originalFilename || file?.name || ''
+ const ext = name.split('.').pop()?.toLowerCase()
+ return ['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)
+}
+
+const formatFileSize = (size) => {
+ if (!size) return ''
+ if (size < 1024) return size + 'B'
+ if (size < 1024 * 1024) return (size / 1024).toFixed(1) + 'KB'
+ return (size / (1024 * 1024)).toFixed(1) + 'MB'
+}
+
+const viewAttachments = async (item) => {
+ try {
+ currentViewRepair.value = item
+ const { code, data } = await getRepairById(item.id)
+ if (code === 200 && data) {
+ attachmentList.value = Array.isArray(data.fileList) ? data.fileList : (Array.isArray(data.commonFileList) ? data.commonFileList : [])
+ showAttachmentDialog.value = true
+ } else {
+ showToast('鑾峰彇闄勪欢澶辫触')
+ }
+ } catch (e) {
+ showToast('鑾峰彇闄勪欢澶辫触')
+ }
+}
+
+const closeAttachmentDialog = () => {
+ showAttachmentDialog.value = false
+ currentViewRepair.value = null
+ attachmentList.value = []
+}
+
+const previewAttachment = (file) => {
+ if (isImageFile(file)) {
+ const urls = attachmentList.value.filter((f) => isImageFile(f)).map((f) => formatFileUrl(f.url || f.downloadUrl))
+ uni.previewImage({
+ urls,
+ current: formatFileUrl(file.url || file.downloadUrl)
+ })
+ } else {
+ currentVideoFile.value = file
+ showVideoDialog.value = true
+ }
+}
+
+const closeVideoPreview = () => {
+ showVideoDialog.value = false
+ currentVideoFile.value = null
+}
+
+const handleVideoError = () => {
+ uni.showToast({ title: '瑙嗛鎾斁澶辫触', icon: 'none' })
+}
// 杩斿洖涓婁竴椤�
const goBack = () => {
@@ -262,4 +412,216 @@
.action-buttons {
gap: 8px; // 涓庡叕鍏辨牱寮忎腑鐨� 12px 涓嶅悓
}
+
+/* 鏌ョ湅闄勪欢寮圭獥 */
+.custom-modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.5);
+ z-index: 100;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+}
+
+.custom-modal-container {
+ width: 100%;
+ max-width: 500px;
+ max-height: 80vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.attachment-popup-content {
+ background: #fff;
+ border-radius: 12px;
+ width: 100%;
+ min-height: 300px;
+ max-height: 70vh;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.attachment-popup-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 15px 20px;
+ border-bottom: 1px solid #eee;
+ background: #f8f9fa;
+}
+
+.attachment-popup-title {
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+}
+
+.close-btn-attachment {
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ background: #f5f5f5;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.attachment-popup-body {
+ flex: 1;
+ padding: 15px 20px;
+ overflow-y: auto;
+}
+
+.attachment-content {
+ min-height: 200px;
+}
+
+.attachment-list {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 12px;
+}
+
+.attachment-item {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background: #fff;
+ border-radius: 12px;
+ padding: 8px;
+ border: 1px solid #e9ecef;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+ width: calc(33.33% - 8px);
+ min-width: 100px;
+}
+
+.attachment-preview-container {
+ margin-bottom: 8px;
+}
+
+.attachment-preview {
+ width: 80px;
+ height: 80px;
+ border-radius: 8px;
+ object-fit: cover;
+ border: 2px solid #f0f0f0;
+}
+
+.attachment-video-preview {
+ width: 80px;
+ height: 80px;
+ background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ border: 2px solid #f0f0f0;
+}
+
+.attachment-info {
+ text-align: center;
+ width: 100%;
+}
+
+.attachment-name {
+ font-size: 12px;
+ color: #333;
+ display: block;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ max-width: 80px;
+}
+
+.attachment-size {
+ font-size: 10px;
+ color: #999;
+ margin-top: 2px;
+ display: block;
+}
+
+.attachment-empty {
+ text-align: center;
+ padding: 60px 20px;
+ color: #999;
+ font-size: 14px;
+ background: #f8f9fa;
+ border-radius: 8px;
+ border: 2px dashed #ddd;
+}
+
+/* 瑙嗛棰勮寮圭獥 */
+.video-modal-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.8);
+ z-index: 10001;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 20px;
+}
+
+.video-modal-container {
+ width: 90%;
+ max-width: 800px;
+ max-height: 80vh;
+ background: #000;
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.video-modal-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 15px 20px;
+ background: rgba(0, 0, 0, 0.7);
+ color: #fff;
+}
+
+.video-modal-title {
+ font-size: 16px;
+ color: #fff;
+}
+
+.close-btn-video {
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ background: rgba(255, 255, 255, 0.2);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.video-modal-body {
+ background: #000;
+}
+
+.video-player {
+ width: 100%;
+ height: auto;
+ max-height: 60vh;
+ display: block;
+}
+
+.video-text {
+ font-size: 12px;
+ color: #666;
+ margin-top: 4px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3