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" :model="form" :rules="rule" 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-item label="选科状态" class="form-item-readonly">
              未选择/已选择<span class="f-red">缺字段</span>
            </el-form-item>
            <el-form-item label="AI选科" class="form-item-readonly">
              进入/查看<span class="f-red">缺字段</span>
            </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="reportInfo.models"></select-subject>
    <!--  选科报名表  -->
    <el-card class="box-card mt20" >
      <template #header>
        <elective-generation-steps v-if="allowSelect" v-model="activeStep" :generation="generations"></elective-generation-steps>
      </template>
      <report-table   ref="reportRef" ></report-table>
    </el-card>

    <el-card shadow="hover" class="mt20">
      <template #header>意向选科</template>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>
              <div class="fx-row fx-bet-cen">
                <div>专业选科</div>
                <div>
                  <el-button type="primary" plain size="small" round>点击进入</el-button>
                </div>
              </div>
            </template>
            <div>介绍文案、测评结果</div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="hover">
            <template #header>
              <div class="fx-row fx-bet-cen">
                <div>组合选科</div>
                <div>
                  <el-button type="primary" plain size="small" round>点击进入</el-button>
                </div>
              </div>
            </template>
            <div>介绍文案、测评结果</div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="hover" class="mt20">
      <template #header>选科报名</template>
      <div class="fx-column">
        <div v-if="!allowSelect" class="mb30">
          <span class="f-red">*</span>
          当前时段未开启选科
        </div>
        <el-form ref="form" v-if="selectObj" :model="form" :rules="rule" 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-item prop="groupId" label="选科组合">
            <el-radio-group v-model="form.groupId" :disabled="!allowSelect">
              <el-radio v-for="(opt,idx) in selectGroupOptions" :key="idx" :label="opt.value">{{ opt.text }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="fx-row fx-cen-cen mt20" v-if="allowSelect">
            <el-button v-loading="submitting" type="primary" @click="handleSubmit" style="width: 150px" round>保存
            </el-button>
          </div>
        </el-form>
      </div>
    </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 { getStudentSelected, 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 {
  getOptionalMajors,
  getRecommendMajor,
  getPrimaryElectivesModels
} 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
      },
      reportInfo: [],
      optionalMajors: [],
      evaluationMajors: [],
      form: {
        groupId: ''
      },
      rule: {
        groupId: [{
          required: true,
          message: '选科组合必填'
        }]
      },
      //
      selectObj: null,
      allowSelect: false,
      submitting: false,
      propData: {},
      stepOptions: config.electiveGenerationOptions,
      activeStep: ''
    }
  },
  computed: {
    currentOpt() {
      /// 当前进程代对应的配置项，可能没有值
      return Object.values(this.stepOptions).find(opt => opt.value == this.selectObj.currentGeneration)
    },
    activeOpt() {
      /// 当前选中的进程代，可能没有值
      console.log('round select active step changed', this.activeStep)
      return this.stepOptions[this.activeStep]
    },
    // stepOptions() {
    //   const steps = {}
    //   const stepOptions = config.electiveGenerationOptions
    //   for (let key in stepOptions) {
    //     if(stepOptions[key].value <= this.selectObj.currentGeneration){
    //       steps['a'+ key] = stepOptions[key]
    //     }
    //   }
    //   return steps
    // },
    generations() {
      if(!this.selectObj) return {}
      return {
        // generation key value
        hiddenGenerations: [],
        options: this.stepOptions,
        current: this.selectObj.currentGeneration,
        currentOpt: this.currentOpt,
        active: this.active,
        activeOpt: this.activeOpt,
        status: {
          roundName: this.selectObj.name || '',
          year: this.selectObj.year || '',
        },
      }
    },
    stepChange(key) {
      console.log(key)
    },
    selectGroupOptions() {
      return this.selectObj.groupList?.map(g => ({
        text: g.name,
        value: g.groupId
      })) || []
    }
  },
  mounted() {
    this.loadStudentSelected()

    this.getOptionalMajors()
    this.getReportList()
    this.getRecommendMajor()
  },
  methods: {
    getRecommendMajor() {
      getRecommendMajor().then(res => {
        this.evaluationMajors= res.data
      })
    },
    getReportList() {
      getPrimaryElectivesModels().then(res => {
        this.reportInfo= res.data
        this.$refs.reportRef.init(this.reportInfo)
      })

    },
    getOptionalMajors() {
      getOptionalMajors().then(res => {
        console.log(res)
        this.optionalMajors= res.data.reverse().splice(0,6)
        this.$refs.reportRef.initOption(this.optionalMajors)
      })
    },
    loadStudentSelected() {
      getStudentSelected().then(res => {
        console.log('getStudentSelected', res)
        const selectStatus = res.data.selectResult
        selectStatus.currentGeneration = 6 // 当前所处的状态
        selectStatus.preferenceCount = 1 // 志愿数
        this.selectObj = selectStatus
        this.allowSelect = res.data.allowSelect
        this.form.groupId = this.selectObj?.groupId
      })
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (!valid) return
        this.submitting = true
        saveStudentSelected({
          groupId: this.form.groupId
        }).then(res => {
          this.msgSuccess('保存成功')
          this.loadStudentSelected()
        }).finally(() => this.submitting = false)
      })
    }
  }
}
</script>

<style scoped>

</style>