Files
sgxt_web/src/layout/components/Header.vue
2025-04-12 14:54:02 +08:00

67 lines
2.0 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>