From 0c9660562a03191d44fc779a889d3da0dc624b6d Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期五, 25 七月 2025 10:47:19 +0800
Subject: [PATCH] 修改弹窗ui和客户反馈
---
laboratory/src/components/DynamicComponent/addTableData.vue | 83 +++++++++++++++++++++++------------------
1 files changed, 47 insertions(+), 36 deletions(-)
diff --git a/laboratory/src/components/DynamicComponent/addTableData.vue b/laboratory/src/components/DynamicComponent/addTableData.vue
index 500f311..de40882 100644
--- a/laboratory/src/components/DynamicComponent/addTableData.vue
+++ b/laboratory/src/components/DynamicComponent/addTableData.vue
@@ -28,12 +28,23 @@
<el-form-item
:label="header.name"
:prop="header.name"
- :rules="{
- required:
- header.required === true || header.required === 'true',
- message: header.message || `请输入${header.name}`,
- trigger: ['blur', 'change'],
- }"
+ :rules="[
+ {
+ required: header.required === true || header.required === 'true',
+ message: header.message || `请输入${header.name}`,
+ trigger: ['blur', 'change'],
+ },
+ {
+ validator: (rule, value, callback) => {
+ if ((header.required === true || header.required === 'true') && (!value || value.trim() === '')) {
+ callback(header.message || `请输入${header.name}`);
+ } else {
+ callback();
+ }
+ },
+ trigger: ['blur', 'change'],
+ }
+ ]"
v-if="header.type == 'text'"
>
<el-input
@@ -57,15 +68,16 @@
class="upload-demo"
:action="uploadUrl"
:headers="uploadHeaders"
- :file-list="imageList"
+ :file-list="imageListMap[header.name] || []"
:auto-upload="true"
list-type="picture-card"
- :beforeUpload="beforeImageUpload"
- :on-change="handleImageChange"
- :on-remove="handleImageRemove"
- :on-success="handleImageSuccess"
+ :before-upload="beforeImageUpload"
+ :on-change="(file, fileList) => handleImageChange(file, fileList, header.name)"
+ :on-remove="(file, fileList) => handleImageRemove(file, fileList, header.name)"
+ :on-success="(res, file, fileList) => handleImageSuccess(res, file, fileList, header.name)"
:on-preview="handlePreview"
:disabled="!checkEditPermission(header)"
+ multiple
>
<div
style="
@@ -216,6 +228,7 @@
uploadHeaders: {
Authorization: sessionStorage.getItem("token") || "",
},
+ imageListMap: {},
};
},
computed: {
@@ -273,11 +286,11 @@
label: user.nickName || user.userName,
}));
} else {
- this.$message.error("获取用户列表失败");
+ // this.$message.error("获取用户列表失败");
}
})
.catch((err) => {
- console.error("获取用户列表失败", err);
+ // console.error("获取用户列表失败", err);
});
},
checkEditPermission(header) {
@@ -318,6 +331,9 @@
this.headerList.forEach((header) => {
if (header.type === "user") {
formData[header.name] = [];
+ } else if (header.type === "image") {
+ formData[header.name] = [];
+ this.$set(this.imageListMap, header.name, []);
} else {
formData[header.name] = "";
}
@@ -340,6 +356,9 @@
this.headerList.forEach((header) => {
if (header.type === "user") {
formData[header.name] = data[header.name] || [];
+ } else if (header.type === "image") {
+ formData[header.name] = Array.isArray(data[header.name]) ? data[header.name] : (data[header.name] ? [data[header.name]] : []);
+ this.$set(this.imageListMap, header.name, (formData[header.name] || []).map(url => ({ name: "image", url: getFullUrl(url), status: "success" })));
} else {
formData[header.name] = data[header.name] || "";
}
@@ -396,6 +415,7 @@
this.initFormData();
},
handleSubmit() {
+ console.log('4444444444444')
this.$refs.form.validate((valid) => {
if (valid) {
const submitData = {
@@ -440,34 +460,25 @@
}
return true;
},
- handleImageChange(file, fileList) {
- this.imageList = fileList;
- const imageHeader = this.headerList.find((h) => h.type === "image");
- if (imageHeader) {
- this.$refs.form.validateField(imageHeader.name);
- }
+ handleImageChange(file, fileList, fieldName) {
+ this.$set(this.imageListMap, fieldName, fileList);
+ // 校验
+ this.$refs.form && this.$refs.form.validateField(fieldName);
},
- handleImageSuccess(res, file, fileList) {
+ handleImageSuccess(res, file, fileList, fieldName) {
const url = res.msg;
file.url = getFullUrl(url);
- const imageHeader = this.headerList.find((h) => h.type === "image");
- if (imageHeader) {
- this.$set(this.form, imageHeader.name, url);
- this.$refs.form.validateField(imageHeader.name);
+ if (!Array.isArray(this.form[fieldName])) {
+ this.$set(this.form, fieldName, []);
}
- this.imageList = fileList.map((f) => {
- if (f.uid === file.uid) {
- return file;
- }
- return f;
- });
+ // 只保留 fileList 中的 url
+ this.$set(this.form, fieldName, fileList.map(f => f.url ? (f.url.startsWith('http') ? f.url : getFullUrl(f.url)) : ''));
+ this.$set(this.imageListMap, fieldName, fileList);
+ this.$refs.form && this.$refs.form.validateField(fieldName);
},
- handleImageRemove(file, fileList) {
- const imageHeader = this.headerList.find((h) => h.type === "image");
- if (imageHeader) {
- this.$set(this.form, imageHeader.name, "");
- }
- this.imageList = fileList;
+ handleImageRemove(file, fileList, fieldName) {
+ this.$set(this.form, fieldName, fileList.map(f => f.url ? (f.url.startsWith('http') ? f.url : getFullUrl(f.url)) : ''));
+ this.$set(this.imageListMap, fieldName, fileList);
},
handlePreview(file) {
this.imagePreviewUrl = file.url;
--
Gitblit v1.7.1