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

</template>

<script>
import Setting from "@/setting";
import MatchDetail from "../add";
import MatchProgress from "./matchProgress";
import notice from "./notice";
import MatchSignup from "./matchSignup";
import { mapState } from "vuex";
export default {
    name: "matchManage",
    data() {
        return {
            name: this.$route.query.name,
            active: this.$route.query.tab || "first",
            tabs: {
                first: "大赛详情",
                second: "竞赛进展",
                third: "公告通知",
                fourth: "报名人员"
            }
        };
    },
    computed: {
      ...mapState("user", [
        'page'
      ]),
      ...mapState('auth', [
        'btns'
      ])
    },
    components: {
        MatchDetail,
        MatchProgress,
        notice,
        MatchSignup
    },
    mounted() {
      Setting.dynamicRoute && this.initTabs()
    },
    methods: {
        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:管理:报名人员')

          tab1 || delete this.tabs.first
          tab2 || delete this.tabs.second
          tab3 || delete this.tabs.third
          tab4 || delete this.tabs.fourth
          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 === 'first') {
            const detail = this.$refs.detail
            if (detail.updateTime > 1) {
              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.page}`)
        },
        tabSwitch(i) {
          this.active = i
          this.$router.push(`/match/manage?id=${this.$route.query.id}&tab=${i}&name=${this.name}`)
        },
        backOrTab(i) {
          i ? this.tabSwitch(i) : this.backPage()
        },
        tabChange(i) {
          this.handleSave(i) && this.tabSwitch(i)
        }
    }
};
</script>

<style scoped>

</style>