From ec40bd0d14d793f92a40fc6314f106a5aca25033 Mon Sep 17 00:00:00 2001
From: iczer <1126263215@qq.com>
Date: Mon, 23 Jul 2018 23:18:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9EStepForm?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/analysis/SalesData.vue |  2 +-
 src/components/form/BasicForm.vue     | 15 ++++-
 src/components/form/Step1.vue         | 70 +++++++++++++++++++++
 src/components/form/Step2.vue         | 87 +++++++++++++++++++++++++++
 src/components/form/Step3.vue         | 32 ++++++++++
 src/components/form/StepForm.vue      | 57 ++++++++++++++++++
 src/router/index.js                   |  3 +-
 7 files changed, 261 insertions(+), 5 deletions(-)
 create mode 100644 src/components/form/Step1.vue
 create mode 100644 src/components/form/Step2.vue
 create mode 100644 src/components/form/Step3.vue
 create mode 100644 src/components/form/StepForm.vue

diff --git a/src/components/analysis/SalesData.vue b/src/components/analysis/SalesData.vue
index b03a983..0eefd14 100644
--- a/src/components/analysis/SalesData.vue
+++ b/src/components/analysis/SalesData.vue
@@ -58,7 +58,7 @@ export default {
       },
       labelConfig: ['percent', {
         formatter: (val, item) => {
-          return item.point.item + ': ' + val;
+          return item.point.item + ': ' + val
         }
       }]
     }
diff --git a/src/components/form/BasicForm.vue b/src/components/form/BasicForm.vue
index e58f43c..1776802 100644
--- a/src/components/form/BasicForm.vue
+++ b/src/components/form/BasicForm.vue
@@ -93,7 +93,7 @@ import AInputNumber from 'vue-antd-ui/es/input-number/index'
 import ARadioGroup from 'vue-antd-ui/es/radio/Group'
 import ARadio from 'vue-antd-ui/es/radio/Radio'
 import ASelect from 'vue-antd-ui/es/select/index'
-import AButton from "vue-antd-ui/es/button/button";
+import AButton from 'vue-antd-ui/es/button/button'
 
 const ARangePicker = ADatePicker.RangePicker
 const ASelectOption = ASelect.Option
@@ -101,10 +101,19 @@ export default {
   name: 'BasicForm',
   components: {
     AButton,
-    ASelectOption, ASelect, ARadio, ARadioGroup, AInputNumber, ATextarea, ARangePicker, AInput, AFormItem, AForm, ACard},
+    ASelectOption,
+    ASelect,
+    ARadio,
+    ARadioGroup,
+    AInputNumber,
+    ATextarea,
+    ARangePicker,
+    AInput,
+    AFormItem,
+    AForm,
+    ACard},
   data () {
     return {
-      title: '基础表单',
       desc: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
       value: 1
     }
diff --git a/src/components/form/Step1.vue b/src/components/form/Step1.vue
new file mode 100644
index 0000000..81546c3
--- /dev/null
+++ b/src/components/form/Step1.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <a-form style="max-width: 500px; margin: 40px auto 0;">
+      <a-form-item
+        label="付款账户"
+        :labelCol="{span: 5}"
+        :wrapperCol="{span: 19}"
+      >
+        <a-select value="1" placeholder="ant-design@alipay.com">
+          <a-select-option value="1">ant-design@alipay.com</a-select-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item
+        label="收款账户"
+        :labelCol="{span: 5}"
+        :wrapperCol="{span: 19}"
+      >
+        <a-input-group :compact="true" style="display: inline-block; vertical-align: middle">
+          <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-group>
+      </a-form-item>
+      <a-form-item
+        label="收款人姓名"
+        :labelCol="{span: 5}"
+        :wrapperCol="{span: 19}"
+      >
+        <a-input value="Alex" />
+      </a-form-item>
+      <a-form-item
+        label="转账金额"
+        :labelCol="{span: 5}"
+        :wrapperCol="{span: 19}"
+      >
+        <a-input prefix="￥" value="5000" />
+      </a-form-item>
+      <a-form-item :wrapperCol="{span: 19, offset: 5}">
+        <a-button type="primary" @click="nextStep">下一步</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script>
+import AForm from 'vue-antd-ui/es/form/Form'
+import AFormItem from 'vue-antd-ui/es/form/FormItem'
+import AButton from 'vue-antd-ui/es/button/button'
+import ASelect from 'vue-antd-ui/es/select/index'
+import AInputGroup from "vue-antd-ui/es/input/Group";
+import AInput from "vue-antd-ui/es/input/Input";
+
+const ASelectOption = ASelect.Option
+
+export default {
+  name: 'Step1',
+  components: {AInput, AInputGroup, ASelectOption, ASelect, AButton, AFormItem, AForm},
+  methods: {
+    nextStep () {
+      this.$emit('nextStep')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form/Step2.vue b/src/components/form/Step2.vue
new file mode 100644
index 0000000..9d7dbdf
--- /dev/null
+++ b/src/components/form/Step2.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <a-form style="max-width: 500px; margin: 40px auto 0;">
+      <a-alert
+        :closable="true"
+        message="确认转账后，资金将直接打入对方账户，无法退回。"
+        style="margin-bottom: 24px;"
+      />
+      <a-form-item
+        label="付款账户"
+        :labelCol="{span: 5}"
+        :wrapperCol="{span: 19}"
+        class="stepFormText"
+      >
+        ant-design@alipay.com
+      </a-form-item>
+      <a-form-item
+        label="收款账户"
+        :labelCol="{span: 5}"
+        :wrapperCol="{span: 19}"
+        class="stepFormText"
+      >
+        test@example.com
+      </a-form-item>
+      <a-form-item
+        label="收款人姓名"
+        :labelCol="{span: 5}"
+        :wrapperCol="{span: 19}"
+        class="stepFormText"
+      >
+        Alex
+      </a-form-item>
+      <a-form-item
+        label="转账金额"
+        :labelCol="{span: 5}"
+        :wrapperCol="{span: 19}"
+        class="stepFormText"
+      >
+        ￥ 5,000.00
+      </a-form-item>
+      <a-form-item :wrapperCol="{span: 19, offset: 5}">
+        <a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
+        <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script>
+import AForm from 'vue-antd-ui/es/form/Form'
+import AFormItem from 'vue-antd-ui/es/form/FormItem'
+import AButton from 'vue-antd-ui/es/button/button'
+import AAlert from 'vue-antd-ui/es/alert/index'
+export default {
+  name: 'Step2',
+  components: {AAlert, AButton, AFormItem, AForm},
+  data () {
+    return {
+      loading: false
+    }
+  },
+  methods: {
+    nextStep () {
+      let _this = this
+      _this.loading = true
+      setTimeout(function () {
+        _this.$emit('nextStep')
+      }, 1500)
+    },
+    prevStep () {
+      this.$emit('prevStep')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .stepFormText {
+    margin-bottom: 24px;
+    :global {
+      .ant-form-item-label,
+      .ant-form-item-control {
+        line-height: 22px;
+      }
+    }
+  }
+</style>
diff --git a/src/components/form/Step3.vue b/src/components/form/Step3.vue
new file mode 100644
index 0000000..c2299ba
--- /dev/null
+++ b/src/components/form/Step3.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <a-form style="max-width: 500px; margin: 40px auto 0;">
+      <a-form-item :wrapperCol="{span: 15, offset: 9}">
+        success
+      </a-form-item>
+      <a-form-item :wrapperCol="{span: 19, offset: 5}">
+        <a-button type="primary" @click="doOnceAgin">再转一笔</a-button>
+        <a-button style="margin-left: 8px">查看账单</a-button>
+      </a-form-item>
+    </a-form>
+  </div>
+</template>
+
+<script>
+import AForm from 'vue-antd-ui/es/form/Form'
+import AFormItem from 'vue-antd-ui/es/form/FormItem'
+import AButton from 'vue-antd-ui/es/button/button'
+export default {
+  name: 'Step3',
+  components: {AButton, AFormItem, AForm},
+  methods: {
+    doOnceAgin () {
+      this.$emit('finish')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form/StepForm.vue b/src/components/form/StepForm.vue
new file mode 100644
index 0000000..b2897b7
--- /dev/null
+++ b/src/components/form/StepForm.vue
@@ -0,0 +1,57 @@
+<template>
+  <a-card :bordered="false">
+    <a-steps class="steps" :current="current">
+      <a-step title="填写转账信息" />
+      <a-step title="确认转账信息" />
+      <a-step title="完成" />
+    </a-steps>
+    <div class="content">
+      <step1 v-if="current === 0" @nextStep="nextStep"></step1>
+      <step2 v-if="current === 1" @nextStep="nextStep" @prevStep="prevStep"></step2>
+      <step3 v-if="current === 2" @prevStep="prevStep" @finish="finish"></step3>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import ACard from 'vue-antd-ui/es/card/Card'
+import ASteps from 'vue-antd-ui/es/steps/index'
+import Step1 from './Step1'
+import Step2 from './Step2'
+import Step3 from './Step3'
+
+const AStep = ASteps.Step
+
+export default {
+  name: 'StepForm',
+  components: {Step1, Step2, Step3, AStep, ASteps, ACard},
+  data () {
+    return {
+      desc: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
+      current: 0
+    }
+  },
+  methods: {
+    nextStep () {
+      if (this.current < 2) {
+        this.current += 1
+      }
+    },
+    prevStep () {
+      if (this.current > 0) {
+        this.current -= 1
+      }
+    },
+    finish () {
+      this.current = 0
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .steps{
+    max-width: 750px;
+    margin: 16px auto;
+  }
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 11324b6..8997e88 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,6 +7,7 @@ import NotPermit from '@/components/exception/403'
 import ServerError from '@/components/exception/500'
 import Form from '@/components/form/Form'
 import BasicForm from '@/components/form/BasicForm'
+import StepForm from '@/components/form/StepForm'
 
 Vue.use(Router)
 
@@ -33,7 +34,7 @@ export default new Router({
         {
           path: '/form/step',
           name: '分步表单',
-          component: NotFound,
+          component: StepForm,
           icon: 'none'
         },
         {