jonhon-mes-web/src/views/productionManagement/components/coatingMater/assayedContentDialog.vue

<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>