From 9fe11a3b1c7ca926e2f4e97e36c2911c290a0ab2 Mon Sep 17 00:00:00 2001
From: 董国庆 <364620639@qq.com>
Date: 星期一, 30 六月 2025 14:23:54 +0800
Subject: [PATCH] 修改bug
---
laboratory/src/views/dataManagement/originalRecordTest/components/addDialog.vue | 292 ++++++++++++++++++++++++++++++++--------------------------
1 files changed, 162 insertions(+), 130 deletions(-)
diff --git a/laboratory/src/views/dataManagement/originalRecordTest/components/addDialog.vue b/laboratory/src/views/dataManagement/originalRecordTest/components/addDialog.vue
index 764b8be..83edb8c 100644
--- a/laboratory/src/views/dataManagement/originalRecordTest/components/addDialog.vue
+++ b/laboratory/src/views/dataManagement/originalRecordTest/components/addDialog.vue
@@ -9,12 +9,7 @@
<div class="sample-dialog">
<div class="sample-content">
<div class="form-content">
- <el-form
- ref="form"
- :model="form"
- :rules="rules"
- label-position="top"
- >
+ <el-form ref="form" :model="form" :rules="rules" label-position="top">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="数据编号" prop="dataCode">
@@ -47,17 +42,20 @@
<el-row v-if="showPhotoUpload" :gutter="20">
<el-col :span="24">
- <el-form-item label="检测拍照" prop="photos">
- <div v-if="isIPad">
- <el-button type="primary" @click="handleIPadPhoto">拍照</el-button>
- <el-button type="primary" @click="handleIPadUpload">上传</el-button>
- </div>
+ <el-form-item label="检测拍照" prop="photoList">
+ <!-- <div v-if="isIPad">
+ <el-button type="primary" @click="handleIPadPhoto"
+ >拍照</el-button
+ >
+ <el-button type="primary" @click="handleIPadUpload"
+ >上传</el-button
+ >
+ </div> -->
<el-upload
- v-else
class="upload-demo"
action="#"
:file-list="photoList"
- :auto-upload="false"
+ :auto-upload="true"
list-type="picture-card"
:http-request="handlePhotoUpload"
:on-remove="handlePhotoRemove"
@@ -70,23 +68,27 @@
<el-row v-if="showSpectrumUpload" :gutter="20">
<el-col :span="24">
- <el-form-item label="检测图谱" prop="spectrums">
+ <el-form-item label="检测图谱" prop="spectrumList">
<div v-if="isIPad">
- <el-button type="primary" @click="handleIPadSpectrum">选择图谱</el-button>
+ <el-button type="primary" @click="handleIPadSpectrum"
+ >选择图谱</el-button
+ >
</div>
<el-upload
v-else
class="upload-file"
action="#"
:file-list="spectrumList"
- :auto-upload="false"
+ :auto-upload="true"
:http-request="handleSpectrumUpload"
:on-remove="handleSpectrumRemove"
>
<el-button type="primary">
<i class="el-icon-upload"></i> 选择文件
</el-button>
- <div class="el-upload__tip" slot="tip">支持 jpg、png、pdf 格式文件</div>
+ <div class="el-upload__tip" slot="tip">
+ 支持 jpg、png、pdf 格式文件
+ </div>
</el-upload>
</el-form-item>
</el-col>
@@ -103,18 +105,18 @@
</template>
<script>
-import { customUploadRequest, getFullUrl } from '@/utils/utils'
+import { customUploadRequest, getFullUrl } from "@/utils/utils";
export default {
name: "AddDialog",
props: {
visible: {
type: Boolean,
- default: false
+ default: false,
},
isEdit: {
type: Boolean,
- default: false
- }
+ default: false,
+ },
},
data() {
return {
@@ -126,54 +128,54 @@
dataFiles: "",
dataPictures: "",
photos: [],
- spectrums: []
+ spectrums: [],
},
rules: {
dataCode: [
- { required: true, message: "请输入数据编号", trigger: "blur" }
+ { required: true, message: "请输入数据编号", trigger: "blur" },
],
dataTitle: [
- { required: true, message: "请输入检测数据", trigger: "blur" }
+ { required: true, message: "请输入检测数据", trigger: "blur" },
],
dataType: [
- {
- type: 'array',
- required: true,
- message: "请至少选择一种检测类型",
- trigger: "change"
- }
- ],
- photos: [
- {
- required: true,
- message: "请上传检测照片",
+ {
+ type: "array",
+ required: true,
+ message: "请至少选择一种检测类型",
trigger: "change",
- validator: (rule, value, callback) => {
- if (this.form.dataType.includes('1') && (!this.photoList || !this.photoList.length)) {
- callback(new Error('请上传检测照片'));
- } else {
- callback();
- }
- }
- }
+ },
],
- spectrums: [
- {
- required: true,
- message: "请上传检测图谱",
- trigger: "change",
- validator: (rule, value, callback) => {
- if (this.form.dataType.includes('2') && (!this.spectrumList || !this.spectrumList.length)) {
- callback(new Error('请上传检测图谱'));
- } else {
- callback();
- }
- }
- }
- ]
+ // photoList: [
+ // {
+ // required: true,
+ // message: "请上传检测照片",
+ // trigger: "change",
+ // validator: (rule, value, callback) => {
+ // if (this.form.dataType.includes('1') && (!this.photoList || !this.photoList.length)) {
+ // callback(new Error('请上传检测照片'));
+ // } else {
+ // callback();
+ // }
+ // }
+ // }
+ // ],
+ // spectrumList: [
+ // {
+ // required: true,
+ // message: "请上传检测图谱",
+ // trigger: "change",
+ // validator: (rule, value, callback) => {
+ // if (this.form.dataType.includes('2') && (!this.spectrumList || !this.spectrumList.length)) {
+ // callback(new Error('请上传检测图谱'));
+ // } else {
+ // callback();
+ // }
+ // }
+ // }
+ // ]
},
photoList: [],
- spectrumList: []
+ spectrumList: [],
};
},
computed: {
@@ -183,14 +185,14 @@
},
set(val) {
this.$emit("update:visible", val);
- }
+ },
},
showPhotoUpload() {
- return this.form.dataType.includes('1');
+ return this.form.dataType.includes("1");
},
showSpectrumUpload() {
- return this.form.dataType.includes('2');
- }
+ return this.form.dataType.includes("2");
+ },
},
methods: {
setFormData(data) {
@@ -198,19 +200,26 @@
this.form.dataCode = data.dataCode;
this.form.dataTitle = data.dataTitle;
// 处理 dataType，确保它是数组格式
- this.form.dataType = Array.isArray(data.dataType) ? data.dataType : (data.dataType ? data.dataType.split(',') : []);
+ this.form.dataType = Array.isArray(data.dataType)
+ ? data.dataType
+ : data.dataType
+ ? data.dataType.split(",")
+ : [];
// 设置照片列表
if (data.dataPictures) {
try {
- const pictures = typeof data.dataPictures === 'string' ? JSON.parse(data.dataPictures) : data.dataPictures;
- this.photoList = pictures.map(photo => ({
+ const pictures =
+ typeof data.dataPictures === "string"
+ ? JSON.parse(data.dataPictures)
+ : data.dataPictures;
+ this.photoList = pictures.map((photo) => ({
name: photo.name,
url: photo.url,
- status: 'success'
+ status: "success",
}));
} catch (e) {
- console.error('解析照片数据失败：', e);
+ console.error("解析照片数据失败：", e);
this.photoList = [];
}
} else {
@@ -220,14 +229,17 @@
// 设置图谱列表
if (data.dataFiles) {
try {
- const files = typeof data.dataFiles === 'string' ? JSON.parse(data.dataFiles) : data.dataFiles;
- this.spectrumList = files.map(file => ({
+ const files =
+ typeof data.dataFiles === "string"
+ ? JSON.parse(data.dataFiles)
+ : data.dataFiles;
+ this.spectrumList = files.map((file) => ({
name: file.name,
url: file.url,
- status: 'success'
+ status: "success",
}));
} catch (e) {
- console.error('解析图谱数据失败：', e);
+ console.error("解析图谱数据失败：", e);
this.spectrumList = [];
}
} else {
@@ -251,18 +263,35 @@
dataFiles: "",
dataPictures: "",
photos: [],
- spectrums: []
+ spectrums: [],
};
},
handleSubmit() {
this.$refs.form.validate((valid) => {
if (valid) {
+ console.log('this.form.dataType',this.form.dataType,'this.photoList',this.photoList,'this.spectrumList',this.spectrumList)
+ if (
+ this.form.dataType.includes("1") &&
+ (!this.photoList || !this.photoList.length)
+ ) {
+ this.$message.error("请上传检测照片");
+ return;
+ }
+ if (
+ this.form.dataType.includes("2") &&
+ (!this.spectrumList || !this.spectrumList.length)
+ ) {
+ this.$message.error("请上传检测图谱");
+ return;
+ }
const submitData = {
...this.form,
// 确保 dataType 在提交时转换为字符串
- dataType: Array.isArray(this.form.dataType) ? this.form.dataType.join(',') : this.form.dataType,
+ dataType: Array.isArray(this.form.dataType)
+ ? this.form.dataType.join(",")
+ : this.form.dataType,
dataFiles: JSON.stringify(this.spectrumList),
- dataPictures: JSON.stringify(this.photoList)
+ dataPictures: JSON.stringify(this.photoList),
};
this.$emit("success", submitData);
}
@@ -274,32 +303,33 @@
customUploadRequest({
file,
onSuccess: (res) => {
- if (res.code === 200) {
+ console.log('res',res)
+ if (res.code == 200) {
const fileObj = {
name: file.name,
- url: getFullUrl(res.msg || res.data || ''),
- status: 'success'
+ url: getFullUrl(res.msg || res.data || ""),
+ status: "success",
};
this.photoList.push(fileObj);
- this.$refs.form.validateField('photos');
- this.$message.success('图片上传成功');
+ // this.$refs.form.validateField("photos");
+ this.$message.success("图片上传成功");
onSuccess(res);
} else {
- this.$message.error(res.message || '图片上传失败');
+ this.$message.error(res.message || "图片上传失败");
onError();
}
},
onError: (err) => {
- this.$message.error('图片上传失败');
+ this.$message.error("图片上传失败");
onError(err);
- }
+ },
});
},
handlePhotoRemove(file) {
- const index = this.photoList.findIndex(item => item.name === file.name);
+ const index = this.photoList.findIndex((item) => item.name === file.name);
if (index !== -1) {
this.photoList.splice(index, 1);
- this.$refs.form.validateField('photos');
+ // this.$refs.form.validateField("photos");
}
},
// 真实图谱上传
@@ -311,87 +341,89 @@
if (res.code === 200) {
const fileObj = {
name: file.name,
- url: getFullUrl(res.msg || res.data || ''),
- status: 'success'
+ url: getFullUrl(res.msg || res.data || ""),
+ status: "success",
};
this.spectrumList.push(fileObj);
- this.$refs.form.validateField('spectrums');
- this.$message.success('文件上传成功');
+ // this.$refs.form.validateField('spectrums');
+ this.$message.success("文件上传成功");
onSuccess(res);
} else {
- this.$message.error(res.message || '文件上传失败');
+ this.$message.error(res.message || "文件上传失败");
onError();
}
},
onError: (err) => {
- this.$message.error('文件上传失败');
+ this.$message.error("文件上传失败");
onError(err);
- }
+ },
});
},
handleSpectrumRemove(file) {
- const index = this.spectrumList.findIndex(item => item.name === file.name);
+ const index = this.spectrumList.findIndex(
+ (item) => item.name === file.name
+ );
if (index !== -1) {
this.spectrumList.splice(index, 1);
- this.$refs.form.validateField('spectrums');
+ // this.$refs.form.validateField('spectrums');
}
},
// iPad 相关方法
handleIPadPhoto() {
// 模拟 iPad 拍照功能
const mockFile = {
- name: 'iPad拍照.jpg',
- url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
- status: 'success'
+ name: "iPad拍照.jpg",
+ url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+ status: "success",
};
this.photoList = [...this.photoList, mockFile];
- this.$refs.form.validateField('photos');
+ this.$refs.form.validateField("photos");
},
handleIPadUpload() {
// 模拟 iPad 上传功能
const mockFile = {
- name: 'iPad上传图片.jpg',
- url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
- status: 'success'
+ name: "iPad上传图片.jpg",
+ url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+ status: "success",
};
this.photoList = [...this.photoList, mockFile];
- this.$refs.form.validateField('photos');
+ this.$refs.form.validateField("photos");
},
handleIPadSpectrum() {
// 模拟 iPad 选择图谱功能
const mockFile = {
- name: 'iPad图谱.pdf',
- url: 'https://example.com/test.pdf',
- status: 'success'
+ name: "iPad图谱.pdf",
+ url: "https://example.com/test.pdf",
+ status: "success",
};
this.spectrumList = [...this.spectrumList, mockFile];
- this.$refs.form.validateField('spectrums');
- }
- }
+ this.$refs.form.validateField("spectrums");
+ },
+ },
};
</script>
<style scoped lang="less">
::v-deep .el-dialog__body {
padding: 0;
- max-height: calc(100vh - 200px); // 设置最大高度
+ max-height: calc(100vh - 200px); // 设置最大高度
}
::v-deep .el-dialog {
- margin-top: 5vh !important; // 调整弹窗位置
- max-height: 90vh; // 设置弹窗最大高度
+ margin-top: 5vh !important; // 调整弹窗位置
+ max-height: 90vh; // 设置弹窗最大高度
display: flex;
flex-direction: column;
-
+
.el-dialog__body {
flex: 1;
- overflow: hidden; // 防止出现双滚动条
+ overflow: hidden; // 防止出现双滚动条
}
}
.sample-dialog {
height: 100%;
-
+
.sample-content {
background: #ffffff;
border-radius: 10px;
@@ -399,22 +431,22 @@
height: 100%;
display: flex;
flex-direction: column;
-
+
.form-content {
flex: 1;
overflow-y: auto;
padding: 0 10px;
- max-height: calc(90vh - 250px); // 设置内容区域最大高度
-
+ max-height: calc(90vh - 250px); // 设置内容区域最大高度
+
&::-webkit-scrollbar {
width: 6px;
}
-
+
&::-webkit-scrollbar-thumb {
background: #c0c4cc;
border-radius: 3px;
}
-
+
&::-webkit-scrollbar-track {
background: #f5f7fa;
}
@@ -428,8 +460,8 @@
justify-content: center;
padding: 15px 20px;
border-top: 1px solid #e4e7ed;
- margin-top: auto; // 保持在底部
-
+ margin-top: auto; // 保持在底部
+
button {
width: 150px;
}
@@ -442,26 +474,26 @@
height: 120px;
line-height: 120px;
}
-
+
.el-upload-list--picture-card {
display: flex;
flex-wrap: wrap;
gap: 8px;
-
+
.el-upload-list__item {
width: 120px;
height: 120px;
margin: 0;
}
}
-
+
// 让上传按钮始终显示在列表最后
.el-upload--picture-card {
order: 9999;
margin: 0;
}
}
-
+
// 包裹容器也使用flex布局
display: flex;
flex-wrap: wrap;
@@ -470,9 +502,9 @@
.el-row {
margin-bottom: 20px;
-
+
&:last-child {
- margin-bottom: 0; // 最后一行不要margin
+ margin-bottom: 0; // 最后一行不要margin
}
}
@@ -487,8 +519,8 @@
// 优化表单布局
::v-deep .el-form {
.el-form-item {
- margin-bottom: 15px; // 减小表单项间距
-
+ margin-bottom: 15px; // 减小表单项间距
+
&:last-child {
margin-bottom: 0;
}
@@ -499,7 +531,7 @@
::v-deep .el-upload-list--picture-card {
display: flex;
flex-wrap: wrap;
- gap: 8px; // 设置图片间距
+ gap: 8px; // 设置图片间距
}
.upload-file {
@@ -508,7 +540,7 @@
margin-top: 10px;
}
.el-upload-list__item {
- transition: all .3s;
+ transition: all 0.3s;
&:hover {
background-color: #f5f7fa;
}
--
Gitblit v1.7.1