<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="sampleName">
|
<el-input
|
v-model="form.sampleName"
|
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="ph">
|
<el-input
|
v-model="form.ph"
|
placeholder="请输入PH值"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="7.5">
|
<el-form-item label="加水量" prop="waterAmount">
|
<el-input
|
v-model="form.waterAmount"
|
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">
|
<el-form-item :label="'加辅' + i" :prop="'additive' + i">
|
<el-input v-model="form['additive' + i]" 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-form-item
|
:label="'加辅' + (i + 5)"
|
:prop="'additive' + (i + 5)"
|
>
|
<el-input
|
v-model="form['additive' + (i + 5)]"
|
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="fileList"
|
:rules="[
|
{ required: true, message: '请上传照片', trigger: 'change' },
|
]"
|
>
|
<el-upload
|
class="upload-demo"
|
action="#"
|
:file-list="fileList"
|
:auto-upload="false"
|
list-type="picture-card"
|
>
|
<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>
|
export default {
|
name: "SampleDialog",
|
props: {
|
visible: {
|
type: Boolean,
|
default: false,
|
},
|
data: {
|
type: Object,
|
default: () => ({}),
|
},
|
},
|
data() {
|
return {
|
form: {
|
processTime: "",
|
sampleName: "",
|
sampleCode: "",
|
temperature: "",
|
ph: "",
|
waterAmount: "",
|
additive1: "",
|
additive2: "",
|
additive3: "",
|
additive4: "",
|
additive5: "",
|
additive6: "",
|
additive7: "",
|
additive8: "",
|
additive9: "",
|
additive10: "",
|
sampleAmount: "",
|
},
|
rules: {
|
sampleName: [
|
{ required: true, message: "请输入取样名称", trigger: "blur" },
|
],
|
sampleCode: [
|
{ required: true, message: "请输入取样样品编号", trigger: "blur" },
|
],
|
temperature: [
|
{ required: true, message: "请输入温度", trigger: "blur" },
|
],
|
ph: [{ required: true, message: "请输入PH值", trigger: "blur" }],
|
waterAmount: [
|
{ required: true, message: "请输入加水量", trigger: "blur" },
|
],
|
},
|
fileList: [],
|
};
|
},
|
watch: {
|
data: {
|
handler(val) {
|
if (val) {
|
this.form = { ...this.form, ...val };
|
}
|
},
|
immediate: true,
|
},
|
},
|
methods: {
|
handleClose() {
|
this.$emit("update:visible", false);
|
this.form = this.$options.data().form;
|
this.fileList = [];
|
},
|
handleSubmit() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
const submitData = {
|
...this.form,
|
sampleTime: new Date().toISOString(),
|
operator: window._userInfo?.name || "",
|
fileList: this.fileList,
|
};
|
this.$emit("submit", submitData);
|
this.handleClose();
|
}
|
});
|
},
|
},
|
};
|
</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>
|
