xzlz_GjWeb/src/layout/components/Header.vue

<template>
  <header>
    <div class="logo flex align-center" @click="goToHome">
      <img
        width="45"
        class="mr10"
        src="@/assets/images/jinghui.png"
        alt=""
      />林芝公交管理平台
    </div>
    <div class="right">
      <div><img src="@/assets/images/peo.png" /></div>
      <div class="detail">
        <div class="hd">
          <div class="name">姓名：{{ username }}</div>
          <div class="work">单位：{{ deptName }}</div>
        </div>
        <!-- <el-dropdown :hide-on-click="false">
          <span class="el-dropdown-link">
            <el-icon :size="20" color="#fff"> <CaretBottom /> </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu class="loginOut" @click="logout">
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown> -->
      </div>
      <div @click="goToHome">
        <img src="@/assets/images/meun.png" />
      </div>
    </div>
  </header>
</template>

<script setup>
import { getItem } from "@/utils/storage";
import NavBar from "./NavBar.vue";
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { useStore } from "vuex";
const store = useStore();
const username = ref("测试");
const deptName = ref("");

const router = useRouter();
onMounted(() => {
  deptName.value = localStorage.getItem("deptId")
    ? JSON.parse(localStorage.getItem("deptId"))[0].deptName
    : "";
});

// 路由跳转
function goToHome() {
  window.location.href = "/";
}

const active = ref("");
onMounted(() => {
  //登陆用户信息
  username.value = localStorage.getItem("USERNAME");
  let dept = getItem("deptId");
  active.value = "LZ";
});
const logout = () => {
  store.dispatch("user/logout");
  store.commit("app/clearTag", null, { immediate: true });
  store.commit("permission/deleteRouter", { immediate: true });
  store.commit("user/deleteKeepLiiveRoute", "home");
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
</style>