welfare-admin/src/views/project/ProjectStepForm.vue

<template>
  <!-- PageHeader 第二种使用方式 (v-slot) -->
  <a-card :bordered="false" :title="title">
    <a-steps class="steps" :current="currentTab">
      <a-step title="基本信息" />
      <a-step title="选择单位" />
      <a-step v-if="['2', '3', '4'].includes(form.trainWay)" title="选择课程" />
      <a-step v-if="['2', '3', '4'].includes(form.trainWay)" title="选择人员" />
      <a-step v-if="['2', '3', '4'].includes(form.trainWay)" title="组卷策略" />
      <a-step :title="this.result ? '完成' : '失败'" />
    </a-steps>
    <div class="content">
      <!-- <keep-alive exclude="result"> -->
      <step1 v-if="currentTab === 0" :projectForm="form" @nextStep="nextStep" @close="close" @setFormType="setFormType"/>
      <step2 v-if="currentTab === 1" :projectForm="form" @nextStep="nextStep" @prevStep="prevStep" @executeSave="executeSave"/>
      <step3 v-if="currentTab === 2" :projectForm="form" :courseChange="courseChange" @nextStep="nextStep" @prevStep="prevStep" />
      <step4 v-if="currentTab === 3" :projectForm="form" @nextStep="nextStep" @prevStep="prevStep" />
      <step5
        v-if="currentTab === 4"
        :projectForm="form"
        @prevStep="prevStep"
        @executeSave="executeSave"
        @executeIssue="executeIssue"
      />
      <result
        v-if="currentTab === 5"
        :projectForm="form"
        @prevStep="prevStep"
        :projectSaveStatus="status"
        @close="close"
      />
      <!-- </keep-alive> -->
    </div>
  </a-card>
</template>

<script>
//页面
import Step1 from './form/ProjectForm'
import Step2 from './form/ProjectUnitSelect'
import Step3 from './form/ProjectCourseList'
import Step4 from './form/ProjectPersonForm'
import step5 from './form/ProjectTestPaperFormationStrategy'
import result from './form/Result'

//api
import { projectAdd, getProjectDetail } from '@/api/project/project'

export default {
  components: {
    Step1,
    Step2,
    Step3,
    Step4,
    step5,
    result
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log('分步表单创建完成', this.$route)
    if(this.$route.query.t === 'self') this.form.projectType = 1;
    if(this.$route.query.t === 'year') this.form.projectType = 2;
    if(this.$route.query.t === 'unit') this.form.projectType = 3;
  },
  destroyed() {
    console.log('分步表单销毁了。。。。。')
  }, //生命周期 - 销毁完成
  data() {
    return {
      title: '',
      currentTab: 0,
      sourcePath: '',
      t: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      modalTitle: '新增项目',
      visible: false,
      confirmLoading: false,
      type: '',
      form: {
        t: this.$route.query.t,
        projectType: 0,
        trainWay: '1',
        totalScore: 0
      },
      result: true,
      status: '',
      courseChange: false,
    }
  },
  methods: {
    //设置培训类型，不然显示错误
    setFormType(type){
      this.form.trainWay = type
    },
    //保存项目
    executeSave(childValue) {
      console.log('保存项目', childValue)
      this.form = childValue
      this.saveData()
    },

    //保存并发布项目
    executeIssue(childValue) {
      console.log('保存并发布项目', childValue)
      this.form = childValue
      this.saveData()
    },

    //发送请求保存数据
    saveData() {
      projectAdd(Object.assign({}, this.form)).then(res => {
        if (res.code == 200) {
          this.status = 'success'
          this.currentTab = 5
        } else {
          this.status = 'error'
          this.result = false
          this.currentTab = 5
        }
      })
    },

    //下一步
    nextStep(childValue,beChange) {
      console.log('进入下一步', childValue,beChange)
      if(beChange){
        this.courseChange = beChange
      }
      if (this.currentTab < 5) {
        if (childValue) {
          this.form = childValue
        }
        this.currentTab += 1
      }
      console.log('ProjectStepForm表单数据', this.form)
    },
    //上一步
    prevStep(childValue,beChange) {
      if(beChange){
        this.courseChange = beChange
      }
      console.log('返回上一步', childValue,beChange)
      if (this.currentTab > 0) {
        if (childValue) {
          this.form = childValue
        }
        this.currentTab -= 1
      }
      console.log('ProjectStepForm表单数据', this.form)
    },
    //关闭页面，跳转list页面
    close() {
      // console.log('close------', this.$route.query.t)
      this.$router.push({
        path: '/project/list/' + this.$route.query.t,
        query: {
          t: this.$route.query.t,
          queryParam: this.$route.query.projectQueryParam
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.steps {
  max-width: 750px;
  margin: 16px auto;
}

::v-deep .ant-btn + .ant-btn {
  margin-left: 0px;
}
</style>