JEECG-BOOT 2.0.2版本发布

ant-design-vue-jeecg/src/views/form/BasicForm.vue

@@ -0,0 +1,138 @@
+<template>
+  <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+    <a-form @submit="handleSubmit" :form="form">
+      <a-form-item
+        label="标题"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input
+          v-decorator="[
+            'name',
+            {rules: [{ required: true, message: '请输入标题' }]}
+          ]"
+          name="name"
+          placeholder="给目标起个名字" />
+      </a-form-item>
+      <a-form-item
+        label="起止日期"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-range-picker
+          name="buildTime"
+          style="width: 100%"
+          v-decorator="[
+            'buildTime',
+            {rules: [{ required: true, message: '请选择起止日期' }]}
+          ]" />
+      </a-form-item>
+      <a-form-item
+        label="目标描述"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-textarea
+          rows="4"
+          placeholder="请输入你阶段性工作目标"
+          v-decorator="[
+            'description',
+            {rules: [{ required: true, message: '请输入目标描述' }]}
+          ]" />
+      </a-form-item>
+      <a-form-item
+        label="衡量标准"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-textarea
+          rows="4"
+          placeholder="请输入衡量标准"
+          v-decorator="[
+            'type',
+            {rules: [{ required: true, message: '请输入衡量标准' }]}
+          ]" />
+      </a-form-item>
+      <a-form-item
+        label="客户"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+        <a-input 
+          placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
+          v-decorator="[
+            'customer',
+            {rules: [{ required: true, message: '请描述你服务的客户' }]}
+          ]" />
+      </a-form-item>
+      <a-form-item
+        label="邀评人"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+        :required="false"
+      >
+        <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
+      </a-form-item>
+      <a-form-item
+        label="权重"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+        :required="false"
+      >
+        <a-input-number :min="0" :max="100" />
+        <span> %</span>
+      </a-form-item>
+      <a-form-item
+        label="目标公开"
+        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+        :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: 24 }"
+        style="text-align: center"
+      >
+        <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',
+    data () {
+      return {
+        description: '表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。',
+        value: 1,
+
+        // form
+        form: this.$form.createForm(this),
+
+      }
+    },
+    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>

ant-design-vue-jeecg/src/views/form/advancedForm/AdvancedForm.vue

@@ -0,0 +1,206 @@
+<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>
+
+    <!-- table -->
+    <a-card>
+      <form :autoFormCreate="(form) => this.form = form">
+        <a-table
+          :columns="columns"
+          :dataSource="data"
+          :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="cancel(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="newMember">新增成员</a-button>
+      </form>
+    </a-card>
+
+    <!-- fixed footer toolbar -->
+    <footer-tool-bar>
+      <a-button type="primary" @click="validate" :loading="loading">提交</a-button>
+    </footer-tool-bar>
+  </div>
+</template>
+
+<script>
+  import RepositoryForm from './RepositoryForm'
+  import TaskForm from './TaskForm'
+  import FooterToolBar from '@/components/tools/FooterToolBar'
+
+  export default {
+    name: "AdvancedForm",
+    components: {
+      FooterToolBar,
+      RepositoryForm,
+      TaskForm
+    },
+    data () {
+      return {
+        description: '高级表单常见于一次性输入和提交大批量数据的场景。',
+        loading: false,
+
+        // table
+        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' }
+          }
+        ],
+        data: [
+          {
+            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: '财务部'
+          }
+        ]
+      }
+    },
+    methods: {
+      handleSubmit (e) {
+        e.preventDefault()
+      },
+      newMember () {
+        this.data.push({
+          key: '-1',
+          name: '',
+          workId: '',
+          department: '',
+          editable: true,
+          isNew: true
+        })
+      },
+      remove (key) {
+        const newData = this.data.filter(item => item.key !== key)
+        this.data = newData
+      },
+      saveRow (key) {
+        let target = this.data.filter(item => item.key === key)[0]
+        target.editable = false
+        target.isNew = false
+      },
+      toggle (key) {
+        let target = this.data.filter(item => item.key === key)[0]
+        target.editable = !target.editable
+      },
+      getRowByKey (key, newData) {
+        const data = this.data
+        return (newData || data).filter(item => item.key === key)[0]
+      },
+      cancel (key) {
+        let target = this.data.filter(item => item.key === key)[0]
+        target.editable = false
+      },
+      handleChange (value, key, column) {
+        const newData = [...this.data]
+        const target = newData.filter(item => key === item.key)[0]
+        if (target) {
+          target[column] = value
+          this.data = newData
+        }
+      },
+
+      // 最终全页面提交
+      validate () {
+        this.$refs.repository.form.validateFields((err, values) => {
+          if (!err) {
+            this.$notification['error']({
+              message: 'Received values of form:',
+              description: values
+            })
+          }
+        })
+        this.$refs.task.form.validateFields((err, values) => {
+          if (!err) {
+            this.$notification['error']({
+              message: 'Received values of form:',
+              description: values
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .card{
+    margin-bottom: 24px;
+  }
+</style>

ant-design-vue-jeecg/src/views/form/advancedForm/RepositoryForm.vue

@@ -0,0 +1,119 @@
+<template>
+  <a-form @submit="handleSubmit" :form="form" class="form">
+    <a-row class="form-row" :gutter="16">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item label="仓库名">
+          <a-input
+            placeholder="请输入仓库名称"
+            v-decorator="[
+              'repository.name',
+              {rules: [{ required: true, message: '请输入仓库名称', whitespace: true}]}
+            ]" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="仓库域名">
+          <a-input
+            addonBefore="http://"
+            addonAfter=".com"
+            placeholder="请输入"
+            v-decorator="[
+              'repository.domain',
+              {rules: [{ required: true, message: '请输入仓库域名', whitespace: true}, {validator: validate}]}
+            ]" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="仓库管理员">
+          <a-select placeholder="请选择管理员" v-decorator="[ 'repository.manager', {rules: [{ required: true, message: '请选择管理员'}]} ]">
+            <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" :gutter="16">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="审批人">
+          <a-select placeholder="请选择审批员" v-decorator="[ 'repository.auditor', {rules: [{ required: true, message: '请选择审批员'}]} ]">
+            <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: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="生效日期">
+          <a-range-picker
+            style="width: 100%"
+            v-decorator="[
+              'repository.effectiveDate',
+              {rules: [{ required: true, message: '请选择生效日期'}]}
+            ]" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="仓库类型">
+          <a-select
+            placeholder="请选择仓库类型"
+            v-decorator="[
+              'repository.type',
+              {rules: [{ required: true, message: '请选择仓库类型'}]}
+            ]" >
+            <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>
+  export default {
+    name: "RepositoryForm",
+    props: {
+      showSubmit: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        form: this.$form.createForm(this)
+      }
+    },
+    methods: {
+      handleSubmit (e) {
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            this.$notification['error']({
+              message: 'Received values of form:',
+              description: values
+            })
+          }
+        })
+      },
+      validate (rule, value, callback) {
+        const regex = /^user-(.*)$/
+        if (!regex.test(value)) {
+          callback('需要以 user- 开头')
+        }
+        callback()
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ant-design-vue-jeecg/src/views/form/advancedForm/TaskForm.vue

@@ -0,0 +1,107 @@
+<template>
+  <a-form @submit="handleSubmit" :form="form" class="form">
+    <a-row class="form-row" :gutter="16">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="任务名">
+          <a-input placeholder="请输入任务名称" v-decorator="[ 'task.name', {rules: [{ required: true, message: '请输入任务名称', whitespace: true}]} ]" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="任务描述">
+          <a-input placeholder="请输入任务描述" v-decorator="[ 'task.description', {rules: [{ required: true, message: '请输入任务描述', whitespace: true}]} ]" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="执行人">
+          <a-select
+            placeholder="请选择执行人"
+            v-decorator="[
+              'task.executor',
+              {rules: [{ required: true, message: '请选择执行人'}]}
+            ]" >
+            <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" :gutter="16">
+      <a-col :lg="6" :md="12" :sm="24">
+        <a-form-item
+          label="责任人">
+          <a-select
+            placeholder="请选择责任人"
+            v-decorator="[
+              'task.manager',
+              {rules: [{ required: true, message: '请选择责任人'}]}
+            ]" >
+            <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: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
+        <a-form-item
+          label="提醒时间">
+          <a-time-picker
+            style="width: 100%"
+            v-decorator="[
+              'task.time',
+              {rules: [{ required: true, message: '请选择提醒时间'}]}
+            ]" />
+        </a-form-item>
+      </a-col>
+      <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
+        <a-form-item
+          label="任务类型">
+          <a-select
+            placeholder="请选择任务类型"
+            v-decorator="[ 'task.type', {rules: [{ required: true, message: '请选择任务类型'}]} ]" >
+            <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>
+  export default {
+    name: "TaskForm",
+    props: {
+      showSubmit: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        form: this.$form.createForm(this)
+      }
+    },
+    methods: {
+      handleSubmit (e) {
+        e.preventDefault()
+        this.form.validateFields((err, values) => {
+          if (!err) {
+            this.$notification['error']({
+              message: 'Received values of form:',
+              description: values
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

ant-design-vue-jeecg/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>

ant-design-vue-jeecg/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>

ant-design-vue-jeecg/src/views/form/stepForm/Step3.vue

@@ -0,0 +1,69 @@
+<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" @click="toOrderList">查看账单</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')
+      },
+      toOrderList () {
+        this.$router.push('/list/query-list')
+      }
+    }
+  }
+</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>

ant-design-vue-jeecg/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"/>
+      <step2 v-if="currentTab === 1" @nextStep="nextStep" @prevStep="prevStep"/>
+      <step3 v-if="currentTab === 2" @prevStep="prevStep" @finish="finish"/>
+    </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>