糟糕的 Template 寫法

team-level-panel.vue

<template lang="pug">
el-dialog(
  v-if="teamDetailsIsNotEmpty"
  :visible="visible"
  :before-close="cleanUpAndClosePanel"
  @close="closePanel"
  width="560px"
)
  template(slot="title" v-if="dataExistedInPrevMonth")
    .toolbar

      span.toolbar__left(v-if="shouldShowPrevMonthButton")
        el-button.button__show-history.has-text-weight-bold(
          type="text"
          @click="showDataInPrevMonth()"
        )
          i.at-text-green.el-icon-arrow-left
          span.at-text-green {{ prevYearWithMonth }}

      span.at-text-green.toolbar__center {{ title }}

  template(v-if="!dataExistedInPrevMonth") {{ $t("components.team-level.no-data") }}


  .content-for-mentor(v-else)

    section.introduction
      .section__left
        .avatar
          at-avatar(:source="teacherInfo.avatar")
        .description
          h3.name-of-teacher {{ teacherInfo.name }}
          h3.current-level.has-text-weight-bold {{ levelName }}

      ul.section__right
        li {{ $t("components.team-level.net-income") }}：{{ teamDetails.net_income }}
        li {{ $t("components.team-level.team-income") }}：{{ teamDetails.team_income }}
        li {{ $t("components.team-level.total-team-income") }}：{{ teamDetails.total_team_income }}



    section.metrics
      .metrics__title.has-text-weight-bold
        | {{ levelName }} {{ $t("components.team-level.metric") }}

      ul
        template(v-for="(metricResult, metricTitle) in performance")
          li
            i.fas.fa-check.icon-check(v-if="metricResult")
              | &nbsp; {{ metricTitle }}
            i.fas.fa-times.icon-close.at-text-red(v-else)
              | &nbsp; {{ metricTitle }}



    section.level-downgrade-warning.at-text-red(v-if="shouldShowDowngradeWarning")
      | {{ $t("components.team-level.downgrade-warning", {date: nextYearWithMonth}) }}



    section.dropdown__show_team_members(
      v-if="teamDetails.members.length"
      @click="shouldShowTeamMembers = !shouldShowTeamMembers"
    )
      span {{ $t("components.team-level.his-team-member") }}
      i.fas(:class="shouldShowTeamMembers ? 'fa-angle-up' : 'fa-angle-down'")

    el-table(
      v-show="shouldShowTeamMembers"
      :data="teamDetails.members"
      stripe
      style="width: 100%"
    )
      el-table-column(
        type="index"
        width="50"
        align="center"
      )
      el-table-column(
        prop="name"
        :label="$t('components.team-level.member-listing.name')"
        align="center"
      )
        template(slot-scope="scope")
          a(target="_blank" :href="getTeacherProfileURL(scope.row.slug)")
            | {{ scope.row.name }}

      el-table-column(
        prop="level"
        :label="$t('components.team-level.member-listing.level')"
        align="center"
      )
        template(slot-scope="scope")
          | {{ $t(`components.teacher-level.${scope.row.level}`) }}

      el-table-column(
        prop="net_income"
        :label="$t('components.team-level.member-listing.net-income')"
        align="center"
      )
      el-table-column(
        prop="team_income"
        :label="$t('components.team-level.member-listing.team-income')"
        align="center"
      )
</template>

<script>
  import { METRICS } from '~/amazingtalker/module/teacher-level-metrics'
  import { mapState } from 'vuex'
  import { path } from '~/at-libs'
  import * as deepFreeze from 'deep-freeze'
  import _ from 'lodash'
  import moment from 'moment'

  export default {
    watch: {
      visible(value) {
        if (!value) return
        this.assignDataType()
        this.setCurrentQuery()
        this.getTeamDetails()
      }
    },
    props: {
      visible: {
        type: Boolean,
        required: true,
        default: false
      },
      teacherInfo: {
        type: Object,
        required: true
      }
    },
    data() {
      this.currentQuery = null
      return {
        dataType: '',
        currentDateString: moment().toISOString(),
        shouldShowTeamMembers: false,
        teamDetails: {}
      }
    },
    computed: {
      ...mapState({
        api: state => state.helper.api
      }),
      shouldShowDowngradeWarning() {
        if (this.dataType === 'future') return false
        return this.teamDetails.months_failed === 2
      },
      levelName() {
        if (_.isNull(this.teamDetails.level)) return ''
        if (_.isNull(this.teamDetails.level_status))
          return this.$t(`components.teacher-level.${this.teamDetails.level}`)
        return this.$t(`components.teacher-level.${this.teamDetails.level_status.level_validated}`)
      },
      performance() {
        if (_.isNull(this.teamDetails.level_status)) return {}
        const level = this.teamDetails.level_status.level_validated
        const levelMetrics = METRICS[level]
        const reducer = (carry, meaning, metric) =>
          _.assign(carry, { [meaning]: this.teamDetails.level_status[metric] })
        return _.reduce(levelMetrics, reducer, {})
      },
      teamDetailsIsNotEmpty() {
        return !_.isEmpty(this.teamDetails)
      },
      shouldShowPrevMonthButton() {
        if (this.dataType === 'future') return false
        return this.dataExistedInPrevMonth
      },
      title() {
        const i18nPath = 'components.team-level.next-level-title'
        if (this.dataType === 'future') return this.$t(i18nPath)
        return this.currYearWithMonth
      },
      dataExistedInPrevMonth() {
        if (_.isEmpty(this.teamDetails)) return false
        if (_.isNull(this.teamDetails.level)) return false
        return true
      },
      prevYearWithMonth() {
        return moment(this.currentDateString)
          .subtract(1, 'month')
          .format('YYYY.MM')
      },
      currYearWithMonth() {
        return moment(this.currentDateString).format('YYYY.MM')
      },
      nextYearWithMonth() {
        return moment(this.currentDateString)
          .add(1, 'month')
          .format('YYYY.MM')
      }
    },
    methods: {
      assignDataType(value) {
        if (value !== undefined) return (this.dataType = value)
        this.dataType = this.teacherInfo.showNextLevelData ? 'future' : 'initial'
      },
      closePanel() {
        this.$emit('update:visible', false)
      },
      cleanUpAndClosePanel() {
        this.assignDataType('')
        this.currentQuery = null
        this.currentDateString = moment().toISOString()
        this.shouldShowTeamMembers = false
        this.teamDetails = {}
        this.closePanel()
      },
      setCurrentQuery() {
        const queryMap = {
          initial: {
            started_at: null,
            level: null,
            include_months_failed: true
          },
          onDemand: {
            started_at: this.currentDateString,
            level: null,
            include_months_failed: null
          },
          future: {
            started_at: null,
            level: this.teacherInfo.next_level,
            include_months_failed: null
          }
        }
        this.currentQuery = queryMap[this.dataType]
      },
      async getTeamDetails() {
        const endPoint = path.flash.report.GET_team_details.replace(':teacher_id', this.teacherInfo.id)
        const { data } = await this.api.get(endPoint, this.currentQuery)
        this.teamDetails = deepFreeze(data)
      },
      subtract1Month() {
        this.currentDateString = moment(this.currentDateString)
          .subtract(1, 'month')
          .toISOString()
      },
      showDataInPrevMonth() {
        this.subtract1Month()
        this.assignDataType('onDemand')
        this.setCurrentQuery()
        this.getTeamDetails()
      },
      getTeacherProfileURL(slug) {
        return this.$path('teacherProfile', { slug })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~assets/stylesheets/base/_layout'
  .toolbar
    display flex
    position relative
    align-items center
  .toolbar__center
    display block
    position absolute
    left 0
    right 0
    text-align center
    z-index 0
  .toolbar__left
    position relative
    z-index 1
  .container__tabs
    text-align center
    height 80px
    width 100%
    margin 0 auto 24px
    max-width 300px
    display flex
    justify-content space-between

  .tab__title
    margin-top 8px

  .container__tab
    display flex
    flex-direction column
    align-items center
    padding 16px
  ::v-deep .el-dialog__header
    padding 20px 20px 0
  ::v-deep .el-dialog__body
    padding 0px 20px 16px

  .dropdown__show_team_members
    display inline-block
    height 45px
    line-height 45px
    font-size 16px
    cursor pointer
    text-align center
    span
      display inline-block
      margin-right 0.5em
    +at-until($tablet)
      display block
      text-align left

  .name-of-teacher
    font-size 18px
    font-weight 600

  .headline
    display block
    width 100%
    line-height 1.5
    font-size 14px

  .metrics__title
    margin 8px 0px
    border-bottom 1px solid #eae1e1
    padding-bottom 4px
  .metrics
    ul
      margin-bottom 8px
      list-style-type none

  .introduction
    display flex
    justify-content space-between
    align-items center
    .section__left
      display flex
      align-items center
      margin 16px 0px
    .section__right
      margin-right 8px
    .avatar
      flex 0 0 auto
      margin-right 10px
      width 60px !important
      height 60px !important
      +at-from($tablet)
        margin-right 20px
        margin-bottom 0
        width 80px
        height 80px

  .button__show-history
    color $ci-green

  .el-col
    height 100%

  .section__right
    list-style-type none
</style>