Added baseForm, stepForm

src/components/layout/LayoutMain.vue

@@ -1,29 +1,29 @@
 <template>
-    <a-layout class="layout">
-
-        <sider-menu :menus="menus" :collapsed="collapsed" :collapsible="true"></sider-menu>
-
-        <a-layout>
-            <!-- layout header -->
-            <layout-header :collapsed="collapsed" @toggle="toggle"></layout-header>
-            <!-- layout content -->
-            <a-layout-content :style="{ margin: '24px 24px 0', height: '100%' }">
-              <!-- content -->
-              <slot></slot>
-            </a-layout-content>
-
-            <a-layout-footer style="padding: 0px">
-                <layout-footer />
-            </a-layout-footer>
-        </a-layout>
+  <a-layout class="layout">
+
+    <sider-menu :menus="menus" :collapsed="collapsed" :collapsible="true"></sider-menu>
+
+    <a-layout>
+      <!-- layout header -->
+      <layout-header :collapsed="collapsed" @toggle="toggle"></layout-header>
+      <!-- layout content -->
+      <a-layout-content :style="{ margin: '24px 24px 0', height: '100%' }">
+        <!-- content -->
+        <slot></slot>
+      </a-layout-content>
+
+      <a-layout-footer style="padding: 0px">
+        <layout-footer/>
+      </a-layout-footer>
     </a-layout>
+  </a-layout>
 </template>
 
 <script>
   import SiderMenu from '@/components/menu/SiderMenu'
   import LayoutHeader from './LayoutHeader'
   import LayoutFooter from './LayoutFooter'
-  import { asyncRouterMap } from '@/router/index'
+  import {asyncRouterMap} from '@/router/index'
 
   export default {
     name: "LayoutView",
@@ -38,7 +38,7 @@
         menus: []
       }
     },
-    created () {
+    created() {
       this.menus = asyncRouterMap
     },
     methods: {
@@ -52,158 +52,160 @@
 
 <style lang="scss">
 
-    html {
-        // 打开滚动条固定显示
-        overflow-y: scroll;
-    }
+  html {
+    // 打开滚动条固定显示
+    overflow-y: scroll;
+  }
 
-    .layout {
-        min-height: 100vh;
-        overflow-x: hidden;
+  .layout {
+    min-height: 100vh;
+    overflow-x: hidden;
 
-        &.ant-layout-has-sider {
-            flex-direction: row;
-        }
+    &.ant-layout-has-sider {
+      flex-direction: row;
+    }
 
-        .trigger {
-            font-size: 18px;
-            line-height: 64px;
-            padding: 0 24px;
-            cursor: pointer;
-            transition: color .3s;
-            &:hover {
-                color: #1890ff;
-                background: #e6f7ff;
-            }
-        }
+    .trigger {
+      font-size: 20px;
+      line-height: 64px;
+      padding: 0 24px;
+      cursor: pointer;
+      transition: color .3s;
+      &:hover {
+        color: #1890ff;
+        background: #e6f7ff;
+      }
+    }
 
-        .logo {
-            height: 64px;
-            position: relative;
-            line-height: 64px;
-            padding-left: 24px;
-            -webkit-transition: all .3s;
-            transition: all .3s;
-            background: #002140;
-            overflow: hidden;
-
-            img, h1 {
-                display: inline-block;
-                vertical-align: middle;
-            }
-
-            img {
-                height: 32px;
-            }
-
-            h1 {
-                color: #fff;
-                font-size: 20px;
-                margin: 0 0 0 12px;
-                font-family: "Myriad Pro","Helvetica Neue",Arial,Helvetica,sans-serif;
-                font-weight: 600;
-            }
-        }
+    .logo {
+      height: 64px;
+      position: relative;
+      line-height: 64px;
+      padding-left: 24px;
+      -webkit-transition: all .3s;
+      transition: all .3s;
+      background: #002140;
+      overflow: hidden;
+
+      img, h1 {
+        display: inline-block;
+        vertical-align: middle;
+      }
 
-        .sider {
-            box-shadow: 2px 0 6px rgba(0,21,41,.35);
-        }
+      img {
+        height: 32px;
+      }
 
-        .header {
-            height: 64px;
-            padding: 0 12px 0 0;
-            background: #fff;
-            box-shadow: 0 1px 4px rgba(0,21,41,.08);
-            position: relative;
-
-            .user-wrapper {
-                float: right;
-                height: 100%;
-
-                .action {
-                    cursor: pointer;
-                    padding: 0 12px;
-                    display: inline-block;
-                    transition: all .3s;
-                    height: 100%;
-
-                    &:hover {
-                        background: #e6f7ff;
-                    }
-
-                    .avatar {
-                        margin: 20px 8px 20px 0;
-                        color: #1890ff;
-                        background: hsla(0,0%,100%,.85);
-                        vertical-align: middle;
-                    }
-
-                    .icon {
-                        font-size: 16px;
-                        padding: 4px;
-                    }
-                }
-            }
-        }
+      h1 {
+        color: #fff;
+        font-size: 20px;
+        margin: 0 0 0 12px;
+        font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica, sans-serif;
+        font-weight: 600;
+      }
+    }
+
+    .sider {
+      box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
+      position: relative;
+      z-index: 10;
+    }
 
-        // 内容区
-        .layout-content {
-            margin: 24px 24px 0px;
-            height: 100%;
+    .header {
+      height: 64px;
+      padding: 0 12px 0 0;
+      background: #fff;
+      box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+      position: relative;
+
+      .user-wrapper {
+        float: right;
+        height: 100%;
+
+        .action {
+          cursor: pointer;
+          padding: 0 12px;
+          display: inline-block;
+          transition: all .3s;
+          height: 100%;
+
+          &:hover {
+            background: #e6f7ff;
+          }
+
+          .avatar {
+            margin: 20px 8px 20px 0;
+            color: #1890ff;
+            background: hsla(0, 0%, 100%, .85);
+            vertical-align: middle;
+          }
+
+          .icon {
+            font-size: 16px;
+            padding: 4px;
+          }
         }
+      }
+    }
 
+    // 内容区
+    .layout-content {
+      margin: 24px 24px 0px;
+      height: 100%;
     }
 
-    // 外置的样式控制
-    .user-dropdown-menu-wrapper.ant-dropdown-menu {
-        padding: 4px 0;
+  }
 
-        .ant-dropdown-menu-item {
-            width: 160px;
-        }
+  // 外置的样式控制
+  .user-dropdown-menu-wrapper.ant-dropdown-menu {
+    padding: 4px 0;
 
-        .ant-dropdown-menu-item>.anticon:first-child,
-        .ant-dropdown-menu-item>a>.anticon:first-child,
-        .ant-dropdown-menu-submenu-title>.anticon:first-child
-        .ant-dropdown-menu-submenu-title>a>.anticon:first-child {
-            min-width: 12px;
-            margin-right: 8px;
-        }
+    .ant-dropdown-menu-item {
+      width: 160px;
+    }
 
+    .ant-dropdown-menu-item > .anticon:first-child,
+    .ant-dropdown-menu-item > a > .anticon:first-child,
+    .ant-dropdown-menu-submenu-title > .anticon:first-child
+    .ant-dropdown-menu-submenu-title > a > .anticon:first-child {
+      min-width: 12px;
+      margin-right: 8px;
     }
 
-    // 数据列表 样式
-    .tableList {
+  }
 
-        .table-search {
+  // 数据列表 样式
+  .tableList {
 
-            &.open-more-condition {
-                .more-condition {
-                    display: block;
-                }
-            }
+    .table-search {
 
-            .more-condition {
-                display: none;
-            }
+      &.open-more-condition {
+        .more-condition {
+          display: block;
+        }
+      }
 
-            .ant-form-item {
-                display: flex;
-                margin-bottom: 24px;
+      .more-condition {
+        display: none;
+      }
 
-                &>.ant-form-item-label {
-                    flex: unset;
-                }
+      .ant-form-item {
+        display: flex;
+        margin-bottom: 24px;
 
-                .ant-form-item-control-wrapper {
-                    flex: 1 1;
-                }
-            }
+        & > .ant-form-item-label {
+          flex: unset;
         }
 
-        .ant-alert, .table-operator {
-            margin-bottom: 16px;
+        .ant-form-item-control-wrapper {
+          flex: 1 1;
         }
+      }
+    }
 
+    .ant-alert, .table-operator {
+      margin-bottom: 16px;
     }
+
+  }
 </style>

src/components/layout/PageHeader.vue

@@ -11,10 +11,6 @@
     </a-breadcrumb>
 
     <div class="detail">
-
-      <div v-if="avatar" class="avatar">
-        <a-avatar :src="avatar"/>
-      </div>
       <div class="main">
         <div class="row">
           <img v-if="logo" :src="logo" class="logo"/>
@@ -24,6 +20,9 @@
           </div>
         </div>
         <div class="row">
+          <div v-if="avatar" class="avatar">
+            <a-avatar :src="avatar"/>
+          </div>
           <div v-if="this.$slots.content" class="content">
             <slot name="content"></slot>
           </div>
@@ -105,11 +104,12 @@
 
     .detail {
       display: flex;
-      margin-bottom: 16px;
+      /*margin-bottom: 16px;*/
 
       .avatar {
         flex: 0 1 72px;
         margin: 0 24px 8px 0;
+
         & > span {
           border-radius: 72px;
           display: block;
@@ -125,6 +125,10 @@
         .row {
           display: flex;
           width: 100%;
+
+          .avatar {
+            margin-bottom: 16px;
+          }
         }
 
         .title {
@@ -146,7 +150,6 @@
           margin-right: 16px;
         }
         .content {
-          margin-bottom: 16px;
           flex: auto;
           color: rgba(0,0,0,.45);
           line-height: 22px;

src/components/layout/PageLayout.vue

@@ -41,6 +41,9 @@
       .link {
         margin-top: 16px;
 
+        &:not(:empty) {
+          margin-bottom: 16px;
+        }
         a {
           margin-right: 32px;
           height: 24px;

src/router/index.js

@@ -86,7 +86,7 @@ export const asyncRouterMap = [
       {
         path: '/form/step-form',
         name: 'StepForm',
-        component: () => import('../views/form/BasicForm'),
+        component: () => import('../views/form/stepForm/StepForm'),
         meta: { title: '分步表单' }
       },
       {

src/views/form/BasicForm.vue

@@ -1,12 +1,121 @@
 <template>
-    <div>
-        BaseForm
-    </div>
+  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+    <a-form @submit="handleSubmit" :autoFormCreate="(form)=>{this.form = form}">
+      <a-form-item
+        label="标题"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+        fieldDecoratorId="name"
+        :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入标题' }]}"
+      >
+        <a-input name="name" placeholder="给目标起个名字" />
+      </a-form-item>
+      <a-form-item
+        label="起止日期"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+        fieldDecoratorId="buildTime"
+        :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择起止日期' }]}"
+      >
+        <a-range-picker name="buildTime" style="width: 100%" />
+      </a-form-item>
+      <a-form-item
+        label="目标描述"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+        fieldDecoratorId="description"
+        :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入目标描述' }]}"
+      >
+        <a-textarea rows="4" placeholder="请输入你阶段性工作目标"/>
+      </a-form-item>
+      <a-form-item
+        label="衡量标准"
+        :labelCol="{span: 7}"
+        :wrapperCol="{span: 10}"
+        fieldDecoratorId="type"
+        :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入衡量标准' }]}"
+      >
+        <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 htmlType="submit" type="primary">提交</a-button>
+        <a-button style="margin-left: 8px">保存</a-button>
+      </a-form-item>
+    </a-form>
+  </a-card>
 </template>
 
 <script>
   export default {
-    name: "BaseForm"
+    name: "BaseForm",
+    data () {
+      return {
+        description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+        value: 1,
+
+        // form
+        form: null,
+
+      }
+    },
+    methods: {
+
+      // handler
+      handleSubmit (e) {
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            // eslint-disable-next-line no-console
+            console.log('Received values of form: ', values)
+          }
+        })
+      }
+    }
   }
 </script>
 

src/views/form/stepForm/Step1.vue

@@ -0,0 +1,60 @@
+<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>
+  export default {
+    name: "Step1",
+    methods: {
+      nextStep () {
+        this.$emit('nextStep')
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/form/stepForm/Step2.vue

@@ -0,0 +1,82 @@
+<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>
+  export default {
+    name: "Step2",
+    data () {
+      return {
+        loading: false
+      }
+    },
+    methods: {
+      nextStep () {
+        let that = this
+        that.loading = true
+        setTimeout(function () {
+          that.$emit('nextStep')
+        }, 1500)
+      },
+      prevStep () {
+        this.$emit('prevStep')
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .stepFormText {
+    margin-bottom: 24px;
+
+    .ant-form-item-label,
+    .ant-form-item-control {
+      line-height: 22px;
+    }
+  }
+
+</style>

src/views/form/stepForm/Step3.vue

@@ -0,0 +1,66 @@
+<template>
+  <div>
+    <a-form style="margin: 40px auto 0;">
+      <result title="操作成功" :is-success="true" description="预计两小时内到账">
+        <div class="information">
+          <a-row>
+            <a-col :sm="8" :xs="24">付款账户：</a-col>
+            <a-col :sm="16" :xs="24">ant-design@alipay.com</a-col>
+          </a-row>
+          <a-row>
+            <a-col :sm="8" :xs="24">收款账户：</a-col>
+            <a-col :sm="16" :xs="24">test@example.com</a-col>
+          </a-row>
+          <a-row>
+            <a-col :sm="8" :xs="24">收款人姓名：</a-col>
+            <a-col :sm="16" :xs="24">辉夜</a-col>
+          </a-row>
+          <a-row>
+            <a-col :sm="8" :xs="24">转账金额：</a-col>
+            <a-col :sm="16" :xs="24"><span class="money">500</span> 元</a-col>
+          </a-row>
+        </div>
+        <div slot="action">
+          <a-button type="primary" @click="finish">再转一笔</a-button>
+          <a-button style="margin-left: 8px">查看账单</a-button>
+        </div>
+      </result>
+    </a-form>
+  </div>
+</template>
+
+<script>
+  import Result from '../../result/Result'
+
+  export default {
+    name: "Step3",
+    components: {
+      Result
+    },
+    data () {
+      return {
+        loading: false
+      }
+    },
+    methods: {
+      finish () {
+        this.$emit('finish')
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .information {
+    line-height: 22px;
+
+    .ant-row:not(:last-child) {
+      margin-bottom: 24px;
+    }
+  }
+  .money {
+    font-family: "Helvetica Neue",sans-serif;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 14px;
+  }
+</style>

src/views/form/stepForm/StepForm.vue

@@ -0,0 +1,62 @@
+<template>
+  <a-card :bordered="false">
+    <a-steps class="steps" :current="currentTab">
+      <a-step title="填写转账信息" />
+      <a-step title="确认转账信息" />
+      <a-step title="完成" />
+    </a-steps>
+    <div class="content">
+      <step1 v-if="currentTab === 0" @nextStep="nextStep"></step1>
+      <step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"></step2>
+      <step3 v-if="currentTab === 2" @prevStep="prevStep" @finish="finish"></step3>
+    </div>
+  </a-card>
+</template>
+
+<script>
+  import Step1 from './Step1'
+  import Step2 from './Step2'
+  import Step3 from './Step3'
+
+  export default {
+    name: "StepForm",
+    components: {
+      Step1,
+      Step2,
+      Step3
+    },
+    data () {
+      return {
+        description: '将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。',
+        currentTab: 0,
+
+        // form
+        form: null,
+      }
+    },
+    methods: {
+
+      // handler
+      nextStep () {
+        if (this.currentTab < 2) {
+          this.currentTab += 1
+        }
+      },
+      prevStep () {
+        if (this.currentTab > 0) {
+          this.currentTab -= 1
+        }
+      },
+      finish () {
+        this.currentTab = 0
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .steps {
+    max-width: 750px;
+    margin: 16px auto;
+  }
+</style>

src/views/result/Result.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="result">
+    <div>
+      <a-icon :class="[isSuccess ? 'success' : 'error' ,'icon']" :type="isSuccess ? 'check-circle' : 'close-circle'"/>
+    </div>
+    <div class="title" v-if="title">{{ title }}</div>
+    <div class="description" v-if="description">{{ description }}</div>
+    <div class="content">
+      <slot></slot>
+    </div>
+    <div class="action">
+      <slot name="action"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "Result",
+    props: ['isSuccess', 'title', 'description']
+  }
+</script>
+
+<style lang="scss" scoped>
+  .result {
+    text-align: center;
+    width: 72%;
+    max-width: 560px;
+    margin: 0 auto;
+    padding: 24px 0 8px;
+
+    .icon {
+      font-size: 72px;
+      line-height: 72px;
+      margin-bottom: 24px;
+    }
+    .success {
+      color: #52c41a;
+    }
+    .error {
+      color: red;
+    }
+    .title {
+      font-size: 24px;
+      color: rgba(0, 0, 0, .85);
+      font-weight: 500;
+      line-height: 32px;
+      margin-bottom: 16px;
+    }
+    .description {
+      font-size: 14px;
+      line-height: 22px;
+      color: rgba(0, 0, 0, 0.45);
+      margin-bottom: 24px;
+    }
+    .content {
+      background: #fafafa;
+      padding: 24px 40px;
+      border-radius: 2px;
+      text-align: left;
+    }
+    .action {
+      margin-top: 32px;
+    }
+  }
+</style>

src/views/result/Success.vue

@@ -1,12 +1,81 @@
 <template>
-    <div>
-        Success
-    </div>
+  <a-card :bordered="false">
+    <result :is-success="true" :description="description" :title="title">
+      <template slot="action">
+        <a-button type="primary">返回列表</a-button>
+        <a-button style="margin-left: 8px">查看项目</a-button>
+        <a-button style="margin-left: 8px">打印</a-button>
+      </template>
+      <div>
+        <div style="font-size: 16px; color: rgba(0, 0, 0, 0.85); font-weight: 500; margin-bottom: 20px;">项目名称</div>
+        <a-row style="margin-bottom: 16px">
+          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+            <span style="color: rgba(0, 0, 0, 0.85)">项目 ID：</span>
+            20180724089
+          </a-col>
+          <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
+            <span style="color: rgba(0, 0, 0, 0.85)">负责人：</span>
+            曲丽丽是谁？
+          </a-col>
+          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
+            <span style="color: rgba(0, 0, 0, 0.85)">生效时间：</span>
+            2016-12-12 ~ 2017-12-12
+          </a-col>
+        </a-row>
+        <a-steps :current="1" progressDot>
+          <a-step >
+            <span style="font-size: 14px" slot="title">创建项目</span>
+            <template slot="description">
+              <div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;" slot="description" >
+                <div style="margin: 8px 0 4px">
+                  曲丽丽
+                  <a-icon style="margin-left: 8px" type="dingding-o" />
+                </div>
+                <div>2016-12-12 12:32</div>
+              </div>
+            </template>
+          </a-step>
+          <a-step title="部门初审">
+            <span style="font-size: 14px" slot="title">部门初审</span>
+            <template slot="description">
+              <div style="fontSize: 12px; color: rgba(0, 0, 0, 0.45); position: relative; left: 42px;" slot="description" >
+                <div style="margin: 8px 0 4px">
+                  周毛毛
+                  <a-icon style="margin-left: 8px; color: #00A0E9" type="dingding-o" />
+                </div>
+                <div><a href="">催一下</a></div>
+              </div>
+            </template>
+          </a-step>
+          <a-step title="财务复核">
+            <span style="font-size: 14px" slot="title">财务复核</span>
+          </a-step>
+          <a-step title="完成" >
+            <span style="font-size: 14px" slot="title">完成</span>
+          </a-step>
+        </a-steps>
+      </div>
+    </result>
+  </a-card>
 </template>
 
 <script>
+  import Result from './Result'
+
   export default {
-    name: "Success"
+    name: "Success",
+    components: {
+      Result
+    },
+    data () {
+      return {
+        title: '提交成功',
+        description: '提交结果页用于反馈一系列操作任务的处理结果，\n' +
+          ' 如果仅是简单操作，使用 Message 全局提示反馈即可。\n' +
+          ' 本文字区域可以展示简单的补充说明，如果有类似展示\n' +
+          ' “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。'
+      }
+    }
   }
 </script>