<template>
|
<el-dialog
|
:title="isEdit ? '编辑检测数据' : '新增检测数据'"
|
:visible.sync="dialogVisible"
|
width="60%"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<div class="sample-dialog">
|
<div class="sample-content">
|
<div class="form-content">
|
<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">
|
<el-input
|
v-model="form.dataCode"
|
placeholder="请输入数据编号"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="检测数据" prop="dataTitle">
|
<el-input
|
v-model="form.dataTitle"
|
placeholder="请输入检测数据"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="检测类型" prop="dataType">
|
<el-checkbox-group v-model="form.dataType">
|
<el-checkbox label="1">拍照</el-checkbox>
|
<el-checkbox label="2">图谱</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row v-if="showPhotoUpload" :gutter="20">
|
<el-col :span="24">
|
<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
|
class="upload-demo"
|
action="#"
|
:file-list="photoList"
|
:auto-upload="true"
|
list-type="picture-card"
|
:http-request="handlePhotoUpload"
|
:on-remove="handlePhotoRemove"
|
>
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row v-if="showSpectrumUpload" :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="检测图谱" prop="spectrumList">
|
<div v-if="isIPad">
|
<el-button type="primary" @click="handleIPadSpectrum"
|
>选择图谱</el-button
|
>
|
</div>
|
<el-upload
|
v-else
|
class="upload-file"
|
action="#"
|
:file-list="spectrumList"
|
: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>
|
</el-upload>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</div>
|
</div>
|
<div slot="footer" class="dialog-footer select-member-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { customUploadRequest, getFullUrl } from "@/utils/utils";
|
export default {
|
name: "AddDialog",
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
isEdit: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
data() {
|
return {
|
isIPad: /iPad/i.test(navigator.userAgent),
|
form: {
|
dataCode: "",
|
dataTitle: "",
|
dataType: ["1"],
|
dataFiles: "",
|
dataPictures: "",
|
photos: [],
|
spectrums: [],
|
},
|
rules: {
|
dataCode: [
|
{ required: true, message: "请输入数据编号", trigger: "blur" },
|
],
|
dataTitle: [
|
{ required: true, message: "请输入检测数据", trigger: "blur" },
|
],
|
dataType: [
|
{
|
type: "array",
|
required: true,
|
message: "请至少选择一种检测类型",
|
trigger: "change",
|
},
|
],
|
// 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: [],
|
};
|
},
|
computed: {
|
dialogVisible: {
|
get() {
|
return this.visible;
|
},
|
set(val) {
|
this.$emit("update:visible", val);
|
},
|
},
|
showPhotoUpload() {
|
return this.form.dataType.includes("1");
|
},
|
showSpectrumUpload() {
|
return this.form.dataType.includes("2");
|
},
|
},
|
methods: {
|
setFormData(data) {
|
// 设置基础表单数据
|
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(",")
|
: [];
|
|
// 设置照片列表
|
if (data.dataPictures) {
|
try {
|
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",
|
}));
|
} catch (e) {
|
console.error("解析照片数据失败：", e);
|
this.photoList = [];
|
}
|
} else {
|
this.photoList = [];
|
}
|
|
// 设置图谱列表
|
if (data.dataFiles) {
|
try {
|
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",
|
}));
|
} catch (e) {
|
console.error("解析图谱数据失败：", e);
|
this.spectrumList = [];
|
}
|
} else {
|
this.spectrumList = [];
|
}
|
|
// 重置表单校验状态
|
this.$nextTick(() => {
|
this.$refs.form?.clearValidate();
|
});
|
},
|
handleClose() {
|
this.dialogVisible = false;
|
this.$refs.form?.resetFields();
|
this.photoList = [];
|
this.spectrumList = [];
|
this.form = {
|
dataCode: "",
|
dataTitle: "",
|
dataType: ["1"],
|
dataFiles: "",
|
dataPictures: "",
|
photos: [],
|
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,
|
dataFiles: JSON.stringify(this.spectrumList),
|
dataPictures: JSON.stringify(this.photoList),
|
};
|
this.$emit("success", submitData);
|
}
|
});
|
},
|
// 真实图片上传
|
handlePhotoUpload(options) {
|
const { file, onSuccess, onError } = options;
|
customUploadRequest({
|
file,
|
onSuccess: (res) => {
|
console.log('res',res)
|
if (res.code == 200) {
|
const fileObj = {
|
name: file.name,
|
url: getFullUrl(res.msg || res.data || ""),
|
status: "success",
|
};
|
this.photoList.push(fileObj);
|
// this.$refs.form.validateField("photos");
|
this.$message.success("图片上传成功");
|
onSuccess(res);
|
} else {
|
this.$message.error(res.message || "图片上传失败");
|
onError();
|
}
|
},
|
onError: (err) => {
|
this.$message.error("图片上传失败");
|
onError(err);
|
},
|
});
|
},
|
handlePhotoRemove(file) {
|
const index = this.photoList.findIndex((item) => item.name === file.name);
|
if (index !== -1) {
|
this.photoList.splice(index, 1);
|
// this.$refs.form.validateField("photos");
|
}
|
},
|
// 真实图谱上传
|
handleSpectrumUpload(options) {
|
const { file, onSuccess, onError } = options;
|
customUploadRequest({
|
file,
|
onSuccess: (res) => {
|
if (res.code === 200) {
|
const fileObj = {
|
name: file.name,
|
url: getFullUrl(res.msg || res.data || ""),
|
status: "success",
|
};
|
this.spectrumList.push(fileObj);
|
// this.$refs.form.validateField('spectrums');
|
this.$message.success("文件上传成功");
|
onSuccess(res);
|
} else {
|
this.$message.error(res.message || "文件上传失败");
|
onError();
|
}
|
},
|
onError: (err) => {
|
this.$message.error("文件上传失败");
|
onError(err);
|
},
|
});
|
},
|
handleSpectrumRemove(file) {
|
const index = this.spectrumList.findIndex(
|
(item) => item.name === file.name
|
);
|
if (index !== -1) {
|
this.spectrumList.splice(index, 1);
|
// this.$refs.form.validateField('spectrums');
|
}
|
},
|
// iPad 相关方法
|
handleIPadPhoto() {
|
// 模拟 iPad 拍照功能
|
const mockFile = {
|
name: "iPad拍照.jpg",
|
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
status: "success",
|
};
|
this.photoList = [...this.photoList, mockFile];
|
this.$refs.form.validateField("photos");
|
},
|
handleIPadUpload() {
|
// 模拟 iPad 上传功能
|
const mockFile = {
|
name: "iPad上传图片.jpg",
|
url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
|
status: "success",
|
};
|
this.photoList = [...this.photoList, mockFile];
|
this.$refs.form.validateField("photos");
|
},
|
handleIPadSpectrum() {
|
// 模拟 iPad 选择图谱功能
|
const mockFile = {
|
name: "iPad图谱.pdf",
|
url: "https://example.com/test.pdf",
|
status: "success",
|
};
|
this.spectrumList = [...this.spectrumList, mockFile];
|
this.$refs.form.validateField("spectrums");
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
::v-deep .el-dialog__body {
|
padding: 0;
|
max-height: calc(100vh - 200px); // 设置最大高度
|
}
|
|
::v-deep .el-dialog {
|
margin-top: 5vh !important; // 调整弹窗位置
|
max-height: 90vh; // 设置弹窗最大高度
|
display: flex;
|
flex-direction: column;
|
|
.el-dialog__body {
|
flex: 1;
|
overflow: hidden; // 防止出现双滚动条
|
}
|
}
|
|
.sample-dialog {
|
height: 100%;
|
|
.sample-content {
|
background: #ffffff;
|
border-radius: 10px;
|
padding: 20px;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
|
.form-content {
|
flex: 1;
|
overflow-y: auto;
|
padding: 0 10px;
|
max-height: calc(90vh - 250px); // 设置内容区域最大高度
|
|
&::-webkit-scrollbar {
|
width: 6px;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
background: #c0c4cc;
|
border-radius: 3px;
|
}
|
|
&::-webkit-scrollbar-track {
|
background: #f5f7fa;
|
}
|
}
|
}
|
}
|
|
.dialog-footer {
|
align-items: center;
|
display: flex;
|
justify-content: center;
|
padding: 15px 20px;
|
border-top: 1px solid #e4e7ed;
|
margin-top: auto; // 保持在底部
|
|
button {
|
width: 150px;
|
}
|
}
|
|
.upload-demo {
|
::v-deep {
|
.el-upload--picture-card {
|
width: 120px;
|
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;
|
gap: 8px;
|
}
|
|
.el-row {
|
margin-bottom: 20px;
|
|
&:last-child {
|
margin-bottom: 0; // 最后一行不要margin
|
}
|
}
|
|
::v-deep .el-form-item--small.el-form-item {
|
margin-bottom: 0;
|
}
|
|
::v-deep .el-form-item__label {
|
padding-bottom: 8px;
|
}
|
|
// 优化表单布局
|
::v-deep .el-form {
|
.el-form-item {
|
margin-bottom: 15px; // 减小表单项间距
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
}
|
|
// 优化上传区域布局
|
::v-deep .el-upload-list--picture-card {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 8px; // 设置图片间距
|
}
|
|
.upload-file {
|
::v-deep {
|
.el-upload-list {
|
margin-top: 10px;
|
}
|
.el-upload-list__item {
|
transition: all 0.3s;
|
&:hover {
|
background-color: #f5f7fa;
|
}
|
}
|
.el-upload__tip {
|
color: #909399;
|
font-size: 12px;
|
margin-top: 8px;
|
}
|
}
|
}
|
</style>
|
