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>

      <template v-if="active">
        <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'" />
      </template>
      <div class="empty"
           v-else>
        <div>
          <img src="@/assets/img/none.png"
               alt="">
          <p>暂无数据</p>
        </div>
      </div>
    </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 || '',
      tabs: {
        tab1: "大赛详情",
        tab2: "大赛成绩管理",
        tab3: "竞赛进展",
        tab4: "公告通知",
        tab5: "报名人员"
      },
      pass: 0
    };
  },
  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 && !step.pass && !this.pass) {
        this.$confirm(`编辑的内容未保存，是否保存并且发布？`, '提示.......', {
          type: 'warning'
        }).then(() => {
          detail.save(1, to.path, next)
        }).catch(() => {
          next()
        })
      } else {
        next()
      }
    } else {
      next()
    }
  },
  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:管理:公告通知')
      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)
      if (keys.length) 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.pass = 1
      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>