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";
import { mapState } from "vuex";
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
    },
    computed: {
      ...mapState("user", [
        'page'
      ]),
      ...mapState('auth', [
        'btns'
      ])
    },
    mounted() {
      Setting.dynamicRoute && this.initTabs()
    },
    beforeRouteLeave(to, from, next) {
      const { detail } = this.$refs
      if (detail) {
        const step = detail.$refs['step' + detail.step]
        if (detail.step < 4 && step && step.updateTime) {
          this.$confirm(`编辑的内容未保存，是否保存并且发布？`, '提示.......', {
            type: 'warning'
          }).then(() => {
            detail.save(1,to.path,next)
          }).catch(() => {
            next()
          })
        } else {
          next()
        }
      } else {
        next()
      }
    },
    methods: {
        initTabs() {
          const { btns } = this
          console.log("🚀 ~ file: index.vue:67 ~ initTabs ~ btns", btns)
          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:管理:报名人员')

          tab1 || this.$delete(this.tabs, 'tab1')
          tab2 || this.$delete(this.tabs, 'tab2')
          tab3 || this.$delete(this.tabs, 'tab3')
          tab4 || this.$delete(this.tabs, 'tab4')
          tab5 || this.$delete(this.tabs, 'tab5')
          const type = this.$route.query.tab
          const keys = Object.keys(this.tabs)
          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'
                }).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(){
          console.log(444, this.$store.state)
          this.$router.push(`/match?page=${this.$store.state.match.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>