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

<template>
    <div>
        <el-table
            :data="tableData"
            style="width: 100%"
            size="mini"
            border>
            <el-table-column
                prop="specification"
                align="center"
                label="产品规格型号">
            </el-table-column>
            <el-table-column
                prop="num"
                align="center"
                label="数量">
            </el-table-column>
            <el-table-column
                prop="batchNo"
                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="specification"
                        :rules="{
                            required: true,
                            message: '输入产品规格型号',
                            trigger: 'change'
                        }"
                    >
                        <el-input
                            v-model="form.specification"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>

                    <el-form-item
                        label="数量"
                        label-width="110px"
                        prop="num"
                        :rules="{
                            required: true,
                            message: '输入数量',
                            trigger: 'change'
                        }"
                    >
                        <el-input
                            v-model="form.num"
                            placeholder="请输入"
                        ></el-input>
                    </el-form-item>
                    <el-form-item
                        label="批号"
                        label-width="110px"
                        prop="batchNo"
                        :rules="{
                                required: true,
                                message: '输入批号',
                                trigger: 'change'
                            }"
                    >
                        <el-input
                            v-model="form.batchNo"
                            placeholder="请输入"
                        ></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 = {
            specification: '',
            num: '',
            batchNo: '',
        }
        return {
            form: {},
            formItem,
            useSealTypeList: [
                {
                    value: '加盖',
                    label: '加盖'
                },
                {
                    value: '借用',
                    label: '借用'
                },
                {
                    value: '无',
                    label: '无'
                },
            ],
            useSealNameList: [
                {
                    value: '总公司公章',
                    label: '总公司公章'
                },
                {
                    value: '合同专用章',
                    label: '合同专用章'
                },
                {
                    value: '法人章',
                    label: '法人章'
                },
                {
                    value: '财务专用章',
                    label: '财务专用章'
                },
                {
                    value: '发票专用章',
                    label: '发票专用章'
                },
                {
                    value: '质检专用章',
                    label: '质检专用章'
                },
                {
                    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';
            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));
                console.log('newForm', newForm);
                if(this.type === 'add') {
                    this.tableData.push(newForm);
                } else {
                    this.$set(this.tableData, this.currentIndex, newForm);
                }
                console.log('this.tableData', this.tableData);
                this.updateRowInfo()
                this.handleClose(); // 保存后关闭弹窗
                // 重置form
                this.form = {};
            } catch (error) {
                console.log('表单验证失败', 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>