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="batchNo">
          <template slot-scope="{ row, $index }">
            <el-form-item
              :prop="'timeList.' + $index + '.batchNo'"
              :rules="tableFormRules.batchNo"
            >
              <el-input
                placeholder="请输入"
                clearable
                v-model="row.batchNo"
                disabled
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <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>