124

src/layout/components/Header.vue

@@ -0,0 +1,75 @@
+<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>