fix: step from value bind

Author: sendya

src/views/form/stepForm/Step1.vue

@@ -1,12 +1,14 @@
 <template>
   <div>
-    <a-form style="max-width: 500px; margin: 40px auto 0;">
+    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
       <a-form-item
         label="付款账户"
         :labelCol="labelCol"
         :wrapperCol="wrapperCol"
       >
-        <a-select value="1" placeholder="ant-design@alipay.com">
+        <a-select
+          placeholder="ant-design@alipay.com"
+          v-decorator="['paymentUser', { rules: [{required: true, message: '付款账户必须填写'}] }]">
           <a-select-option value="1">ant-design@alipay.com</a-select-option>
         </a-select>
       </a-form-item>
@@ -15,27 +17,33 @@
         :labelCol="labelCol"
         :wrapperCol="wrapperCol"
       >
-        <a-input-group :compact="true" style="display: inline-block; vertical-align: middle">
+        <a-input-group
+          style="display: inline-block; vertical-align: middle"
+          :compact="true"
+        >
           <a-select defaultValue="alipay" style="width: 100px">
             <a-select-option value="alipay">支付宝</a-select-option>
             <a-select-option value="wexinpay">微信</a-select-option>
           </a-select>
-          <a-input :style="{width: 'calc(100% - 100px)'}" value="test@example.com"/>
+          <a-input
+            :style="{width: 'calc(100% - 100px)'}"
+            v-decorator="['payType', { initialValue: 'test@example.com', rules: [{required: true, message: '收款账户必须填写'}]}]"
+          />
         </a-input-group>
       </a-form-item>
       <a-form-item
         label="收款人姓名"
         :labelCol="labelCol"
         :wrapperCol="wrapperCol"
       >
-        <a-input value="Alex" />
+        <a-input v-decorator="['name', { initialValue: 'Alex', rules: [{required: true, message: '收款人名称必须核对'}] }]"/>
       </a-form-item>
       <a-form-item
         label="转账金额"
         :labelCol="labelCol"
         :wrapperCol="wrapperCol"
       >
-        <a-input prefix="￥" value="5000" />
+        <a-input prefix="￥" v-decorator="['momey', { initialValue: '5000', rules: [{required: true, message: '转账金额必须填写'}] }]"/>
       </a-form-item>
       <a-form-item :wrapperCol="{span: 19, offset: 5}">
         <a-button type="primary" @click="nextStep">下一步</a-button>
@@ -58,12 +66,19 @@ export default {
   data () {
     return {
       labelCol: { lg: { span: 5 }, sm: { span: 5 } },
-      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } }
+      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
+      form: this.$form.createForm(this)
     }
   },
   methods: {
     nextStep () {
-      this.$emit('nextStep')
+      const { form: { validateFields } } = this
+      // 先校验，通过表单校验后，才进入下一步
+      validateFields((err, values) => {
+        if (!err) {
+          this.$emit('nextStep')
+        }
+      })
     }
   }
 }

src/views/form/stepForm/Step2.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-form style="max-width: 500px; margin: 40px auto 0;">
+    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
       <a-alert
         :closable="true"
         message="确认转账后，资金将直接打入对方账户，无法退回。"
@@ -45,7 +45,10 @@
         :wrapperCol="wrapperCol"
         class="stepFormText"
       >
-        <a-input type="password" style="width: 80%;" value="123456" />
+        <a-input
+          type="password"
+          style="width: 80%;"
+          v-decorator="['paymentPassword', { initialValue: '123456', rules: [{required: true, message: '请输入支付密码'}] }]" />
       </a-form-item>
       <a-form-item :wrapperCol="{span: 19, offset: 5}">
         <a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
@@ -62,21 +65,34 @@ export default {
     return {
       labelCol: { lg: { span: 5 }, sm: { span: 5 } },
       wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
-
-      loading: false
+      form: this.$form.createForm(this),
+      loading: false,
+      timer: 0
     }
   },
   methods: {
     nextStep () {
       const that = this
+      const { form: { validateFields } } = this
       that.loading = true
-      setTimeout(function () {
-        that.$emit('nextStep')
-      }, 1500)
+      validateFields((err, values) => {
+        if (!err) {
+          console.log('表单 values', values)
+          that.timer = setTimeout(function () {
+            that.loading = false
+            that.$emit('nextStep')
+          }, 1500)
+        } else {
+          that.loading = false
+        }
+      })
     },
     prevStep () {
       this.$emit('prevStep')
     }
+  },
+  beforeDestroy () {
+    clearTimeout(this.timer)
   }
 }
 </script>