antd中DatePicker 在修改弹窗中的校验问题

1、问题描述：在修改弹窗中回显日期，后台返回的是字符串，如果直接赋值，并且未改动过日期选择器，点击修改确认按钮，则会提示校验失败

<a-col :span="12">
 <a-form-item label="启动时间：">
    <a-date-picker placeholder="请选择启动时间" v-decorator="['startTime', config]">
  </a-form-item>
</a-col>
data(){
	return {
		config: {
	        rules: [{ type: 'object', required: true, message: '请选择启动时间' }],
	      },
	}
}

2、原因：因为校验的是object，所以如果未改动直接提交，是会报错的
如图：

3、解决： 先把拿到的值转成moment格式，再赋值，提交的时候，再转成字符串（后台需要字符串）

安装moment
npm install moment
组件使用
// 点击修改
handleEdit(isEdit, item) {
  this.value = item
  this.visible = true;
  document.getElementById("popContainer").style.overflowY = "hidden";
  // 获取测站分组下拉的数据
  this.getGroupList()
  this.isEdit = isEdit;
  if (this.isEdit) {
    // 修改，给弹窗赋值,转成moment格式赋值,防止用户未修改而提示校验失败
    var moment = require('moment');
    this.value.startTime = moment(this.value.startTime)
    this.$nextTick(() => {
      this.modForm.setFieldsValue({
        name: this.value.name,
        planCycle: this.value.cycle,
        startTime: this.value.startTime,
        planDay: this.value.duration,
        group: this.value.groupId
      })
    })
  }
},
// 新增修改方法
async addFn() {
  let url, method, msg
  let data = {
    name: this.modForm.getFieldValue('name'),
    cycle: this.modForm.getFieldValue('planCycle'),
    duration: parseInt(this.modForm.getFieldValue('planDay')),
    groupId: this.modForm.getFieldValue('group')
  }
  if(this.isEdit) {
    // 修改
    url = this.$url.DEV_OPS_PLAN_EDIT
    method = 'put'
    msg = "修改成功"
    // 如果有修改，使用修改后的值，如果未修改，则使用后台返回的值
    data.startTime = this.modForm.getFieldValue('startTime') instanceof Object? this.modForm.getFieldValue('startTime').format('YYYY-MM-DD'): this.value.startTime
    data.id = this.value.id
  } else {
    // 新增
    url = this.$url.DEV_OPS_PLAN_ADD
    method = 'str'
    msg = "新增成功"
    // 获取选择的日期
    data.startTime = this.modForm.getFieldValue('startTime')? this.modForm.getFieldValue('startTime').format('YYYY-MM-DD'): null
  }
  let res = await this.$http(url, method, data)
  if(res.data.code === 0) {
    this.$message.success(msg)
    this.visible = false
    if(!this.isEdit) {
      // 新增成功重新请求数据
      this.pagination.current = 1
      this.getPlanList()
    } else {
      // 修改直接在当前页请求数据
      this.getPlanList()
    }
    // 重置表单
    this.modForm.resetFields()
  } else {
    // 因为需要计算天数和计划周期对应，所以需要后台的提示
    this.$message.error(res.data.msg)
  }
},
// 修改新增弹窗确定按钮
handleOk() {
  this.modForm.validateFields( err => {
    if(!err) {
      this.addFn()
    } else {
      
    }
  })
},

乐观和爱才是生活的解药！