dy-admin-manager/src/views/workBenchManager/journal/index11.vue

<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>
      系统日志
    </h2>
    <div class="m-core">
      <location-hash v-model="activeIndex" @change="handleClick">
        <el-tabs
          type="border-card"
          v-model.trim="activeIndex"
          @tab-click="handleClick"
        >
          <el-tab-pane
            label="系统通知" lazy
            v-if="permissionList.journalItem"
            name="0"
          >
            <item v-if="activeIndex == 0" />
          </el-tab-pane>
          <el-tab-pane
            label="学员申诉" lazy
            v-if="permissionList.studentComplain"
            name="1"
          >
            <studentComplain v-if="activeIndex == 1" />
          </el-tab-pane>
          <el-tab-pane
            label="退团退课" lazy
            v-if="permissionList.musicGroupCourse"
            name="2"
          >
            <musicGroup v-if="activeIndex == 2" />
          </el-tab-pane>
          <el-tab-pane
            label="请假处理" lazy
            v-if="permissionList.leaveOperation"
            name="3"
          >
            <leaveOperation v-if="activeIndex == 3" />
          </el-tab-pane>
          <el-tab-pane
            label="VIP申请审核" lazy
            v-if="permissionList.vipApply"
            name="4"
          >
            <vipApply v-if="activeIndex == 4" />
          </el-tab-pane>
        </el-tabs>
      </location-hash>
    </div>
  </div>
</template>
<script>
import item from "./journalItem";
import studentComplain from "./studentComplain";
import musicGroup from "./musicGroup";
import leaveOperation from "./leaveOperation";
import vipApply from "./vipApply";
import { permission } from "@/utils/directivePage";
export default {
  components: {
    item,
    studentComplain,
    musicGroup,
    leaveOperation,
    vipApply
  },
  name: "journal",
  data() {
    const query = this.$route.query
    return {
      activeIndex: query.opt || "0",
      permissionList: {
        journalItem: permission("/journalItem"),
        studentComplain: permission("/studentComplain"),
        musicGroupCourse: permission("/musicGroupCourse"),
        leaveOperation: permission("/leaveOperation"),
        vipApply: permission("/vipApply")
      }
    };
  },
  methods: {
    handleClick(val) {
      this.activeIndex = val.name;
    }
  }
};
</script>
<style lang="scss" scoped></style>