dy-admin-manager/src/views/teacherManager/teacherDetail/index.vue

<template>
  <div class='m-container'>
    <h2>
      <el-page-header @back="onCancel"
                      :content="teacherName"></el-page-header>
    </h2>
    <div class="m-core">
      <!-- navMenu -->
      <el-tabs v-model="activeName"
               type="card"
               @tab-click="handleClick">
        <el-tab-pane label="基本信息"
                     v-if="permissionList.teacherInfo"
                     name="0">
          <teacherInfo v-if="activeName == 0" />
        </el-tab-pane>
        <el-tab-pane label="乐团课"
                     v-if="permissionList.musicGroup"
                     name="1">
          <courseInfo v-if="activeName == 1" />
        </el-tab-pane>
        <el-tab-pane label="VIP课"
                     v-if="permissionList.VipCourse"
                     name="2">
          <courseInfo1 v-if="activeName == 2" />
        </el-tab-pane>
        <el-tab-pane label="试听课"
                     v-if="permissionList.domeCourse"
                     name="3">
          <courseInfo2 v-if="activeName == 3" />
        </el-tab-pane>
        <el-tab-pane label="课表详情"
                     v-if="permissionList.teacherRecord"
                     name="4">
          <teacherRecord v-if="activeName == 4" />
        </el-tab-pane>
        <el-tab-pane label="请假记录"
                     v-if="permissionList.leaveRecord"
                     name="5">
          <leaveRecord v-if="activeName == 5" />
        </el-tab-pane>
        <el-tab-pane label="上课结算列表"
                     v-if="permissionList.settlement"
                     name="6">
          <settlement v-if="activeName == 6" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import teacherRecord from '@/views/teacherManager/teacherDetail/components/teacherRecord'
import leaveRecord from '@/views/teacherManager/teacherDetail/components/leaveRecord'
import teacherInfo from '@/views/teacherManager/teacherDetail/components/teacherInfo'
import courseInfo from '@/views/teacherManager/teacherDetail/components/courseInfo'
import courseInfo1 from '@/views/teacherManager/teacherDetail/components/courseInfo1'
import courseInfo2 from '@/views/teacherManager/teacherDetail/components/courseInfo2'
import settlement from '@/views/teacherManager/teacherDetail/components/settlement'
import { permission } from '@/utils/directivePage'
export default {
  components: {    teacherRecord,
    leaveRecord, teacherInfo,
    courseInfo, courseInfo1, courseInfo2, settlement  },
  name: 'teacherDetail',
  data () {
    return {
      teacherName: this.$route.query.teacherName,
      activeName: "0",
      // activeStatus: [true, false, false, false, false, false, false]
      permissionList: {
        teacherInfo: permission('/teacherDetail/teacherInfo'),
        musicGroup: permission('/teacherDetail/musicGroupCourse'),
        VipCourse: permission('/teacherDetail/VIPCourse'),
        domeCourse: permission('/teacherDetail/domeCourse'),
        teacherRecord: permission('/teacherDetail/teacherRecord'),
        leaveRecord: permission('/teacherDetail/leaveRecord'),
        settlement: permission('/teacherDetail/settlement')
      },
      Fsearch: null,
      Frules: null
    }
  },
  activated () {
    this.teacherName = this.$route.query.teacherName
    if (this.$route.query.search) {
      this.Fsearch = this.$route.query.search;
    }
    if (this.$route.query.rules) {
      this.Frules = this.$route.query.rules
    }
  },

  created () {
    if (this.$route.query.search) {
      this.Fsearch = this.$route.query.search;
    }
    if (this.$route.query.rules) {
      this.Frules = this.$route.query.rules
    }
  },
  methods: {
    handleClick (val, event) {
      this.activeName = val.name
      // this.activeStatus[val.name] = true
    },
    onCancel () {
      this.$router.push({ path: '/business/teacherList', query: { rules: this.Frules, search: this.Fsearch } })
    }
  }
}
</script>
<style lang="scss">
</style>