jonhon-mes-web/src/views/basicData/bigBatch/addBatch.vue

<template>
    <el-dialog :title="title" append-to-body :modelValue="openShow" width="75%" @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>
        <!-- 单个 Form 包裹整个表格 -->
        <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="form.tableData" @select="selectChange" border>
                <el-table-column type="selection" width="55"></el-table-column>
                <!-- 工艺能力（绑定数组字段） -->
                <el-table-column align="center" label="工艺能力" width="200">
                    <template #header>
                        <span><i style="color: red">*</i>工艺能力</span>
                    </template>
                    <template #default="scope">
                        <!-- prop 格式：数组名[索引].字段名 -->
                        <el-form-item :prop="`tableData[${scope.$index}].caId`" :rules="formRules.caId">
                            <el-select 
                                v-model="scope.row.caId" 
                                placeholder="请选择"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in abilityData"
                                    :key="item.id"
                                    :value="item.id"
                                    :label="item.caName"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>
                <!-- 单批面积 -->
                <el-table-column align="center" label="单批面积" width="200">
                    <template #header>
                        <span><i style="color: red">*</i>单批面积</span>
                    </template>
                    <template #default="scope">
                        <el-form-item :prop="`tableData[${scope.$index}].area`" :rules="formRules.area">
                            <el-input-number v-model="scope.row.area" :min="0" controls-position="right" style="width:99%;"></el-input-number>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="零件号" width="200">
                    <template #default="scope">
                        <el-form-item :prop="`tableData[${scope.$index}].partCode`" :rules="formRules.partCode">
                            <el-input v-model="scope.row.partCode"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="单件面积" width="200">
                    <template #default="scope">
                        <el-form-item :prop="`tableData[${scope.$index}].singletonArea`" :rules="formRules.singletonArea">
                            <el-input-number v-model="scope.row.singletonArea" :min="0" controls-position="right" style="width:99%;"></el-input-number>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="描述" >
                    <template #default="scope">
                        <el-form-item :prop="`tableData[${scope.$index}].describe`" :rules="formRules.describe">
                            <el-input v-model="scope.row.describe" ></el-input>
                        </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="submitForm">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import {addBat,updateBat} from "@/api/basicData/bigBatch"
import {getProcessAbility} from "@/api/basicData/outsourcingAssignmentControl"
export default {
    props:{
        showDialog:{
            type:Boolean,
            default:false
        },
        title:{
            type:String,
            default:''
        },
        moldAddMore:{
            type:Boolean,
            default:false
        },
        checkRow:{
            type:Object,
            default:()=>{}
        }
    },
    data(){
        return{
            openShow:false,
            formError:"",
            form:{
                tableData:[]
            },
            formRules:{
                // 表格数据数组的整体校验（可选：如最少1行数据）
                tableData: [
                    { 
                        required: true, 
                        message: '请至少添加一行数据', 
                        trigger: 'submit',
                        type: 'array' // 明确类型为数组
                    },
                    {
                        validator: (rule, value, callback) => {
                            if (value.length === 0) {
                                callback(new Error('请至少添加一行数据'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'submit'
                    }
                ],
                // 数组中每一项的 wcId 字段校验
                caId: [
                    { required: true, message: '请选择工艺能力', trigger: ['change', 'submit'] }
                ],
                area: [
                    { required: true, message: '请填写单批面积', trigger: ['change', 'submit'] }
                ],
            },
            abilityData:[],
            rowDetail:{}
        }
    },
    created(){
        this.openShow = this.showDialog
        this.getAbility()
        if(this.title == '新增'){
            if(this.form.tableData.length === 0){
                this.addTable()
            }
        }else{
            this.rowDetail = JSON.parse(JSON.stringify(this.checkRow))
            this.rowDetail.caId = this.rowDetail.caId.toString()
            console.log('this.rowDetail',this.rowDetail)
            this.form.tableData.push(this.rowDetail)
        }
    },
    methods:{
        getAbility(){
            getProcessAbility().then(res =>{
                this.abilityData = res.data.data
            })
        },
        selectChange(list, row) {
            row._select = !row._select;
        },
        addTable(){
            this.form.tableData.push({
                _select:false,
                caId: '',
                area: null,
                singletonArea:null,
                partCode:'',
                describe:''
            })
        },
        // 删除选中行
        delTable() {
            this.form.tableData = this.form.tableData.filter(row => !row._select);
        },
        // 提交表单（单次校验所有行）
        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;
                });
                if(this.title == '新增'){
                    addBat(submitData).then(res =>{
                        if(res.data.code == 200){
                            this.$message.success('新增成功');
                            this.closeDialog(true)
                        }
                    })
                }else{
                    updateBat(submitData[0]).then(res =>{
                        if(res.data.code == 200){
                            this.$message.success('修改成功')
                            this.closeDialog(true)
                        }
                    })
                }
            })
        },
        closeDialog(val) {
            this.openShow = false
            this.$emit('closeDialog',val);
        }
    }
}
</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;
}

// 表格行高适配 textarea
.el-table__row {
  height: 80px !important;
}

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

.error-message {
  font-size: 14px;
  line-height: 1.5;
}
:deep(.el-table .el-table__cell) {
  height: 50px !important;
  padding: 0 !important;
  line-height: 50px !important;
}
</style>