| | |
| | | > |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="取样名称" prop="sampleName"> |
| | | <el-form-item label="取样名称" prop="samplingName"> |
| | | <el-input |
| | | v-model="form.sampleName" |
| | | v-model="form.samplingName" |
| | | placeholder="请输入取样名称" |
| | | /> |
| | | </el-form-item> |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="7.5"> |
| | | <el-form-item label="PH" prop="ph"> |
| | | <el-form-item label="PH" prop="samplePh"> |
| | | <el-input |
| | | v-model="form.ph" |
| | | v-model="form.samplePh" |
| | | placeholder="请输入PH值" |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="7.5"> |
| | | <el-form-item label="加水量" prop="waterAmount"> |
| | | <el-form-item label="加水量" prop="waterAddition"> |
| | | <el-input |
| | | v-model="form.waterAmount" |
| | | v-model="form.waterAddition" |
| | | placeholder="请输入加水量" |
| | | /> |
| | | </el-form-item> |
| | |
| | | </el-row> |
| | | |
| | | <el-row :gutter="20"> |
| | | <el-col :span="4.6" v-for="i in 5" :key="'additive' + i"> |
| | | <el-form-item :label="'加辅' + i" :prop="'additive' + i"> |
| | | <el-input v-model="form['additive' + i]" placeholder="请输入" /> |
| | | <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="'additive' + (i + 5)"> |
| | | <el-col :span="4.6" v-for="i in 5" :key="'addAuxiliary' + (i + 5)"> |
| | | <el-form-item |
| | | :label="'加辅' + (i + 5)" |
| | | :prop="'additive' + (i + 5)" |
| | | :prop="'addAuxiliary' + (i === 1 ? 'Six' : i === 2 ? 'Seven' : i === 3 ? 'Eight' : i === 4 ? 'Nine' : 'Ten')" |
| | | > |
| | | <el-input |
| | | v-model="form['additive' + (i + 5)]" |
| | | v-model="form['addAuxiliary' + (i === 1 ? 'Six' : i === 2 ? 'Seven' : i === 3 ? 'Eight' : i === 4 ? 'Nine' : 'Ten')]" |
| | | placeholder="请输入" |
| | | /> |
| | | </el-form-item> |
| | |
| | | <el-col :span="24"> |
| | | <el-form-item |
| | | label="拍照" |
| | | prop="fileList" |
| | | prop="pictures" |
| | | :rules="[ |
| | | { required: true, message: '请上传照片', trigger: 'change' }, |
| | | ]" |
| | |
| | | :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> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { updateRecordOperation } from '../service' |
| | | |
| | | export default { |
| | | name: "SampleDialog", |
| | | props: { |
| | |
| | | return { |
| | | form: { |
| | | processTime: "", |
| | | sampleName: "", |
| | | samplingName: "", |
| | | sampleCode: "", |
| | | temperature: "", |
| | | ph: "", |
| | | waterAmount: "", |
| | | additive1: "", |
| | | additive2: "", |
| | | additive3: "", |
| | | additive4: "", |
| | | additive5: "", |
| | | additive6: "", |
| | | additive7: "", |
| | | additive8: "", |
| | | additive9: "", |
| | | additive10: "", |
| | | samplePh: "", |
| | | waterAddition: "", |
| | | addAuxiliaryOne: "", |
| | | addAuxiliaryTwo: "", |
| | | addAuxiliaryThree: "", |
| | | addAuxiliaryFour: "", |
| | | addAuxiliaryFive: "", |
| | | addAuxiliarySix: "", |
| | | addAuxiliarySeven: "", |
| | | addAuxiliaryEight: "", |
| | | addAuxiliaryNine: "", |
| | | addAuxiliaryTen: "", |
| | | sampleAmount: "", |
| | | pictures: "", |
| | | }, |
| | | rules: { |
| | | sampleName: [ |
| | | samplingName: [ |
| | | { required: true, message: "请输入取样名称", trigger: "blur" }, |
| | | ], |
| | | sampleCode: [ |
| | |
| | | temperature: [ |
| | | { required: true, message: "请输入温度", trigger: "blur" }, |
| | | ], |
| | | ph: [{ required: true, message: "请输入PH值", trigger: "blur" }], |
| | | waterAmount: [ |
| | | samplePh: [{ required: true, message: "请输入PH值", trigger: "blur" }], |
| | | waterAddition: [ |
| | | { required: true, message: "请输入加水量", trigger: "blur" }, |
| | | ], |
| | | }, |
| | | fileList: [], |
| | | defaultImage: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', |
| | | }; |
| | | }, |
| | | watch: { |
| | |
| | | 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, |
| | |
| | | this.form = this.$options.data().form; |
| | | this.fileList = []; |
| | | }, |
| | | handleSubmit() { |
| | | this.$refs.form.validate((valid) => { |
| | | // 上传前校验 |
| | | 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, |
| | | sampleTime: new Date().toISOString(), |
| | | operator: window._userInfo?.name || "", |
| | | handlePersonId: JSON.parse(sessionStorage.getItem('userInfo') || '{}').userId || "", |
| | | handlePersonName: JSON.parse(sessionStorage.getItem('userInfo') || '{}').nickName || "", |
| | | fileList: this.fileList, |
| | | }; |
| | | this.$emit("submit", submitData); |
| | | this.handleClose(); |
| | | |
| | | 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('保存失败,请重试'); |
| | | } |
| | | } |
| | | }); |
| | | }, |