front/src/views/career/bigdataSelectCourse/enrollReport.vue

<template>
  <div class="report f16">
    <p class="mb10">{{ nickName }}同学：</p>
    <p class="mb10">您好!</p>
    <div style="letterSpacing:1px" v-if="groupsDemo.length">
      <span>您所在的学校开设了</span>
      <span v-for="group in groupsDemo" :key="group.groupId">
        {{ `${group.groupName}(${group.classCount}个班级)(${group.actualCount})` }}，
      </span>
      <span>共计{{ groupsDemo.length }}个组合。</span>
    </div>
    <el-steps direction="vertical">
      <template v-for="step in dmSteps">
        <el-step status="process">
          <div slot="description" class="f16">
            <!-- 已录取 -->
            <div v-if="step.isEnroll">
              <div v-if="step.enrollByForce">
                <div>您被调剂至<span class="f-primary"> {{ step.enrollByForce.groupName }} </span>组合</div>
                <div v-if="step.forceAdjustReason" class="f-warning">原因：{{ step.forceAdjustReason }}</div>
              </div>
              <div v-else>
                <span>您在{{ step.prevName }}时选报了</span>
                <span class="f-primary"> {{ step.selectedList.map(item => item.groupName).join(',') }} </span>
                组合 您在{{ step.name }}阶段被
                <span class="f-primary"> {{ step.enrollByApprove.groupName }} </span>
                组合录取
              </div>
            </div>
            <!--    未录取   -->
            <div v-else>
              <div>
                您在{{ step.prevName }}时{{ applyType(step.selectedList) }}
                <span class="f-red">
                  {{ step.selectedList.map(item => item.groupName).join(',') }}
                </span>
                ， 由于条件不符未被录取
              </div>
              <div>
                您在{{ step.name }}阶段未被录取,
                <span v-if="step.noNextApply">
                  您将在调剂阶段调剂录取
                </span>
                <span v-else>
                  系统推荐您选报
                  <span class="f-primary">
                   {{ step.nextRecommend && step.nextRecommend.groupName }}
                  </span>
                  组合参与{{ step.nextName }}
                </span>
              </div>
            </div>
          </div>
        </el-step>
      </template>
      <template>
        <el-step status="process" v-if="dispatchInfo.className">
          <div slot="description" class="f16">
            选科完成后您将从原{{ dispatchInfo.originalClassName }}班，重新分班至{{ dispatchInfo.className }}班。
          </div>
        </el-step>
      </template>
    </el-steps>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import ElectiveTableMixin from '@/views/elective/select/components/elective-table-mixins'
import ElectiveEnrollInfo from '@/views/elective/select/components/elective-enroll-info'

export default {
  name: 'enroll-report',
  components: { ElectiveEnrollInfo },
  mixins: [ElectiveTableMixin],
  data() {
    return {}
  },
  props: {
    generation: Object,
    optionalMajors: { type: Array, default: () => [] },
    dispatchInfo: {
      type: Object, default: () => {
      }
    }
  },
  computed: {
    ...mapGetters(['nickName']),
    groupsDemo() {
      return this.generation.models?.first()?.models || []
    },
    dmSteps() {
      if (!this.generation.models?.length) return []
      const allOpts = Object.values(this.generation.options)
      const dmOpts = allOpts.filter(opt => opt.stepsVisible && opt.decisionMaking)
      const steps = dmOpts.map(opt => {
        const genModel = this.generation.models.find(gm => gm.option == opt)
        if (!genModel || !genModel.models?.length) return null
        const prevName = allOpts.find(item => item.value == opt.value - 1).title
        const nextName = allOpts.find(item => item.value == opt.value + 1).title
        const nextRecommend = genModel.models.find(item => item.nextRecommend)
        const noNextApply = opt == this.generation.options.finalAdjustDM
        const enrollByForce = genModel.models.find(this.isGroupForceAdjusted)
        return {
          selectedList: genModel.selectedList,
          isEnroll: genModel.models.some(this.isGroupEnrolled),
          enrollGroup: genModel.models.find(this.isGroupEnrolled),
          enrollByApprove: genModel.models.find(this.isGroupApproved),
          models: genModel.models,
          name: opt.title,
          forceAdjustReason: enrollByForce?.forceAdjustReason,
          enrollByForce,
          noNextApply,
          prevName,
          nextName,
          nextRecommend
        }
      }).filter(m => !!m) // filter null element.
      const enrollIndex = steps.findIndex(step => step?.isEnroll)
      return steps.slice(0, enrollIndex + 1)
    }
  },
  methods: {
    applyType(model) {
      if (!model.length) return '未填报'
      return model.find(group => this.isGroupRejected(group)) ? '拒绝填报' : '选报了'
    }
  }
}
</script>
<style lang="scss" scoped>
.report {
  color: #333;

  div {
    margin-bottom: 10px;
  }
}
</style>