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

<template>
  <div>
    <mx-table :propDefines="propDefines" :rows="rows">
      <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>
      <template #report="{row}">
        <el-button @click="toReport('single',row)">查看</el-button>
      </template>
    </mx-table>
    <elective-ai-report-dialog ref="aiReportDialog"></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)

export default {
  mixins: [...resolvers],
  name: 'elective-ai-table',
  components: {
    ElectiveTableGroupTag,
    ElectiveMajorCollege,
    ElectiveMajorThumbnail,
    ElectiveAiReportDialog,
    OverUnderBadge
  },
  props: {
    generation: Object,
    readonly: Boolean,
    optionalMajors: { type: Array, default: () => [] }
  },
  data() {
    return {
      rows: []
    }
  },
  created() {
    const optionalMajors = this.optionalMajors
    // 初始化rows 当前activeModels
    this.rows = this.generation.activeModel.models.map(row => {
      row.colleges = optionalMajors.map(m => ({ college: m.collegeName, major: m.majorCategoryName }))
      row.subjects = optionalMajors.map(m => m['majorCategoryName'])
      return row
    })
  },
  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
        }
      }
    },
    formatTable() {
      // if (!this.formatRows) return {}
      const options = this.generation.options
      console.log(this.generation)
      if (!options || !this.generation.active) return {}
      // const optValues = Object.values(options)
      const dynamicColumns = {}
      const resolverKey = this.generation.activeOpt.key + 'Resolver'
      const resolver = this[resolverKey]
      if (typeof resolver === 'function') {
        const genColumns = resolver(this.generation.active)
        Object.assign(dynamicColumns, genColumns)
      }
      console.log(dynamicColumns)
      return dynamicColumns
    },
    propDefines() {
      return {
        ...this.resolveTablePrefix,
        ...this.formatTable,
        ...this.resolveTableSuffix
      }
    }
  },
  methods: {
    toReport(type, row) {
      this.$refs.aiReportDialog.init(type, row)
    }
  }
}
</script>
<style scoped>
/deep/ .el-badge__content.is-fixed {
  top: 8px;
  right: 8px;
}
</style>