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 == 'first'" ref="detail" />
            <!-- 竞赛进展 -->
            <MatchProgress v-else-if="active == 'second'" />
            <!-- 公告通知 -->
            <notice v-else-if="active == 'third'" />
            <!-- 报名人员 -->
            <MatchSignup v-else />
        </div>
    </div>

</template>

<script>
import MatchDetail from "./matchDetail";
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 || "first",
            tabs: {
                first: "大赛详情",
                second: "竞赛进展",
                third: "公告通知",
                fourth: "报名人员"
            }
        };
    },
    components: {
        MatchDetail,
        MatchProgress,
        notice,
        MatchSignup
    },
    mounted() {
      
    },
    methods: {
        back() {
          this.handleSave(0) && this.backPage()
        },
        // 判断是否需要confirm
        handleSave(i) {
          // 如果是赛事详情，则要判断是否已经保存，未保存则提示是否保存
          if (this.active === 'first') {
            const detail = this.$refs.detail
            if (detail.updateTime > 1) {
              this.$confirm(`编辑的内容未保存，是否保存并且发布？`, '提示', {
                type: 'warning'
              }).then(() => {
                detail.save(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}`)
        },
        tabSwitch(i) {
          this.active = i
          this.$router.push(`/matchManage?id=${this.$route.query.id}&tab=${i}&name=${this.name}`)
        },
        backOrTab(i) {
          i ? this.tabSwitch(i) : this.backPage()
        },
        // tab回调
        tabChange(i) {
          this.handleSave(i) && this.tabSwitch(i)
        }
    }
};
</script>

<style scoped>

</style>