gdy_qywx_pc/src/views/layout/components/Sidebar/index.vue

<template>
  <el-scrollbar wrapClass="scrollbar-wrapper">
    <el-menu 
      ref="xiu"
      mode="vertical"
      :unique-opened="true"
      :show-timeout="200"
      :default-active="activeIndex"
      :collapse="isCollapse"
      text-color="#303133"
      active-text-color="#26A2FF"
    >
      <!-- :default-openeds="['/performance']" -->
    
      <!-- <div class="logo">
        <img @click="$router.push({path: '/dashboard'})" style="width: 100%; height: 36px; cursor: pointer;" v-if="classObj.hideSidebar" :src="logoUrlMini" alt="">
        <img @click="$router.push({path: '/dashboard'})" v-else style="width: 100%; height: 60px;cursor: pointer;" :src="logoUrl" alt="">
      </div> -->
      <sidebar-item v-for="(item, index) in menu" :key="item.name" :item="item" :base-path="item.path"></sidebar-item>
    </el-menu>
    <!-- <div style="height: 30px;"></div> -->
    <!-- <p style="background-color: rgb(72, 119, 230);color: rgba(175, 199, 255, 0.39);z-index: 1002;text-align: center;left: 0px;position: absolute;font-size: 14px;bottom: 0px;width: 100%;line-height: 30px; height: 30px; margin:0;">功道云 v7.0</p> -->
  </el-scrollbar>
</template>

<script>
import { mapGetters } from 'vuex';
import SidebarItem from './SidebarItem';

export default {
  props: {
    classObj: Object
  },
  data() {
    return {
      menu: [],
      imageUrl: '',
      isSetLogo: false,
      logoImgUrl: 'static/images/logo.png',
      logoImgUrlMini: 'static/images/logo_icon.png',
      activeIndex: this.$route.path
    };
  },
  components: { SidebarItem },
  watch: {
    $route(val) {
      switch (val.path) {
        case '/new_employee':
          this.activeIndex = '/employee_table';
          break;
        case '/examine_unit':
          this.activeIndex = '/performance_review';
          break;
        case '/participation_detail':
          this.activeIndex = '/performance_review';
          break;
        case '/team_detail':
          this.activeIndex = '/team_performance';
          break;
        case '/add_team_performance':
          this.activeIndex = '/team_performance';
          break;
        default:
          this.activeIndex = this.$route.path;
      }
    }
  },
  computed: {
    ...mapGetters(['permission_routers', 'sidebar']),
    isCollapse() {
      return !this.sidebar.opened;
    },
    logoUrl() {
      return this.logoImgUrl;
    },
    logoUrlMini() {
      return this.logoImgUrlMini;
    }
  },
  created() {
    const addRouters = [];
    let mo_list = [];
    let permission_list = [];
    var routerArr = this.$store.getters.addRouters;
    for (let i in mo_list) {
      permission_list.push(mo_list[i].code);
    }
    for (const item in routerArr) {
      const obj = [];
      for (const ritem in routerArr[item].children) {
        if (
          permission_list.indexOf(routerArr[item].children[ritem].name) >= 0 ||
          routerArr[item].children[ritem].hidden === true ||
          routerArr[item].children[ritem].common === true
        ) {
          obj.push(routerArr[item].children[ritem]);
        }
        obj.push(routerArr[item].children[ritem]);
      }
      if (obj.length > 0) {
        const _R = routerArr[item];
        _R['children'] = obj;
        addRouters.push(_R);
      }
    }
    this.menu = addRouters;
    this.$nextTick(() => {
      try {
        this.$refs.xiu.open('', '');
      } catch (e) {}
    });
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$logoUrl: 'static/images/logo.png';
.scrollbar-wrapper .logo {
  width: 100%;
  height: 60px;
  // background-image: url($logoUrl);
  background-repeat: no-repeat;
  background-position: center;
}

.hideSidebar .logo {
  // background-image: url(/static/images/logo_icon.png);
  background-size: 80%;
}
// .scrollbar-wrapper .el-menu:before{
//   content: " ";
//   width: 100%;
//   height: 60px;
//   background-image: url(/static/images/logo.png);
//   background-repeat: no-repeat;
//   background-position: center;
// }

.el-menu--popup {
  background: #5b8bf7;
}
// .hideSidebar .el-menu:before{
//   background-image: url(/static/images/logo_icon.png);
//   background-size: 80%;
// }
</style>
<style>
.scrollbar-wrapper .avatar-uploader .el-upload {
  width: 100%;
}
</style>