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

<template>
  <div class="app-container" v-loading="loading">
    <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="activeModel ? activeModel.models : []"></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 v-if="activeModel&&activeModel.models" :generation="generation"
                    :optional-majors="optionalMajors"></report-table>
      <evaluation-empty v-else :shadow="false" :title="emptyTitle"></evaluation-empty>
    </el-card>
    <el-card shadow="hover" class="mt20">
      <template #header>选科报告</template>
      <el-button v-if="false" @click="goReportDemo">选科报告1</el-button>
      <el-button @click="goReportDemoOnline">选科报告</el-button>
      <el-button @click="goStudyReportDemoOnline">学情报告</el-button>
    </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/elective/select/components/elective-table'
import ElectiveGenerationSteps from '@/views/elective/generation/components/elective-generation-steps'
import TransferMixin from '@/components/mx-transfer-mixin'
import ElectiveToolsMixin from '../../../elective/select/components/elective-tools-mixins'
import config from '@/common/mx-config'
import {
  getStudentElectiveModels,
  getOptionalMajors,
  getStudentSelected,
  getRecommendMajor
} from '@/api/webApi/elective/selected-subject'

export default {
  mixins: [TransferMixin, ElectiveToolsMixin],
  provide() {
    return {
      optionalMajors: this.getOptionalMajors,
      refreshData: this.refreshData
    }
  },
  components: { SelectSubject, TestResult, TestEntry, ReportTable, ElectiveGenerationSteps },
  name: 'round-select',
  data() {
    return {
      helpVideo: {
        visible: false,
        src: '9fca0b997b8346ce8c3ce69feaf89294',
        aliIdType: 2
      },
      loading: false,
      //
      optionalMajors: [],
      evaluationMajors: [],
      //
      selectObj: null,
      allowSelect: false,
      stepOptions: config.electiveGenerationOptions,
      activeStep: '',
      generationModels: []
    }
  },
  computed: {
    emptyTitle() {
      if (!this.activeOpt) return
      if (this.activeModel && !this.activeModel.models && this.activeOpt.decisionMaking) {
        return this.activeOpt.title + '正在进行...'
      }
      return this.activeOpt.title + '还未开启'
    },
    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)
    },
    activeModel() {
      if (!this.activeStep || !this.selectObj) return null
      return this.generationModels.find(gm => gm.generation == this.activeOpt.value)
    },
    roundGroups() {
      if (!this.selectObj?.groupIds) return []
      if (!this.generationModels.length) return []
      return this.selectObj['groupList']?.map(g => {
        return ({
          ...g,
          groupName: g.name
        })
      }) || []
    },
    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, // 全量generation model集合
        activeModels: this.activeModels, // 从开始到active代的generation model集合
        activeModel: this.activeModel // active代的generation model
      }
    }
  },
  mounted() {
    try {
      this.loading = true
      this.loadStudentSelected()
      this.getStudentElectiveModels()
      this.getOptionalMajors()
      this.getRecommendMajor()
    } finally {
      this.loading = false
    }
  },
  methods: {
    refreshData() {
      try {
        this.loading = true
        this.loadStudentSelected()
        this.getStudentElectiveModels()
      } finally {
        this.loading = false
      }
    },
    getStudentElectiveModels() {
      getStudentElectiveModels().then(res => {
        // NOTE: create local selected list !!important
        res.data.forEach(gen => {
          const localSelected = gen.models?.filter(this.isGroupSelected)
          localSelected?.sort((l, r) => l.selectedRank - r.selectedRank)
          gen.selectedList = localSelected || []
          gen.selectedListSnapshot = this.deepClone(gen.selectedList) // 快照，用于对比变更
          gen.option = Object.values(this.stepOptions).find(opt => opt.value == gen.generation)
          gen.prevModel = res.data.find(m => m.generation == gen.generation - 1)
          gen.nextModel = res.data.find(m => m.generation == gen.generation + 1)
        })
        this.generationModels = res.data
      })
    },
    getRecommendMajor() {
      getRecommendMajor().then(res => {
        this.evaluationMajors = res.data
      })
    },
    getOptionalMajors() {
      getOptionalMajors().then(res => {
        this.optionalMajors = res.data
      })
    },
    loadStudentSelected() {
      getStudentSelected().then(res => {
        console.log('getStudentSelected', res)
        const status = res.data['selectResult']
        status.currentGeneration = res.data.currentGeneration || 9
        status.preferenceCount = res.data.preferenceCount || 3
        this.selectObj = res.data['selectResult']
        this.allowSelect = res.data.allowSelect
      })
    },
    goReportDemo() {
      const path = '/elective/report/index'
      this.transferTo(path)
    },
    goReportDemoOnline() {
      const path = 'https://online.fliphtml5.com/jkrou/ybov/'
      window.open(path)
    },
    goStudyReportDemoOnline() {
      const path = 'https://online.fliphtml5.com/jkrou/hjig/'
      window.open(path)
    }
  }
}
</script>

<style scoped>

</style>