FE_middlePlatform_server/src/views/match/manage/index.vue

<template>
  <!--  赛事管理  -->
  <div>
    <el-card shadow="hover" class="m-b-20">
      <div class="flex-between">
        <el-page-header @back="back" :content="name + '/管理'"></el-page-header>
      </div>
    </el-card>
    <div class="page" style="margin-bottom: 24px">
      <div class="tabs">
        <a class="item" v-for="(item, index) in tabs" :key="index" :class="{ active: index == active }"
          @click="tabChange(index)">{{ item }}</a>
      </div>
      <MatchDetail v-if="active == 'tab1'" ref="detail" />
      <MatchArch v-if="active == 'tab2'" />
      <MatchProgress v-else-if="active == 'tab3'" />
      <Notice v-else-if="active == 'tab4'" />
      <MatchSignup v-else-if="active == 'tab5'" />
      <AbnormalTeam v-else-if="active == 'tab6'" />
    </div>
  </div>

</template>

<script>
import Setting from "@/setting";
import MatchDetail from "../add";
import MatchArch from "./matchArch";
import MatchProgress from "./matchProgress";
import Notice from "./notice";
import MatchSignup from './matchSignup'
import AbnormalTeam from './abnormalTeam'
export default {
  name: "matchManage",
  data () {
    return {
      name: this.$route.query.name,
      active: this.$route.query.tab || '',
      tabs: {
        tab1: "大赛详情",
        tab2: "大赛成绩管理",
        tab3: "竞赛进展",
        tab4: "公告通知",
        tab5: "报名人员",
      }
    };
  },
  components: {
    MatchDetail,
    MatchArch,
    MatchProgress,
    Notice,
    MatchSignup,
    AbnormalTeam
  },
  mounted () {
    // if (Setting.dynamicRoute) {
    this.initTabs()
    // } else {
    //   this.active = this.$route.query.tab || 'tab1'
    // }
  },
  methods: {
    async initTabs () {
      const btns = this.$store.state.btns
      const tab1 = btns.includes('/match:管理:大赛详情')
      const tab2 = btns.includes('/match:管理:大赛成绩管理')
      const tab3 = btns.includes('/match:管理:竞赛进展')
      const tab4 = btns.includes('/match:管理:公告通知')
      const tab5 = btns.includes('/match:管理:报名人员')

      const res = await this.$post(`${this.api.getCompetition}?competitionId=${this.$route.query.id}`)

      tab1 || this.$delete(this.tabs, 'tab1')
      if (!tab2 || !res.competition.releaseType) this.$delete(this.tabs, 'tab2')
      tab3 || this.$delete(this.tabs, 'tab3')
      tab4 || this.$delete(this.tabs, 'tab4')
      tab5 || this.$delete(this.tabs, 'tab5')

      if (res.competition.completeCompetitionSetup.competitionType) {
        this.tabs.tab6 || this.$set(this.tabs, 'tab6', '查看异常团队')
      } else {
        this.tabs.tab6 && this.$delete(this.tabs, 'tab6')
      }

      const type = this.$route.query.tab
      const keys = Object.keys(this.tabs)
      if (keys.length) this.active = keys.includes(type) ? type : keys[0]
    },
    back () {
      this.handleSave(0) && this.backPage()
    },
    // 判断是否需要confirm
    handleSave (i) {
      // 如果是赛事详情，则要判断是否已经保存，未保存则提示是否保存
      if (this.active === 'tab1') {
        const { detail } = this.$refs
        if (detail) {
          const step = detail.$refs['step' + detail.step]
          if (detail.step < 4 && step && step.updateTime) {
            this.$confirm(`编辑的内容未保存，是否保存并且发布？`, '提示', {
              type: 'warning',
              closeOnClickModal: false
            }).then(() => {
              detail.save(1, 1)
              this.backOrTab(i)
            }).catch(() => {
              this.backOrTab(i)
            })
          } else {
            this.backOrTab(i)
          }
        } else {
          this.backOrTab(i)
        }
        return false
      } else {
        return true
      }
    },
    // 返回列表
    backPage () {
      this.$router.push(this.$store.state.referrer || '/match')
    },
    // tab切换
    tabSwitch (i) {
      this.active = i
      this.$router.push(`/matchManage?id=${this.$route.query.id}&tab=${i}&name=${this.name}`).catch(e => { })
    },
    // 判断返回还是tab
    backOrTab (i) {
      i ? this.tabSwitch(i) : this.backPage()
    },
    // tab回调
    tabChange (i) {
      this.handleSave(i) && this.tabSwitch(i)
    }
  }
};
</script>

<style scoped></style>