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="generation"
        ></elective-generation-steps>
      </template>
      <report-table ref="reportRef" :generation="generation"></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 {
  getModels,
  getOptionalMajors,
  getPrimaryElectivesModels,
  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
      },
      reportInfo: [],
      optionalMajors: [],
      evaluationMajors: [],
      form: {
        groupId: ''
      },
      rule: {
        groupId: [{
          required: true,
          message: '选科组合必填'
        }]
      },
      //
      selectObj: null,
      allowSelect: false,
      submitting: false,
      propData: {},
      stepOptions: config.electiveGenerationOptions,
      activeStep: '',
      generationModels: [
        {
          models: [
            {
              scoreSumGroup: 514,
              groupIndicator: 30,
              bestInIndicator: 20,
              rankInBest: 16,
              rankInIndicator: 10,
              rankInDisenroll: 14,
              isRecommend: true,

              groupId: 1,
              groupName: '物化生',
              classCount: 6,
              personCount: 300,
              rankInGroup: 290,
              rankInGrade: 357,
              allowSelect: true,
              disabledReason: '0',
              selected: false,
              selectedRank: 1,
              actualCount: 320,
              approved: false,
              forceAdjusted: false,
              groupApprovedCount: 0,
              groupForceAdjustedCount: 0
            }
          ],
          generation: 1,
          studentId: 1001
        },
        {
          models: [
            {
              scoreSumGroup: 514,
              groupIndicator: 30,
              bestInIndicator: 20,
              rankInBest: 16,
              rankInIndicator: 10,
              rankInDisenroll: 10,
              isRecommend: true,

              groupId: 1,
              groupName: '物化生',
              classCount: 6,
              personCount: 300,
              rankInGroup: 290,
              rankInGrade: 357,
              allowSelect: true,
              disabledReason: '',
              selected: false,
              selectedRank: 1,
              actualCount: 320,
              approved: false,
              forceAdjusted: false,
              groupApprovedCount: 300,
              groupForceAdjustedCount: 0
            }
          ],
          generation: 2,
          studentId: 1001
        },
        {
          models: [
            {
              scoreSumGroup: 514,
              groupIndicator: 30,
              bestInIndicator: 20,
              rankInBest: 16,
              rankInIndicator: 30,
              rankInDisenroll: 14,
              isRecommend: true,

              groupId: 1,
              groupName: '物化生',
              classCount: 6,
              personCount: 300,
              rankInGroup: 10,
              rankInGrade: 357,
              allowSelect: true,
              disabledReason: '',
              selected: false,
              selectedRank: 1,
              actualCount: 320,
              approved: false,
              forceAdjusted: false,
              groupApprovedCount: 300,
              groupForceAdjustedCount: 0
            }
          ],
          generation: 3,
          studentId: 1001
        },
        {
          models: [
            {
              scoreSumGroup: 514,
              groupIndicator: 30,
              bestInIndicator: 20,
              rankInBest: 16,
              rankInIndicator: '',
              rankInDisenroll: 14,
              isRecommend: true,

              scoreSumAll: 0,
              groupId: 1,
              groupName: '物化生',
              classCount: 6,
              personCount: 300,
              rankInGroup: 10,
              rankInGrade: 357,
              allowSelect: true,
              disabledReason: '',
              selected: false,
              selectedRank: 1,
              actualCount: 302,
              approved: false,
              forceAdjusted: false,
              groupApprovedCount: 300,
              groupForceAdjustedCount: 0
            }
          ],
          generation: 4,
          studentId: 1001
        },
        {
          models: [
            {
              scoreSumGroup: 514,
              groupIndicator: 30,
              bestInIndicator: 20,
              rankInBest: 16,
              rankInIndicator: '',
              rankInDisenroll: 14,
              isRecommend: true,

              groupId: 1,
              groupName: '物化生',
              classCount: 6,
              personCount: 300,
              rankInGroup: 10,
              rankInGrade: 357,
              allowSelect: true,
              disabledReason: '',
              selected: false,
              selectedRank: 1,
              actualCount: 302,
              approved: false,
              forceAdjusted: false,
              groupApprovedCount: 300,
              groupForceAdjustedCount: 0
            }
          ],
          generation: 5,
          studentId: 1001
        },
        {
          models: [
            {
              scoreSumGroup: 514,
              groupIndicator: 30,
              bestInIndicator: 20,
              rankInBest: 16,
              rankInIndicator: '',
              rankInDisenroll: 14,
              isRecommend: true,

              groupId: 1,
              groupName: '物化生',
              classCount: 6,
              personCount: 300,
              rankInGroup: 10,
              rankInGrade: 357,
              allowSelect: true,
              disabledReason: '',
              selected: false,
              selectedRank: 1,
              actualCount: 300,
              approved: false,
              forceAdjusted: false,
              groupApprovedCount: 300,
              groupForceAdjustedCount: 0
            }
          ],
          generation: 6,
          studentId: 1001
        },
        {
          models: [
            {
              scoreSumGroup: 514,
              groupIndicator: 30,
              bestInIndicator: 20,
              rankInBest: 16,
              rankInIndicator: '',
              rankInDisenroll: 14,
              isRecommend: true,

              groupId: 1,
              groupName: '物化生',
              classCount: 6,
              personCount: 300,
              rankInGroup: 10,
              rankInGrade: 357,
              allowSelect: true,
              disabledReason: '',
              selected: false,
              selectedRank: 1,
              actualCount: 300,
              approved: false,
              forceAdjusted: false,
              groupApprovedCount: 300,
              groupForceAdjustedCount: 0
            }
          ],
          generation: 7,
          studentId: 1001
        }
      ]
    }
  },
  created() {
    // this.getData()
  },
  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)
    },
    // 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
    // },
    generation() {
      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: {
          ...this.selectObj,
          roundName: this.selectObj.name || ''
        },
        models: this.generationModels,
        activeModels: this.activeModels
      }
    },
    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: {
    getData() {
      getModels().then(res => {
        console.log(res)
      })
    },
    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 = 7 // 当前所处的状态
        selectStatus.preferenceCount = 3 // 志愿数
        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>