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>
      <slot :name="activeKey+'-header'" v-bind="chartBinding"></slot>
      <slot :name="activeKey" v-bind="chartBinding">
        <elective-generation-table :chart-binding="chartBinding"></elective-generation-table>
      </slot>
      <slot :name="activeKey+'-footer'" v-bind="chartBinding"></slot>
    </template>
  </div>
</template>

<script>

import ElectiveGenerationTable from '@/views/elective/generation/components/elective-generation-table'

export default {
  name: 'elective-generation-master',
  components: { ElectiveGenerationTable },
  props: {
    generation: {
      type: Object
    }
  },
  data() {
    return {
      emptyTitle: ''
    }
  },
  computed: {
    activeKey() {
      return this.generation.activeOpt?.key || ''
    },
    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
      return this.generation.summary.find(item => item.generation == this.generation.active && item.accumulates?.length)
        || this.generation.summary.find(item => item.generation == this.generation.active - 1)
    },
    chartBinding() {
      return {
        generation: this.generation,
        tableData: this.categories,
        chartData: this.accumulates
      }
    }
  },
  methods: {}
}
</script>

<style scoped>

</style>