refactor: update to new project structure

src/pages/form/BasicForm.vue

@@ -0,0 +1,126 @@
+<template>
+  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+    <a-form>
+      <a-form-item
+        label="标题"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+      >
+        <a-input placeholder="给目标起个名字" />
+      </a-form-item>
+      <a-form-item
+        label="起止日期"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+      >
+        <a-range-picker style="width: 100%" />
+      </a-form-item>
+      <a-form-item
+        label="目标描述"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+      >
+        <a-textarea rows="4" placeholder="请输入你阶段性工作目标"/>
+      </a-form-item>
+      <a-form-item
+        label="衡量标准"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+      >
+        <a-textarea rows="4" placeholder="请输入衡量标准"/>
+      </a-form-item>
+      <a-form-item
+        label="客户"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+        :required="false"
+      >
+        <a-input placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"/>
+      </a-form-item>
+      <a-form-item
+        label="邀评人"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+        :required="false"
+      >
+        <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人"/>
+      </a-form-item>
+      <a-form-item
+        label="权重"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+        :required="false"
+      >
+        <a-input-number :min="0" :max="100"/>
+        <span>%</span>
+      </a-form-item>
+      <a-form-item
+        label="目标公开"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+        :required="false"
+        help="客户、邀评人默认被分享"
+      >
+        <a-radio-group v-model="value">
+          <a-radio :value="1">公开</a-radio>
+          <a-radio :value="2">部分公开</a-radio>
+          <a-radio :value="3">不公开</a-radio>
+        </a-radio-group>
+        <a-form-item>
+          <a-select mode="multiple" v-if="value === 2">
+            <a-select-option value="4">同事一</a-select-option>
+            <a-select-option value="5">同事二</a-select-option>
+            <a-select-option value="6">同事三</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form-item>
+      <a-form-item :wrapperCol="{span: 10, offset: 7}">
+        <a-button type="primary">提交</a-button>
+        <a-button style="margin-left: 8px">保存</a-button>
+      </a-form-item>
+    </a-form>
+  </a-card>
+</template>
+
+<script>
+import ACard from 'ant-design-vue/es/card/Card'
+import AForm from 'ant-design-vue/es/form/Form'
+import AFormItem from 'ant-design-vue/es/form/FormItem'
+import AInput from 'ant-design-vue/es/input/Input'
+import ADatePicker from 'ant-design-vue/es/date-picker'
+import ATextarea from 'ant-design-vue/es/input/TextArea'
+import AInputNumber from 'ant-design-vue/es/input-number/index'
+import ARadioGroup from 'ant-design-vue/es/radio/Group'
+import ARadio from 'ant-design-vue/es/radio/Radio'
+import ASelect from 'ant-design-vue/es/select/index'
+import AButton from 'ant-design-vue/es/button/button'
+
+const ARangePicker = ADatePicker.RangePicker
+const ASelectOption = ASelect.Option
+export default {
+  name: 'BasicForm',
+  components: {
+    AButton,
+    ASelectOption,
+    ASelect,
+    ARadio,
+    ARadioGroup,
+    AInputNumber,
+    ATextarea,
+    ARangePicker,
+    AInput,
+    AFormItem,
+    AForm,
+    ACard},
+  data () {
+    return {
+      desc: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+      value: 1
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/pages/form/advancedForm/AdvancedForm.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <a-card class="card" title="仓库管理" :bordered="false">
+      <repository-form ref="repository" :showSubmit="false" />
+    </a-card>
+    <a-card class="card" title="任务管理" :bordered="false">
+      <task-form ref="task" :showSubmit="false" />
+    </a-card>
+    <a-card title="用户管理" :bordered="false">
+      <table-form />
+    </a-card>
+    <footer-tool-bar>
+      <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
+    </footer-tool-bar>
+  </div>
+</template>
+
+<script>
+import ACard from 'ant-design-vue/es/card/Card'
+import RepositoryForm from './RepositoryForm'
+import TaskForm from './TaskForm'
+import TableForm from './TableForm'
+import FooterToolBar from '../../../components/tool/FooterToolBar'
+import AButton from 'ant-design-vue/es/button/button'
+
+export default {
+  name: 'AdvancedForm',
+  components: {AButton, FooterToolBar, TableForm, TaskForm, RepositoryForm, ACard},
+  data () {
+    return {
+      desc: '高级表单常见于一次性输入和提交大批量数据的场景。',
+      loading: false
+    }
+  },
+  methods: {
+    validate () {
+      this.$refs.repository.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+        }
+      })
+      this.$refs.task.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .card{
+    margin-bottom: 24px;
+  }
+</style>

src/pages/form/advancedForm/RepositoryForm.vue

@@ -0,0 +1,128 @@
+<template>
+  <a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
+    <a-row class="form-row">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="仓库名"
+          fieldDecoratorId="repository.name"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}"
+        >
+          <a-input placeholder="请输入仓库名称" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="仓库域名"
+          fieldDecoratorId="repository.domain"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}"
+        >
+          <a-input addonBefore="http://" addonAfter=".github.io" placeholder="请输入"/>
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="仓库管理员"
+          fieldDecoratorId="repository.manager"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择管理员'}]}"
+        >
+          <a-select placeholder="请选择管理员">
+            <a-select-option value="王同学">王同学</a-select-option>
+            <a-select-option value="李同学">李同学</a-select-option>
+            <a-select-option value="黄同学">黄同学</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row class="form-row">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="审批人"
+          fieldDecoratorId="repository.auditor"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择审批员'}]}"
+        >
+          <a-select placeholder="请选择审批员">
+            <a-select-option value="王晓丽">王晓丽</a-select-option>
+            <a-select-option value="李军">李军</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="生效日期"
+          fieldDecoratorId="repository.effectiveDate"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择生效日期'}]}"
+        >
+          <a-range-picker style="width: 100%" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="仓库类型"
+          fieldDecoratorId="repository.type"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择仓库类型'}]}"
+        >
+          <a-select placeholder="请选择仓库类型">
+            <a-select-option value="公开">公开</a-select-option>
+            <a-select-option value="私密">私密</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-form-item v-if="showSubmit">
+      <a-button htmlType="submit" >Submit</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script>
+import AForm from 'ant-design-vue/es/form/Form'
+import AFormItem from 'ant-design-vue/es/form/FormItem'
+import ACol from 'ant-design-vue/es/grid/Col'
+import ARow from 'ant-design-vue/es/grid/Row'
+import AInput from 'ant-design-vue/es/input/Input'
+import ASelect from 'ant-design-vue/es/select/index'
+import ADatePicker from 'ant-design-vue/es/date-picker'
+import AButton from 'ant-design-vue/es/button/button'
+
+const ASelectOption = ASelect.Option
+const ARangePicker = ADatePicker.RangePicker
+
+export default {
+  name: 'RepositoryForm',
+  props: ['showSubmit'],
+  components: {AButton, ARangePicker, ASelectOption, ASelect, AInput, ARow, ACol, AFormItem, AForm},
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+        }
+      })
+    },
+    validate (rule, value, f) {
+      if (value !== undefined && value !== 'iczer') {
+        f('输入\'iczer\'试下？')
+      }
+      f()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .form{
+    .form-row{
+      margin: 0 -8px
+    }
+    .ant-col-md-12,
+    .ant-col-sm-24,
+    .ant-col-lg-6,
+    .ant-col-lg-8,
+    .ant-col-lg-10,
+    .ant-col-xl-8,
+    .ant-col-xl-6{
+      padding: 0 8px
+    }
+  }
+</style>

src/pages/form/advancedForm/TableForm.vue

@@ -0,0 +1,166 @@
+<template>
+  <form :autoFormCreate="(form) => this.form = form">
+    <a-table
+      :columns="columns"
+      :dataSource="dataSource"
+      :pagination="false"
+    >
+      <template  v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record, index">
+          <a-input
+            :key="col"
+            v-if="record.editable"
+            style="margin: -5px 0"
+            :value="text"
+            :placeholder="columns[i].title"
+            @change="e => handleChange(e.target.value, record.key, col)"
+          />
+          <template v-else>{{text}}</template>
+      </template>
+      <template slot="operation" slot-scope="text, record, index">
+        <template v-if="record.editable">
+          <span v-if="record.isNew">
+            <a @click="saveRow(record.key)">添加</a>
+            <a-divider type="vertical" />
+            <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
+              <a>删除</a>
+            </a-popconfirm>
+          </span>
+            <span v-else>
+            <a @click="saveRow(record.key)">保存</a>
+            <a-divider type="vertical" />
+            <a @click="cancle(record.key)">取消</a>
+          </span>
+        </template>
+        <span v-else>
+          <a @click="toggle(record.key)">编辑</a>
+          <a-divider type="vertical" />
+          <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
+            <a>删除</a>
+          </a-popconfirm>
+        </span>
+      </template>
+    </a-table>
+    <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMeber">新增成员</a-button>
+  </form>
+</template>
+
+<script>
+import ATable from 'ant-design-vue/es/table'
+import AButton from 'ant-design-vue/es/button/button'
+import AInput from 'ant-design-vue/es/input/Input'
+import ADivider from 'ant-design-vue/es/divider/index'
+import APopconfirm from 'ant-design-vue/es/popconfirm/index'
+import AFormItem from 'ant-design-vue/es/form/FormItem'
+
+const columns = [
+  {
+    title: '成员姓名',
+    dataIndex: 'name',
+    key: 'name',
+    width: '20%',
+    scopedSlots: { customRender: 'name' }
+  },
+  {
+    title: '工号',
+    dataIndex: 'workId',
+    key: 'workId',
+    width: '20%',
+    scopedSlots: { customRender: 'workId' }
+  },
+  {
+    title: '所属部门',
+    dataIndex: 'department',
+    key: 'department',
+    width: '40%',
+    scopedSlots: { customRender: 'department' }
+  },
+  {
+    title: '操作',
+    key: 'action',
+    scopedSlots: { customRender: 'operation' }
+  }
+]
+
+const dataSource = [
+  {
+    key: '1',
+    name: '小明',
+    workId: '001',
+    editable: false,
+    department: '行政部'
+  },
+  {
+    key: '2',
+    name: '李莉',
+    workId: '002',
+    editable: false,
+    department: 'IT部'
+  },
+  {
+    key: '3',
+    name: '王小帅',
+    workId: '003',
+    editable: false,
+    department: '财务部'
+  }
+]
+
+export default {
+  name: 'TableForm',
+  components: {AFormItem, APopconfirm, ADivider, AInput, AButton, ATable},
+  data () {
+    return {
+      columns,
+      dataSource
+    }
+  },
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+    },
+    newMeber () {
+      this.dataSource.push({
+        key: '99',
+        name: '',
+        workId: '',
+        department: '',
+        editable: true,
+        isNew: true
+      })
+    },
+    remove (key) {
+      const newData = this.dataSource.filter(item => item.key !== key)
+      this.dataSource = newData
+    },
+    saveRow (key) {
+      let target = this.dataSource.filter(item => item.key === key)[0]
+      target.editable = false
+      target.isNew = false
+    },
+    toggle (key) {
+      let target = this.dataSource.filter(item => item.key === key)[0]
+      target.editable = !target.editable
+    },
+    getRowByKey (key, newData) {
+      const data = this.dataSource
+      return (newData || data).filter(item => item.key === key)[0]
+    },
+    cancle (key) {
+      let target = this.dataSource.filter(item => item.key === key)[0]
+      target.editable = false
+    },
+    handleChange (value, key, column) {
+      const newData = [...this.dataSource]
+      const target = newData.filter(item => key === item.key)[0]
+      if (target) {
+        target[column] = value
+        this.dataSource = newData
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/pages/form/advancedForm/TaskForm.vue

@@ -0,0 +1,120 @@
+<template>
+  <a-form @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
+    <a-row class="form-row">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="任务名"
+          fieldDecoratorId="task.name"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务名称', whitespace: true}]}"
+        >
+          <a-input placeholder="请输入任务名称" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="任务描述"
+          fieldDecoratorId="task.description"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入任务描述', whitespace: true}]}"
+        >
+          <a-input placeholder="请输入任务描述"/>
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="执行人"
+          fieldDecoratorId="task.executor"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择执行人'}]}"
+        >
+          <a-select placeholder="请选择执行人">
+            <a-select-option value="黄丽丽">黄丽丽</a-select-option>
+            <a-select-option value="李大刀">李大刀</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-row class="form-row">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="责任人"
+          fieldDecoratorId="task.manager"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择责任人'}]}"
+        >
+          <a-select placeholder="请选择责任人">
+            <a-select-option value="王伟">王伟</a-select-option>
+            <a-select-option value="李红军">李红军</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 6, offset: 2}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="提醒时间"
+          fieldDecoratorId="task.time"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择提醒时间'}]}"
+        >
+          <a-time-picker style="width: 100%" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 8, offset: 2}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="任务类型"
+          fieldDecoratorId="task.type"
+          :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择任务类型'}]}"
+        >
+          <a-select placeholder="请选择任务类型">
+            <a-select-option value="定时执行">定时执行</a-select-option>
+            <a-select-option value="周期执行">周期执行</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+    <a-form-item v-if="showSubmit">
+      <a-button htmlType="submit" >Submit</a-button>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script>
+import AForm from 'ant-design-vue/es/form/Form'
+import AFormItem from 'ant-design-vue/es/form/FormItem'
+import ACol from 'ant-design-vue/es/grid/Col'
+import ARow from 'ant-design-vue/es/grid/Row'
+import AInput from 'ant-design-vue/es/input/Input'
+import ASelect from 'ant-design-vue/es/select/index'
+import AButton from 'ant-design-vue/es/button/button'
+import ATimePicker from 'ant-design-vue/es/time-picker/index'
+
+const ASelectOption = ASelect.Option
+
+export default {
+  name: 'TaskForm',
+  props: ['showSubmit'],
+  components: {ATimePicker, AButton, ASelectOption, ASelect, AInput, ARow, ACol, AFormItem, AForm},
+  methods: {
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .form{
+    .form-row{
+      margin: 0 -8px
+    }
+    .ant-col-md-12,
+    .ant-col-sm-24,
+    .ant-col-lg-6,
+    .ant-col-lg-8,
+    .ant-col-lg-10,
+    .ant-col-xl-8,
+    .ant-col-xl-6{
+      padding: 0 8px
+    }
+  }
+</style>

src/pages/form/stepForm/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 'ant-design-vue/es/form/Form'
+import AFormItem from 'ant-design-vue/es/form/FormItem'
+import AButton from 'ant-design-vue/es/button/button'
+import ASelect from 'ant-design-vue/es/select/index'
+import AInputGroup from 'ant-design-vue/es/input/Group'
+import AInput from 'ant-design-vue/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>

src/pages/form/stepForm/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 'ant-design-vue/es/form/Form'
+import AFormItem from 'ant-design-vue/es/form/FormItem'
+import AButton from 'ant-design-vue/es/button/button'
+import AAlert from 'ant-design-vue/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>

src/pages/form/stepForm/Step3.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <a-form style="max-width: 500px; margin: 40px auto 0;">
+      <result title="支付完成" :is-success="true" />
+      <a-form-item :wrapperCol="{span: 16, offset: 8}">
+        <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 'ant-design-vue/es/form/Form'
+import AFormItem from 'ant-design-vue/es/form/FormItem'
+import AButton from 'ant-design-vue/es/button/button'
+import Result from '../../../components/result/Result'
+export default {
+  name: 'Step3',
+  components: {Result, AButton, AFormItem, AForm},
+  methods: {
+    doOnceAgin () {
+      this.$emit('finish')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/pages/form/stepForm/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 'ant-design-vue/es/card/Card'
+import ASteps from 'ant-design-vue/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>