gongdan/ruoyi-ui-gongdan/src/layout/components/Navbar.vue

<template>
  <div class="navbar">
    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
    <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/> -->
    <!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/> -->
    <!-- <div class="sign_box">
      <div class="sign_item" :class="{active: activeMenu.includes((item.path||item.redirect))}"  v-for="(item,index) in this.sidebarRouters.filter(res => {
            return res.hidden == false || res.redirect == 'index'
          })" :key="index"
        @click="tabBtn(item)">
        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
        <item v-if="!item.meta" :icon="item.meta && item.meta.icon" :title="'首页'" />
      </div>
    </div> -->
    <div class="right-menu" style="display: flex;align-items: center;">
			<!-- <el-select
			  v-model="companyName"
			  clearable
			  filterable
			  reserve-keyword
			  placeholder="选择小区"
			  v-if="userId === 1 && tenantEnabled"
			  @change="dynamicTenantEvent"
			  @clear="dynamicClearEvent"
			>
			  <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
			  <template ><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
			</el-select>
      <el-select
        v-model="companyName"
        clearable
        filterable
        reserve-keyword
        placeholder="选择小区"
        v-if="userId != 1 && (tenantListtw.length !=0 && tenantListtw.length !=1)"
        @change="dynamicTenantEventg"
        @clear="dynamicClearEvent"
      >
        <el-option v-for="item in tenantListtw" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option>
        <template ><svg-icon icon-class="company" class="el-input__icon input-icon" /></template>
      </el-select> -->
      <!-- <template v-if="device!=='mobile'">
        <search id="header-search" class="right-menu-item" />

        <el-tooltip content="源码地址" effect="dark" placement="bottom">
          <ruo-yi-git id="ruoyi-git" class="right-menu-item hover-effect" />
        </el-tooltip>

        <el-tooltip content="文档地址" effect="dark" placement="bottom">
          <ruo-yi-doc id="ruoyi-doc" class="right-menu-item hover-effect" />
        </el-tooltip>

        <screenfull id="screenfull" class="right-menu-item hover-effect" />

        <el-tooltip content="布局大小" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect" />
        </el-tooltip>

      </template> -->

      <el-dropdown  class="avatar-container right-menu-item hover-effect nhdes"  trigger="hover" >
		  <!-- <img src="../../assets/images/pic_htgl_grxx_bg.png" class="imgse" > -->
		  <div class="nhse ">
        <div class="avatar-wrapper  el-dropdown-link">
          <img :src="avatar" class="user-avatar">

        </div>
			<div class="acnes ">
						  <p>
							  <!-- <img src="../../assets/images/icon_htgl_hzh.png" > -->
						  			  <span >
						  			  	{{name}}
						  			  </span>
						  </p>

			</div>
      <i style="color: #333; opacity: 0.7;display: flex;align-items: center;" class="el-icon-caret-bottom " />
      <!-- <i class="el-icon-caret-bottom" /> -->

		  </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/user/profile">
            <el-dropdown-item>个人中心</el-dropdown-item>
          </router-link>
          <el-dropdown-item @click.native="setting = true">
            <span>布局设置</span>
          </el-dropdown-item>
          <el-dropdown-item divided @click.native="logout">
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <template>

        <p style="display: flex;align-items: center;width:80px; cursor:pointer; " @click="logouth">
             <!-- <img src="../../assets/images/icon_htdh_tc.png" class="user-avatar" style="width:13px;height:16px;margin-right: 10px;"> -->
             <span style="font-weight: bold;font-size: 16px;color: #343434;">退出</span>
          </p>
      </template>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import TopNav from '@/components/TopNav'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import SizeSelect from '@/components/SizeSelect'
import Search from '@/components/HeaderSearch'
import RuoYiGit from '@/components/RuoYi/Git'
import RuoYiDoc from '@/components/RuoYi/Doc'
import { getCodeImg,register,getTenantList,getInfo } from "@/api/login";
// import { dynamicClear, dynamicTenant,userNamet,dynamicTenantgw } from "@/api/zhihuixy/tenant";
import { getToken, setToken, removeToken } from '@/utils/auth'

export default {
  components: {
    Breadcrumb,
    TopNav,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search,
    RuoYiGit,
    RuoYiDoc
  },

  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'device',
	    'name',
			'userId',
      'dept',
      'rolesName',
	  "sidebarRouters", "sidebar", "tabIndex"
    ]),
	activeMenu() {
	  return this.tabIndex;
	},
    setting: {
      get() {
        return this.$store.state.settings.showSettings
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'showSettings',
          value: val
        })
      }
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav
      }
    }
  },
	data() {
	  return {
	    tenantEnabled:true,
			tenantList:[],
		  companyName:null,
      tenantListtw:[],
      usename:'',
      timer:null,
	  };
	},

  created() {
  	console.log(this.$store.state.user)
    this.usename = this.$store.state.user.name
    // this.avatar = this.$store.state.user.avatar
    // if(this.$store.getters.authenticationUser =='4' || this.$store.getters.authenticationUser =='3'){
    //   if(this.usename =='admin'){
    //     console.log(5)
    //     this.getnhgw()
    //   }else{
    //     if(sessionStorage.getItem('companyName') != null ){
    //       if(sessionStorage.getItem('companyName') != undefined ){
    //         this.companyName = sessionStorage.getItem('companyName')
    //       }
    //     }
    //     console.log(3)
    //     this.getnhgwon()
    //   }
    // }

  },
  mouted(){
    // this.$nextTick(()=>{
                   let router_path = this.$route.path
                   console.log(router_path)    // 输出当前页面的路由，如：/home
               // })

  },

  methods: {
		getnhgw(){
		  // this.loading = true;
		  getTenantList().then(response => {
			  // this.tenantEnabled = response.data.tenantEnabled
		    this.tenantList = response.data.voList;
		    // this.loading = false;
		  });
		},
    getnhgwon(){
      // this.loading = true;
      let ngse={'userName': this.usename}
      userNamet(ngse).then(response => {
    	  // this.tenantEnabled = response.data.tenantEnabled
        this.tenantListtw = response.data;
        if(response.data.length !=0 || response.data.length !=1){
          this.tenantEnabled = false
        }


        // this.loading = false;
      });
    },
		dynamicTenantEvent(){
			if (this.companyName != null && this.companyName !== '') {
			  dynamicTenant(this.companyName).then(response => {
			  	this.dynamic = true;
			  	this.$tab.closeAllPage();
			  	this.$router.push('/');
			  });
			}
		},

    dynamicTenantEventg(){
    	if (this.companyName != null && this.companyName !== '') {
        sessionStorage.setItem('companyName', this.companyName)
        let ngpw={'tenantId':this.companyName,'clientId':'e5cd7e4891bf95d1d19206ce24a7b32e','grantType':'password'}
    	  // dynamicTenantgw ngpw
        dynamicTenantgw(ngpw).then(response => {
    	  	this.dynamic = true;
           setToken(response.msg)
           let ngse={'userName': this.usename}
           getInfo().then(response => {
             // this.loading = false;
             this.$router.push('/');
             this.$tab.closeAllPage();
             setTimeout(() => {
               location.reload(true)
                             }, 1000)
             //
             // location.reload(true)

             this.companyName = response.data.user.tenantId
           });
    	  	// this.$tab.closeAllPage();
    	  	// this.$router.push('/');
    	  });
    	}
    },
		dynamicClearEvent(){
			dynamicClear().then(response => {
				this.dynamic = false;
				this.$tab.closeAllPage();
				this.$router.push('/');
			});
		},
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
	tabBtn(item) {
	  console.log(item)
	  if(this.activeMenu.includes((item.path||item.redirect))){
	    return
	  }
	  this.$store.dispatch('app/toggleSideBartwo')
	  if (item.redirect == 'index') {
	    if(this.$route.path!=='/index'){
	      this.$router.push({
	        path: '/index'
	      })
	    }
	    this.$store.dispatch('TabFn', item.redirect)
	    return
	  }
	  this.$store.dispatch('TabFn', item.path)
	  this.showde = true

	},
	init() {
	  const route = this.$route;
	  const {
	    meta,
	    path
	  } = route;
	  // if set path, the sidebar will highlight the path you set
	  console.log(route,13)
	  if (meta.activeMenu) {
	    this.$store.dispatch('TabFn', meta.activeMenu)
	  }
	  this.$store.dispatch('TabFn', path)
	},
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         sessionStorage.removeItem('companyName')
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {});
    },
    async logouth() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        sessionStorage.removeItem('companyName')
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {});
    }
  }
}
</script>
<style lang="scss">
	.nhdes{
		position: relative;
		z-index: 99;
		.el-button-group>.el-button{
			border: none;
			padding: 0;
		}
		.el-button-group>.el-button:hover{
		  background-color: #fff;
		}
	}
</style>

<style lang="scss" scoped>
	.navbar .right-menu .avatar-container{
		margin-right: 20px;
	}
	.right-menu{
		.el-select{
			// top:-17px;
      margin-right: 60px;
		}
	}
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  // background-color: #E7F5F1;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;
    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .topmenu-container {
    position: absolute;
    left: 50px;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 50px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }

    .avatar-container {
      // margin-right: 30px;
	  position: relative;

      .avatar-wrapper {
        margin-top: 5px;
        position: relative;
        z-index: 33;
        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
		  z-index: 33;
        }
      }
    }
  }
}
.nhse{
	display: flex;
	height: 50px !important;
	// background-image: url("../../assets/images/pic_htgl_grxx_bg.png") !important;
   //    background-size: 100% 70px;
	.acnes{
		display: flex;
		height: 100%;
		position: relative;
		z-index: 2;
		align-items: center;
		p{
			font-size: 13px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333;
			margin-right: 10px;
      opacity: 0.7;
      margin-left: 10px;
		}
		img{
			width: 16px;
			height: 16px;
			margin-right: 6px;

		}
	}
}
.imgse{
	position: absolute;
	right: -30px;
	top: 0;
	// filter: drop-shadow(0 0.5px 0.5px black);
	// height: 50px;
}

</style>