dy-admin-manager/src/views/resetTeaming/index.vue

<template>
  <div class="m-container">
    <h2>
      <el-page-header @back="onCancel">
        <template slot="content">
          <div
            class="hearConcat"
            @click="gotoArchices"
            v-if="permission('/musicArchices')"
          >
            <el-tooltip placement="top" popper-class="mTooltip">
              <div slot="content">乐团档案</div>
              <div class="titleWrap">
                <p>{{ teamName }}</p>
                <img :src="archices" alt="" class="archices" />
              </div>
            </el-tooltip>
          </div>
          <div v-else>
            <p>{{ teamName }}</p>
          </div>
        </template>
      </el-page-header>
    </h2>
    <div class="m-core">
      <el-popover
        placement="left"
        :append-to-body="false"
        width="1000"
        trigger="hover"
        ref="popover"
        :open-delay="500"
          @show="setpopover()"
      >
      <!--  @setpopover='setpopover'  -->

        <teamJournal :teamid="teamid" />
        <!--  v-if="team_status" -->
        <p slot="reference" class="msg" :class="team_status">
          <img
            :src="stepImgs[team_status]"
            alt=""
            v-if="stepImgs[team_status]"
          />
          {{ musicGroupType[team_status] }}
        </p>
      </el-popover>

      <!-- navMenu    -->
      <tab-router
        v-model="activeIndex"
        type="card"
        ref="tab"
        :before-leave="checkGoTo"
      >
        <!--  @tab-click="handleClick" -->
        <el-tab-pane
          label="基本信息"
          lazy
          v-if="permission('/teamBaseInfo')"
          name="1"
        >
          <!--  v-if="activeIndex == 'teamBaseInfo'" -->
          <teamBaseInfo
            ref="teamBaseInfo"
            v-if="activeIndex == '1'"
            @getBaseInfo="getBaseInfo"
            :baseInfo="baseInfo"
            @getName="getName"
            @handleClick="handleClick"
          />
        </el-tab-pane>
        <el-tab-pane
          label="声部设置"
          lazy
          v-if="permission('/teamSoundMoney')"
          name="2"
          :disabled="!teamid"
        >
          <resetSound v-if="activeIndex == '2'" />
        </el-tab-pane>
        <el-tab-pane
          lazy
          label="预报名信息"
          name="9"
          :disabled="!teamid"
          v-if="permission('/teamForecastNameIndex')"
        >
          <!--         v-if="
            team_status == 'PRE_APPLY' ||
            team_status == 'PRE_BUILD_FEE' ||
            team_status == 'FEE_AUDIT' ||
            team_status == 'APPLY'
          " -->
          <forecastNameList
            v-if="activeIndex == '9'"
            :isedit="team_status == 'PRE_APPLY'"
          />
        </el-tab-pane>
        <el-tab-pane
          label="学员缴费设置"
          lazy
          v-if="permission('/teamStudentPayList')"
          name="3"
          :disabled="!teamid"
        >
          <resetPayList
            v-if="activeIndex == '3'"
            @changeActive="handleClick"
            @getBaseInfo="getBaseInfo"
          />
        </el-tab-pane>
        <el-tab-pane
          label="学校缴费设置"
          lazy
          v-if="permission('/teamSchoolPayList')"
          name="6"
          :disabled="!teamid"
        >
          <resetPayListSchool
            v-if="activeIndex == '6'"
            @changeActive="handleClick"
            @getBaseInfo="getBaseInfo"
          />
        </el-tab-pane>
        <el-tab-pane
          label="报名缴费"
          :disabled="!teamid"
          name="11"
          v-if="permission('/teamSignupList')"
        >
          <teamSignupList :teamid="teamid" v-if="activeIndex == 11" />
        </el-tab-pane>

        <el-tab-pane
          lazy
          label="乐器清单"
          name="10"
          :disabled="!teamid"
          v-if="permission('/teamMusicList')"
        >
          <musicOrder v-if="activeIndex == '10'" />
        </el-tab-pane>
        <el-tab-pane
          label="老师列表"
          v-if="permission('/teamTeacherList')"
          name="4"
          :disabled="!teamid"
        >
          <teacherList :teamid="teamid" v-if="activeIndex == '4'" />
        </el-tab-pane>
        <el-tab-pane
          label="学生列表"
          v-if="permission('/teamStudentList')"
          name="7"
          :disabled="!teamid"
        >
          <studentList :teamid="teamid" v-if="activeIndex == '7'" />
        </el-tab-pane>
        <!-- teamRemainTime -->
        <el-tab-pane
          label="剩余时长"
          lazy
          v-if="permission('/teamRemainTime')"
          name="12"
          :disabled="!teamid"
        >
          <teamRemainTime
            v-if="activeIndex == '12' && musicGroupInfo"
            :musicGroupInfo="musicGroupInfo"
          />
        </el-tab-pane>
        <el-tab-pane
          label="班级列表"
          lazy
          v-if="permission('/teamClassListInfo')"
          name="5"
          :disabled="!teamid"
        >
          <resetClass
            v-if="activeIndex == '5' && musicGroupInfo"
            :musicGroupInfo="musicGroupInfo"
          />
        </el-tab-pane>
        <el-tab-pane
          label="课表详情"
          lazy
          v-if="permission('/teamCourseListInfo')"
          name="8"
          :disabled="!teamid"
        >
          <courseList v-if="activeIndex == '8'" :teamid="teamid" />
        </el-tab-pane>

        <!--   v-if="permission('/resetTeaming/coursePlan')" -->
        <!-- <el-tab-pane
          label="乐团档案"
          :disabled="!teamid"
          name="13"
          v-if="permission('/teamJournal')"
        >
          <musicArchives :teamid="teamid" v-if="activeIndex == 13" />
        </el-tab-pane> -->
      </tab-router>
    </div>
  </div>
</template>
<script>
import teamBaseInfo from "@/views/teamBuild/components/teamBaseInfo";
// import resetSound from "@/views/resetTeaming/components/resetSoundv2";
import resetSound from "@/views/teamBuild/components/teamSoundSet";
import resetClass from "@/views/teamDetail/components/resetClass";
// import coursePlan from '@/views/teamBuild/teamSeting/components/coursePlan'
// import lookCourse from '@/views/teamBuild/teamSeting/components/lookCourse'
// import improvement from '@/views/teamBuild/teamSeting/components/improvementClass'
import teamSignupList from "@/views/teamBuild/signupList";
import resetPayList from "@/views/resetTeaming/components/resetPayList";
import resetPayListSchool from "@/views/resetTeaming/components/resetPayListSchool";
import studentPayBase from "@/views/resetTeaming/components/studentPayBase";
import musicArchives from "@/views/resetTeaming/components/musicArchices";
import studentList from "@/views/teamDetail/components/studentList";
import teacherList from "@/views/teamDetail/components/teacherList";
import courseList from "@/views/teamDetail/components/courseList";

import forecastNameList from "@/views/teamBuild/forecastNameList";
// import forecastName from "@/views/teamBuild/forecastName";
import musicOrder from "@/views/teamDetail/teamDetailedList";
import teamJournal from "@/views/teamBuild/components/teamJournal";
import teamRemainTime from "@/views/teamBuild/components/teamRemainTime";

import merge from "webpack-merge";
import { permission } from "@/utils/directivePage";
import { getTeamBaseInfo } from "@/api/buildTeam";
import { musicGroupType } from "@/constant";
//    forecastName,
export default {
  components: {
    teamBaseInfo,
    resetSound,
    resetClass,
    resetPayList,
    resetPayListSchool,
    studentPayBase,
    studentList,
    teacherList,
    courseList,

    musicOrder,
    teamJournal,
    teamRemainTime,
    teamSignupList,
    musicArchives,
    forecastNameList
  },
  name: "resetTeaming",
  data() {
    return {
      visible:false,
      activeIndex: "1",
      teamid: "",
      baseInfo: null,
      // permissionStatus: {
      //   teamBaseInfo: true,
      //   resetSound: true,
      //   resetClass: true,
      //   resetSound: true,
      //   coursePlan: true,
      // }
      name: null,
      teamName: "新建乐团",
      musicGroupInfo: null,
      musicGroupType,
      team_status: "",
      archices: require("@/assets/images/base/archices.png"),
      stepImgs: {
        AUDIT_FAILED: require("@/assets/images/base/end.png"),
        CANCELED: require("@/assets/images/base/end.png"),
        CLOSE: require("@/assets/images/base/end.png"),
        PAUSE: require("@/assets/images/base/end.png"),
        PROGRESS: require("@/assets/images/base/ing.png"),
        DRAFT: require("@/assets/images/base/ing.png"),
        AUDIT: require("@/assets/images/base/ing.png"),
        PRE_APPLY: require("@/assets/images/base/ing.png"),
        PRE_BUILD_FEE: require("@/assets/images/base/ing.png"),
        FEE_AUDIT: require("@/assets/images/base/ing.png"),
        APPLY: require("@/assets/images/base/clock.png"),
        PAY: require("@/assets/images/base/pay.png"),
        PREPARE: require("@/assets/images/base/ing.png"),
      },
    };
  },
  created() {
    // this.__init()
  },
  beforeDestroy() {
    // localStorage.setItem('setStep', 0)
    // localStorage.setItem('resetCode', 1)
  },
  mounted() {
    // let obj = {}
    // obj.name = this.activeIndex
    // console.log(this.activeIndex)
    // this.handleClick(obj)
    this.__init();
    // console.log('权限',this.permission('/musicArchices'))
  },
  async beforeRouteLeave(to, from, next) {
    if (this.activeIndex == 1) {
      // console.log(await this.$refs.teamBaseInfo.setStore('go'))
      if (await this.$refs.teamBaseInfo.setStore("go")) {
        next();
      }
    } else {
      next();
    }
  },
  // activated () {
  //   let obj = {}
  //   obj.name = this.activeIndex
  //   this.handleClick(obj)
  //   this.__init()
  // },
  methods: {
    __init() {
      // this.activeIndex = localStorage.getItem('resetCode') || '1';
      this.teamid = this.$route.query.id;
      this.team_status = this.$route.query.team_status;
      if (this.$route.query.tabrouter != 1 && this.teamid) {
        getTeamBaseInfo({ musicGroupId: this.teamid }).then((res) => {
          if (res.code == 200) {
            this.getBaseInfo(res.data);
          }
        });
      }
    },
    onCancel() {
      this.$store.dispatch("delVisitedViews", this.$route);
      this.$router.push({ path: "/teamList" });
    },
    getBaseInfo(baseInfo) {
      if (baseInfo) {
        this.baseInfo = baseInfo;
        if (baseInfo?.musicGroup?.name) {
          this.teamName = baseInfo?.musicGroup?.name;
        }
        this.musicGroupInfo = baseInfo?.musicGroup;
        // 在这里刷新一下 乐团状态 改变url
        //  query: merge(this.$route.query, {
        //                     type: "teamDraft",
        //                     id: res.data,
        //                     team_status: "DRAFT",
        //                   }),
        this.$router.push({
          query: merge(this.$route.query, {
            ...this.$route.query,
            team_status: this.musicGroupInfo.status,
          }),
        });
        this.team_status = this.$route.query.team_status;
        // console.log(this.musicGroupInfo.status);
      } else {
        this.__init();
      }
    },
    handleClick(val) {
      this.teamid = this.$route.query.id;
      // if (val.name != 1 && this.$refs.teamBaseInfo) {
      //   await this.$refs.teamBaseInfo.setStore();
      //   this.activeIndex = val.name
      // }else{
      //   this.activeIndex = val.name
      // }
      // this.team_status = this.$route.query.team_status;
      // console.log('切换tab',val)

      this.$refs.tab.tab(val);
    },
    permission(str) {
      return permission(str);
    },
    getName(val) {
      if (val) {
        this.teamName = val;
      }

      this.teamid = this.$route.query.id;
    },
    checkGoTo() {
      var p = new Promise(async (resolve, reject) => {
        if (this.activeIndex == 1 && this.$refs.teamBaseInfo) {
          if (await this.$refs.teamBaseInfo.setStore("go")) {
            resolve();
          }
        } else {
          resolve();
        }
      });
      return p;
    },
    setpopover(scope) {

      this.$nextTick(()=>{
            // this.visible = true;
            this.$refs.popover.updatePopper();
      })

    },
    gotoArchices() {
      console.log("跳转");
      this.$router.push({
        path: "/business/musicArchices",
        query: { ...this.$route.query },
      });
    },
  },
  watch: {
    //  async activeIndex(val){
    //     if(val != 1&&this.$refs.teamBaseInfo){
    //       await this.$refs.teamBaseInfo.setStore();
    //     }
    //   }
  },
};
</script>
<style lang="scss" scoped>
// AUDIT_FAILED: require("@/assets/images/base/end.png"),
//         CANCELED: require("@/assets/images/base/end.png"),
//         CLOSE: require("@/assets/images/base/end.png"),
//         PAUSE: require("@/assets/images/base/end.png"),

//         PROGRESS: require("@/assets/images/base/ing.png"),
//         DRAFT: require("@/assets/images/base/ing.png"),
//         AUDIT: require("@/assets/images/base/ing.png"),
//         PRE_APPLY: require("@/assets/images/base/ing.png"),
//         PRE_BUILD_FEE: require("@/assets/images/base/ing.png"),
//         FEE_AUDIT: require("@/assets/images/base/ing.png"),
//         APPLYL: require("@/assets/images/base/clock.png"),
//         PAY: require("@/assets/images/base/pay.png"),
//         PREPARE: require("@/assets/images/base/ing.png"),
.msg.PAY {
  color: #f85043;
}
.msg.APPLY {
  color: #f97215;
}
.msg.AUDIT_FAILED,
.msg.CANCELED,
.msg.CLOSE,
.msg.PAUSE {
  color: #777;
}
.msg {
  color: #14928a;
  text-align: right;
  // color: #777;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: 40px;
  top: -55px;
  z-index: 990;
  img {
    width: 36px;
    height: 36px;
    position: relative;
    top: 5px;
    margin-right: 8px;
  }
}
.archices {
  width: 24px;
  height: 24px;
  margin-left: 10px;
  cursor: pointer;
}
.hearConcat {
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  img {
    width: 24px;
    height: 24px;
    position: relative;
    top: 0px;
    margin-right: 8px;
  }
}
/deep/.el-page-header__left {
  align-items: center;
}
.archicesName {
  cursor: pointer;
}
.titleWrap {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>