elizebeth/src/views/layout/Layout.vue

<template>
  <div class="app-wrapper" :class="classObj">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"></div>
    
    <div class="mainBox">
      <div class="navLeft">
        <div v-if="menzhenShow" :class="index == 0 ? 'navOne navActive' : 'navOne'" @click="clickActive(0,'门诊管理')">
          <i class="iconfont icon--yishengmenzhen navIcon"></i>
          <p>门诊管理</p>
        </div>
        <div v-if="bingliShow" :class="index == 1 ? 'navOne navActive' : 'navOne'" @click="clickActive(1,'电子病历')">
          <i class="iconfont icon-s_bingli navIcon"></i>
          <p>电子病历</p>
        </div>
        <div v-if="touxiShow" :class="index == 2 ? 'navOne navActive' : 'navOne'" @click="clickActive(2,'透析管理')">
          <i class="iconfont icon-computer_fill navIcon"></i>
          <p>透析管理</p>
        </div>
        <div v-if="kucunShow" :class="index == 3 ? 'navOne navActive' : 'navOne'" @click="clickActive(3,'库存管理')">
          <i class="iconfont icon-kccx navIcon"></i>
          <p>库存管理</p>
        </div>
        <div v-if="kuyishoppingShow" :class="index == 4 ? 'navOne navActive' : 'navOne'" @click="clickActive(4,'酷医商城')">
          <i class="iconfont icon-shangcheng-1 navIcon"></i>
          <p>酷医商城</p>
        </div>
        
        <div class="navOne" @click="open">
          <i class="iconfont icon-manage_fill navIcon"></i>
          <p>更多</p>
        </div>
      </div>
      <sidebar :navTitle="navTitle" v-show="navShow" class="sidebar-container" @func="show"></sidebar>
      <div class="main-container new-main-container" style="flex:1;margin-top:50px;">
        <navbar></navbar>
        
        <!-- <tags-view></tags-view> -->
        <app-main></app-main>
      </div>
    </div>
    <div class="dialogMadol" v-if="sign" @click="close"></div>
    <div class="dialogBox" v-if="sign">
      <div class="dialogBoxTitle">
        <span>更多菜单</span>
        <span @click="close">关闭</span>
      </div>
      <div class="dialogMain">
        <!-- <div class="dialogMainOne" @click="clickActive(5,'库存管理')">
          <div class="dialogIcon">
            <i class="el-icon-menu newIcon"></i>
          </div>
          <p>库存管理</p>
        </div> -->
        <a :href="CDMWebsit()" target="_blank" v-if="this.$store.getters.xt_user.cdm_role_exist">
          <div class="dialogMainOne">
            <div class="dialogIcon">
              <i class="iconfont icon-yiliao newIcon"></i>
            </div>
            <p>慢病管理</p>
          </div>
        </a>
        <a :href="SCRMWebsit()" target="_blank" v-if="this.$store.getters.xt_user.scrm_role_exist">
          <div class="dialogMainOne">
            <div class="dialogIcon">
              <i class="iconfont icon-yingxiao newIcon"></i>
            </div>
            <p>营销管理</p>
          </div>
        </a>
        <!-- <div class="dialogMainOne">
          <div class="dialogIcon">
            <i class="iconfont icon-shujufenxi-jingyinggaikuang newIcon"></i>
          </div>
          <p>经营中心</p>
        </div> -->
        <a :href="MircoMallWebsit()" target="_blank" v-if="this.$store.getters.xt_user.mall_role_exist">
          <div class="dialogMainOne">
            <div class="dialogIcon">
              <i class="iconfont icon-fenxiao newIcon"></i>
            </div>
            <p>分销商城</p>
          </div>
        </a>
        <div v-if="peizhiShow" class="dialogMainOne" @click="clickActive(11,'配置管理')">
          <div class="dialogIcon">
            <i class="iconfont icon-setup_fill newIcon"></i>
          </div>
          <p>配置管理</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { Navbar, Sidebar, AppMain, TagsView } from './components'
import ResizeMixin from './mixin/ResizeHandler'

export default {
  name: 'layout',
  components: {
    Navbar,
    Sidebar,
    AppMain,
    TagsView
  },
  mixins: [ResizeMixin],
  data(){
    return{
      index:2,
      navTitle:'透析管理',
      sign:false,
      navShow:true,
      //
      menzhenShow:true,
      bingliShow:true,
      touxiShow:true,
      kucunShow:true,
      peizhiShow:true,
      kuyishoppingShow:true,
    }
  },
  created(){
    console.log('permission_routers',this.permission_routers)
    let menzhen = ['outpatientRegistration','outpatientDoctorStation','outpatientCharges','outpatientPharmacy']
    let bingli = ['User','createPatient']
    let touxi = ['workforce', 'dialysisrecord', 'dialysis', 'medicalScheduling', 'signIndex', 'qcd', 'quality_control']
    let kucun = ['stockManage','selfPreparedMedicine','stockDrugs','otherManagement']
    let peizhi = ['system','roleManage','dictionary','specialDictionary','template','prescription','druguse','showconfig','printTemplate']
    let kuyishopping = ['kuyiShopping']
    let menzhenArr = []
    let bingliArr = []
    let touxiArr = []
    let kucunArr = []
    let peizhiArr = []
    let kuyishoppingArr = []
    this.permission_routers.map(item => {
      if(menzhen.indexOf(item.name) > -1){
        menzhenArr.push(item)
      }else if(bingli.indexOf(item.name) > -1){
        bingliArr.push(item)
      }else if(touxi.indexOf(item.name) > -1){
        touxiArr.push(item)
      }else if(kucun.indexOf(item.name) > -1){
        kucunArr.push(item)
      }else if(peizhi.indexOf(item.name) > -1){
        peizhiArr.push(item)
      }else if(kuyishopping.indexOf(item.name) > -1){
        kuyishoppingArr.push(item)
      }
    })
    // console.log('menzhenArr.length',menzhenArr.length)
    // console.log('bingliArr.length',bingliArr.length)
    // console.log('touxiArr.length',touxiArr.length)
    // console.log('kucunArr.length',kucunArr.length)
    // console.log('peizhiArr.length',peizhiArr.length)
    // console.log('kuyishoppingArr.length',kuyishoppingArr.length)
    if(menzhenArr.length == 0){
      this.menzhenShow = false
    }else if(bingliArr.length == 0){
      this.bingliShow = false
    }else if(touxiArr.length == 0){
      this.touxiShow = false
    }else if(kucunArr.length == 0){
      this.kucunShow = false
    }else if(peizhiArr.length == 0){
      this.peizhiShow = false
    }else if(kuyishoppingArr.length == 0){
      this.kuyishoppingShow = false
    }
  },
  computed: {
    ...mapGetters(["permission_routers"]),
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('closeSideBar', { withoutAnimation: false })
    },
    clickActive(index,title){
      if(index == 4){
        this.$router.push('/kuyiShopping')
      }else if(index == 6){
        this.CDMWebsit()
      }
      this.index = index
      this.navTitle = title
      this.sign = false
    },
    open(){
      this.sign = true
    },
    close(){
      this.sign = false
    },
    show(data){
      this.navShow = data
    },
    SCRMWebsit() {
      return process.env.SRCM_HOST;
    },
    MircoMallWebsit() {
      return process.env.MIRCO_MALL_HOST;
    },
    CDMWebsit() {
      return process.env.CDM_HOST;
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    &.mobile.openSidebar{
      position: fixed;
      top: 0;
    }
  }
  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }
  // .sidebar-container{
  //   position: fixed;
  //   top:50px;
  //   left:0;
  // }
  .navLeft{
    width:80px;
    height:100%;
    background: #1F2D3D;
    margin-top:50px;
    .navOne{
      width:80px;
      height:80px;
      color:#BFCBD9;
      display: flex;
      align-items: center;
      flex-direction: column;
      cursor: pointer;
      .navIcon{
        margin: 16px 0 10px 0;
        font-size: 24px;
      }
    }
    .navActive{
      background: #409EFF;
      color:#fff;
    }
  }
  .mainBox{
    display:flex;
    width:100%;
    height:calc(100% - 50px)
  }
  #app .sidebar-container {
    width: 150px !important;
    height: 100%;
    margin-top:50px;
    overflow: visible;
    background-color: #fff;
  }
  .dialogBox{
    width: 392px;
    height: 400px;
    background: #304155;
    position: fixed;
    bottom:0;
    left:80px;
    z-index:4000;
    .dialogBoxTitle{
      display: flex;
      justify-content: space-between;
      padding:0 16px;
      border-bottom:1px solid #BFCBD9;
      height:44px;
      align-items: center;
      color:#BFCBD9;
      >:last-child{
        cursor: pointer;
      }
    }
    .dialogMain{
      display: flex;
      flex-wrap: wrap;
    }
    .dialogMainOne{
      color:#BFCBD9;
      display: flex;
      align-items: center;
      flex-direction: column;
      margin: 16px;
      .dialogIcon{
        width: 66px;
        height: 66px;
        background: rgba(64, 158, 255, 0.2);
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
      .newIcon{
        margin: 0 auto;
        font-size: 24px;
      }
      >p{
        font-size: 14px;
      }
    }
  }
  .dialogMadol{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background: #000;
    z-index: 3000;
  }
  .new-main-container{
    width: calc(100% - 220px);
  }
</style>