kd-aiot-frontend-wt/src/views/bpm/handleTask/components/materialPlan/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-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'"
                            >
                            <el-input placeholder="请输入" disabled 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 disabled v-model="row.requireDeliveryTime"  value-format="timestamp"   placeholder="请选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </template></el-table-column>




            </el-table>

        </el-form>




        <div class="btns">
            <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

        },







        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>