alert-front/src/views/model/list/CreateModel.vue

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from 'vue'
import { Steps } from 'ant-design-vue'
import Step1 from './step/Step1.vue'
import Step2 from './step/Step2.vue'
import Step3 from './step/Step3.vue'
import Step4 from './step/Step4.vue'
import { PageWrapper } from '@/components/Page'
import { BasicDrawer } from '@/components/Drawer'

export default defineComponent({
  components: {
    Step1,
    Step2,
    Step3,
    Step4,
    BasicDrawer,
    PageWrapper,
    [Steps.name]: Steps,
    [Steps.Step.name]: Steps.Step,
  },
  props: {
    systemId: {
      type: Number,
    },
    unitId: {
      type: Number,
    },
  },
  setup(props) {
    const current = ref(0)
    const step1Data = ref(null)
    const step2Data = ref(null)
    const step3Data = ref(null)
    const step4Data = ref(null)

    const state = reactive({
      initStep2: false,
      initStep3: false,
      initStep4: false,
      initStep5: false,
    })
    function handleStep1Next(step1Values: any) {
      current.value++
      console.log(step1Values)
      step1Data.value = step1Values
      state.initStep2 = true
    }
    function handleStepPrev() {
      current.value--
    }
    function handleStep2Next(step2Values: any) {
      current.value++
      step2Data.value = step2Values
      step2Values.systemId = props.systemId
      step2Values.unitId = props.unitId
      console.log(step2Values)
      state.initStep3 = true
    }
    function handleStep3Next(step3Values: any) {
      current.value++
      step3Data.value = step3Values
      console.log(step3Values)
      state.initStep4 = true
    }
    function handleStep4Next(step4Values: any) {
      current.value++
      step4Data.value = step4Values
      console.log(step4Values)
      state.initStep5 = true
    }

    function handleRedo() {
      current.value = 0
      state.initStep2 = false
      state.initStep3 = false
      state.initStep4 = false
      state.initStep5 = false
    }
    return {
      step1Data,
      step2Data,
      step3Data,
      step4Data,
      current,
      handleRedo,
      handleStepPrev,
      handleStep1Next,
      handleStep2Next,
      handleStep3Next,
      handleStep4Next,
      ...toRefs(state),
    }
  },
})
</script>

<template>
  <BasicDrawer :is-detail="true" title="新建模型">
    <PageWrapper title="新建模型" content-background content-class="p-4">
      <div class="step-form-form">
        <a-steps :current="current">
          <a-step title="填写基本信息" />
          <a-step title="算法参数配置" />
          <a-step title="数据源选取" />
          <a-step title="完成" />
        </a-steps>
      </div>
      <div class="mt-5">
        <Step1 v-show="current === 0" @next="handleStep1Next" />
        <Step2
          v-show="current === 1"
          v-if="initStep2"
          :before-data="step1Data"
          @prev="handleStepPrev"
          @next="handleStep2Next"
        />
        <Step3
          v-show="current === 2"
          v-if="initStep3"
          :before-data="step2Data"
          :system-id="systemId"
          :unit-id="unitId"
          @prev="handleStepPrev"
          @next="handleStep3Next"
        />
        <Step4 v-show="current === 3" v-if="initStep4" :model-id="step3Data" @redo="handleRedo" />
      </div>
    </PageWrapper>
  </BasicDrawer>
</template>

<style lang="less" scoped>
  .step-form-content {
    padding: 24px;
    background-color: @component-background;
  }

  .step-form-form {
    width: 750px;
    margin: 0 auto;
  }
</style>