<template>
|
<el-dialog
|
title="编辑取样样品"
|
:visible.sync="visible"
|
width="60%"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<div class="sample-dialog">
|
<div class="sample-content">
|
<div class="header-title">
|
<div class="header-title-left">
|
<span>工艺时间：{{ form.processTime }}</span>
|
</div>
|
</div>
|
<div class="form-content">
|
<el-form
|
ref="form"
|
:model="form"
|
:rules="rules"
|
label-position="top"
|
style="margin-top: 38px"
|
>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="取样名称" prop="samplingName">
|
<el-input
|
v-model="form.samplingName"
|
placeholder="请输入取样名称"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="取样样品编号" prop="sampleCode">
|
<el-input
|
v-model="form.sampleCode"
|
placeholder="请输入取样样品编号"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="7.5">
|
<el-form-item label="温度" prop="temperature">
|
<el-input
|
v-model="form.temperature"
|
placeholder="请输入温度"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7.5">
|
<el-form-item label="PH" prop="samplePh">
|
<el-input
|
v-model="form.samplePh"
|
placeholder="请输入PH值"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7.5">
|
<el-form-item label="加水量" prop="waterAddition">
|
<el-input
|
v-model="form.waterAddition"
|
placeholder="请输入加水量"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="4.6" v-for="i in 5" :key="'addAuxiliary' + i">
|
<el-form-item :label="'加辅' + i" :prop="'addAuxiliary' + (i === 1 ? 'One' : i === 2 ? 'Two' : i === 3 ? 'Three' : i === 4 ? 'Four' : 'Five')">
|
<el-input v-model="form['addAuxiliary' + (i === 1 ? 'One' : i === 2 ? 'Two' : i === 3 ? 'Three' : i === 4 ? 'Four' : 'Five')]" placeholder="请输入" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="4.6" v-for="i in 5" :key="'addAuxiliary' + (i + 5)">
|
<el-form-item
|
:label="'加辅' + (i + 5)"
|
:prop="'addAuxiliary' + (i === 1 ? 'Six' : i === 2 ? 'Seven' : i === 3 ? 'Eight' : i === 4 ? 'Nine' : 'Ten')"
|
>
|
<el-input
|
v-model="form['addAuxiliary' + (i === 1 ? 'Six' : i === 2 ? 'Seven' : i === 3 ? 'Eight' : i === 4 ? 'Nine' : 'Ten')]"
|
placeholder="请输入"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item
|
label="取样量"
|
prop="sampleAmount"
|
:rules="[
|
{ required: true, message: '请输入取样量', trigger: 'blur' },
|
]"
|
>
|
<el-input
|
v-model="form.sampleAmount"
|
placeholder="请输入取样量"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item
|
label="拍照"
|
prop="pictures"
|
:rules="[
|
{ required: true, message: '请上传照片', trigger: 'change' },
|
]"
|
>
|
<el-upload
|
class="upload-demo"
|
action="#"
|
:file-list="fileList"
|
:auto-upload="false"
|
list-type="picture-card"
|
:on-change="handleChange"
|
:on-remove="handleRemove"
|
:before-upload="beforeUpload"
|
multiple
|
>
|
<i class="el-icon-plus"></i>
|
</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" style="margin-left: 20px;">确 定</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { updateRecordOperation } from '../service'
|
|
export default {
|
name: "SampleDialog",
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
data: {
|
type: Object,
|
default: () => ({}),
|
},
|
},
|
data() {
|
return {
|
form: {
|
processTime: "",
|
samplingName: "",
|
sampleCode: "",
|
temperature: "",
|
samplePh: "",
|
waterAddition: "",
|
addAuxiliaryOne: "",
|
addAuxiliaryTwo: "",
|
addAuxiliaryThree: "",
|
addAuxiliaryFour: "",
|
addAuxiliaryFive: "",
|
addAuxiliarySix: "",
|
addAuxiliarySeven: "",
|
addAuxiliaryEight: "",
|
addAuxiliaryNine: "",
|
addAuxiliaryTen: "",
|
sampleAmount: "",
|
pictures: "",
|
},
|
rules: {
|
samplingName: [
|
{ required: true, message: "请输入取样名称", trigger: "blur" },
|
],
|
sampleCode: [
|
{ required: true, message: "请输入取样样品编号", trigger: "blur" },
|
],
|
temperature: [
|
{ required: true, message: "请输入温度", trigger: "blur" },
|
],
|
samplePh: [{ required: true, message: "请输入PH值", trigger: "blur" }],
|
waterAddition: [
|
{ required: true, message: "请输入加水量", trigger: "blur" },
|
],
|
},
|
fileList: [],
|
defaultImage: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
|
};
|
},
|
watch: {
|
data: {
|
handler(val) {
|
if (val) {
|
this.form = { ...this.form, ...val };
|
// 如果有图片数据，设置到fileList中
|
if (val.pictures) {
|
const imageUrls = val.pictures.split(',');
|
this.fileList = imageUrls.map((url, index) => ({
|
name: `sample-image-${index + 1}.png`,
|
url: url
|
}));
|
}
|
}
|
},
|
immediate: true,
|
},
|
},
|
methods: {
|
handleClose() {
|
this.$emit("update:visible", false);
|
this.form = this.$options.data().form;
|
this.fileList = [];
|
},
|
// 上传前校验
|
beforeUpload(file) {
|
const isImage = file.type.startsWith('image/');
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
|
if (!isImage) {
|
this.$message.error('只能上传图片文件!');
|
return false;
|
}
|
if (!isLt2M) {
|
this.$message.error('图片大小不能超过 2MB!');
|
return false;
|
}
|
return true;
|
},
|
// 文件状态改变时的钩子
|
handleChange(file, fileList) {
|
this.fileList = fileList;
|
|
// 更新pictures字段
|
if (fileList.length === 0) {
|
this.form.pictures = this.defaultImage;
|
} else {
|
const imageUrls = fileList.map(file => file.url || this.defaultImage);
|
this.form.pictures = imageUrls.join(',');
|
}
|
},
|
// 移除文件时的钩子
|
handleRemove(file, fileList) {
|
this.fileList = fileList;
|
|
// 更新pictures字段
|
if (fileList.length === 0) {
|
this.form.pictures = this.defaultImage;
|
} else {
|
const imageUrls = fileList.map(file => file.url || this.defaultImage);
|
this.form.pictures = imageUrls.join(',');
|
}
|
},
|
async handleSubmit() {
|
this.$refs.form.validate(async (valid) => {
|
if (valid) {
|
const submitData = {
|
...this.form,
|
handlePersonId: JSON.parse(sessionStorage.getItem('userInfo') || '{}').userId || "",
|
handlePersonName: JSON.parse(sessionStorage.getItem('userInfo') || '{}').nickName || "",
|
fileList: this.fileList,
|
};
|
|
try {
|
// 先调用updateRecordOperation接口保存数据
|
const res = await updateRecordOperation(submitData);
|
if (res.code === 200) {
|
// 保存成功，继续执行原来的提交逻辑
|
this.$emit("submit", submitData);
|
this.handleClose();
|
} else {
|
this.$message.error(res.msg || '保存失败');
|
}
|
} catch (error) {
|
console.error('保存失败：', error);
|
this.$message.error('保存失败，请重试');
|
}
|
}
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
// ::v-deep .el-dialog__header {
|
// border-bottom: 1px solid #e4e7ed;
|
// padding: 15px 20px;
|
// }
|
|
::v-deep .el-dialog__body {
|
padding: 0;
|
}
|
|
.sample-dialog {
|
.sample-content {
|
background: #ffffff;
|
border-radius: 10px;
|
padding: 20px;
|
|
.form-content {
|
max-height: calc(80vh - 180px);
|
overflow-y: auto;
|
padding: 0 10px;
|
|
&::-webkit-scrollbar {
|
width: 6px;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
background: #c0c4cc;
|
border-radius: 3px;
|
}
|
|
&::-webkit-scrollbar-track {
|
background: #f5f7fa;
|
}
|
}
|
}
|
}
|
|
.sample-content-card {
|
box-shadow: none !important;
|
}
|
|
.header-title {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
gap: 13px;
|
padding: 0 10px;
|
|
&:first-child {
|
margin-top: 0;
|
}
|
|
.header-title-left {
|
display: flex;
|
align-items: center;
|
gap: 13px;
|
|
img {
|
width: 12px;
|
height: 19px;
|
}
|
|
span {
|
flex-shrink: 0;
|
font-weight: bold;
|
font-size: 18px;
|
color: #222222;
|
line-height: 27px;
|
font-family: "Source Han Sans CN Bold Bold";
|
}
|
}
|
}
|
|
.dialog-footer {
|
align-items: center;
|
display: flex;
|
justify-content: center;
|
padding: 15px 20px;
|
border-top: 1px solid #e4e7ed;
|
|
button {
|
width: 150px;
|
}
|
}
|
|
::v-deep .el-upload--picture-card {
|
width: 120px;
|
height: 120px;
|
line-height: 120px;
|
}
|
|
.el-row {
|
margin-bottom: 20px;
|
}
|
|
::v-deep .el-form-item--small.el-form-item {
|
margin-bottom: 0;
|
}
|
|
::v-deep .el-form-item__label {
|
padding-bottom: 8px;
|
}
|
</style>
|
