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

<template>
    <el-dialog title="新增" append-to-body v-model="openShow" width="70%" @close="closeDialog">
        <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-table :data="tableData" style="width: 100%" border :cell-style="{ padding: '5px' }">
            <!-- 设施 -->
            <el-table-column prop="device" label="设施" align="center" width="150">
                <template #header>
                    <span><i style="color: red">*</i>设施</span>
                </template>
                <template #default="scope">
                    <el-input v-model="scope.row.device" placeholder="请输入" />
                </template>
            </el-table-column>
            <el-table-column prop="dosingTime" label="化验时间" align="center" width="150">
                <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="dosingMan" label="化验人" align="center" width="150">
                <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 label="崔殿龙" value="541" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="itNi" label="镍" align="center" width="100">
                <template #header>
                    <span>镍</span>
                </template>
                <template #default="scope">
                    <el-input v-model="scope.row.itNi" />
                </template>
            </el-table-column>
            <el-table-column prop="itCu" label="铜" align="center" width="100">
                <template #header>
                    <span>铜</span>
                </template>
                <template #default="scope">
                    <el-input v-model="scope.row.itCu" />
                </template>
            </el-table-column>
            <el-table-column prop="itCr" label="六价铬" align="center" width="100">
                <template #header>
                    <span>六价铬</span>
                </template>
                <template #default="scope">
                    <el-input v-model="scope.row.itCr" />
                </template>
            </el-table-column>
            <el-table-column prop="itCn2" label="氰化物" align="center" width="100">
                <template #header>
                    <span>氰化物</span>
                </template>
                <template #default="scope">
                    <el-input v-model="scope.row.itCn2" />
                </template>
            </el-table-column>
            <el-table-column prop="itPh" label="PH" align="center" width="80">
                <template #header>
                    <span>PH</span>
                </template>
                <template #default="scope">
                    <el-input v-model="scope.row.itPh"  />
                </template>
            </el-table-column>
            <!-- 备注（输入框） -->
            <el-table-column prop="memo" label="备注" align="center" >
                <template #default="scope">
                    <el-input v-model="scope.row.memo"/>
                </template>
            </el-table-column>
        </el-table>

        <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,
        },
    },
    data() {
        return {
            openShow: false,
            tableData: [],
        };
    },
    watch: {
        // 监听父组件传入的显示状态，同步更新弹窗
        showDialog: {
            handler(newVal) {
                this.openShow = newVal;
            },
            immediate: true
        },
    },
    methods: {
        closeDialog() {
            this.openShow = false;
            this.$emit('closeDialog');
            // 关闭时清空数据
            this.tableData =
                [{
                    device: null,
                    dosingTime: null,
                    dosingMan: null,
                    itNi: null,
                    itCu: null,
                    itCr: null,
                    itCn2: null,
                    itPh: null,
                    memo: '',
                }];
        },
        // 插入一行
        addTable() {
            this.tableData.push({});
        },
        // 删除行
        delTable() {
            this.tableData.pop()
        },
        // 提交数据
        submit() {
            const isValid = this.tableData.every(row => {
                // 检查所有必填项
                if (!row.device || !row.dosingTime || !row.dosingMan) {
                    // 指明具体缺少的字段
                    const missingFields = [];
                    if (!row.device) missingFields.push("设施");
                    if (!row.dosingTime) missingFields.push("化验时间");
                    if (!row.dosingMan) missingFields.push("化验人");
                    this.$message.error(`请完善必填项: ${missingFields.join(", ")}`);
                    return false;
                }
                return true;
            });
            if (isValid) {
                // 向父组件传递新增的数据
                console.log(this.tableData, 'this.tableData');
                this.$emit('submitData', this.tableData);
                this.closeDialog(); // 提交后关闭弹窗
            }
        },
    },
};
</script>
<style lang="scss" scoped></style>