front/src/views/elective/generation/components/elective-generation-master.vue

<template>
  <div class="fx-column">
    <evaluation-empty v-if="isUnPassedStep" :shadow="false" :title="emptyTitle"></evaluation-empty>
    <template v-else>
      <div class="fx-row fx-bet-cen mb15">
        <div>
          <slot name="header-prefix"></slot>
        </div>
        <div class="fx-1">
          <slot :name="activeKey+'-header'" v-bind="chartBinding">
            <elective-generation-commands v-if="!stepDisabled" :chart-binding="chartBinding"/>
          </slot>
        </div>
        <div>
          <slot name="header-suffix"></slot>
        </div>
      </div>
      <slot :name="activeKey" v-bind="chartBinding">
        <elective-generation-table :chart-binding="chartBinding"></elective-generation-table>
      </slot>
      <slot name="footer-prefix"></slot>
      <slot :name="activeKey+'-footer'" v-bind="chartBinding">
        <elective-generation-charts :chart-binding="chartBinding" class="mt40"></elective-generation-charts>
      </slot>
      <slot name="footer-suffix"></slot>
    </template>
  </div>
</template>

<script>

import ElectiveGenerationTable from '@/views/elective/generation/components/elective-generation-table'
import ElectiveGenerationCharts from '@/views/elective/generation/components/elective-generation-charts'
import ElectiveGenerationCommands from '@/views/elective/generation/components/elective-generation-commands'

export default {
  name: 'elective-generation-master',
  components: { ElectiveGenerationCommands, ElectiveGenerationCharts, ElectiveGenerationTable },
  props: {
    generation: {
      type: Object
    }
  },
  data() {
    return {
      emptyTitle: ''
    }
  },
  computed: {
    activeKey() {
      return this.generation.activeOpt?.key || ''
    },
    stepDisabled() {
      return this.generation.active !== this.generation.current
    },
    isUnPassedStep() {
      if (!this.generation.activeOpt) return false
      this.emptyTitle = this.generation.currentOpt == this.generation.options.init
        ? '选科还未开启'
        : `正在进行${this.generation.currentOpt.title || '{未知进程}'}, 还未进行至${this.generation.activeOpt.title}`
      return this.generation.active > this.generation.current
    },
    categories() {
      // summary - categories for display in table
      return this.generation.summary.filter(item => item.generation <= this.generation.active)
    },
    accumulates() {
      // summary - accumulate for display in charts
      let options = this.generation.options
      let generation = this.generation.active
      let generationData = this.generation.summary.find(item => item.generation == generation && item.accumulates?.length)
      if (!generationData) {
        generation = generation - 1
        generationData = this.generation.summary.find(item => item.generation == generation)
      }

      return generationData?.accumulates?.length ? {
        generation: generation, // 图表激活的进程代，除初选报名外，一般为决策代数据
        accumulates: generationData.accumulates
      } : null
    },
    chartBinding() {
      return {
        generation: this.generation,
        tableData: this.categories,
        chartData: this.accumulates
      }
    }
  },
  methods: {}
}
</script>

<style scoped>

</style>