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

<template>
  <div>
    <mx-table :propDefines="formatCols" :rows="formatRows">
      <template #underOver="{value}">
        <over-under-badge :value="value"></over-under-badge>
      </template>
      <template #subjects="{row}">
        <elective-major-thumbnail :group="row"></elective-major-thumbnail>
      </template>
      <template #group="{row}">
        <elective-table-group-tag :generation="generation" :group="row"></elective-table-group-tag>
      </template>
      <template #colleges="{row}">
        <elective-major-college :group="row"></elective-major-college>
      </template>
    </mx-table>
    <elective-ai-report-dialog v-if="true" ref="aiReportDialog" :generation="generation"></elective-ai-report-dialog>
  </div>
</template>
<script>
import OverUnderBadge from '@/views/elective/publish/components/steps/fauclty/over-under-badge'
import ElectiveAiReportDialog from '@/views/elective/select/components/elective-ai-report-dialog'
import ElectiveMajorThumbnail from '@/views/elective/select/components/elective-major-thumbnail'
import ElectiveMajorCollege from '@/views/elective/select/components/elective-major-college'
import ElectiveTableGroupTag from '@/views/elective/select/components/elective-table-group-tag'

const resolverModules = require.context('./ai-round-select-resolvers', false, /\.js$/)
const resolvers = resolverModules.keys().map(key => resolverModules(key).default)
import ElectiveTableMixin from './elective-table-mixins'

export default {
  mixins: [ElectiveTableMixin, ...resolvers],
  name: 'elective-ai-table',
  components: {
    ElectiveTableGroupTag,
    ElectiveMajorCollege,
    ElectiveMajorThumbnail,
    ElectiveAiReportDialog,
    OverUnderBadge
  },
  computed: {
    resolveTablePrefix() {
      return {
        groupName: {
          label: '选科组合',
          width: '120px',
          slot: 'group'
        },
        scoreSumGroup: {
          label: '组合成绩'
        }
      }
    },
    resolveTableSuffix() {
      return {
        subjects: {
          label: '自选专业',
          slot: 'subjects',
          width: '150'
        },
        colleges: {
          label: '院校',
          slot: 'colleges',
          width: '250'
        },
        // signUp: {
        //   label: '报告',
        //   slot: 'report',
        //   width: '100',
        //   fixed: 'right',
        //   hidden: this.readonly
        // }
      }
    },
    resolveDynamicAITable() {
      if (!this.formatRows?.length) return {}
      const options = this.generation.options
      if (!options || !this.generation.active) return {}
      const dynamicColumns = {}

      const model = this.generation.activeModel
      const resolverKey = model.option.key + 'AIResolver'
      const resolver = this[resolverKey]
      if (typeof resolver === 'function') {
        const genColumns = resolver(model, model, dynamicColumns)
        Object.assign(dynamicColumns, genColumns)
      }

      return dynamicColumns
    },
    formatCols() {
      const _ = this.resolveDynamicTable // Note: force execute!
      return {
        ...this.resolveTablePrefix,
        ...this.resolveDynamicAITable,
        ...this.resolveTableSuffix
      }
    }
  },
  methods: {
    toReport() {
      this.$refs.aiReportDialog.init()
    }
  }
}
</script>
<style scoped>
/deep/ .el-badge__content.is-fixed {
  top: 8px;
  right: 8px;
}
</style>