jonhon-mes-web/src/views/safetyManagement/wastewater/components/addEditDialogDosingRecord.vue

<template>
    <el-dialog title="新增" append-to-body v-model="openShow" width="70%" @close="closeDialog" destroy-on-close>
        <div style="margin-bottom: 12px" v-if="moldAddMore">
            <el-button type="primary" @click="addTable">插入一行</el-button>
            <el-button type="danger" @click="delTable">删除行</el-button>
        </div>
        <el-form ref="tableForm" :model="form" :rules="formRules" label-width="0px">
            <div v-if="formError" class="error-message" style="color: #f56c6c; margin-bottom: 10px;">
                {{ formError }}
            </div>
            <el-table :data="tableData" style="width: 100%" border :cell-style="{ padding: '5px' }">
                <!-- 设施 -->
                <el-table-column prop="device" label="设施" align="center" width="170">
                    <template #header>
                        <span><i style="color: red">*</i>设施</span>
                    </template>
                    <template #default="scope">
                        <el-form-item :prop="`tableData[${scope.$index}].device`" :rules="formRules.device">
                            <el-input v-model="scope.row.device" placeholder="请输入" />
                        </el-form-item>

                    </template>
                </el-table-column>

                <!-- 药品 -->
                <el-table-column prop="drug" label="药品" align="center" width="170">
                    <template #header>
                        <span><i style="color: red">*</i>药品</span>
                    </template>
                    <template #default="scope">
                        <el-input v-model="scope.row.drug" placeholder="请输入" />
                    </template>
                </el-table-column>

                <!-- 剂量 -->
                <el-table-column prop="dose" label="剂量(kg)" align="center" width="170">
                    <template #header>
                        <span><i style="color: red">*</i>剂量(kg)</span>
                    </template>
                    <template #default="scope">
                        <el-input v-model.number="scope.row.dose" placeholder="请输入" />
                    </template>
                </el-table-column>
                <!-- 加药人 -->
                <el-table-column prop="dosingMan" label="加药人" align="center" width="170">
                    <template #header>
                        <span><i style="color: red">*</i>加药人</span>
                    </template>
                    <template #default="scope">
                        <el-select v-model="scope.row.dosingMan" placeholder="请选择" style="width: 100%">
                           <el-option v-for="item in dosingManList" :key="item.id" 
                                :label="item.name" 
                                :value="item.id" 
                                />
  
                            <el-option />
                        </el-select>
                    </template>
                </el-table-column>
                <!-- 加药时间 -->
                <el-table-column prop="dosingTime" label="加药时间" align="center" width="210">
                    <template #header>
                        <span><i style="color: red">*</i>加药时间</span>
                    </template>
                    <template #default="scope">
                        <el-date-picker v-model="scope.row.dosingTime" format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss" type="datetime" placeholder="选择时间" style="width: 100%" />
                    </template>
                </el-table-column>

                <!-- 备注（输入框） -->
                <el-table-column prop="memo" label="备注" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.memo" placeholder="请输入备注" />
                    </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,
        },
        moldAddMore: {
            type: Boolean,
            default: false,
        },
        dosingManList: {
            type: Array,
            default: () => [],
        }
    },
    data() {
        return {
            openShow: false,
            tableData: [],
            // 统一校验规则：支持数组项校验
            formRules: {
                // 表格整体校验：至少一行数据
                tableData: [
                    {
                        required: true,
                        message: '请至少添加一行数据',
                        trigger: 'submit',
                        type: 'array'
                    }
                ],
                // 设施校验
                device: [
                    { required: true, message: '请输入设施名称', trigger: ['blur', 'submit'] }
                ],
                // 药品校验
                drug: [
                    { required: true, message: '请输入药品名称', trigger: ['blur', 'submit'] }
                ],
                // 剂量校验：必填 + 数字 + 大于0
                dose: [
                    { required: true, message: '请输入剂量', trigger: ['blur', 'submit'] },
               
                ],
                // 加药人校验
                dosingMan: [
                    { required: true, message: '请选择加药人', trigger: ['change', 'submit'] }
                ],
                // 加药时间校验
                dosingTime: [
                    { required: true, message: '请选择加药时间', trigger: ['change', 'submit'] }
                ]
            }
        };
    },
    watch: {
        // 监听父组件传入的显示状态，同步更新弹窗
        showDialog: {
            handler(newVal) {
                this.openShow = newVal;
            },
            immediate: true
        },
    },
    methods: {
        show() {
            this.openShow = true;
            this.tableData = [];
        },
        closeDialog() {
            this.openShow = false;
            this.$emit('closeDialog');
            // 重置表单
            // this.form.tableData = [];
            this.formError = '';
            this.$refs.tableForm?.resetFields();
        },
        // 插入一行
        addTable() {
            this.tableData.push({});
        },
        
        // 删除行
        delTable() {
            this.tableData.pop()
        },
        // 提交数据
        submit() {
            const isValid = this.tableData.every(row => {
                // 检查所有必填项
                if (!row.device || !row.drug || !row.dose || !row.dosingTime || !row.dosingMan) {
                    // 指明具体缺少的字段
                    const missingFields = [];
                    if (!row.device) missingFields.push("设施");
                    if (!row.drug) missingFields.push("药品");
                    if (!row.dose) missingFields.push("剂量(kg)");
                    if (!row.dosingTime) missingFields.push("加药时间");
                    if (!row.dosingMan) missingFields.push("加药人");
                    this.$message.error(`请完善必填项: ${missingFields.join(", ")}`);
                    return false;
                }
                return true;
            });
            if (isValid) {
                const submitData = this.tableData.map(row => ({
                    ...row,
                    dorType: 2
                }));
                // 如果所有必填项都填写了，则进行提交操作         
                this.$emit("submitData", submitData); // 通知父组件刷新表格数据
                this.closeDialog()
            }
        },
    },
};
</script>
<style lang="scss" scoped>
:deep(.el-table .el-form-item) {
    margin-bottom: 0;
}

:deep(.el-form-item__error) {
    font-size: 12px;
    white-space: nowrap;
    z-index: 10;
    background: #fff;
    padding: 2px 4px;
    border: 1px solid #f56c6c;
    border-radius: 4px;
}

.el-table__row {
    height: 80px !important;
}

.el-table__cell {
    vertical-align: middle !important;
}

.error-message {
    font-size: 14px;
    line-height: 1.5;
}
</style>