front/src/views/system/user/profile/round-select.vue

<template>
  <div class="app-container">
    <el-card shadow="hover">
      <template #header>选科信息</template>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form ref="form" v-if="selectObj" label-position="right" label-width="80px">
            <el-form-item label="选科轮次" class="form-item-readonly">{{ selectObj.year }}{{ selectObj.name }}
            </el-form-item>
            <el-form-item label="选科时间" class="form-item-readonly">{{ selectObj.beginTime }} 至 {{ selectObj.endTime }}
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12" style="vertical-align: center">
          为了让同学们更好地选科，请完成左侧几项功能，如有疑问，请观看此
          <el-link type="primary" icon="el-icon-video-play" underline @click="helpVideo.visible=true">介绍视频</el-link>
          、咨询客服或拨打电话4001797985
        </el-col>
      </el-row>
    </el-card>
    <!--  自选专业 推荐专业  -->
    <select-subject class="mt20" :evaluationMajors="evaluationMajors" :optionalMajors="optionalMajors"
                    :list="roundGroups"></select-subject>
    <!--  选科报名表  -->
    <el-card class="box-card mt20">
      <template #header>
        <elective-generation-steps v-if="selectObj" v-model="activeStep" :generation="generation"
                                   disable-hidden-feature></elective-generation-steps>
      </template>
      <report-table :generation="generation" :optional-majors="optionalMajors"></report-table>
    </el-card>
    <el-card shadow="hover" class="mt20">
      <template #header>选科通知</template>
    </el-card>

    <el-dialog :visible.sync="helpVideo.visible">
      <mx-video v-if="helpVideo.visible" :src="helpVideo.src" :ali-id-type="helpVideo.aliIdType"
                class="mt15"
      ></mx-video>
    </el-dialog>
  </div>
</template>

<script>
import { saveStudentSelected } from '@/api/webApi/selection'
import TestEntry from '@/views/elective/test/components/test-entry'
import TestResult from '@/views/elective/test/components/test-result'
import SelectSubject from '@/views/system/user/profile/components/select-subject'
import ReportTable from '@/views/system/user/profile/components/report-table'
import ElectiveGenerationSteps from '@/views/elective/generation/components/elective-generation-steps'
import config from '@/common/mx-config'
import {
  getStudentElectiveModels,
  getOptionalMajors,
  getStudentSelected,
  getRecommendMajor
} from '@/api/webApi/elective/selected-subject'

export default {
  provide() {
    return {
      optionalMajors: this.getOptionalMajors
    }
  },
  components: { SelectSubject, TestResult, TestEntry, ReportTable, ElectiveGenerationSteps },
  name: 'round-select',
  data() {
    return {
      helpVideo: {
        visible: false,
        src: '9fca0b997b8346ce8c3ce69feaf89294',
        aliIdType: 2
      },
      //
      optionalMajors: [],
      evaluationMajors: [],
      //
      selectObj: null,
      allowSelect: false,
      stepOptions: config.electiveGenerationOptions,
      activeStep: '',
      generationModels: []
    }
  },
  computed: {
    currentOpt() {
      /// 当前进程代对应的配置项，可能没有值
      return Object.values(this.stepOptions).find(opt => opt.value == this.selectObj.currentGeneration)
    },
    activeOpt() {
      return Object.values(this.stepOptions).find(opt => opt.key == this.activeStep)
    },
    activeModels() {
      if (!this.activeStep || !this.selectObj) return []
      if (this.activeOpt.value > this.selectObj.currentGeneration) return []
      /// 当前选中的进程代，可能没有值
      return this.generationModels.filter(gm => gm.generation <= this.activeOpt.value)
    },
    roundGroups() {
      if (!this.selectObj?.groupIds) return []
      if (!this.generationModels.length) return []
      const currentModels = this.generationModels.last().models
      return this.selectObj.groupIds?.split(',').map(groupId => {
        const matched = currentModels.find(m => m.groupId == groupId) || {}
        return ({
          ...matched,
          groupId: groupId
        })
      }) || []
    },
    generation() {
      if (!this.selectObj) return {}
      return {
        // generation key value
        hiddenGenerations: [],
        options: this.stepOptions,
        current: this.selectObj.currentGeneration,
        currentOpt: this.currentOpt,
        active: this.activeOpt?.value,
        activeOpt: this.activeOpt,
        roundGroups: this.roundGroups,
        status: {
          ...this.selectObj,
          roundName: this.selectObj.name || ''
        },
        models: this.generationModels,
        activeModels: this.activeModels
      }
    }
  },
  mounted() {
    this.loadStudentSelected()
    this.getStudentElectiveModels()
    this.getOptionalMajors()
    this.getRecommendMajor()
  },
  methods: {
    getStudentElectiveModels() {
      getStudentElectiveModels().then(res => {
        this.generationModels = res.data
      })
    },
    getRecommendMajor() {
      getRecommendMajor().then(res => {
        this.evaluationMajors = res.data
      })
    },
    getOptionalMajors() {
      getOptionalMajors().then(res => {
        this.optionalMajors = res.data.reverse().splice(0, 6)
      })
    },
    loadStudentSelected() {
      getStudentSelected().then(res => {
        console.log('getStudentSelected', res)
        const selectStatus = res.data.selectResult
        selectStatus.currentGeneration = 3 // 当前所处的状态
        selectStatus.preferenceCount = 3 // 志愿数
        // selectStatus.groupIds = selectStatus.groupIds || '1,2,3,4,5,6'
        selectStatus.groupIds = '1,2,3,4,5,6'
        this.selectObj = selectStatus
        this.allowSelect = res.data.allowSelect
      })
    }
  }
}
</script>

<style scoped>

</style>