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

<template>
  <el-scrollbar wrapClass="scrollbar-wrapper">
    <div class="sideColumn">
       <!-- <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>       -->
       {{ navTitle }}
    </div>
    <el-menu
      mode="vertical"
      :unique-opened="uniqueOpened"
      :show-timeout="200"
      :default-active="$route.path"
      background-color="#f3f5f6"
      text-color="#000"
      active-text-color="#409EFF"
    >
      <sidebar-item v-for="route in arr" :key="route.name" :item="route" :base-path="route.path"></sidebar-item>
    </el-menu>
  </el-scrollbar>
</template>

<script>
import { mapGetters } from "vuex";
import SidebarItem from "./SidebarItem";
import Hamburger from "@/components/Hamburger";


export default {
  props:{
    navTitle:String
  },
  components: { SidebarItem,Hamburger },
  computed: {
    ...mapGetters(["permission_routers", "sidebar"]),
    isCollapse() {
      return !this.sidebar.opened;
    }
  },
  data(){
    return{
      uniqueOpened:true,
      arr:[]
    }
  },
  methods:{
    toggleSideBar() {
      this.$store.dispatch("toggleSideBar");
    },
  },
  created(){
    if(this.navTitle == '透析管理'){
      let nameArr = ['home','workforce', 'dialysisrecord', 'dialysis', 'medicalScheduling', 'signIndex', 'qcd', 'device', 'quality_control'];
      // console.log('permission_routers',this.permission_routers)
      let routerArr = [];
      this.permission_routers.map(item => {
        if(nameArr.indexOf(item.name) > -1){
          routerArr.push(item)
        }
      });
      this.arr = routerArr
    }else if(this.navTitle == '电子病历'){
      this.arr = []
    }

    // let a = this.permission_routers
    // this.arr = a.slice(0,10)
    // console.log('this.arr',this.arr)
  },
  watch:{
    navTitle:{
      handler(newVal,oldVal){
        if(newVal == 'HIS管理'){
          let nameArr = ['hospitalStation','hospitalRecord','hospitalCharges','hisTool','outpatientRegistration','outpatientDoctorStation','outpatientCharges','outpatientPharmacy','outpatientRecord',];
          // console.log('permission_routers',this.permission_routers)
          let routerArr = [];
          this.permission_routers.map(item => {
            if(nameArr.indexOf(item.name) > -1){
              routerArr.push(item)
            }
          });
          this.arr = routerArr;
          if(this.arr.length > 0){
            let a = true;
            this.$emit('func',a)
          }else{
            let a = false;
            this.$emit('func',a)
          }
        }else if(newVal == '电子病历'){
          let nameArr = ['User','createPatient'];
          // console.log('permission_routers',this.permission_routers)
          let routerArr = [];
          this.permission_routers.map(item => {
            if(nameArr.indexOf(item.name) > -1){
              routerArr.push(item)
            }
          });
          this.arr = routerArr;
          if(this.arr.length > 0){
            let a = true;
            this.$emit('func',a)
          }else{
            let a = false;
            this.$emit('func',a)
          }
        }else if(newVal == '透析管理'){
          let nameArr = ['home','workforce', 'dialysisrecord', 'dialysis', 'medicalScheduling', 'signIndex', 'qcd', 'device', 'quality_control'];
          // console.log('permission_routers',this.permission_routers)
          let routerArr = [];
          this.permission_routers.map(item => {
            if(nameArr.indexOf(item.name) > -1){
              routerArr.push(item)
            }
          });
          console.log('routerArr',routerArr);
          this.arr = routerArr;
          if(this.arr.length > 0){
            let a = true;
            this.$emit('func',a)
          }else{
            let a = false;
            this.$emit('func',a)
          }
        }else if(newVal == '库房管理'){
          let nameArr = ['stockManage','stockDrugs','selfPreparedMedicine','inventoryTransfer','wareHouseManage','otherManagement'];
          let routerArr = [];
          this.permission_routers.map(item => {
            if(nameArr.indexOf(item.name) > -1){
              routerArr.push(item)
            }
          });
          this.arr = routerArr;
          if(this.arr.length > 0){
            let a = true;
            this.$emit('func',a)
          }else{
            let a = false;
            this.$emit('func',a)
          }
        }else if(newVal == "采购管理"){
          let nameArr = ['supplyManage','supplyList'];
          let routerArr = [];
          this.permission_routers.map(item => {
            if(nameArr.indexOf(item.name) > -1){
              routerArr.push(item)
            }
          });
          this.arr = routerArr;
          if(this.arr.length > 0){
            let a = true;
            this.$emit('func',a)
          }else{
            let a = false;
            this.$emit('func',a)
          }
        }else if(newVal == '配置管理'){
          let nameArr = ['system','roleManage','DepartManage', 'bedManagement', 'dictionaryManagement', 'templateManagement','showconfig','printTemplate','integration_config','basicConfig'];
          // console.log('permission_routers',this.permission_routers)
          let routerArr = [];
          this.permission_routers.map(item => {
            if(nameArr.indexOf(item.name) > -1){
              routerArr.push(item)
            }
          });
          this.arr = routerArr;
          if(this.arr.length > 0){
            let a = true;
            this.$emit('func',a)
          }else{
            let a = false;
            this.$emit('func',a)
          }
        }else {
          this.arr = [];
          if(this.arr.length > 0){
            let a = true;
            this.$emit('func',a)
          }else{
            let a = false;
            this.$emit('func',a)
          }
        }
      },
      deep:true,
      immediate: true
    }
  }
};
</script>

<style  rel="stylesheet/scss" lang="scss" scoped>
.sideColumn{
  // background-color: rgb(48, 65, 86);
  background-color:#fff;
  text-align: center;
  height:50px;
  line-height: 50px;
  border-top:1px solid #e5e5e5;
  border-bottom:1px solid #e5e5e5;
  // color: rgb(191, 203, 217);
  color:#000;
.head {
  text-align: center;
  padding: 20px 0 0 0;
  .tx {
    .img {
      width: 45px;
      height: 45px;
      border-radius: 50%;
      -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center;
    }
  }
  .title {
    font-size: 14px;
    color: #bfcbd9;
    padding: 10px 10px 15px 10px;
    line-height: 22px;

  }
}
.headShrink{
  .tx{
    .img{
      width: 30px;
      height: 30px;
    }

  }
  .title{
    display: none;
  }
}
}


</style>

<style lang="scss">
.el-scrollbar__thumb{
  height:0 !important;
}
.scrollbar-wrapper::-webkit-scrollbar{
  width:0 !important;
}
</style>