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>
            <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'" />
        </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";
export default {
    name: "matchManage",
    data() {
        return {
            name: this.$route.query.name,
            active: this.$route.query.tab || "tab1",
            tabs: {
                tab1: "大赛详情",
                tab2: "大赛成绩管理",
                tab3: "竞赛进展",
                tab4: "公告通知",
                tab5: "报名人员"
            }
        };
    },
    components: {
        MatchDetail,
        MatchArch,
        MatchProgress,
        notice,
        MatchSignup
    },
    mounted() {
      Setting.dynamicRoute && this.initTabs()
    },
    methods: {
        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:管理:报名人员')

          tab1 || delete this.tabs.tab1
          tab2 || delete this.tabs.tab2
          tab3 || delete this.tabs.tab3
          tab4 || delete this.tabs.tab4
          const type = this.$route.query.tab
          const keys = Object.keys(this.tabs)
          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.detail
            if (detail.step < 4 && detail.$refs['step' + detail.step].updateTime) {
              this.$confirm(`编辑的内容未保存，是否保存并且发布？`, '提示', {
                type: 'warning'
              }).then(() => {
                detail.save(1, 1)
                this.backOrTab(i)
              }).catch(() => {
                this.backOrTab(i)
              })
            } else {
              this.backOrTab(i)
            }
            return false
          } else {
            return true
          }
        },
        // 返回列表
        backPage(){
          this.$router.push(`/match?page=${this.$store.state.matchPage}&platformSource=${this.$store.state.platformSource}`)
        },
        // 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>