You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
118 lines
4.5 KiB
118 lines
4.5 KiB
<template> |
|
<el-dialog title="含量检测" append-to-body :modelValue="openShow" width="40%" @close="closeDialog"> |
|
<!-- 合并为单个表单，避免ref冲突 --> |
|
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="90"> |
|
<el-row> |
|
<el-col :span="12"> |
|
<el-form-item label="作业中心" prop="zuoyezhongxin"> |
|
<el-select v-model="ruleForm.zuoyezhongxin" placeholder="请选择"> |
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" /> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="12"> |
|
<el-form-item label="化验时间" prop="huayanshijian"> |
|
<!-- 修复日期选择器v-model绑定错误 --> |
|
<el-date-picker |
|
v-model="ruleForm.huayanshijian" |
|
type="date" |
|
placeholder="请选择" |
|
format="YYYY-MM-DD" |
|
value-format="YYYY-MM-DD" |
|
/> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
<el-table :data="ruleForm.tableData" style="width: 100%"> |
|
<el-table-column type="index" label="序号" width="180" /> |
|
<el-table-column prop="name" label="作业槽" width="180" /> |
|
<el-table-column prop="address" label="测量值"> |
|
<template #header> |
|
<span><i style="color:red">*</i>测量值</span> |
|
</template> |
|
<template #default="scope"> |
|
<!-- 将输入框放入form-item内部，避免校验时的更新冲突 --> |
|
<el-form-item |
|
:prop="'tableData.' + scope.$index + '.address'" |
|
:rules="[{ required: true, message: '请输入测量值', trigger: ['blur', 'change'] }]" |
|
> |
|
<el-input-number |
|
v-model="scope.row.address" |
|
controls-position="right" |
|
@change="handleChange" |
|
/> |
|
</el-form-item> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
</el-form> |
|
|
|
<template #footer> |
|
<span class="dialog-footer"> |
|
<el-button @click="closeDialog">取 消</el-button> |
|
<el-button type="primary" @click="submit">确 定</el-button> |
|
</span> |
|
</template> |
|
</el-dialog> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
props: { |
|
showDialog: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
}, |
|
data() { |
|
return { |
|
openShow: false, |
|
ruleForm: { |
|
huayanshijian: '', |
|
zuoyezhongxin: '', |
|
tableData: [ |
|
{ address: null, name: '#16' }, |
|
{ address: null, name: '#15' }, |
|
{ address: null, name: '#14' }, |
|
{ address: null, name: '#13' }, |
|
{ address: null, name: '#12' } |
|
] |
|
}, |
|
rules: { |
|
huayanshijian: [ |
|
{ required: true, message: '请选择化验时间', trigger:[ 'change', 'blur'] } |
|
], |
|
zuoyezhongxin: [ |
|
{ required: true, message: '请选择作业中心', trigger: ['change', 'blur'] } |
|
] |
|
}, |
|
options: [ |
|
{ label: '作业中心一1', value: '1' }, |
|
{ label: '作业中心二', value: '2' } |
|
] |
|
} |
|
}, |
|
mounted() { |
|
this.openShow = this.showDialog |
|
}, |
|
methods: { |
|
closeDialog() { |
|
this.openShow = false |
|
this.$emit('closeDialog'); |
|
}, |
|
submit() { |
|
this.$refs.ruleFormRef.validate((valid) => { |
|
if (valid) { |
|
console.log('提交数据:', this.ruleForm) |
|
// 提交逻辑 |
|
} |
|
}) |
|
}, |
|
handleChange(value) { |
|
// 避免在change事件中修改可能触发表格更新的数据 |
|
console.log('测量值变化:', value) |
|
} |
|
} |
|
} |
|
</script> |