From fd85c03902343231574fdbe7f3fcdd388593a5ff Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期五, 17 四月 2026 15:03:20 +0800
Subject: [PATCH] 不合格管理：新增不良品照片上传功能及相关逻辑优化
---
src/views/qualityManagement/nonconformingManagement/components/inspectionFormDia.vue | 187 ++++++++++++++++++++++++++++++++++++++++------
1 files changed, 161 insertions(+), 26 deletions(-)
diff --git a/src/views/qualityManagement/nonconformingManagement/components/inspectionFormDia.vue b/src/views/qualityManagement/nonconformingManagement/components/inspectionFormDia.vue
index e3cf7b8..cf1dec1 100644
--- a/src/views/qualityManagement/nonconformingManagement/components/inspectionFormDia.vue
+++ b/src/views/qualityManagement/nonconformingManagement/components/inspectionFormDia.vue
@@ -111,30 +111,6 @@
</el-row>
<el-row :gutter="30">
<el-col :span="12">
- <el-form-item label="鍘熷洜鍒嗘瀽锛�" prop="reasonAnalysis">
- <el-input
- v-model="form.reasonAnalysis"
- type="textarea"
- :rows="4"
- placeholder="璇疯緭鍏�"
- clearable
- />
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="棰勯槻涓庣籂姝ｆ帾鏂斤細" prop="preventiveCorrective">
- <el-input
- v-model="form.preventiveCorrective"
- type="textarea"
- :rows="4"
- placeholder="璇疯緭鍏�"
- clearable
- />
- </el-form-item>
- </el-col>
- </el-row>
- <el-row :gutter="30">
- <el-col :span="12">
<el-form-item label="宸ユ椂鎹熷け锛�" prop="lossWorking">
<el-input-number
v-model="form.lossWorking"
@@ -159,6 +135,56 @@
</el-form-item>
</el-col>
</el-row>
+ <el-row :gutter="30">
+ <el-col :span="12">
+ <el-form-item label="鍘熷洜鍒嗘瀽锛�" prop="reasonAnalysis">
+ <el-input
+ v-model="form.reasonAnalysis"
+ type="textarea"
+ :rows="4"
+ placeholder="璇疯緭鍏�"
+ clearable
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="棰勯槻涓庣籂姝ｆ帾鏂斤細" prop="preventiveCorrective">
+ <el-input
+ v-model="form.preventiveCorrective"
+ type="textarea"
+ :rows="4"
+ placeholder="璇疯緭鍏�"
+ clearable
+ />
+ </el-form-item>
+ </el-col>
+ </el-row>
+ <el-row :gutter="30">
+ <el-col :span="24">
+ <el-form-item label="涓嶈壇鍝佺収鐗囷細" prop="defectivePhotos">
+ <el-upload
+ v-model:file-list="defectivePhotoFileList"
+ :action="upload.url"
+ multiple
+ ref="defectivePhotoUploadRef"
+ auto-upload
+ accept="image/*"
+ :headers="upload.headers"
+ :before-upload="handleBeforeUpload"
+ :on-error="handleUploadError"
+ :on-success="handleDefectivePhotoUploadSuccess"
+ :on-remove="handleDefectivePhotoRemove"
+ >
+ <el-button type="primary" v-if="operationType !== 'view'">涓婁紶</el-button>
+ <template #tip v-if="operationType !== 'view'">
+ <div class="el-upload__tip">
+ 鏂囦欢鏍煎紡鏀寔 jpg锛宩peg锛宲ng锛実if锛宐mp
+ </div>
+ </template>
+ </el-upload>
+ </el-form-item>
+ </el-col>
+ </el-row>
</el-form>
<template #footer>
<div class="dialog-footer">
@@ -171,20 +197,26 @@
</template>
<script setup>
-import {ref, reactive, toRefs, computed} from "vue";
+import { ref, reactive, toRefs, computed, watch, getCurrentInstance } from "vue";
import {productTreeList} from "@/api/basicData/product.js";
import {
getQualityUnqualifiedInfo,
qualityUnqualifiedDeal
} from "@/api/qualityManagement/nonconformingManagement.js";
import {userListNoPage} from "@/api/system/user.js";
-import { getCurrentInstance } from "vue";
+import { getToken } from "@/utils/auth";
const { proxy } = getCurrentInstance()
const emit = defineEmits(['close'])
const { rejection_handling } = proxy.useDict("rejection_handling")
const dialogFormVisible = ref(false);
const operationType = ref('')
+const defectivePhotoFileList = ref([]);
+const defectivePhotoUploadRef = ref(null);
+const upload = reactive({
+ url: import.meta.env.VITE_APP_BASE_API + "/file/upload",
+ headers: { Authorization: "Bearer " + getToken() },
+});
const data = reactive({
form: {
checkTime: "",
@@ -199,6 +231,9 @@
checkResult: "",
inspectType: '',
defectivePhenomena: '',
+ defectivePhotos: '',
+ tempFileIds: [],
+ commonFileList: [],
dealResult: '',
dealName: '',
dealTime: '',
@@ -249,11 +284,15 @@
userList.value = [];
}
dialogFormVisible.value = true;
+ defectivePhotoFileList.value = [];
form.value = {
reasonAnalysis: '',
preventiveCorrective: '',
lossWorking: 0,
lossMaterial: 0,
+ defectivePhotos: '',
+ tempFileIds: [],
+ commonFileList: [],
};
getProductOptions();
if (operationType.value === 'edit') {
@@ -265,6 +304,9 @@
preventiveCorrective: '',
lossWorking: 0,
lossMaterial: 0,
+ defectivePhotos: '',
+ tempFileIds: [],
+ commonFileList: [],
...rest
}
})
@@ -319,8 +361,101 @@
}
})
}
+// 涓婁紶鍓嶆牎妫�锛堜笌鏂板椤典竴鑷达級
+function handleBeforeUpload() {
+ proxy.$modal.loading("姝ｅ湪涓婁紶鏂囦欢锛岃绋嶅��...");
+ return true;
+}
+function handleUploadError() {
+ proxy.$modal.msgError("涓婁紶鏂囦欢澶辫触");
+ proxy.$modal.closeLoading();
+}
+// 涓嶈壇鍝佺収鐗囦笂浼犳垚鍔燂細淇濆瓨 tempId 涓� tempPath锛屽苟鍥炲啓鍒拌〃鍗�
+function handleDefectivePhotoUploadSuccess(res, file) {
+ proxy.$modal.closeLoading();
+ if (res?.code === 200) {
+ const tempId = res?.data?.tempId;
+ const tempPath = res?.data?.tempPath || res?.data?.url || "";
+ const originalName = res?.data?.originalName || file?.name || "鍥剧墖";
+
+ if (!form.value.tempFileIds) form.value.tempFileIds = [];
+ if (tempId) form.value.tempFileIds.push(tempId);
+
+ file.id = tempId || file.id;
+ file.name = originalName;
+ file.url = tempPath ? (import.meta.env.VITE_APP_BASE_API + tempPath) : file.url;
+
+ syncDefectivePhotosFromFileList();
+ proxy.$modal.msgSuccess("涓婁紶鎴愬姛");
+ } else {
+ proxy.$modal.msgError(res?.msg || "涓婁紶澶辫触");
+ defectivePhotoUploadRef.value?.handleRemove(file);
+ }
+}
+function handleDefectivePhotoRemove(file) {
+ const tempId = file?.id || file?.response?.data?.tempId;
+ if (tempId && Array.isArray(form.value.tempFileIds)) {
+ form.value.tempFileIds = form.value.tempFileIds.filter(id => id !== tempId);
+ }
+ if (Array.isArray(form.value.commonFileList)) {
+ form.value.commonFileList = form.value.commonFileList.filter(item => {
+ return item?.id !== tempId && item?.url !== file?.url && item?.name !== file?.name;
+ });
+ }
+ syncDefectivePhotosFromFileList();
+}
+function syncDefectivePhotosFromFileList() {
+ const base = import.meta.env.VITE_APP_BASE_API;
+ const paths = (defectivePhotoFileList.value || [])
+ .map(f => f?.url || f?.response?.data?.tempPath || f?.response?.data?.url)
+ .filter(Boolean)
+ .map(url => (typeof url === "string" ? url.replace(base, "") : ""))
+ .filter(Boolean);
+ form.value.defectivePhotos = paths.join(",");
+}
+function buildDefectivePhotoFileList() {
+ const commonFiles = Array.isArray(form.value?.commonFileList) ? form.value.commonFileList : [];
+ if (commonFiles.length > 0) {
+ defectivePhotoFileList.value = commonFiles
+ .map((item, idx) => ({
+ name: item?.name || `鍥剧墖${idx + 1}`,
+ url: item?.url || "",
+ id: item?.id,
+ }))
+ .filter(item => item.url);
+ return;
+ }
+
+ const photos = form.value?.defectivePhotos;
+ if (!photos) {
+ defectivePhotoFileList.value = [];
+ return;
+ }
+ const base = import.meta.env.VITE_APP_BASE_API;
+ defectivePhotoFileList.value = String(photos)
+ .split(",")
+ .map((p, idx) => {
+ const path = p?.trim();
+ if (!path) return null;
+ return {
+ name: `鍥剧墖${idx + 1}`,
+ url: path.startsWith("http") ? path : base + path,
+ id: undefined,
+ };
+ })
+ .filter(Boolean);
+}
+
+watch(
+ () => [form.value?.defectivePhotos, form.value?.commonFileList],
+ () => {
+ buildDefectivePhotoFileList();
+ },
+ { immediate: true, deep: true }
+);
// 鍏抽棴寮规
const closeDia = () => {
+ defectivePhotoFileList.value = []
proxy.resetForm("formRef");
dialogFormVisible.value = false;
emit('close')
--
Gitblit v1.9.3