<template>
|
<div>
|
<el-dialog :visible.sync="dialogVisible" @close="$emit('close')" title="新增检测项" width="50%">
|
<el-form ref="form" :model="form" :rules="rules" label-position="top" class="test-item-form">
|
<div class="form-row">
|
<el-form-item label="检测项编号" prop="termCode" class="form-item">
|
<el-input v-model="form.termCode" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="检测项名称" prop="termName" class="form-item">
|
<el-input v-model="form.termName" placeholder="请输入"></el-input>
|
</el-form-item>
|
</div>
|
<div class="form-row">
|
<el-form-item label="定性/定量" prop="termType" class="form-item">
|
<el-radio-group v-model="form.termType">
|
<el-radio :label="1">定性</el-radio>
|
<el-radio :label="2">定量</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
</div>
|
<div class="form-row">
|
<el-form-item label="检测方法编号" prop="termMethodCode" class="form-item">
|
<el-input v-model="form.termMethodCode" placeholder="请输入"></el-input>
|
</el-form-item>
|
<el-form-item label="检测方法" prop="termMethod" class="form-item">
|
<el-input v-model="form.termMethod" placeholder="请输入"></el-input>
|
</el-form-item>
|
</div>
|
<el-form-item label="收样要求" prop="sampleRequire" class="form-item">
|
<el-input
|
type="textarea"
|
v-model="form.sampleRequire"
|
:rows="4"
|
placeholder="请输入收样要求..."
|
></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer select-member-footer">
|
<el-button type="primary" @click="submitForm">确认新增</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'AddTestItem',
|
props: {
|
dialogVisible: {
|
type: Boolean,
|
default: false
|
},
|
editData: {
|
type: Object,
|
default: () => null
|
}
|
},
|
data() {
|
return {
|
form: {
|
termCode: '',
|
termName: '',
|
termType: 1,
|
termMethodCode: '',
|
termMethod: '',
|
sampleRequire: '',
|
status: 1,
|
testId: ''
|
},
|
rules: {
|
termCode: [
|
{ required: true, message: '请输入检测项编号', trigger: 'blur' }
|
],
|
termName: [
|
{ required: true, message: '请输入检测项名称', trigger: 'blur' }
|
],
|
termType: [
|
{ required: true, message: '请选择定性/定量', trigger: 'change' }
|
],
|
termMethodCode: [
|
{ required: true, message: '请输入检测方法编号', trigger: 'blur' }
|
],
|
termMethod: [
|
{ required: true, message: '请输入检测方法', trigger: 'blur' }
|
],
|
sampleRequire: [
|
{ required: true, message: '请输入收样要求', trigger: 'blur' }
|
]
|
}
|
}
|
},
|
watch: {
|
dialogVisible(val) {
|
if (val && this.editData) {
|
// 编辑模式，回显数据
|
this.$nextTick(() => {
|
this.form = {
|
...this.editData,
|
termType: Number(this.editData.termType) // 确保termType是数字类型
|
}
|
})
|
} else if (!val) {
|
// 关闭对话框时重置表单
|
this.resetForm()
|
}
|
}
|
},
|
methods: {
|
submitForm() {
|
this.$refs.form.validate((valid) => {
|
if (valid) {
|
// 提交前确保termType是数字类型
|
const submitData = {
|
...this.form,
|
termType: Number(this.form.termType)
|
}
|
this.$emit('confirm', submitData)
|
this.resetForm()
|
}
|
})
|
},
|
resetForm() {
|
this.$refs.form.resetFields()
|
this.form = {
|
termCode: '',
|
termName: '',
|
termType: 1,
|
termMethodCode: '',
|
termMethod: '',
|
sampleRequire: '',
|
status: 1,
|
testId: ''
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.test-item-form {
|
padding: 20px 40px;
|
|
.form-row {
|
display: flex;
|
gap: 20px;
|
margin-bottom: 10px;
|
width: 100%;
|
|
.form-item {
|
flex: 1;
|
min-width: 0; // 防止flex子项溢出
|
}
|
}
|
|
.form-item {
|
width: 100%;
|
margin-bottom: 22px;
|
|
:deep(.el-form-item__label) {
|
padding-bottom: 8px;
|
line-height: 1.5;
|
font-size: 14px;
|
color: #606266;
|
}
|
|
:deep(.el-form-item__content) {
|
width: 100%;
|
|
.el-input,
|
.el-radio-group {
|
width: 100%;
|
}
|
}
|
}
|
}
|
|
:deep(.el-dialog__body) {
|
padding: 0;
|
}
|
|
:deep(.el-input__inner) {
|
border-radius: 4px;
|
}
|
|
:deep(.el-dialog__footer) {
|
padding: 20px 40px;
|
text-align: right;
|
box-sizing: border-box;
|
border-top: 1px solid #E4E7ED;
|
}
|
|
:deep(.el-textarea__inner) {
|
min-height: 120px !important;
|
}
|
|
// 响应式布局
|
@media screen and (max-width: 768px) {
|
.test-item-form {
|
padding: 15px 20px;
|
|
.form-row {
|
flex-direction: column;
|
gap: 0;
|
}
|
}
|
}
|
</style>
|
