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="goBack" :content="'赛事管理'"></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" @waitChange="tabChangeWait()" :key="index" :class="{active: index == active}" @click="tabChange(index)">{{ item }}</a>
            </div>
            <!-- 大赛详情 -->
            <MatchDetail v-if="active == 'first'" />
            <!-- 竞赛进展 -->
            <MatchProgress v-else-if="active == 'second'" />
            <!-- 报名人员 -->
            <MatchSignup v-else />
        </div>
    </div>

</template>

<script>
import MatchDetail from "./matchDetail";
import MatchProgress from "./matchProgress";
import MatchSignup from "./matchSignup";
import EventBus from "@/libs/bus.js";

export default {
    name: "matchManage",
    data() {
        return {
            active: "first",
            tabs: {
                first: "大赛详情",
                second: "竞赛进展",
                third: "报名人员"
            }
        };
    },
    components: {
        MatchDetail,
        MatchProgress,
        MatchSignup
    },
    created() {
        EventBus.$on("tabChangeWait", (waitIndex) => {
            this.tabChange(waitIndex)
        });
    },
    beforeDestroy() {
        // 关闭所有EventBus事件
       EventBus.$off()
    },
    methods: {
        goBack() {
            this.$router.back();
        },
        tabChange(index) {
            this.$store.commit("match/setWaitIndex", index);
            if(!(this.wait !== 999)) {
                this.active = index;
            }else {
                EventBus.$emit("tabClickWait", this.wait);
                this.$store.commit("match/setWait", 999);
            }
        },
        tabChangeWait(index) {
            this.tabChange(index)
            // tabChange(sessionStorage.setItem('tabIndex', fromIndex))
        }
    },
    computed: {
        wait() {
            return this.$store.state.match.wait
        }
    }
};
</script>

<style scoped>

</style>