From 55d6f86eb7dc8aada306405dadd29a2716a6e009 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期六, 23 五月 2026 14:46:41 +0800
Subject: [PATCH] 设备巡检只留一套图片上传
---
src/pages/inspectionUpload/components/formDia.vue | 720 +++++++++++++++++++++++++++--------------------------------
1 files changed, 329 insertions(+), 391 deletions(-)
diff --git a/src/pages/inspectionUpload/components/formDia.vue b/src/pages/inspectionUpload/components/formDia.vue
index 62bf40f..25eb108 100644
--- a/src/pages/inspectionUpload/components/formDia.vue
+++ b/src/pages/inspectionUpload/components/formDia.vue
@@ -1,460 +1,398 @@
<template>
- <u-popup
- v-model="dialogVisitable"
- mode="center"
- :round="10"
- :closeable="true"
- @close="cancel"
- >
+ <u-popup v-model="dialogVisitable"
+ mode="center"
+ :round="10"
+ :closeable="true"
+ @close="cancel">
<view class="popup-content">
<view class="popup-header">
<text class="popup-title">宸℃璁板綍涓婁紶</text>
</view>
-
<view class="upload-container">
<!-- 寮傚父鐘舵�侀�夋嫨 -->
<view class="form-container">
<view class="title">宸℃鐘舵��</view>
<view class="exception-section">
<view class="exception-options">
- <view
- class="exception-option"
- :class="{ active: hasException === false }"
- @click="setExceptionStatus(false)"
- >
- <u-icon name="checkmark-circle" size="20" color="#52c41a"></u-icon>
+ <view class="exception-option"
+ :class="{ active: hasException === false }"
+ @click="setExceptionStatus(false)">
+ <u-icon name="checkmark-circle"
+ size="20"
+ color="#52c41a"></u-icon>
<text class="option-text">姝ｅ父</text>
</view>
- <view
- class="exception-option"
- :class="{ active: hasException === true }"
- @click="setExceptionStatus(true)"
- >
- <u-icon name="close-circle" size="20" color="#ff4d4f"></u-icon>
+ <view class="exception-option"
+ :class="{ active: hasException === true }"
+ @click="setExceptionStatus(true)">
+ <u-icon name="close-circle"
+ size="20"
+ color="#ff4d4f"></u-icon>
<text class="option-text">瀛樺湪寮傚父</text>
</view>
</view>
</view>
</view>
-
<!-- 寮傚父鎻忚堪锛堜粎鍦ㄥ紓甯告椂鏄剧ず锛� -->
- <view class="form-container" v-if="hasException === true">
+ <view class="form-container"
+ v-if="hasException === true">
<view class="title">寮傚父鎻忚堪</view>
- <u-input
- v-model="exceptionDescription"
- type="textarea"
- :maxlength="500"
- placeholder="璇锋弿杩板紓甯告儏鍐�..."
- :customStyle="{ padding: '10px', backgroundColor: '#f5f5f5' }"
- />
+ <u-input v-model="exceptionDescription"
+ type="textarea"
+ :maxlength="500"
+ placeholder="璇锋弿杩板紓甯告儏鍐�..."
+ :customStyle="{ padding: '10px', backgroundColor: '#f5f5f5' }" />
</view>
-
<!-- 涓婁紶鍖哄煙锛堜粎鍦ㄥ紓甯告椂鏄剧ず锛� -->
<template v-if="hasException === true">
<view class="form-container">
- <view class="title">鐢熶骇鍓�</view>
- <u-upload
- :fileList="beforeModelValue"
- @afterRead="afterRead"
- @delete="deleteFile"
- name="before"
- multiple
- :maxCount="10"
- :maxSize="5 * 1024 * 1024"
- accept="image/*"
- :previewFullImage="true"
- ></u-upload>
- </view>
-
- <view class="form-container">
- <view class="title">鐢熶骇鍚�</view>
- <u-upload
- :fileList="afterModelValue"
- @afterRead="afterRead"
- @delete="deleteFile"
- name="after"
- multiple
- :maxCount="10"
- :maxSize="5 * 1024 * 1024"
- accept="image/*"
- :previewFullImage="true"
- ></u-upload>
- </view>
-
- <view class="form-container">
- <view class="title">鐢熶骇闂</view>
- <u-upload
- :fileList="issueModelValue"
- @afterRead="afterRead"
- @delete="deleteFile"
- name="issue"
- multiple
- :maxCount="10"
- :maxSize="5 * 1024 * 1024"
- accept="image/*"
- :previewFullImage="true"
- ></u-upload>
+ <view class="title">宸℃鐓х墖</view>
+ <u-upload :fileList="beforeModelValue"
+ @afterRead="afterRead"
+ @delete="deleteFile"
+ name="before"
+ multiple
+ :maxCount="10"
+ :maxSize="5 * 1024 * 1024"
+ accept="image/*"
+ :previewFullImage="true"></u-upload>
</view>
</template>
-
<!-- 姝ｅ父鐘舵�佹彁绀� -->
- <view class="form-container normal-tip" v-if="hasException === false">
- <u-icon name="info-circle" size="40" color="#52c41a"></u-icon>
+ <view class="form-container normal-tip"
+ v-if="hasException === false">
+ <u-icon name="info-circle"
+ size="40"
+ color="#52c41a"></u-icon>
<text class="tip-text">璁惧杩愯姝ｅ父锛屾棤闇�涓婁紶鐓х墖</text>
</view>
</view>
-
<view class="popup-footer">
- <u-button @click="cancel" :customStyle="{ marginRight: '10px' }">鍙栨秷</u-button>
- <u-button type="primary" @click="submitForm">淇濆瓨</u-button>
+ <u-button @click="cancel"
+ :customStyle="{ marginRight: '10px' }">鍙栨秷</u-button>
+ <u-button type="primary"
+ @click="submitForm">淇濆瓨</u-button>
</view>
</view>
</u-popup>
</template>
<script setup>
-import { ref, computed } from 'vue'
-import { submitInspectionRecord } from '@/api/equipmentManagement/inspection.js'
-import { getToken } from '@/utils/auth'
-import config from '@/config'
+ import { ref, computed } from "vue";
+ import { submitInspectionRecord } from "@/api/equipmentManagement/inspection.js";
+ import { getToken } from "@/utils/auth";
+ import config from "@/config";
-const emit = defineEmits(['closeDia'])
+ const emit = defineEmits(["closeDia"]);
-const dialogVisitable = ref(false)
-const beforeModelValue = ref([])
-const afterModelValue = ref([])
-const issueModelValue = ref([])
-const infoData = ref(null)
+ const dialogVisitable = ref(false);
+ const beforeModelValue = ref([]);
+ const infoData = ref(null);
-// 寮傚父鐘舵�侊細null=鏈�夋嫨, false=姝ｅ父, true=寮傚父
-const hasException = ref(null)
-// 寮傚父鎻忚堪
-const exceptionDescription = ref('')
+ // 寮傚父鐘舵�侊細null=鏈�夋嫨, false=姝ｅ父, true=寮傚父
+ const hasException = ref(null);
+ // 寮傚父鎻忚堪
+ const exceptionDescription = ref("");
-// 璁＄畻涓婁紶URL
-const uploadFileUrl = computed(() => {
- let baseUrl = '';
-
- if (process.env.VUE_APP_BASE_API) {
- baseUrl = process.env.VUE_APP_BASE_API;
- } else {
- baseUrl = config.baseUrl;
- }
-
- return baseUrl + '/file/upload';
-})
+ // 璁＄畻涓婁紶URL
+ const uploadFileUrl = computed(() => {
+ let baseUrl = "";
-const uploadSingleFile = async (fileItem, typeValue) => {
- const token = getToken()
- if (!token) throw new Error('鐢ㄦ埛鏈櫥褰�')
-
- // H5: u-upload 鍙兘缁欏師鐢� File锛坒ileItem.file锛�
- const rawFile = fileItem?.file
- if (rawFile) {
- const formData = new FormData()
- formData.append('file', rawFile, rawFile.name || 'image.jpg')
- formData.append('type', String(typeValue))
- const res = await fetch(uploadFileUrl.value, {
- method: 'POST',
- headers: { Authorization: 'Bearer ' + token },
- body: formData
- })
- const data = await res.json()
- if (data?.code !== 200) throw new Error(data?.msg || '涓婁紶澶辫触')
- return {
- url: data?.data?.url,
- name: rawFile.name || 'image.jpg',
- status: 'success'
+ if (process.env.VUE_APP_BASE_API) {
+ baseUrl = process.env.VUE_APP_BASE_API;
+ } else {
+ baseUrl = config.baseUrl;
}
- }
- // 闈� H5 / 鍏煎锛氳蛋 uni.uploadFile
- return await new Promise((resolve, reject) => {
- uni.uploadFile({
- url: uploadFileUrl.value,
- filePath: fileItem.url,
- name: 'file',
- header: {
- 'Authorization': `Bearer ${token}`
- },
- formData: {
- type: typeValue
- },
- success: (res) => {
- try {
- const data = JSON.parse(res.data)
- if (data.code === 200) {
- resolve({
- url: data.data.url,
- name: fileItem.name,
- status: 'success'
- })
- } else {
- reject(new Error(data.msg || '涓婁紶澶辫触'))
+ return baseUrl + "/file/upload";
+ });
+
+ const uploadSingleFile = async (fileItem, typeValue) => {
+ const token = getToken();
+ if (!token) throw new Error("鐢ㄦ埛鏈櫥褰�");
+
+ // H5: u-upload 鍙兘缁欏師鐢� File锛坒ileItem.file锛�
+ const rawFile = fileItem?.file;
+ if (rawFile) {
+ const formData = new FormData();
+ formData.append("file", rawFile, rawFile.name || "image.jpg");
+ formData.append("type", String(typeValue));
+ const res = await fetch(uploadFileUrl.value, {
+ method: "POST",
+ headers: { Authorization: "Bearer " + token },
+ body: formData,
+ });
+ const data = await res.json();
+ if (data?.code !== 200) throw new Error(data?.msg || "涓婁紶澶辫触");
+ return {
+ url: data?.data?.url,
+ name: rawFile.name || "image.jpg",
+ status: "success",
+ };
+ }
+
+ // 闈� H5 / 鍏煎锛氳蛋 uni.uploadFile
+ return await new Promise((resolve, reject) => {
+ uni.uploadFile({
+ url: uploadFileUrl.value,
+ filePath: fileItem.url,
+ name: "file",
+ header: {
+ Authorization: `Bearer ${token}`,
+ },
+ formData: {
+ type: typeValue,
+ },
+ success: res => {
+ try {
+ const data = JSON.parse(res.data);
+ if (data.code === 200) {
+ resolve({
+ url: data.data.url,
+ name: fileItem.name,
+ status: "success",
+ });
+ } else {
+ reject(new Error(data.msg || "涓婁紶澶辫触"));
+ }
+ } catch (e) {
+ reject(e);
}
- } catch (e) {
- reject(e)
+ },
+ fail: err => reject(err),
+ });
+ });
+ };
+
+ // 鏂囦欢涓婁紶澶勭悊
+ const afterRead = event => {
+ const { file } = event;
+
+ // 浠呬繚鐣欑敓浜у墠(typeValue=10)
+ let typeValue = 10;
+
+ const files = Array.isArray(file) ? file : [file];
+ Promise.resolve()
+ .then(async () => {
+ for (const f of files) {
+ const uploaded = await uploadSingleFile(f, typeValue);
+ beforeModelValue.value.push(uploaded);
}
- },
- fail: (err) => reject(err)
- })
- })
-}
-
-// 鏂囦欢涓婁紶澶勭悊
-const afterRead = (event) => {
- const { name, file } = event
-
- // 鏍规嵁涓婁紶绫诲瀷璁剧疆涓嶅悓鐨則ype鍊�
- let typeValue = 10 // 榛樿鍊�
- if (name === 'before') {
- typeValue = 10 // 鐢熶骇鍓�
- } else if (name === 'after') {
- typeValue = 11 // 鐢熶骇涓�
- } else if (name === 'issue') {
- typeValue = 12 // 鐢熶骇鍚�
- }
-
- const files = Array.isArray(file) ? file : [file]
- Promise.resolve().then(async () => {
- for (const f of files) {
- const uploaded = await uploadSingleFile(f, typeValue)
- if (name === 'before') {
- beforeModelValue.value.push(uploaded)
- } else if (name === 'after') {
- afterModelValue.value.push(uploaded)
- } else if (name === 'issue') {
- issueModelValue.value.push(uploaded)
- }
- }
- uni.showToast({ title: '涓婁紶鎴愬姛', icon: 'success' })
- }).catch((err) => {
- console.error('涓婁紶澶辫触:', err)
- uni.showToast({ title: '涓婁紶澶辫触', 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 setExceptionStatus = (status) => {
- hasException.value = status
-}
-
-// 鎻愪氦琛ㄥ崟
-const submitForm = async () => {
- try {
- // 妫�鏌ユ槸鍚﹂�夋嫨浜嗗贰妫�鐘舵��
- if (hasException.value === null) {
- uni.showToast({
- title: '璇烽�夋嫨宸℃鐘舵��',
- icon: 'none'
+ uni.showToast({ title: "涓婁紶鎴愬姛", icon: "success" });
})
- return
- }
+ .catch(err => {
+ console.error("涓婁紶澶辫触:", err);
+ uni.showToast({ title: "涓婁紶澶辫触", icon: "error" });
+ });
+ };
- // 濡傛灉鏄紓甯哥姸鎬侊紝妫�鏌ユ槸鍚︽湁涓婁紶鏂囦欢
- if (hasException.value === true) {
- const totalFiles = beforeModelValue.value.length + afterModelValue.value.length + issueModelValue.value.length
- if (totalFiles === 0) {
+ // 鍒犻櫎鏂囦欢
+ const deleteFile = event => {
+ const { index } = event;
+ beforeModelValue.value.splice(index, 1);
+ };
+
+ // 璁剧疆寮傚父鐘舵��
+ const setExceptionStatus = status => {
+ hasException.value = status;
+ };
+
+ // 鎻愪氦琛ㄥ崟
+ const submitForm = async () => {
+ try {
+ // 妫�鏌ユ槸鍚﹂�夋嫨浜嗗贰妫�鐘舵��
+ if (hasException.value === null) {
uni.showToast({
- title: '璇蜂笂浼犲紓甯哥収鐗�',
- icon: 'none'
- })
- return
+ title: "璇烽�夋嫨宸℃鐘舵��",
+ icon: "none",
+ });
+ return;
}
- // 妫�鏌ユ槸鍚﹀～鍐欎簡寮傚父鎻忚堪
- if (!exceptionDescription.value.trim()) {
- uni.showToast({
- title: '璇峰～鍐欏紓甯告弿杩�',
- icon: 'none'
- })
- return
+
+ // 濡傛灉鏄紓甯哥姸鎬侊紝妫�鏌ユ槸鍚︽湁涓婁紶鏂囦欢
+ if (hasException.value === true) {
+ if (beforeModelValue.value.length === 0) {
+ uni.showToast({
+ title: "璇蜂笂浼犲紓甯哥収鐗�",
+ icon: "none",
+ });
+ return;
+ }
+ // 妫�鏌ユ槸鍚﹀～鍐欎簡寮傚父鎻忚堪
+ if (!exceptionDescription.value.trim()) {
+ uni.showToast({
+ title: "璇峰～鍐欏紓甯告弿杩�",
+ icon: "none",
+ });
+ return;
+ }
}
- }
- let arr = []
- if (beforeModelValue.value.length > 0) {
- arr.push(...beforeModelValue.value.map(item => ({ ...item, statusType: 0 })))
- }
- if (afterModelValue.value.length > 0) {
- arr.push(...afterModelValue.value.map(item => ({ ...item, statusType: 1 })))
- }
- if (issueModelValue.value.length > 0) {
- arr.push(...issueModelValue.value.map(item => ({ ...item, statusType: 2 })))
- }
-
- // 鎻愪氦鏁版嵁
- infoData.value.storageBlobDTO = arr
- infoData.value.hasException = hasException.value
- infoData.value.exceptionDescription = exceptionDescription.value
- await submitInspectionRecord({ ...infoData.value })
-
- uni.showToast({
- title: '鎻愪氦鎴愬姛',
- icon: 'success'
- })
-
- cancel()
- } catch (error) {
- console.error('鎻愪氦澶辫触:', error)
- uni.showToast({
- title: '鎻愪氦澶辫触',
- icon: 'error'
- })
- }
-}
+ let arr = [];
+ if (beforeModelValue.value.length > 0) {
+ arr.push(
+ ...beforeModelValue.value.map(item => ({ ...item, statusType: 0 }))
+ );
+ }
-// 鎵撳紑寮规
-const openDialog = async (row) => {
- infoData.value = row
- dialogVisitable.value = true
-
- // 娓呯┖涔嬪墠鐨勬暟鎹�
- beforeModelValue.value = []
- afterModelValue.value = []
- issueModelValue.value = []
- hasException.value = null
- exceptionDescription.value = ''
-}
+ // 鎻愪氦鏁版嵁
+ infoData.value.storageBlobDTO = arr;
+ infoData.value.hasException = hasException.value;
+ infoData.value.exceptionDescription = exceptionDescription.value;
+ await submitInspectionRecord({ ...infoData.value });
-// 鍏抽棴寮规
-const cancel = () => {
- dialogVisitable.value = false
- emit('closeDia')
-}
+ uni.showToast({
+ title: "鎻愪氦鎴愬姛",
+ icon: "success",
+ });
-defineExpose({ openDialog })
+ cancel();
+ } catch (error) {
+ console.error("鎻愪氦澶辫触:", error);
+ uni.showToast({
+ title: "鎻愪氦澶辫触",
+ icon: "error",
+ });
+ }
+ };
+
+ // 鎵撳紑寮规
+ const openDialog = async row => {
+ infoData.value = row;
+ dialogVisitable.value = true;
+
+ // 娓呯┖涔嬪墠鐨勬暟鎹�
+ beforeModelValue.value = [];
+ hasException.value = null;
+ exceptionDescription.value = "";
+ };
+
+ // 鍏抽棴寮规
+ const cancel = () => {
+ dialogVisitable.value = false;
+ emit("closeDia");
+ };
+
+ defineExpose({ openDialog });
</script>
<style scoped lang="scss">
-.popup-content {
- width: 90vw;
- max-width: 400px;
- background-color: #fff;
- border-radius: 10px;
- overflow: hidden;
-}
-
-.popup-header {
- padding: 20px 20px 10px;
- text-align: center;
- border-bottom: 1px solid #f0f0f0;
-}
-
-.popup-title {
- font-size: 18px;
- font-weight: 600;
- color: #333;
-}
-
-.upload-container {
- padding: 20px;
- max-height: 60vh;
- overflow-y: auto;
-}
-
-.form-container {
- margin-bottom: 20px;
-
- &:last-child {
- margin-bottom: 0;
+ .popup-content {
+ width: 90vw;
+ max-width: 400px;
+ background-color: #fff;
+ border-radius: 10px;
+ overflow: hidden;
}
-}
-.title {
- font-size: 14px;
- color: #1890ff;
- line-height: 20px;
- font-weight: 600;
- padding-left: 10px;
- position: relative;
- margin: 6px 0 10px;
-
- &::before {
- content: "";
- position: absolute;
- left: 0;
- top: 3px;
- width: 4px;
- height: 14px;
- background-color: #1890ff;
+ .popup-header {
+ padding: 20px 20px 10px;
+ text-align: center;
+ border-bottom: 1px solid #f0f0f0;
}
-}
-.popup-footer {
- display: flex;
- justify-content: center;
- padding: 15px 20px;
- border-top: 1px solid #f0f0f0;
- background-color: #fafafa;
-}
-
-// 寮傚父鐘舵�侀�夋嫨鏍峰紡
-.exception-section {
- padding: 10px 0;
-}
-
-.exception-options {
- display: flex;
- gap: 15px;
-}
-
-.exception-option {
- flex: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- gap: 8px;
- padding: 15px 20px;
- border: 2px solid #e0e0e0;
- border-radius: 8px;
- cursor: pointer;
- transition: all 0.3s;
- background-color: #fff;
-
- &.active {
- border-color: #1890ff;
- background-color: #e6f7ff;
+ .popup-title {
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
}
-
- &:active {
- opacity: 0.8;
+
+ .upload-container {
+ padding: 20px;
+ max-height: 60vh;
+ overflow-y: auto;
}
-}
-.option-text {
- font-size: 14px;
- color: #333;
- font-weight: 500;
-}
+ .form-container {
+ margin-bottom: 20px;
-// 姝ｅ父鐘舵�佹彁绀烘牱寮�
-.normal-tip {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- padding: 40px 20px;
- background-color: #f6ffed;
- border: 1px dashed #b7eb8f;
- border-radius: 8px;
-
- .tip-text {
- margin-top: 15px;
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ .title {
font-size: 14px;
- color: #52c41a;
+ color: #1890ff;
+ line-height: 20px;
+ font-weight: 600;
+ padding-left: 10px;
+ position: relative;
+ margin: 6px 0 10px;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 3px;
+ width: 4px;
+ height: 14px;
+ background-color: #1890ff;
+ }
}
-}
+
+ .popup-footer {
+ display: flex;
+ justify-content: center;
+ padding: 15px 20px;
+ border-top: 1px solid #f0f0f0;
+ background-color: #fafafa;
+ }
+
+ // 寮傚父鐘舵�侀�夋嫨鏍峰紡
+ .exception-section {
+ padding: 10px 0;
+ }
+
+ .exception-options {
+ display: flex;
+ gap: 15px;
+ }
+
+ .exception-option {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 8px;
+ padding: 15px 20px;
+ border: 2px solid #e0e0e0;
+ border-radius: 8px;
+ cursor: pointer;
+ transition: all 0.3s;
+ background-color: #fff;
+
+ &.active {
+ border-color: #1890ff;
+ background-color: #e6f7ff;
+ }
+
+ &:active {
+ opacity: 0.8;
+ }
+ }
+
+ .option-text {
+ font-size: 14px;
+ color: #333;
+ font-weight: 500;
+ }
+
+ // 姝ｅ父鐘舵�佹彁绀烘牱寮�
+ .normal-tip {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 40px 20px;
+ background-color: #f6ffed;
+ border: 1px dashed #b7eb8f;
+ border-radius: 8px;
+
+ .tip-text {
+ margin-top: 15px;
+ font-size: 14px;
+ color: #52c41a;
+ }
+ }
</style>
--
Gitblit v1.9.3