header.vue
3.51 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<script setup lang="ts">
/**
* 公共布局头部组件
* @module Header
*/
import { getCurrentInstance, onMounted, reactive, computed } from "vue";
// import * as store from "@/pinia/index";
import { useAppStore } from '@/pinia/app';
import { useLoginStore } from '@/pinia/login';
import { ElMessageBox, ElMessage } from "element-plus";
import { Fold, Expand } from "@element-plus/icons-vue";
import styles from "@/style/global.module.scss";
// TIP 获取全局变量，暂时只有坏图片占位图
const {
appContext: {
config: { globalProperties },
},
} = getCurrentInstance();
/**
* 侧边菜单collapse状态切换
*/
const toggleMenu = () => {
// store.family.appStore().toggleCollapse();
useAppStore()?.toggleCollapse()
};
/**
* 退出登录
*/
const handleLogout = () => {
ElMessageBox.confirm("确认退出登录吗?", "警告", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
// store.family.loginStore().removeToken();
useLoginStore()?.removeToken()
ElMessage.success("已退出登录");
})
.catch((error) => {
console.log(error);
});
};
let asyncData = reactive({
userInfo: "",
isCollapse: null,
organizationLogo: "",
});
onMounted(() => {
// asyncData.userInfo = store.family.loginStore().userName;
// asyncData.organizationLogo = store.family.loginStore().organizationLogo;
// asyncData.isCollapse = computed (() => {
// return store.family.appStore().isCollapse
// })
asyncData.userInfo = useLoginStore()?.getUserName
asyncData.organizationLogo = useLoginStore()?.getOlogo
asyncData.isCollapse = computed(() => {
return useAppStore()?.getCollapseStatus
})
});
</script>
<template>
<div class="header-container clearfix">
<!-- TIP logo -->
<div
class="left-logo"
:class="asyncData.isCollapse ? 'thinLogo' : 'fatLogo'"
>
<router-link to="/">
<el-image
:src="
asyncData.organizationLogo
? asyncData.organizationLogo
: globalProperties.$cnliveLogo
"
fit="contain"
style="height: 40px"
></el-image>
</router-link>
</div>
<!-- TIP logo结束 -->
<!-- TIP 控制菜单collapse的按钮 -->
<div class="menu-collapse-button" @click="toggleMenu">
<Expand class="font-style" v-show="asyncData.isCollapse" />
<Fold class="font-style" v-show="!asyncData.isCollapse" />
</div>
<!-- TIP 控制菜单collapse的按钮结束 -->
<!-- TIP 功能键 -->
<div class="right-buttons">
<el-button type="text"><router-link to="/">首页</router-link></el-button>
<el-button type="text"
>当前用户：<b>{{
asyncData.userInfo ? asyncData.userInfo : "超级管理员"
}}</b></el-button
>
<el-button type="text" @click="handleLogout">退出</el-button>
</div>
<!-- TIP 功能键结束 -->
</div>
</template>
<style scoped lang="scss">
.header-container {
padding: 0 20px 0 0;
height: 60px;
top: 0;
position: fixed;
z-index: 1000;
width: 100%;
line-height: 60px;
background-color: white;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
.left-logo {
float: left;
margin-top: 10px;
text-align: center;
}
.menu-collapse-button {
float: left;
margin-left: 20px;
cursor: hand;
cursor: pointer;
.font-style {
width: 1.2em;
height: 1.2em;
margin-right: 8px;
margin-top: 20px;
}
}
.right-buttons {
float: right;
}
}
</style>