mosr-web/src/layout/navbar/index.vue

<template>
  <div class="navbar">
    <Hamburger></Hamburger>
    <Breadcrumb></Breadcrumb>
    <div class="right-bar">
      <!--        <bell-socket/>-->
      <div class="user-box">
        <div>
          <el-avatar>{{ userInfo.nickName }}</el-avatar>
          <div @click.stop="handleVisitedP">{{ userInfo.nickName }}
            <el-icon style="margin-left: 5px">
              <ArrowDownBold/>
            </el-icon>
          </div>
        </div>
        <div class="person" v-if="visitedP">
          <ul>
            <li>主次账号切换</li>
            <li class="avatar-li" v-for="item in accountList" @click="accountChange(item.userId)">
              <el-avatar><span>{{ item.nickName }}</span></el-avatar>
              <div class="right-li">
                <div class="name-line">
                  <span v-if="item.accountType==='0'" class="zhu">主</span>
                  <span class="nickName">{{ item.nickName }}</span>
                  <span>{{ item.jobActivityDesc }}</span>
                </div>
                <div>
                  <span :title="item.companyName+'/'+item.departmentName">{{ item.companyName }}/{{
                      item.departmentName
                    }}</span>
                </div>
              </div>
              <div>
                <el-icon color="#3f89dc" size="20" v-if="item.current">
                  <SuccessFilled/>
                </el-icon>
              </div>
              <!--              <li v-for="item in accountList" :label="item.userName" :value="item.userId"/>-->
            </li>
            <!--            <li @click="handleToAuth">-->
            <!--              <el-icon color="gray" size="20" style="margin-right: 5px">-->
            <!--                <UserFilled/>-->
            <!--              </el-icon>-->
            <!--              个人中心-->
            <!--            </li>-->
            <li @click="handleLogout">
              <el-icon color="gray" size="20" style="margin-right: 5px">
                <SwitchButton/>
              </el-icon>
              退出登录
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from 'vue-router';
import Breadcrumb from './Breadcrumb.vue';
import Hamburger from './Hamburger.vue';
import {useAuthStore} from '@/stores/userstore.js'
import {usePermisstionStroe} from '@/stores/permisstion'
import {useTagsView} from '@/stores/tagsview';
import {getUserAccount} from "@/api/user/user";
import {switchAccount} from "@/api/login";
import {setToken} from "../../utils/auth";

const authStore = useAuthStore()
const permisstionStore = usePermisstionStroe()
const tagsViewStore = useTagsView()
const userInfo = ref({})
const visitedP = ref(false)
const accountList = ref([])
const router = useRouter()
onMounted(() => {
  setUserInfo()
  document.addEventListener('click', nullBlockClick)
})
onBeforeUnmount(() => {
  document.removeEventListener('click', nullBlockClick)
})
const setUserInfo = () => {
  userInfo.value = authStore.userinfo
}
const nullBlockClick = () => {
  visitedP.value = false
}
const handleVisitedP = () => {
  getUserAccount().then(res => {
    console.log(res)
    accountList.value = res.data
    nextTick(() => {
      visitedP.value = !visitedP.value
    })
  })
}

const accountChange = (userId) => {
  switchAccount(userId).then(res => {
    if (res.code == 1000) {
      visitedP.value = !visitedP.value
      authStore.userLogout()
      setToken(res.data)
      router.push('/')
      location.reload()
      visitedP.value = false
    }
  })
}

const handleToAuth = () => {
  visitedP.value = !visitedP.value
  router.push('/auth')
}
const handleLogout = () => {
  visitedP.value = !visitedP.value
  authStore.userLogout()
  permisstionStore.removeMenu()
  permisstionStore.setIsSuccessReq()
  tagsViewStore.removeAllTagView()
  router.push('/login')
}

</script>

<style lang="scss" scoped>
:deep(.el-avatar--circle) {
  display: inline-block;
  line-height: 40px;
  margin-right: 10px;
  background-color: #8a7243;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.navbar {
  height: 65px;
  padding: 0 15px 0 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
  border-radius: 10px;

  .right-bar {
    margin-left: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .user-box {
      cursor: pointer;
      margin-left: 10px;
      position: relative;

      > div:first-child {
        display: flex;
        align-items: center;

        > div {
          display: flex;
          align-items: center;
        }

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          cursor: pointer;
          border: 1px solid #418DFF;
        }
      }


      .person {
        font-size: 14px;
        color: #666666;
        position: absolute;
        width: 280px;
        right: 0;
        z-index: 300;
        top: 54px;
        padding: 5px 0;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: 2px 2px 2px 1px rgb(171, 167, 167);

        .avatar-li {
          display: flex;
          height: 60px;

          .right-li {
            color: #909090;
            display: flex;
            flex-direction: column;

            .name-line {
              margin-bottom: 5px;
              width: 184px;
              -webkit-line-clamp: 1;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;

              .zhu {
                display: inline-block;
                width: 20px;
                height: 20px;
                line-height: 20px;
                background-color: #fa0;
                color: #fff;
                text-align: center;
              }

              .nickName {
                color: #4d7ad8;
              }

              > span {
                margin-right: 5px;
              }
            }

            > div:last-child {
              width: 194px;
              -webkit-line-clamp: 1;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
        }

        li {
          padding: 0 6px;
          height: 28px;
          display: flex;
          align-items: center;
          text-align: left;
          font-size: 14px;
          cursor: pointer;
          border-bottom: 1px solid #e6e6e6;

          &:hover {
            color: #666666 !important;
            background-color: #eaeaea;
          }

          &:first-child:hover {
            background-color: #fff;
          }

          &:last-child {
            border-bottom: none;
          }
        }
      }
    }
  }
}
</style>