front/src/views/elective/select/components/elective-table.vue

<template>
  <div>
    <div class="mb10 fx-row fx-bet-cen">
      <div class="fx-row fx-end-cen">
        <el-button circle icon="el-icon-refresh" @click="refreshData" class="mr30"></el-button>
        <elective-enroll-info v-if="enrollInfoVisible" :generation="generation"
                              :enroll-status="enrollStatus"></elective-enroll-info>
      </div>
      <el-button v-if="enableAIFeature" type="primary" @click="toAiAnalysis">AI分析</el-button>
    </div>

    <mx-table :propDefines="formatCols" :rows="formatRows">
      <template #underOver="{value}">
        <over-under-badge :value="value"></over-under-badge>
      </template>
      <template #group="{row}">
        <elective-table-group-tag :generation="generation" :group="row"></elective-table-group-tag>
      </template>
      <template #temp="{row}">
        <span class="btn-blue mr5" @click="toSelectSub(row)">选择</span>
        <span class="btn-green" @click="toReport">查看记录</span>
      </template>
      <template #signUp="{row}">
        <elective-preference-command :generation="generation" :group="row"></elective-preference-command>
      </template>
      <template #subjects="{row}">
        <elective-major-thumbnail :group="row"></elective-major-thumbnail>
      </template>
      <template #colleges="{row}">
        <elective-major-college :group="row"></elective-major-college>
      </template>
    </mx-table>
    <elective-preference-info :generation="generation"></elective-preference-info>
    <elective-preference-batch v-if="enableMultipleDrag" :generation="generation"
                               :disabled="!enableSelect"></elective-preference-batch>
    <elective-preference-reject v-if="enableReject" :generation="generation"></elective-preference-reject>
    <elective-esign-dialog ref="esignDialog"></elective-esign-dialog>
    <choose-subject-dialog ref="chooseDialog"></choose-subject-dialog>
    <select-subject-report-dialog ref="reportDialog"></select-subject-report-dialog>
    <elective-ai-analysis-dialog ref="aiDialog" :optionalMajors="optionalMajors"
                                 :generation="generation"></elective-ai-analysis-dialog>
  </div>
</template>
<script>
import MxSelectTranslate from '@/components/Cache/modules/mx-select-translate-mixin.js'
import ChooseSubjectDialog from '../../../system/user/profile/components/choose-subject-dialog'
import SelectSubjectReportDialog from '@/views/system/user/profile/components/select-subject-report-dialog'
import OverUnderBadge from '@/views/elective/publish/components/steps/fauclty/over-under-badge'
import ElectiveEnrollInfo from '@/views/elective/select/components/elective-enroll-info'
import ElectivePreferenceInfo from '@/views/elective/select/components/elective-preference-info'
import ElectivePreferenceReject from '@/views/elective/select/components/elective-preference-reject'
import ElectivePreferenceCommand from '@/views/elective/select/components/elective-preference-command'
import ElectiveAiAnalysisDialog from '@/views/elective/select/components/elective-ai-analysis-dialog'
import ElectiveEsignDialog from '@/views/elective/select/components/elective-esign-dialog'
import ElectiveMajorThumbnail from '@/views/elective/select/components/elective-major-thumbnail'
import ElectiveMajorCollege from '@/views/elective/select/components/elective-major-college'
import ElectivePreferenceBatch from '@/views/elective/select/components/elective-preference-batch'
import ElectiveTableGroupTag from '@/views/elective/select/components/elective-table-group-tag'

import ElectiveTableMixin from './elective-table-mixins'

export default {
  mixins: [ElectiveTableMixin, MxSelectTranslate],
  name: 'elective-table',
  props: {
    generation: Object,
    readonly: Boolean, // 校长端不允许操作
    optionalMajors: { type: Array, default: () => [] }
  },
  components: {
    ElectiveTableGroupTag,
    ElectivePreferenceBatch,
    ElectiveMajorCollege,
    ElectiveMajorThumbnail,
    ElectiveEsignDialog,
    ElectiveAiAnalysisDialog,
    ElectivePreferenceCommand,
    ElectivePreferenceReject,
    ElectivePreferenceInfo,
    ElectiveEnrollInfo,
    OverUnderBadge,
    SelectSubjectReportDialog,
    ChooseSubjectDialog
  },
  inject: {
    refreshData: {
      default: function() {
      }
    }
  },
  computed: {
    enrollInfoVisible() {
      return this.generation.active > this.generation.options.primary.value
    },
    stepMatched() {
      return this.generation.active == this.generation.current
    },
    selectStep() {
      return !this.generation.activeOpt.decisionMaking
    },
    enableSelect() {
      return this.stepMatched && this.selectStep && !!!this.enrollStatus.enrolledGroup && !this.readonly
    },
    selectedList() {
      return this.generation.activeModel.selectedList
    },
    multipleSelect() {
      return this.generation.activeModel.preferenceCount > 1
    },
    enableMultipleDrag() {
      return this.selectStep && this.multipleSelect
    },
    enableReject() {
      return this.enableSelect && this.generation.active > this.generation.options.primary.value
    },
    enableAIFeature() {
      return !this.generation.activeOpt.decisionMaking
        && this.generation.activeOpt != this.generation.options.primary
        && !this.readonly
    }
  },
  methods: {
    preventSelectedListChanged() {
      if (!this.enableSelect) return Promise.resolve(true)
      const from = this.generation.activeModel.selectedList
      const to = this.generation.activeModel.selectedListSnapshot
      let changedMsg = '请先提交更改过的志愿', changed = false
      if (from.length != to.length) {
        changed = true
      } else if (from.length) {
        const elementCheckFields = ['selected', 'rejected', 'groupId']
        from.forEach((eleFrom, idx) => {
          const eleTo = to[idx]
          const eleChanged = elementCheckFields.some(f => eleFrom[f] != eleTo[f])
          if (eleChanged) changed = true
        })
      }
      if (changed) this.$message.warning(changedMsg)
      return changed ? Promise.reject(changedMsg) : Promise.resolve(true)
    },
    async toReport() {
      await this.preventSelectedListChanged()
      this.$refs.reportDialog.open()
    },
    async toSelectSub(row) {
      await this.preventSelectedListChanged()
      // 打开选科弹窗
      const course0 = this.translateCourse0(row.groupId)
      const course1 = this.translateCourse1(row.groupId)
      this.$refs.chooseDialog.open(course0, course1)
    },
    toAiAnalysis() {
      // AI 分析 跳转
      this.$refs.aiDialog.open(this.formatRows)
    }
  }
}
</script>
<style scoped>
</style>