<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="uploadUrl"
|
:headers="uploadHeaders"
|
:file-list="fileList"
|
:auto-upload="true"
|
list-type="picture-card"
|
:on-change="handleImageChange"
|
:on-remove="handleImageRemove"
|
:on-success="handleImageSuccess"
|
:on-preview="handlePreview"
|
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'
|
import { getFullUrl } from '@/utils/utils';
|
import apiConfig from '@/utils/baseurl';
|
|
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" },
|
],
|
},
|
uploadUrl: apiConfig.imgUrl,
|
uploadHeaders: {
|
Authorization: sessionStorage.getItem('token') || ''
|
},
|
fileList: [],
|
};
|
},
|
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: getFullUrl(url),
|
status: 'success',
|
}));
|
} else {
|
this.fileList = [];
|
}
|
}
|
},
|
immediate: true,
|
},
|
},
|
methods: {
|
handleClose() {
|
this.$emit("update:visible", false);
|
this.form = this.$options.data().form;
|
this.fileList = [];
|
},
|
handleImageChange(file, fileList) {
|
this.fileList = fileList;
|
// 只在移除时处理form.pictures，上传成功时在handleImageSuccess处理
|
if (file.status === 'removed') {
|
const urls = fileList.map(f => f.url).filter(Boolean);
|
this.form.pictures = urls.join(',');
|
}
|
},
|
handleImageSuccess(res, file, fileList) {
|
// res.msg为图片url
|
const url = res.msg;
|
file.url = getFullUrl(url);
|
// 更新fileList中对应file的url
|
this.fileList = fileList.map(f => {
|
if (f.uid === file.uid) {
|
return file;
|
}
|
return f;
|
});
|
// 更新form.pictures
|
const urls = this.fileList.map(f => f.url).filter(Boolean);
|
this.form.pictures = urls.join(',');
|
},
|
handleImageRemove(file, fileList) {
|
this.fileList = fileList;
|
const urls = fileList.map(f => f.url).filter(Boolean);
|
this.form.pictures = urls.join(',');
|
},
|
handlePreview(file) {
|
this.$alert(`<img src='${file.url}' style='width:100%' />`, '图片预览', {
|
dangerouslyUseHTMLString: true
|
});
|
},
|
async handleSubmit() {
|
this.$refs.form.validate(async (valid) => {
|
if (valid) {
|
// 处理图片路径为相对路径
|
let pictures = this.form.pictures;
|
if (pictures) {
|
const prefix = apiConfig.showImgUrl;
|
pictures = pictures.split(',').map(url => {
|
return url.startsWith(prefix) ? url.substring(prefix.length) : url;
|
}).join(',');
|
}
|
const submitData = {
|
...this.form,
|
pictures,
|
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>
|
