kd-aiot-frontend-wt/src/BIZComponents/processSubmitDialog/components/reissueComponent.vue

<template>
    <div>
        <el-table
            :data="tableData"
            style="width: 100%"
            size="mini"
            border>
            <el-table-column
                prop="reissueType"
                align="center"
                label="补发型号规格">
            </el-table-column>
            <el-table-column
                prop="reissueOtherType"
                align="center"
                label="补发其他规格型号">
            </el-table-column>
            <el-table-column
                prop="reissueContact"
                align="center"
                label="收件地址/联系人/电话">
            </el-table-column>
            <el-table-column
                prop="reissueOtherReq"
                align="center"
                label="其他要求">
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="100"
                 v-if="!view">
                <template slot-scope="scope">
                    <!-- <el-button @click="editRow(scope.row, scope.$index)" type="text" size="mini">编辑</el-button> -->
                    <el-button @click="deleteRow(scope.$index)" type="text" size="mini">删除</el-button>
                </template>
                </el-table-column>
        </el-table>
        <div v-if="!view" @click="addRow" style="text-align: center;">
            <el-button type="text" icon="el-icon-plus">添加</el-button>
        </div>
        <ele-modal
            title="明细"
            custom-class="ele-dialog-form long-dialog-form"
            :visible.sync="visible"
            :before-close="handleClose"
            :close-on-click-modal="false"
            top="5vh"
            :close-on-press-escape="false"
            append-to-body
            width="70%"
            :maxable="true"
        >
            <el-card shadow="never">
                <el-form ref="form" :model="form">
                    <el-form-item
                        label="补发型号规格"
                        label-width="110px"
                        prop="reissueType"
                    >
                        <el-select
                            v-model="form.reissueType"
                            placeholder="请选择"
                            style="width: 100%"
                        >
                            <el-option
                                v-for="item in reissueTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
        
                    <el-form-item
                        label="补发其他规格型号"
                        label-width="110px"
                        prop="reissueOtherType"
                    >
                        <el-input
                            v-model="form.reissueOtherType"
                            type="textarea"
                            placeholder="请输入"
                            :autosize="{ minRows: 2, maxRows: 4}"
                        ></el-input>
                    </el-form-item>
                    <el-form-item 
                        label="收件地址/联系人/电话" 
                        label-width="110px" 
                        prop="reissueContact"
                        :rules="{
                                required: true,
                                message: '请输入收件地址/联系人/电话',
                                trigger: 'change'
                            }"
                    >
                        <el-input
                            v-model="form.reissueContact"
                            type="textarea"
                            placeholder="请输入"
                            :autosize="{ minRows: 2, maxRows: 4}"
                        ></el-input>
                    </el-form-item>
                    <el-form-item 
                        label="其他要求" 
                        label-width="110px" 
                        prop="reissueOtherReq"
                    >
                        <el-input
                            v-model="form.reissueOtherReq"
                            type="textarea"
                            placeholder="请输入"
                            :autosize="{ minRows: 2, maxRows: 4}"
                        ></el-input>
                    </el-form-item>
                </el-form>
            </el-card>

            <div slot="footer">
                <el-button type="primary" size="small" @click="save">保存</el-button>
                <el-button size="small" @click="handleClose">关闭</el-button>
            </div>
        </ele-modal>
    </div>
</template>
<script>
export default {
    props: {
        info: {
            type: Object,
            default: () => {}
        },
        generateForm: {
            type: Object,
            default: () => {}
        },
        id: {
            type: String,
            default: ''
        },
        view: {
            type: Boolean,
            default: false
        },
    },
    watch: {
        info: {
            handler(newVal, oldVal) {
                console.log('info', newVal);
                this.tableData = newVal[this.id] || [];
            },
            deep: true,
            immediate: true
        },
    },
    data() {
        const formItem = {
            reissueType: '',
            reissueOtherType: '',
            reissueContact: '',
            reissueOtherReq: '',
        }
        return {
            form: {},
            formItem,
            reissueTypeList: [
                {
                    value: '同规格型号',
                    label: '同规格型号'
                },
                {
                    value: '其他规格型号',
                    label: '其他规格型号'
                },
                {
                    value: '无',
                    label: '无'
                },
            ],
            tableData: [],
            visible: false,
            currentItem: {},
            currentIndex: null,
            type: 'add'
        }
    },
    mounted() {
        // console.log('info~~~', this.info);
        // this.initForm();
    },
    methods: {
        async updateRowInfo() {
            let data = await this.generateForm.getData(false);
            this.generateForm.setData({
                [this.id]: this.tableData
            });
            console.log('updateRowInfo', this.tableData, data);
        },
        validateForm() {
            //开始表单校验
            return new Promise((resolve, reject) => {
                this.$refs.form.validate((valid) => {
                    if (!valid) {
                        reject(false);
                    } else {
                        resolve(true);
                    }
                });
            });
        },
        addRow() {
            this.type = 'add';
            // 使用formItem初始化表单，确保所有字段都存在
            this.form = JSON.parse(JSON.stringify(this.formItem));
            this.visible = true;
        },
        handleClose() {
            this.visible = false;
        },
        editRow(row, index) {
            this.type = 'edit';
            console.log('编辑行', row, index);
            this.currentItem = row;
            this.currentIndex = index;
            this.visible = true;
            this.form = JSON.parse(JSON.stringify(row));
        },
        deleteRow(index) {
            this.tableData.splice(index, 1);
            this.updateRowInfo();
        },
   
        async save() {
            try {
                // 执行表单验证
                await this.validateForm();
                console.log('表单验证通过');
                
                // 深拷贝form对象，避免引用问题
                const newForm = JSON.parse(JSON.stringify(this.form));
                
                // 根据操作类型更新表格数据
                if(this.type === 'add') {
                    this.tableData.push(newForm);
                } else if (this.currentIndex !== null && this.currentIndex !== undefined) {
                    this.tableData[this.currentIndex] = newForm;
                }
                
                console.log('this.tableData', this.tableData);
                
                // 更新父组件数据
                this.updateRowInfo();
                
                // 保存后关闭弹窗
                this.handleClose();
                
                // 重置form为初始状态，使用formItem作为模板
                this.form = JSON.parse(JSON.stringify(this.formItem));
            } catch (error) {
                console.error('表单验证失败', error);
                // this.$message.error('表单验证失败，请检查必填项');
            }
        }
    }
}
</script>
<style scoped>
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.blank_business_component {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.label {
    width: 80px;
}
.value {
    flex: 1;
    width: calc(100% - 80px);
}
:deep(.el-form-box .el-table .el-table__row .el-table__cell .cell) {
    padding-left: 10px;
    padding-right: 10px;
}
</style>