From bbdd646b82cb8c84079598b7200b1102fd247b28 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 29 十二月 2025 16:08:48 +0800
Subject: [PATCH] 昭德-巡检上传开发调整
---
src/pages/inspectionUpload/components/formDia.vue | 334 ++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 257 insertions(+), 77 deletions(-)
diff --git a/src/pages/inspectionUpload/components/formDia.vue b/src/pages/inspectionUpload/components/formDia.vue
index 41837cb..5372423 100644
--- a/src/pages/inspectionUpload/components/formDia.vue
+++ b/src/pages/inspectionUpload/components/formDia.vue
@@ -1,6 +1,6 @@
<template>
<u-popup
- v-model="dialogVisitable"
+ :show="dialogVisitable"
mode="center"
:round="10"
:closeable="true"
@@ -14,47 +14,68 @@
<view class="upload-container">
<view class="form-container">
<view class="title">鐢熶骇鍓�</view>
- <u-upload
- :fileList="beforeModelValue"
- @afterRead="afterRead"
- @delete="deleteFile"
- name="before"
- multiple
- :maxCount="10"
- :maxSize="1024 * 1024"
- accept="video/*"
- :previewFullImage="true"
- ></u-upload>
+ <view class="upload-buttons">
+ <u-button type="primary" size="small" @click="chooseVideo('before')" :disabled="beforeModelValue.length >= 10">
+ <u-icon name="video" size="16" color="#fff" style="margin-right: 5px;"></u-icon>
+ 閫夋嫨瑙嗛
+ </u-button>
+ <text class="file-count">{{ beforeModelValue.length }}/10</text>
+ </view>
+ <view class="file-list" v-if="beforeModelValue.length > 0">
+ <view v-for="(file, index) in beforeModelValue" :key="index" class="file-item">
+ <text class="file-name">瑙嗛{{ index + 1 }}</text>
+ <u-button
+ type="error"
+ size="mini"
+ :customStyle="{ minWidth: '120rpx', width: 'auto', padding: '0 20rpx', height: '60rpx' }"
+ @click="deleteFile(index, 'before')"
+ >鍒犻櫎</u-button>
+ </view>
+ </view>
</view>
<view class="form-container">
<view class="title">鐢熶骇鍚�</view>
- <u-upload
- :fileList="afterModelValue"
- @afterRead="afterRead"
- @delete="deleteFile"
- name="after"
- multiple
- :maxCount="10"
- :maxSize="1024 * 1024"
- accept="video/*"
- :previewFullImage="true"
- ></u-upload>
+ <view class="upload-buttons">
+ <u-button type="primary" size="small" @click="chooseVideo('after')" :disabled="afterModelValue.length >= 10">
+ <u-icon name="video" size="16" color="#fff" style="margin-right: 5px;"></u-icon>
+ 閫夋嫨瑙嗛
+ </u-button>
+ <text class="file-count">{{ afterModelValue.length }}/10</text>
+ </view>
+ <view class="file-list" v-if="afterModelValue.length > 0">
+ <view v-for="(file, index) in afterModelValue" :key="index" class="file-item">
+ <text class="file-name">瑙嗛{{ index + 1 }}</text>
+ <u-button
+ type="error"
+ size="mini"
+ :customStyle="{ minWidth: '120rpx', width: 'auto', padding: '0 20rpx', height: '60rpx' }"
+ @click="deleteFile(index, 'after')"
+ >鍒犻櫎</u-button>
+ </view>
+ </view>
</view>
<view class="form-container">
<view class="title">鐢熶骇闂</view>
- <u-upload
- :fileList="issueModelValue"
- @afterRead="afterRead"
- @delete="deleteFile"
- name="issue"
- multiple
- :maxCount="10"
- :maxSize="1024 * 1024"
- accept="video/*"
- :previewFullImage="true"
- ></u-upload>
+ <view class="upload-buttons">
+ <u-button type="primary" size="small" @click="chooseVideo('issue')" :disabled="issueModelValue.length >= 10">
+ <u-icon name="video" size="16" color="#fff" style="margin-right: 5px;"></u-icon>
+ 閫夋嫨瑙嗛
+ </u-button>
+ <text class="file-count">{{ issueModelValue.length }}/10</text>
+ </view>
+ <view class="file-list" v-if="issueModelValue.length > 0">
+ <view v-for="(file, index) in issueModelValue" :key="index" class="file-item">
+ <text class="file-name">瑙嗛{{ index + 1 }}</text>
+ <u-button
+ type="error"
+ size="mini"
+ :customStyle="{ minWidth: '120rpx', width: 'auto', padding: '0 20rpx', height: '60rpx' }"
+ @click="deleteFile(index, 'issue')"
+ >鍒犻櫎</u-button>
+ </view>
+ </view>
</view>
</view>
@@ -67,10 +88,23 @@
</template>
<script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
import { submitInspectionRecord } from '@/api/equipmentManagement/inspection.js'
+import { getToken } from '@/utils/auth'
+import config from '@/config.js'
const emit = defineEmits(['closeDia'])
+
+// 涓婁紶鎺ュ彛URL
+const uploadFileUrl = computed(() => {
+ return config.baseUrl + '/common/minioUploads'
+})
+
+// 涓婁紶璇锋眰澶�
+const uploadHeaders = computed(() => {
+ const token = getToken()
+ return token ? { Authorization: 'Bearer ' + token } : {}
+})
const dialogVisitable = ref(false)
const beforeModelValue = ref([])
@@ -78,63 +112,171 @@
const issueModelValue = ref([])
const infoData = ref(null)
-// 鏂囦欢涓婁紶澶勭悊
-const afterRead = (event) => {
- const { name, file } = event
+// 閫夋嫨瑙嗛
+const chooseVideo = (type) => {
+ const currentList = type === 'before' ? beforeModelValue : type === 'after' ? afterModelValue : issueModelValue;
- // 涓婁紶鏂囦欢鍒版湇鍔″櫒
- uni.uploadFile({
- url: '/api/upload', // 鏇挎崲涓哄疄闄呯殑涓婁紶鎺ュ彛
- filePath: file.url,
- name: 'file',
+ if (currentList.value.length >= 10) {
+ uni.showToast({
+ title: '鏈�澶氬彧鑳介�夋嫨10涓棰�',
+ icon: 'none'
+ });
+ return;
+ }
+
+ uni.chooseVideo({
+ sourceType: ['camera', 'album'],
+ maxDuration: 60,
+ camera: 'back',
success: (res) => {
- const data = JSON.parse(res.data)
- if (data.code === 200) {
+ try {
+ if (!res.tempFilePath) {
+ throw new Error('鏈幏鍙栧埌瑙嗛鏂囦欢');
+ }
+
+ // 浠庝复鏃惰矾寰勪腑鎻愬彇鏂囦欢鍚嶏紝鍋氫负鍒濆灞曠ず
+ const tempName = res.tempFilePath.split('/').pop() || `video_${Date.now()}.mp4`
const fileItem = {
- url: data.data.url,
- name: file.name,
- status: 'success'
- }
+ url: res.tempFilePath,
+ name: tempName,
+ originalFilename: tempName,
+ size: res.size || 0,
+ duration: res.duration || 0,
+ status: 'pending' // 寰呬笂浼犵姸鎬�
+ };
- // 鏍规嵁name娣诲姞鍒板搴旂殑鏁扮粍
- if (name === 'before') {
- beforeModelValue.value.push(fileItem)
- } else if (name === 'after') {
- afterModelValue.value.push(fileItem)
- } else if (name === 'issue') {
- issueModelValue.value.push(fileItem)
- }
+ // 娣诲姞鍒板搴旂殑鏁扮粍
+ currentList.value.push(fileItem);
+ // 鑷姩涓婁紶
+ uploadFile(fileItem, type, currentList.value.length - 1);
+ } catch (error) {
+ console.error('澶勭悊瑙嗛澶辫触:', error);
uni.showToast({
- title: '涓婁紶鎴愬姛',
- icon: 'success'
- })
- } else {
- uni.showToast({
- title: '涓婁紶澶辫触',
+ title: '澶勭悊瑙嗛澶辫触',
icon: 'error'
- })
+ });
}
},
- fail: () => {
+ fail: (err) => {
+ console.error('閫夋嫨瑙嗛澶辫触:', err);
uni.showToast({
- title: '涓婁紶澶辫触',
+ title: '閫夋嫨瑙嗛澶辫触: ' + (err.errMsg || '鏈煡閿欒'),
icon: 'error'
- })
+ });
}
- })
+ });
+}
+
+// 涓婁紶鏂囦欢鍒版湇鍔″櫒
+const uploadFile = (fileItem, type, index) => {
+ fileItem.status = 'uploading';
+
+ // 纭繚token瀛樺湪
+ const token = getToken();
+ if (!token) {
+ fileItem.status = 'failed';
+ uni.showToast({
+ title: '鐢ㄦ埛鏈櫥褰�',
+ icon: 'error'
+ });
+ return;
+ }
+
+ uni.uploadFile({
+ url: uploadFileUrl.value,
+ filePath: fileItem.url,
+ name: 'files', // 娉ㄦ剰锛氭帴鍙ｄ娇鐢ㄧ殑鏄� 'files' 鑰屼笉鏄� 'file'
+ header: {
+ 'Authorization': `Bearer ${token}`
+ },
+ success: (res) => {
+ try {
+ if (res.statusCode === 200) {
+ const response = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
+ if (response.code === 200) {
+ // 鍝嶅簲鏁版嵁鏄暟缁勬牸寮忥紝鍙栫涓�涓厓绱�
+ const uploadedFile = Array.isArray(response.data) ? response.data[0] : response.data;
+
+ console.log('涓婁紶鎴愬姛锛岃繑鍥炵殑鏂囦欢淇℃伅:', uploadedFile);
+ console.log('鍘熷鏂囦欢鍚�:', uploadedFile.originalFilename);
+
+ // 鏇存柊鏂囦欢淇℃伅 - 浣跨敤 Object.assign 纭繚鍝嶅簲寮忔洿鏂�
+ const displayName = uploadedFile.originalFilename
+ || uploadedFile.bucketFilename
+ || fileItem.name
+ || '鏈懡鍚嶆枃浠�';
+ Object.assign(fileItem, {
+ url: uploadedFile.url || uploadedFile.downloadUrl,
+ status: 'success',
+ id: uploadedFile.id,
+ name: displayName,
+ originalFilename: uploadedFile.originalFilename || displayName, // 淇濆瓨鍘熷鏂囦欢鍚�
+ bucketFilename: uploadedFile.bucketFilename,
+ downloadUrl: uploadedFile.downloadUrl || uploadedFile.url,
+ size: uploadedFile.byteSize || fileItem.size,
+ createTime: uploadedFile.createTime || new Date().getTime()
+ });
+
+ console.log('鏇存柊鍚庣殑鏂囦欢椤�:', fileItem);
+
+ uni.showToast({
+ title: '涓婁紶鎴愬姛',
+ icon: 'success'
+ });
+ } else {
+ fileItem.status = 'failed';
+ uni.showToast({
+ title: response.msg || '涓婁紶澶辫触',
+ icon: 'error'
+ });
+ }
+ } else {
+ fileItem.status = 'failed';
+ uni.showToast({
+ title: `鏈嶅姟鍣ㄩ敊璇紝鐘舵�佺爜: ${res.statusCode}`,
+ icon: 'error'
+ });
+ }
+ } catch (e) {
+ fileItem.status = 'failed';
+ console.error('瑙ｆ瀽鍝嶅簲澶辫触:', e);
+ console.error('鍘熷鍝嶅簲鏁版嵁:', res.data);
+ uni.showToast({
+ title: '瑙ｆ瀽鍝嶅簲澶辫触',
+ icon: 'error'
+ });
+ }
+ },
+ fail: (err) => {
+ fileItem.status = 'failed';
+ console.error('涓婁紶澶辫触:', err);
+ let errorMessage = '涓婁紶澶辫触';
+ if (err.errMsg) {
+ if (err.errMsg.includes('statusCode: null')) {
+ errorMessage = '缃戠粶杩炴帴澶辫触锛岃妫�鏌ョ綉缁滆缃�';
+ } else if (err.errMsg.includes('timeout')) {
+ errorMessage = '涓婁紶瓒呮椂锛岃閲嶈瘯';
+ } else {
+ errorMessage = err.errMsg;
+ }
+ }
+ uni.showToast({
+ title: errorMessage,
+ icon: 'error'
+ });
+ }
+ });
}
// 鍒犻櫎鏂囦欢
-const deleteFile = (event) => {
- const { name, index } = event
-
- if (name === 'before') {
- beforeModelValue.value.splice(index, 1)
- } else if (name === 'after') {
- afterModelValue.value.splice(index, 1)
- } else if (name === 'issue') {
- issueModelValue.value.splice(index, 1)
+const deleteFile = (index, type) => {
+ if (type === 'before') {
+ beforeModelValue.value.splice(index, 1);
+ } else if (type === 'after') {
+ afterModelValue.value.splice(index, 1);
+ } else if (type === 'issue') {
+ issueModelValue.value.splice(index, 1);
}
}
@@ -253,4 +395,42 @@
border-top: 1px solid #f0f0f0;
background-color: #fafafa;
}
+
+.upload-buttons {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 10px;
+}
+
+.file-count {
+ font-size: 12px;
+ color: #999;
+}
+
+.file-list {
+ margin-top: 10px;
+}
+
+.file-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 8px 0;
+ border-bottom: 1px solid #f0f0f0;
+}
+
+.file-item:last-child {
+ border-bottom: none;
+}
+
+.file-name {
+ font-size: 14px;
+ color: #333;
+ flex: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ margin-right: 10px;
+}
</style>
--
Gitblit v1.9.3