kd-aiot-frontend-aps/src/views/materialPlan/components/timeDialog.vue

<template>
    <el-dialog :title="title" :visible.sync="visible" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false" append-to-body width="35%">

        <el-form :model="form" ref="tableForm" class="tableForm" :rules="tableFormRules">
            <el-button type="primary" size="small" style="margin-bottom: 10px" @click="handleAdd()">新增</el-button>
            <el-table ref="multipleTable" :data="form.timeList" tooltip-effect="dark" style="width: 100%" stripe
                :header-cell-style="{ background: '#EEEEEE', border: 'none' }">



                <el-table-column label="数量" prop="purchaseQuantity">
                    <template slot-scope="{ row, $index }">
                        <el-form-item :prop="'timeList.' + $index + '.purchaseQuantity'"
                            :rules="tableFormRules.purchaseQuantity">
                            <el-input placeholder="请输入" clearable v-model="row.purchaseQuantity"></el-input>
                        </el-form-item>

                    </template>
                </el-table-column>



                <el-table-column label="到货时间">
                    <template slot-scope="{ row, $index }">
                        <el-form-item :prop="'timeList.' + $index + '.requireDeliveryTime'"
                            :rules="tableFormRules.requireDeliveryTime">
                            <el-date-picker clearable v-model="row.requireDeliveryTime" type="date"
                                value-format="yyyy-MM-dd" placeholder="请选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </template></el-table-column>

                <el-table-column label="操作" prop="action" width="80">
                    <template slot-scope="{ $index }">
                        <el-link type="primary" :underline="false" @click="handleDel($index)">删除</el-link>
                    </template>
                </el-table-column>


            </el-table>

        </el-form>




        <div class="btns">
            <el-button type="primary" size="small" @click="handleOk">确认</el-button>
            <el-button size="small" @click="handleClose">取消</el-button>
        </div>
    </el-dialog>
</template>
  
<script>




export default {
    components: {
    },
    data() {
        return {
            visible: false,
            title: '设置分批时间',

            current: null,
            form: {
                timeList: [
                    {
                        requireDeliveryTime: null,
                        purchaseQuantity: null
                    }
                ]
            },

            tableFormRules: {
                purchaseQuantity: {
                    required: true,
                    message: '请输入数量',
                    trigger: 'blur'
                },

                requireDeliveryTime: {
                    required: true,
                    message: '请选择日期',
                    trigger: 'change'
                }
            }


        }
    },

    watch: {

    },
    methods: {



        open(row) {

            this.form.timeList = row.timeList || []
            this.current = row;
            this.visible = true

        },


        handleAdd() {
            this.form.timeList.push({
                requireDeliveryTime: null,
                purchaseQuantity: null
            })
        },

        handleDel(index) {
            this.timeList.splice(index, 1)
        },



        handleOk() {
            this.$refs.tableForm.validate((valid) => {
                if (valid) {
                    this.$emit('chooseTime', this.current, this.form.timeList)
                    this.handleClose()
                }
            })
        },




        handleClose() {
            this.visible = false
            this.form.timeList = [{
                requireDeliveryTime: null,
                purchaseQuantity: null
            }];
        },

    }
}
</script>
  
<style lang="scss" scoped>
.btns {
    margin-top: 20px;
    text-align: center;
}

.el-form-item {
    margin-bottom: 20px !important;
}
</style>