form表单收集数据提交和回显数据

form表单收集数据提交和回显数据的前提

1、使用<a-form :form="form"></a-form>

2、在data中定义

model:{},

form: this.$form.createForm(this),

3、form表单收集收据提交和回显数据

//收集表单数据进行提交
this.form.validateFields((err, values) => {
        if (err) {
          that.$message.warning('请检查各项是否填写完整!')
          return
        }
        let formData = Object.assign(that.model, values)
        that.confirmLoading = true
        //saveClientAppId 为一个请求
        that.submitForm(saveClientAppId(formData))
      })

//回显表单数据
this.model = { ...record }
      this.$nextTick(() => {
        //常规写法
        this.form.setFieldsValue({
          'appId': record.appId,
          'appName': record.appName,
          'isThirdApp': record.isThirdApp,
          'packageName': record.packageName,
          'expDate': moment(record.expDate),
          'effDate': moment(record.effDate),
          'appType': record.appType,
          'appDesc': record.appDesc,
        })

        //使用pick写法(需要引入pick)
        this.form.setFieldsValue(
          pick(
            this.model,
            'appId',
            'appName',
            'isThirdApp',
            'packageName',
            'expDate',
            'effDate',
            'appType',
            'appDesc'
          )
        )


//格式化时间，a-date-picker默认获取到的是moment对象，需要使用该方法将其进行格式化得到string
    formatDateTime(val) {
      let result = moment(val).format('YYYY-MM-DD HH:mm:ss')
      console.log('formatDateTime', val, result)
      return result
    },


// 表单提交服务器
    async submitForm(promiseObj) {
      try {
        let { message } = await promiseObj
        this.$message.success(message)
        this.$bus.$emit('ok')
        this.close()
        that.confirmLoading = false
      } catch (error) {
        this.confirmLoading = false
      }
    },