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

<template>
  <div class="fx-column pl20 pr20">
    <div class="fx-row fx-cen-cen f18 f-333 bold">
      {{ title }}
    </div>
    <el-steps :active="activeStep" class="mt20">
      <el-step v-for="(step,idx) in steps" :key="step.key" :title="step.title" :status="step.status">
        <template #title>
          <div class="rel"
               :class="{'bold':activeStep==idx+1, 'f-333':activeStep==idx+1&&step.value>generation.current}">
            <i v-if="activeStep==idx+1" class="el-icon-thumb current-pointer current-animation abs"></i>
            <el-popover v-else-if="step.value<generation.current&&step.value<activeStep" trigger="hover"
                        class="abs current-view">
              <el-checkbox :value="generation.hiddenGenerations.includes(step.value)"
                           @input="toggleGenerationTableData($event,step)">
                隐藏{{ step.title }}表格数据
              </el-checkbox>
              <i slot="reference" class="el-icon-view pointer"
                 :class="{'current-disabled': generation.hiddenGenerations.includes(step.value)}"
                 @click="toggleGenerationTableData(!generation.hiddenGenerations.includes(step.value), step)"></i>
            </el-popover>
            <span class="pointer" @click="handleStepChange(step)">
              {{ step.title }}</span>
          </div>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'elective-generation-steps',
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    generation: {
      type: Object,
      default: () => ({})
    },
    modelValue: {
      type: String,
      default: '' // active step key.
    }
  },
  data() {
    return {
      activeStep: 0
    }
  },
  computed: {
    ...mapGetters(['school']),
    steps() {
      const options = this.generation.options
      const current = this.generation.current
      const visibleSteps = Object.keys(options)
        .filter(key => options[key].stepsVisible)
      return visibleSteps.map(key => {
        const opt = options[key]
        return {
          key: key,
          value: opt.value,
          title: opt.title,
          status: opt.value < current
            ? 'success'
            : opt.value > current
              ? 'wait'
              : 'process'
        }
      })
    },
    title() {
      const year = (this.generation.status.year + '').tailingFix('学年')
      const schoolName = this.school.schoolName
      const roundName = this.generation.status.roundName

      const options = this.generation.options
      let statusTip = this.generation.currentOpt?.title + '进行中...'
      let defaultOpt = this.generation.currentOpt
      if (this.generation.current < options.primary.value) {
        statusTip = '选科未开启'
        defaultOpt = options.primary
      } else if (this.generation.current > options.rankBalance.value) {
        statusTip = '选科结束'
        defaultOpt = options.rankBalance
      }

      if (!this.modelValue) {
        console.log(this.steps.findIndex(item => item.value == defaultOpt.value) + 1)
        this.activeStep = this.steps.findIndex(item => item.value == defaultOpt.value) + 1
        this.$emit('change', defaultOpt.key)
      }
      return `${year}${schoolName}${roundName}（${statusTip}）`
    }
  },
  methods: {
    handleStepChange(step) {
      const target = step.value
      this.generation.hiddenGenerations.remove(target) // force display
      if (target != this.activeStep) {
        this.activeStep = target
        this.$emit('change', step.key)
      }
    },
    toggleGenerationTableData(e, step) {
      if (e) {
        if (!this.generation.hiddenGenerations.includes(step.value)) {
          this.generation.hiddenGenerations.push(step.value)
        }
      } else {
        this.generation.hiddenGenerations.remove(step.value)
      }
    }
  }
}
</script>

<style scoped>
.current-pointer {
  left: -20px;
  top: 10px;
}

.current-view {
  left: -20px;
}

.current-disabled {
  color: #999999;
}

.current-animation {
  animation: finger infinite 2s;
}

@keyframes finger {
  0% {
    transform: translate(-5px) rotate(90deg)
  }
  25% {
    transform: translate(5px) rotate(90deg)
  }
  50% {
    transform: translate(-5px) rotate(90deg)
  }
  75% {
    transform: translate(5px) rotate(90deg)
  }
  100% {
    transform: translate(-5px) rotate(90deg)
  }
}
</style>