新增页面

src/config/router.config.js

@@ -91,10 +91,10 @@ export const asyncRouterMap = [
             meta: { title: '新增项目', keepAlive: true, permission: ['form'], show: false }
           },
           {
-            path: '/project/addClass',
-            name: 'addClass',
-            component: () => import('@/views/project/AddClass'),
-            meta: { title: '新增种类', keepAlive: true, permission: ['form'] }
+            path: '/project/projectStepForm',
+            name: 'projectStepForm',
+            component: () => import('@/views/project/ProjectStepForm'),
+            meta: { title: '新增项目-分布', keepAlive: true, permission: ['form'] }
           },
           {
             path: '/project/unitSelect',

src/views/project/ProjectForm.vue

@@ -1,13 +1,16 @@
 <template>
-  <page-header-wrapper :title="新增项目">
+  <!-- <page-header-wrapper :title="新增项目"> -->
     <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :layout="vertical">
       <a-form-model-item label="项目名称">
-        <a-input v-model="form.projectName" v-decorator="[
+        <a-input
+          v-model="form.projectName"
+          v-decorator="[
             'projectName',
             {
               rules: [{ required: true, message: '项目名称为必填' }],
             },
-          ]"/>
+          ]"
+        />
       </a-form-model-item>
       <a-form-model-item label="培训种类">
         <a-select v-model="form.trainClass" placeholder="--请选择--">
@@ -93,10 +96,10 @@
         <a-button style="margin-left: 10px"> 取消 </a-button>
       </a-form-model-item>
     </a-form-model>
-  </page-header-wrapper>
+  <!-- </page-header-wrapper> -->
 </template>
 <script>
-import {getPersonType} from '@/api/project/project'
+import { dictGet } from '@/api/project/project'
 
 export default {
   data() {
@@ -109,15 +112,13 @@ export default {
     }
   },
   components: {
-      getPersonType,
-  },
-  created: {
-    
+    dictGet,
   },
+  created: {},
   methods: {
     //获取字典值
     getPersonType() {
-      return getPersonType(Object.assign(parameter)).then((res) => {
+      return dictGet(Object.assign(parameter)).then((res) => {
         return res
       })
     },

src/views/project/ProjectStepForm.vue

@@ -0,0 +1,66 @@
+<template>
+  <page-header-wrapper>
+    <!-- PageHeader 第二种使用方式 (v-slot) -->
+    <template v-slot:content>
+      将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
+    </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>
+  </page-header-wrapper>
+</template>
+
+<script>
+import Step1 from './ProjectForm'
+import Step2 from './ProjectUnitSelect.vue'
+import Step3 from '../form/stepForm/Step3'
+
+export default {
+  name: 'StepForm',
+  components: {
+    Step1,
+    Step2,
+    Step3
+  },
+  data () {
+    return {
+      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="less" scoped>
+  .steps {
+    max-width: 750px;
+    margin: 16px auto;
+  }
+</style>