jonhon-mes-web/src/views/orderManagement/components/mold/addMoldDailog.vue

<template>
    <el-dialog title="新增" append-to-body :modelValue="openShow" width="90%" @close="closeDialog" fullscreen>
        <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="form.tableData" @select="selectChange" style="width: 100%" border>
                <el-table-column type="selection" width="55" v-if="moldAddMore"></el-table-column>
                <el-table-column type="index" width="80" label="序号" align="center"></el-table-column>

                <el-table-column prop="partCode" label="零件编码" align="center">
                    <template #header>
                        <span><i style="color:red">*</i>零件编码</span>
                    </template>
                    <template #default="scope">
                        <el-form-item :prop="`tableData[${scope.$index}].partCode`" :rules="formRules.partCode">
                            <el-select v-model="scope.row.partCode" :filterable="true" allow-create
                                @change="partCodeChange(scope.row)">
                                <el-option label="零件一" value="1" />
                                <el-option label="零件二" value="2" />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column prop="partName" label="零件名称" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.partName }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="moCode" label="工装号" align="center">
                    <template #header>
                        <span><i style="color:red">*</i>工装号</span>
                    </template>
                    <template #default="scope">
                        <el-form-item :prop="`tableData[${scope.$index}].moCode`" :rules="formRules.moCode">
                            <el-select v-model="scope.row.moCode" :filterable="true" allow-create
                                @change="frockChange(scope.row)">
                                <el-option label="工装一" value="1" />
                                <el-option label="工装二" value="2" />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column prop="moName" label="工装名称" align="center">
                    <template #default="scope">
                        <span>{{ scope.row.moName }}</span>
                    </template>
                </el-table-column>

                <el-table-column prop="quantity" label="数量" align="center">
                    <template #header>
                        <span><i style="color:red">*</i>数量</span>
                    </template>
                    <template #default="scope">
                        <el-form-item :prop="`tableData[${scope.$index}].shuliang`" :rules="formRules.shuliang">
                            <el-input-number v-model="scope.row.shuliang" :min="1" controls-position="right"
                                style="width: 90%;" @change="handleChange" />
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column prop="planType" label="计划类型" align="center">
                    <template #header>
                        <span><i style="color:red">*</i>计划类型</span>
                    </template>
                    <template #default="scope">
                        <el-form-item :prop="`tableData[${scope.$index}].planType`" :rules="formRules.planType">
                            <el-select v-model="scope.row.planType" :filterable="true" allow-create>
                                <el-option label="计划类型一" value="1" />
                                <el-option label="计划类型二" value="2" />
                            </el-select>
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column prop="needDate" label="需求日期" align="center">
                    <template #header>
                        <span><i style="color:red">*</i>需求日期</span>
                    </template>
                    <template #default="scope">
                        <el-form-item :prop="`tableData[${scope.$index}].needDate`" :rules="formRules.needDate">
                            <el-date-picker v-model="scope.row.needDate" type="date" placeholder="请选择"
                                style="width: 80%;" />
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column prop="quaLevel" label="生产标识" align="center">
                    <template #header>
                        <span><i style="color:red">*</i>生产标识</span>
                    </template>
                    <template #default="scope">
                        <el-form-item :prop="`tableData[${scope.$index}].quaLevel`" :rules="formRules.quaLevel">
                            <el-input v-model="scope.row.quaLevel" />
                        </el-form-item>
                    </template>
                </el-table-column>

                <el-table-column prop="keeper.userName" label="保管员" align="center">
                    <template #header>
                        <span><i style="color:red">*</i>保管员</span>
                    </template>
                    <template #default="scope">
                        <el-form-item :prop="`tableData[${scope.$index}].userName`" :rules="formRules.userName">
                            <el-select v-model="scope.row.userName" :filterable="true" allow-create>
                                <el-option label="人员一" value="1" />
                                <el-option label="人员二" value="2" />
                            </el-select>
                        </el-form-item>
                    </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-column fixed="right" label="操作" width="100" align="left" v-if="moldAddMore">
                    <template #default="scope">
                        <el-button type="text" @click.prevent="delTable(scope.row, scope.$index)">删除</el-button>
                    </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>
export default {
    props: {
        showDialog: {
            type: Boolean,
            default: false
        },
        moldAddMore: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            openShow: false,
            formError: '',
            form: {
                tableData: []
            },
            formRules: {
                tableData: [
                    {
                        required: true,
                        message: '请至少添加一行数据',
                        trigger: 'submit',
                        type: 'array'
                    },
                    {
                        validator: (rule, value, callback) => {
                            if (value.length === 0) {
                                callback(new Error('请至少添加一行数据'));
                            } else {
                                callback();
                            }
                        },
                        trigger: 'submit'
                    }
                ],
                partCode: [
                    { required: true, message: '请选择零件编码', trigger: ['change', 'submit'] }
                ],
                moCode: [
                    { required: true, message: '请选择工装号', trigger: ['change', 'submit'] }
                ],
                shuliang: [
                    { required: true, message: '请输入数量', trigger: ['change', 'submit'] },
                    { type: 'number', min: 1, message: '数量不能小于1', trigger: ['change', 'submit'] }
                ],
                planType: [
                    { required: true, message: '请选择计划类型', trigger: ['change', 'submit'] }
                ],
                needDate: [
                    { required: true, message: '请选择需求日期', trigger: ['change', 'submit'] }
                ],
                quaLevel: [
                    { required: true, message: '请输入生产标识', trigger: ['blur', 'submit'] }
                ],
                userName: [
                    { required: true, message: '请选择保管员', trigger: ['change', 'submit'] }
                ]
            }
        };
    },
    mounted() {
        this.openShow = this.showDialog;
        if (this.moldAddMore && this.form.tableData.length === 0) {
            this.addTable();
        }
    },
    methods: {
        closeDialog() {
            this.openShow = false;
            this.$emit('closeDialog');
            this.form.tableData = [];
            this.formError = '';
            this.$refs.tableForm?.resetFields();
        },
        selectChange(list, row) {
            row._select = !row._select;
        },
        addTable() {
            this.form.tableData.push({
                _select: false,
                partCode: '',
                partName: '',
                moCode: '',
                moName: '',
                shuliang: 1,
                planType: '',
                needDate: '',
                quaLevel: '',
                userName: '',
                memo: ''
            });
        },
        delTable(row, index) {
            if (index !== undefined) {
                this.form.tableData.splice(index, 1);
            } else {
                this.form.tableData = this.form.tableData.filter(item => !item._select);
            }
        },
        partCodeChange(row) {
            // 保留原逻辑，可根据实际需求完善
        },
        frockChange(row) {
            // 保留原逻辑，可根据实际需求完善
        },
        handleChange() {
            // 数量变化处理
        },
        submitForm() {
            this.formError = '';
            this.$refs.tableForm.validate((isValid) => {
                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;
                });

                // 实际提交逻辑
                this.$message.success('提交成功');
                this.closeDialog();
                this.$emit('submitSuccess', submitData);
            });
        }
    }
};
</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;
}

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