FE_occupationlab_server/src/pages/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>

      <template v-if="active">
        <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'" />
      </template>
      <div class="empty" v-else>
        <div>
          <img src="@/assets/img/none.png" alt="">
          <p>暂无数据</p>
        </div>
      </div>
    </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'
import { mapState } from "vuex";
import qs from 'qs'
export default {
  name: "matchManage",
  data () {
    return {
      name: this.$route.query.name,
      active: this.$route.query.tab || '',
      tabs: {
        tab1: "大赛详情",
        tab2: "大赛成绩管理",
        tab3: "竞赛进展",
        tab4: "公告通知",
        tab5: "报名人员",
      },
      pass: 0
    };
  },
  components: {
    MatchDetail,
    MatchArch,
    MatchProgress,
    notice,
    MatchSignup,
    AbnormalTeam
  },
  computed: {
    ...mapState("user", [
      'page'
    ]),
    ...mapState('auth', [
      'btns'
    ])
  },
  mounted () {
    if (Setting.dynamicRoute) {
      this.initTabs()
    } else {
      this.active = 'tab1'
    }
  },
  // beforeRouteLeave (to, from, next) {
  //   const { detail } = this.$refs
  //   if (detail) {
  //     const step = detail.$refs['step' + detail.step]
  //     if (detail.step < 4 && step && step.updateTime && !step.pass && !this.pass) {
  //       this.$confirm(`编辑的内容未保存，是否保存并且发布？`, '提示.......', {
  //         type: 'warning'
  //       }).then(() => {
  //         detail.save(1, to.path, next)
  //       }).catch(() => {
  //         next()
  //       })
  //     } else {
  //       next()
  //     }
  //   } else {
  //     next()
  //   }
  // },
  methods: {
    async initTabs () {
      const { btns } = this
      const tab1 = btns.includes('/match/list:管理:大赛详情')
      const tab2 = btns.includes('/match/list:管理:大赛成绩管理')
      const tab3 = btns.includes('/match/list:管理:竞赛进展')
      const tab4 = btns.includes('/match/list:管理:公告通知')
      const tab5 = btns.includes('/match/list:管理:报名人员')

      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]
    },
    // 移除成绩管理
    hideArch () {
      this.$delete(this.tabs, 'tab2')
    },
    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.pass = 1
      const { params } = this.$store.state.match
      this.$router.push(`/match?${qs.stringify(params.form)}&page=${params.page}`)
    },
    // tab切换
    tabSwitch (i) {
      this.active = i
      this.$router.push(`/match/manage?id=${this.$route.query.id}&tab=${i}&name=${this.name}`)
    },
    // 判断返回还是tab
    backOrTab (i) {
      i ? this.tabSwitch(i) : this.backPage()
    },
    // tab回调
    tabChange (i) {
      this.handleSave(i) && this.tabSwitch(i)
    }
  }
};
</script>

<style scoped></style>