FE_occupationlab_client/src/pages/activity/manage/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" />
            <MatchProgress v-else-if="active == 'tab2'" />
            <notice v-else-if="active == 'tab3'" />
            <MatchSignup v-else-if="active == 'tab4'" />
        </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 || "tab1",
            tabs: {
                tab1: "项目详情",
                tab2: "项目进展",
                tab3: "公告通知",
                tab4: "报名人员"
            },
        };
    },
    components: {
        MatchDetail,
        MatchProgress,
        notice,
        MatchSignup
    },
    beforeRouteLeave(to, from, next) {
      const detail = this.$refs.detail
      if (detail && detail.updateTime) {
        this.$confirm(`编辑的内容未保存，是否保存并且发布？`, '提示.......', {
          type: 'warning'
        }).then(() => {
          detail.save(detail.form.publishStatus)
        }).catch(() => {
          next()
        })
      } else {
        next()
      }
    },
    mounted() {
      
    },
    methods: {
        back() {
          this.handleSave(0) && this.backPage()
        },
        // 判断是否需要confirm
        handleSave(i) {
          // 如果是赛事详情，则要判断是否已经保存，未保存则提示是否保存
          if (this.active === 'tab1') {
            const detail = this.$refs.detail
            if (detail && detail.updateTime) {
              this.$confirm(`编辑的内容未保存，是否保存并且发布？`, '提示', {
                type: 'warning'
              }).then(() => {
                detail.save(detail.form.publishStatus)
                this.backOrTab(i)
              }).catch(() => {
                this.backOrTab(i)
              })
            } else {
              this.backOrTab(i)
            }
            return false
          } else {
            return true
          }
        },
        // 返回列表
        backPage(){
          this.$router.push(`/activity/manage?page=${this.$store.state.activity.page}`)
        },
        // tab切换
        tabSwitch(i) {
          this.active = i
          this.$router.push(`manageDetail?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 lang="scss" scoped>
.tabs {
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  .item {
    position: relative;
    padding: 20px 0;
    margin-right: 40px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    cursor: pointer;

    &:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      border-bottom: 3px solid transparent;
      border-radius: 2px;
    }

    &.active {
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }

    &.active:after {
      border-bottom-color: $main-color;
    }
  }
}
</style>