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

<template>
  <div class="m-container">
    <h2 class="musicGroupInfo">
      <el-page-header @back="onCancel">
        <template slot="content">
          <div class="page-headers">
            <p>{{ teamName }}</p>
            <p v-if="teamid" class="page-headers-id">（{{ teamid }}）</p>

            <span class="musicGroupStatus"
              ><img
                :src="stepImgs[team_status]"
                alt=""
                v-if="stepImgs[team_status]"
              />
              {{ musicGroupType[team_status] }}</span
            >
          </div>
        </template>
      </el-page-header>
      <div class="musicGroupOperation">
        <!-- 进行中才有乐团档案 -->
        <span
          class="item"
          @click="gotoArchices"
          v-if="permission('/musicArchices') && team_status == 'PROGRESS'"
        >
          乐团档案
        </span>
        <i
          class="line"
          v-if="
            permission('/musicArchices') &&
              team_status == 'PROGRESS' &&
              permission('recharge/findAll')
          "
        ></i>
        <span
          class="item"
          @click="journalVisible = true"
          v-if="permission('recharge/findAll')"
          >操作日志</span
        >
        <!-- <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>
    </h2>
    <el-dialog
      title="操作日志"
      :visible.sync="journalVisible"
      width="1000px"
      v-if="journalVisible"
      append-to-body
    >
      <teamJournal :teamid="teamid" />
    </el-dialog>
    <div class="m-core">
      <!-- <el-popover
        placement="left"
        :append-to-body="false"
        width="1000"
        trigger="hover"
        ref="popover"
        :open-delay="500"
        @show="setpopover()"
      >
        <teamJournal :teamid="teamid" />
        <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'" @handleClick="handleClick" />
        </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
          lazy
          label="预报名信息"
          name="9"
          :disabled="!teamid"
          v-if="permission('/teamForecastNameIndex')"
        >
          <!--         v-if="
            team_status == 'PRE_APPLY' ||
            team_status == 'DRAFT' ||
            team_status == 'FEE_AUDIT' ||
            team_status == 'APPLY'
          " -->
          <forecastNameList
            v-if="activeIndex == '9'"
            @changeActive="handleClick"
            :isedit="team_status == 'PRE_APPLY'"
          />
        </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>
        <el-tab-pane
          label="待激活学练宝"
          v-if="permission('/giveMemberList')"
          name="13"
          :disabled="!teamid"
        >
          <giveMemberList :teamid="teamid" v-if="activeIndex == '13'" />
        </el-tab-pane>
        <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="14">
          <convertList :teamid="teamid" v-if="activeIndex == 14" />
        </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 giveMemberList from "@/views/resetTeaming/components/giveMemberList";
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 convertList from "@/views/teamDetail/components/convertList";
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,
    giveMemberList,
    convertList
  },
  name: "resetTeaming",
  data() {
    return {
      visible: false,
      activeIndex: "1",
      teamid: "",
      journalVisible: false,
      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("./images/7.png"),
        CANCELED: require("./images/10.png"),
        CLOSE: require("./images/8.png"),
        PAUSE: require("./images/9.png"),
        PROGRESS: require("./images/13.png"),
        DRAFT: require("./images/2.png"),
        AUDIT: require("./images/1.png"),
        PRE_APPLY: require("./images/3.png"),
        DRAFT: require("./images/5.png"),
        FEE_AUDIT: require("./images/6.png"),
        FEE_AUDIT_FAILED: require("./images/6.png"),
        APPLY: require("./images/4.png"),
        PAY: require("./images/12.png"),
        PREPARE: require("./images/11.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) {
      console.log(val, "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>
.musicGroupInfo {
  justify-content: space-between;
}
.page-headers {
  display: flex;
  align-items: center;
}
.page-headers-id {
  font-size: 16px;
  font-weight: 400;
}
.musicGroupStatus {
  display: flex;
  align-items: center;
  font-size: 22px;
  color: #262626;
  img {
    margin: 0 10px 0 40px;
    width: 27px;
    height: 27px;
  }
}
.musicGroupOperation {
  display: flex;
  align-items: center;
  .item {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-primary);
    line-height: 22px;
    cursor: pointer;
  }
  .line {
    display: inline-block;
    width: 1px;
    height: 16px;
    background: #dddfe6;
    margin: 0 10px;
    padding: 0;
  }
}

.msg.PAY {
  color: #f85043;
}
.msg.APPLY {
  color: #f97215;
}
.msg.AUDIT_FAILED,
.msg.CANCELED,
.msg.CLOSE,
.msg.PAUSE {
  color: #777;
}
.msg {
  color: var(--color-primary);
  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;
  }
}
::v-deep .el-page-header__left {
  align-items: center;
}
.archicesName {
  cursor: pointer;
}
.titleWrap {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>