front/src/views/elective/generation/detail.vue

<template>
  <div class="app-container" v-loading="loading">
    <evaluation-title :title="title" :sub-title="subTitle" nav-back-button></evaluation-title>
    <el-card>
      <mx-condition :query-params="queryParams" :require-fields="requireFields" :local-data="localData"
                    @query="handleQuery"></mx-condition>
    </el-card>
    <mx-table :rows="detailTable.rows" :prop-defines="detailTable.columns" border class="mt20 elective-flow-table">
      <template #group-header="{label, key}">
        <div class="fx-row jc-cen">
          <span>{{ label }}</span>
          <el-popover trigger="hover" :disabled="!!!detailTable.groupHeaders[key].text" class="mx-generation-rank">
            <div v-for="(desc,idx) in detailTable.groupHeaders[key].descriptions" :key="idx">
              <span>{{ desc.description }}</span> <span class="bold">{{ desc.value }}</span></div>
            <el-tag slot="reference" size="mini" class="round-y ml3">{{ detailTable.groupHeaders[key].text }}</el-tag>
          </el-popover>
        </div>
      </template>
      <template #group-flow="{value}">
        <elective-flow-major v-if="value.matchedMajors.length" :icon-classes="['f-primary']"
                             :matched-majors="value.matchedMajors"></elective-flow-major>
        <div class="fx-row fx-cen-cen">
          <span v-if="value.text">{{ value.text }}</span>
          <span v-else v-html="'&#12288'"></span>
        </div>
        <elective-flow-rank-descriptor v-if="value.rankDescriptors"
                                       :rank-descriptors="value.rankDescriptors"></elective-flow-rank-descriptor>
      </template>
      <template #flow-action="{row}">
        <el-link @click="handleFlowLog(row)" :underline="false">查看</el-link>
        <el-popover v-if="row['enableForce']" :ref="'force_'+row['studentId']" width="80" trigger="click"
                    popper-class="zero-padding-popover">
          <div class="fx-column">
            <el-divider>调剂</el-divider>
            <el-button v-for="(g,i) in prevData.groups" :key="i" class="ml0" plain type="text"
                       :disabled="g.groupId==row['disableForceGroupId']"
                       @click="handleForceAdjust(g, row)&&$refs['force_'+row['studentId']].doClose()">{{ g.groupName }}
            </el-button>
          </div>
          <el-link slot="reference" :underline="false" type="warning" class="ml10">调剂</el-link>
        </el-popover>
      </template>
    </mx-table>
    <pagination :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                @pagination="loadGenerationDetails"></pagination>
    <el-dialog title="选科历史记录" v-if="logVisible" :visible.sync="logVisible" :width="logDialogWidth">
      <elective-generation-flow-log :groups="prevData.groups" :histories="logRow.histories"
                                    :matched-majors="this.majorsMap[logRow['studentId']]"/>
    </el-dialog>
  </div>
</template>

<script>
import config from '@/common/mx-config'
import transferMixin from '@/components/mx-transfer-mixin'
import groupTranslateMixin from '@/components/Cache/modules/mx-select-translate-mixin'
import { mapGetters } from 'vuex'
import MxCondition from '@/components/MxCondition/mx-condition'
import {
  enrollByForce,
  getElectiveGenerationDetails,
  getGenerationOptionalMajorsBatch
} from '@/api/webApi/elective/generation'
import ElectiveGenerationFlowLog from '@/views/elective/generation/components/elective-generation-flow-log'
import ElectiveFlowMajor from '@/views/elective/generation/components/elective-flow-major'
import ElectiveFlowRankDescriptor from '@/views/elective/generation/components/elective-flow-rank-descriptor'

export default {
  components: { ElectiveFlowRankDescriptor, ElectiveFlowMajor, ElectiveGenerationFlowLog, MxCondition },
  mixins: [transferMixin, groupTranslateMixin],
  name: 'generation-detail',
  computed: {
    ...mapGetters(['school']),
    title() {
      const y = (this.prevData.year + '').tailingFix('学年')
      const s = this.school.schoolName
      const n = this.prevData.roundName
      return y + s + n
    },
    subTitle() {
      const g = Object.values(config.electiveGenerationOptions).find(opt => opt.value == this.prevData.queryGeneration)
      const hideGeneration = g == config.electiveGenerationOptions.init || g == config.electiveGenerationOptions.terminate
      return hideGeneration ? '' : g?.title || ''
    },
    localData() {
      this.queryParams.generation = this.prevData.queryGeneration
      this.queryParams.generationQueryCode = this.prevData.queryCode
      this.queryParams.generationGroupId = this.prevData.queryGroupId
      return {
        ignoreGroupCategories: this.prevData.ignoreGroupCategories,
        categories: this.prevData.queryableCategories,
        groups: this.prevData.groups
      }
    },
    detailTable() {
      if (!this.majorsMap) return {}
      if (!this.prevData.queryableCategories.length) return {}
      if (!this.detailWrapper?.groupDescriptors?.length) return {}
      // fixed columns
      const queryCategory = this.prevData.queryableCategories.find(i => i.id == this.queryParams.generationQueryCode)
      const ignoreGroups = this.prevData.ignoreGroupCategories.includes(this.queryParams.generationQueryCode)
      const columns = {
        className: { label: '班级' },
        studentName: { label: '姓名' }
      }
      if (!ignoreGroups) {
        columns.groupName = { label: queryCategory.detailName || '组合' }
        columns.datetime = { label: '时间', minWidth: '110px' }
      }
      // extension generation columns & custom group header
      const rows = this.detailWrapper.details // todo: need clone?
      const groupHeaders = {}
      const groupKeyPrefix = 'group_'
      if (!ignoreGroups) {
        this.prevData.groups.forEach(group => {
          const groupKey = groupKeyPrefix + group.groupId
          columns[groupKey] = {
            label: group.groupName,
            slotHeader: 'group-header',
            slot: 'group-flow',
            minWidth: '180px'
          }
          groupHeaders[groupKey] = this.getGroupHeaderDescription(group.groupId)
          rows.forEach(row => {
            row[groupKey] = this.getGroupDescription(row, group.groupId, this.majorsMap)
          })
        })
      }
      columns.actions = { label: '操作', slot: 'flow-action', minWidth: '100px' }
      return {
        rows,
        columns,
        groupHeaders
      }
    },
    logDialogWidth() {
      const expectedWidth = (this.prevData.groups.length + 3) * 160 // 假定elective-generation-flow-log 单格宽160
      const finalWidth = Math.min(expectedWidth, window.innerWidth * 0.8)
      return finalWidth + 'px'
    }
  },
  data() {
    return {
      loading: false,
      requireFields: ['generationQueryCode'],
      queryParams: {
        pageNo: 1,
        pageSize: 20,
        generation: '',
        generationQueryCode: '',
        generationGroupId: ''
      },
      // query data
      total: 0,
      detailWrapper: null,
      majorsMap: null,
      // log
      logVisible: false,
      logRow: {}
    }
  },
  methods: {
    handleQuery() {
      this.queryParams.pageNo = 1
      this.loadGenerationDetails()
    },
    loadGenerationDetails() {
      const params = {
        pageNo: this.queryParams.pageNo,
        pageSize: this.queryParams.pageSize,
        roundId: this.prevData.roundId,
        generation: this.queryParams.generation,
        groupId: this.queryParams.generationGroupId,
        queryCode: this.queryParams.generationQueryCode
      }
      this.loading = true
      this.majorsMap = null
      getElectiveGenerationDetails(params).then(res => {
        this.total = res['total']
        this.detailWrapper = res.data

        const studentIds = res.data.details?.map(d => d['studentId']).toString()
        return getGenerationOptionalMajorsBatch({ studentIds })
      }).then(res => {
        this.majorsMap = res.data
      }).finally(() => this.loading = false)
    },
    getGroupHeaderDescription(groupId) {
      const statistic = this.detailWrapper.groupDescriptors.find(d => d.groupId == groupId)
      if (!statistic?.descriptors?.length) return {}
      const descriptors = statistic.descriptors.reverse()
      return {
        text: descriptors.map(d => d.value).join('/'),
        descriptions: descriptors
      }
    },
    getGroupDescription(row, groupId) {
      const matchedMajors = (this.majorsMap[row['studentId']]
        ?.majors?.filter(m => m['matchedGroupIds'].some(id => id == groupId)) || [])
        .groupBy(m => m.collegeName)
      const current = this.prevData.activeGeneration
      const options = Object.values(config.electiveGenerationOptions)
      const histories = row['histories'] || []
      const filterHistories = []
      for (let g = current; g > 0; g--) {
        const opt = options.find(opt => opt.value == g)
        const groupHistories = histories.filter(h => h.generation == g && h.groupId == groupId)
        if (groupHistories.length) filterHistories.push(groupHistories)
        // if (g < current && opt.decisionMaking) break // TODO: 仅迭代至最近的决策代（可能需要调整）
      }
      if (!filterHistories.length) return { matchedMajors }
      filterHistories.reverse() // 还原顺序
      const mergedHistories = filterHistories.reduce((prev, cur) => {
        prev.push(...cur)
        return prev
      }, [])
      return {
        matchedMajors,
        text: mergedHistories.map(h => h.description).join('/'),
        histories: mergedHistories,
        rankDescriptors: mergedHistories.last(i => !!i.rankDescriptors?.length)?.rankDescriptors
      }
    },
    handleFlowLog(row) {
      this.logRow = row
      this.logVisible = true
    },
    handleForceAdjust(group, row) {
      let message = `确认将'${row.studentName}'调剂至'${group.groupName}'？！`
      if (row['disableForceGroupId'] > 0) {
        message += `\n 当前录取组合'${this.translateGroup(row['disableForceGroupId'])}'`
      }
      this.$confirm(message, '强制调剂提醒', { type: 'warning' }).then(() => {
        enrollByForce(group.groupId, row['studentId']).then(res => {
          this.loadGenerationDetails() // refresh
        })
      })
      return true
    }
  }
}
</script>

<style>
@import url('./components/elective-flow-table-style.css');
</style>