web/src/views/educational/division/index.vue

<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <div class="page-dsion">
      <div class="page-dsion-header">
        <Steps :percent="60" :current="state.stepIndex" :items="state.stepItems" type="navigation">
          <Steps.Step v-for="(item, index) in state.stepItems" :key="index">
            <template #title>{{ item.title }}</template>
          </Steps.Step>
        </Steps>
      </div>
      <div class="page-dsion-body">
        <DsionStep1 ref="dsionStep1Ref" :taskId="taskId" v-show="state.stepIndex === 0" />
        <DsionStep6 ref="dsionStep6Ref" :taskId="taskId" v-show="state.stepIndex === 1" />
        <DsionStep2 ref="dsionStep2Ref" :taskId="taskId" v-show="state.stepIndex === 2" />
        <DsionStep3 ref="dsionStep3Ref" :taskId="taskId" v-show="state.stepIndex === 3" />
        <DsionStep4 ref="dsionStep4Ref" :taskId="taskId" v-show="state.stepIndex === 4" />
        <DsionStep5 v-show="state.stepIndex === 5" />
      </div>
      <div class="page-dsion-floor">
        <a-button v-show="state.stepIndex !== 0" @click="handleStep(0)" class="ml-[24px]">
          上一步
        </a-button>
        <a-button
          v-show="state.stepIndex !== 5"
          type="primary"
          @click="handleStep(1)"
          class="ml-[24px]"
        >
          下一步
        </a-button>
        <a-button
          v-show="state.stepIndex === 5"
          type="primary"
          class="ml-[24px]"
          @click="handleSubmit"
        >
          提交
        </a-button>
      </div>
    </div>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { PageWrapper } from '/@/components/Page';
  import { Steps } from 'ant-design-vue';
  import { reactive, onMounted, ref } from 'vue';
  import DsionStep1 from './components/DsionStep1.vue';
  import DsionStep2 from './components/DsionStep2.vue';
  import DsionStep3 from './components/DsionStep3.vue';
  import DsionStep4 from './components/DsionStep4.vue';
  import DsionStep5 from './components/DsionStep5.vue';
  import DsionStep6 from './components/DsionStep6.vue';

  defineProps({
    taskId: { type: String, default: '' },
  });

  const dsionStep1Ref = ref<ElRef>(null);
  const dsionStep2Ref = ref<ElRef>(null);
  const dsionStep3Ref = ref<ElRef>(null);
  const dsionStep4Ref = ref<ElRef>(null);
  const dsionStep6Ref = ref<ElRef>(null);

  const state = reactive({
    stepIndex: 0,
    stepItems: [
      { title: '分班规则' },
      { title: '专业条件' },
      { title: '班级配置' },
      { title: '自动分班' },
      { title: '班级调整' },
      { title: '分班确认' },
    ],
  });

  const handleSubmit = () => {};

  const handleStep = async (type) => {
    if (type == 1) {
      const isOk = await stepValidate[state.stepIndex]();
      if (!isOk) {
        return;
      }
      state.stepIndex += 1;
      await stepReload[state.stepIndex]();
    } else {
      state.stepIndex -= 1;
    }
  };

  const stepValidate = {
    0: () => dsionStep1Ref.value.validateStep(),
    1: () => dsionStep6Ref.value.validateStep(),
    2: () => dsionStep2Ref.value.validateStep(),
    3: () => dsionStep3Ref.value.validateStep(),
    4: () => dsionStep4Ref.value.validateStep(),
  };

  const stepReload = {
    0: () => dsionStep1Ref.value.reloadStep(),
    1: () => dsionStep6Ref.value.reloadStep(),
    2: () => dsionStep2Ref.value.reloadStep(),
    3: () => dsionStep3Ref.value.reloadStep(),
    4: () => dsionStep4Ref.value.reloadStep(),
  };

  onMounted(async () => {});
</script>

<style lang="less" scoped>
  .page-dsion {
    width: 100%;
    height: 100%;

    &-header {
      margin: 0 auto;
      background-color: @component-background;
      padding: 8px 16px;
      border-radius: 16px;
    }

    &-body {
      height: calc(100% - 80px - 60px);
      display: flex;
    }

    &-floor {
      height: 60px;
      background-color: @component-background;
      align-items: center;
      display: flex;
      justify-content: end;
      padding-right: 16px;
    }
  }
</style>