kd-aiot-frontend-eom/src/components/timeDialog/index.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()"
        v-if="!view"
        >新增</el-button
      >
      <el-table
        ref="multipleTable"
        :data="form.arrivalBatch"
        tooltip-effect="dark"
        style="width: 100%"
        stripe
        :header-cell-style="{ background: '#EEEEEE', border: 'none' }"
      >
        <el-table-column label="数量" prop="arriveCount">
          <template slot-scope="{ row, $index }">
            <el-form-item
              :prop="'arrivalBatch.' + $index + '.arriveCount'"
              :rules="tableFormRules.arriveCount"
            >
              <el-input
                placeholder="请输入"
                clearable
                v-model="row.arriveCount"
                :disabled="view"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>

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

        
        <el-table-column label="操作" prop="action" width="80" v-if="!view">
          <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>
  import { copyObj } from '@/utils/util';

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

        current: null,
        form: {
          arrivalBatch: [
            {
              arriveDate: null,
              arriveCount: null
            }
          ]
        },

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

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

    watch: {},
    methods: {
      open(row) {
        console.log(row, 'row');
        this.form.arrivalBatch = row.arrivalBatch&&copyObj(row.arrivalBatch)||[];
        this.current = row;
        this.visible = true;
      },

      handleAdd() {
        this.form.arrivalBatch.push({
          arriveDate: null,
          arriveCount: null
        });
      },

      handleDel(index) {
        this.form.arrivalBatch.splice(index, 1);
      },

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

      handleClose() {
        this.$refs.tableForm && this.$refs.tableForm.resetFields();
        this.visible = false;
      }
    }
  };
</script>

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

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