feat: step-info store logic

lbwa · Oct 5, 2018 · 0a0b6ca · 0a0b6ca
1 parent 762b1e1
commit 0a0b6ca
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 18 deletions.
diff --git a/src/components/Form/Basic/MainForm.vue b/src/components/Form/Basic/MainForm.vue
@@ -1,13 +1,14 @@
 <template>
   <el-form
     class="info__form"
-    ref="form"
+    ref="mainForm"
     :model="form"
+    :rules="rules"
     label-width="20%"
   >
     <el-form-item label="付款账户">
       <el-select
-        v-model="form.payAccount"
+        v-model="payAccount"
         :style="{ width: '100%' }"
       >
         <el-option
@@ -19,12 +20,14 @@
 
     <el-form-item label="收款账户">
       <el-input
-        v-model="form.receiverAccount"
+        :value="form.receiverAccount"
+        @change.native="setReceiverAccount"
         placeholder="yourname@example.com"
+        prop="receiverAccount"
       >
         <el-select
           slot="prepend"
-          v-model="form.receiverType"
+          v-model="receiverType"
           :style="{ width: '110px' }"
         >
           <el-option label="支付宝" value="alipay"></el-option>
@@ -35,14 +38,16 @@
 
     <el-form-item label="收款人姓名">
       <el-input
-        v-model="form.receiverName"
+        :value="form.receiverName"
+        @change.native="setReceiverName"
         placeholder="请输入收款人姓名"
       ></el-input>
     </el-form-item>
 
     <el-form-item label="转账金额">
       <el-input
-        v-model="form.amount"
+        :value="form.amount"
+        @change.native="setAmount"
         placeholder="请输入金额"
       ><span slot="prefix">￥</span></el-input>
     </el-form-item>
@@ -52,13 +57,15 @@
         class="info__next__btn"
         :text="btnText"
         to="confirm"
+        @click="onSubmit"
       ></router-link-btn>
     </el-form-item>
   </el-form>
 </template>
 
 <script>
 import RouterLinkBtn from 'COMPONENTS/RouterLinkBtn'
+import { mapState, mapMutations } from 'vuex'
 
 export default {
   props: {
@@ -70,16 +77,55 @@ export default {
 
   data () {
     return {
-      form: {
-        payAccount: 'vue-design-pro@github.com',
-        receiverAccount: '',
-        receiverType: 'alipay',
-        receiverName: '',
-        amount: ''
+      rules: {
+        receiverAccount: [
+          {
+            required: true
+          }
+        ]
       }
     }
   },
 
+  methods: {
+    onSubmit () {
+      this.$refs.mainForm.validate(valid => {
+        console.log(valid)
+      })
+    },
+    ...mapMutations('formStep', {
+      setPayAccount: 'SET_PAY_ACCOUNT',
+      setReceiverAccount: 'SET_RECEIVER_ACCOUNT',
+      setReceiverType: 'SET_RECEIVER_TYPE',
+      setReceiverName: 'SET_RECEIVER_NAME',
+      setAmount: 'SET_AMOUNT'
+    })
+  },
+
+  computed: {
+    // el-input doesn't support `.lazy`, so we use `:value=` and
+    // `@change.native` for other form item.
+    payAccount: {
+      get () {
+        return this.form.payAccount
+      },
+      set (value) {
+        this.setPayAccount(value)
+      }
+    },
+    receiverType: {
+      get () {
+        return this.form.receiverType
+      },
+      set (value) {
+        this.setReceiverType(value)
+      }
+    },
+    ...mapState('formStep', [
+      'form'
+    ])
+  },
+
   components: {
     RouterLinkBtn
   }

diff --git a/src/store/modules/formStep/mutations/index.js b/src/store/modules/formStep/mutations/index.js
@@ -1,3 +1,20 @@
-// import types from './types'
+import types from './types'
 
-export default {}
+export default {
+  [types.SET_PAY_ACCOUNT] (state, payAccount) {
+    state.form.payAccount = payAccount
+  },
+  [types.SET_RECEIVER_ACCOUNT] (state, evt) {
+    state.form.receiverAccount = evt.target.value
+  },
+  [types.SET_RECEIVER_TYPE] (state, receiverType) {
+    state.form.receiverType = receiverType
+  },
+  [types.SET_RECEIVER_NAME] (state, evt) {
+    state.form.receiverName = evt.target.value
+  },
+  [types.SET_AMOUNT] (state, evt) {
+    const value = parseFloat(evt.target.value)
+    state.form.amount = isNaN(value) ? 0 : value
+  }
+}
diff --git a/src/store/modules/formStep/mutations/types.js b/src/store/modules/formStep/mutations/types.js
@@ -1 +1,7 @@
-export default {}
+export default {
+  SET_PAY_ACCOUNT: 'SET_PAY_ACCOUNT',
+  SET_RECEIVER_ACCOUNT: 'SET_RECEIVER_ACCOUNT',
+  SET_RECEIVER_TYPE: 'SET_RECEIVER_TYPE',
+  SET_RECEIVER_NAME: 'SET_RECEIVER_NAME',
+  SET_AMOUNT: 'SET_AMOUNT'
+}
diff --git a/src/store/modules/formStep/state.js b/src/store/modules/formStep/state.js
@@ -1 +1,9 @@
-export default {}
+export default {
+  form: {
+    payAccount: 'vue-design-pro@github.com',
+    receiverAccount: '',
+    receiverType: 'alipay',
+    receiverName: '',
+    amount: ''
+  }
+}
diff --git a/src/view/Form/Step/Confirm.vue b/src/view/Form/Step/Confirm.vue
@@ -18,6 +18,7 @@
 
 <script>
 import RouterLinkBtn from 'COMPONENTS/RouterLinkBtn'
+import { mapState } from 'vuex'
 
 export default {
   data () {
@@ -32,6 +33,12 @@ export default {
     }
   },
 
+  computed: {
+    ...mapState('formStep', [
+      'form'
+    ])
+  },
+
   created () {
     this.updateBreadcrumb()
   },

diff --git a/src/view/Form/Step/Success.vue b/src/view/Form/Step/Success.vue
@@ -2,8 +2,6 @@
   <div class="step-form__container">
     <el-form
       class="success__form"
-      ref="form"
-      :model="form"
       label-width="20%"
     >
       <el-form-item>