jonhon-mes-web/src/views/safetyManagement/wastewater/components/addEditDialogDischargeRec.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-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="wasteType" label="报废槽液类型" align="center" width="170">
                    <template #header>
                        <span><i style="color: red">*</i>报废槽液类型</span>
                    </template>
                    <template #default="scope">
                        <el-select v-model="scope.row.wasteType" placeholder="请选择" style="width: 100%">
                            <el-option label="预镀镍废液" value="预镀镍废液" />
                            <el-option label="除油废液" value="除油废液" />
                            <el-option label="其它废液" value="其它废液" />
                        </el-select>
                    </template>
                </el-table-column>

                <!-- 排放班组（可选择） -->
                <el-table-column prop="teamName" label="排放班组" align="center" width="170">
                    <template #header>
                        <span><i style="color: red">*</i>排放班组</span>
                    </template>
                    <template #default="scope">
                        <el-select v-model="scope.row.teamName" placeholder="请选择" style="width: 100%">
                            <el-option label="化学镀镍二班" value="化学镀镍二班" />
                            <el-option label="零件管理班" value="零件管理班" />
                        </el-select>
                    </template>
                </el-table-column>

                <!-- 排放量（输入框） -->
                <el-table-column prop="amount" label="排放量(单位:L)" align="center" width="170">
                    <template #header>
                        <span><i style="color: red">*</i>排放量</span>
                    </template>
                    <template #default="scope">
                        <el-input v-model.number="scope.row.amount" placeholder="请输入" />
                    </template>
                </el-table-column>

                <!-- 日期（日期选择器） -->
                <el-table-column prop="dirDate" label="日期" align="center" width="170">
                    <template #header>
                        <span><i style="color: red">*</i>日期</span>
                    </template>
                    <template #default="scope">
                        <el-date-picker v-model="scope.row.dirDate" format="YYYY-MM-DD HH:mm:ss"
                            value-format="YYYY-MM-DD HH:mm:ss" type="date" 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>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="closeDialog">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </span>
            </template>
        </el-form>
    </el-dialog>
</template>
<script>
export default {
    props: {
        showDialog: {
            type: Boolean,
            default: false,
        },
        moldAddMore: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            openShow: false,
            tableData: [],
            formError: '', // 全局错误提示
            form: {
                tableData: [] // 表格数据数组（直接绑定到 Form 模型）
            },
        };
    },
    watch: {
        // 监听父组件传入的显示状态，同步更新弹窗
        showDialog: {
            handler(newVal) {
                this.openShow = newVal;
            },
            immediate: true
        },
    },
    methods: {
        closeDialog() {
            this.openShow = false;
            this.$emit('closeDialog');
            this.formError = '';
            // 关闭时清空数据，避免下次打开残留
            this.tableData = [{ wasteType: null, teamName: null, amount: null, dirDate: null, memo: '' }];
        },
        // 插入一行
        addTable() {
            this.tableData.push({});
        },
        // 删除行
        delTable() {
            this.tableData.pop()
        },
        // 提交表单（单次校验所有行）
        submitForm() {
            this.formError = '';

            // 调用单个 Form 的校验方法
            this.$refs.tableForm.validate((isValid, invalidFields) => {
                if (!isValid) {
                    // 校验失败：显示提示并滚动到第一个错误字段
                    this.formError = '存在未完善的字段，请检查表格中的红色提示';

                    this.$nextTick(() => {
                        // 找到第一个错误字段并滚动到视图
                        const firstError = document.querySelector('.el-form-item.is-error');
                        if (firstError) {
                            firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }
                    });
                    return;
                }

                // 校验通过：准备提交数据（过滤无用字段）
                const submitData = this.form.tableData.map(row => {
                    const { _select, ...validData } = row; // 剔除选择状态字段
                    return validData;
                });

                // 调用接口提交（实际项目替换）
                try {
                    // const res = await submitBatchData(submitData);
                    // if (res.code === 200) {
                    //   this.$message.success('提交成功');
                    //   this.closeDialog();
                    //   this.$emit('submitSuccess', submitData);
                    // } else {
                    //   this.$message.error(res.msg || '提交失败');
                    // }

                    // 演示用
                    this.$message.success('提交成功');
                    this.closeDialog();
                    this.$emit('submitSuccess', submitData);
                } catch (err) {
                    this.$message.error('网络错误，请稍后重试');
                    console.error('提交失败：', err);
                }
            });
        }
    },
};
</script>
<style lang="scss" scoped></style>