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

<template>
  <div class="m-container">
    <h2>
      <el-page-header @back="onCancel" :content="teamName"></el-page-header>
    </h2>
    <div class="m-core">
      <p class="msg" :class="team_status" v-if="team_status">
        <img :src="stepImgs[team_status]" alt="" />
        {{ musicGroupType[team_status] }}
      </p>
      <!-- navMenu -->
      <tab-router v-model="activeIndex" type="card" ref="tab">
        <!-- @tab-click="handleClick" -->
        <el-tab-pane
          label="基本信息"
          lazy
          v-if="permission('/teamBaseInfo')"
          name="1"
        >
          <!--  v-if="activeIndex == 'teamBaseInfo'" -->
          <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('/teamForecastName')"
        >
          <!--         v-if="
            team_status == 'PRE_APPLY' ||
            team_status == 'PRE_BUILD_FEE' ||
            team_status == 'FEE_AUDIT' ||
            team_status == 'APPLY'
          " -->
          <forecastName
            v-if="activeIndex == '9'"
            :isedit="team_status == 'PRE_APPLY'"
          />
        </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>
        <el-tab-pane
          label="学员缴费设置"
          lazy
          v-if="permission('/teamStudentPayList')"
          name="3"
          :disabled="!teamid"
        >
          <resetPayList
            :baseInfo="baseInfo"
            v-if="activeIndex == '3' && baseInfo"
            @changeActive="handleClick"
          />
        </el-tab-pane>
        <el-tab-pane
          label="学校缴费设置"
          lazy
          v-if="permission('/teamSchoolPayList')"
          name="6"
          :disabled="!teamid"
        >
          <resetPayListSchool
            :baseInfo="baseInfo"
            v-if="activeIndex == '6' && baseInfo"
            @changeActive="handleClick"
          />
        </el-tab-pane>
        <!--   v-if="permission('/resetTeaming/coursePlan')" -->
        <el-tab-pane
          label="乐团日志"
          :disabled="!teamid"
          name="11"
          v-if="permission('/teamJournal')"
        >
          <teamJournal :teamid="teamid" v-if="activeIndex == 11" />
        </el-tab-pane>
        <!-- <el-tab-pane label="新增小班课"
                     name="5">
          <improvement :teamid='teamid' />
        </el-tab-pane> 1-->
        <!-- 啦啦啦 -->
      </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 resetPayList from "@/views/resetTeaming/components/resetPayList";
import resetPayListSchool from "@/views/resetTeaming/components/resetPayListSchool";
import studentPayBase from "@/views/resetTeaming/components/studentPayBase";
import studentList from "@/views/teamDetail/components/studentList";
import teacherList from "@/views/teamDetail/components/teacherList";
import courseList from "@/views/teamDetail/components/courseList";
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 { permission } from "@/utils/directivePage";
import { getTeamBaseInfo } from "@/api/buildTeam";
import { musicGroupType } from "@/constant";
export default {
  components: {
    teamBaseInfo,
    resetSound,
    resetClass,
    resetPayList,
    resetPayListSchool,
    studentPayBase,
    studentList,
    teacherList,
    courseList,
    forecastName,
    musicOrder,
    teamJournal,
    teamRemainTime,
  },
  name: "resetTeaming",
  data() {
    return {
      activeIndex: "1",
      teamid: "",
      baseInfo: null,
      // permissionStatus: {
      //   teamBaseInfo: true,
      //   resetSound: true,
      //   resetClass: true,
      //   resetSound: true,
      //   coursePlan: true,
      // }
      name: null,
      teamName: "新建乐团",
      musicGroupInfo: null,
      musicGroupType,
      team_status: "",
      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();
  },
  // 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) {
      this.baseInfo = baseInfo;
      this.teamName = baseInfo?.musicGroup?.name;
      this.musicGroupInfo = baseInfo?.musicGroup;
    },
    handleClick(val) {
      this.teamid = this.$route.query.id;
      // this.team_status = this.$route.query.team_status;
      // console.log('切换tab',val)
      this.$refs.tab.tab(val);
      // this.activeIndex = val.name;
    },
    permission(str) {
      return permission(str);
    },
    getName(val) {
      this.teamName = val;
      this.teamid = this.$route.query.id;
    },
  },
};
</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;
  position: absolute;
  right: 40px;
  top: -55px;
  img {
    width: 36px;
    height: 36px;
    position: relative;
    top: 5px;
    margin-right: 8px;
  }
}
</style>