<template>
|
<a-layout-header class="header headerbox">
|
<div class="logo_title_box">
|
<div class="logo"><img src="@/assets/images/logo.png" alt="" /></div>
|
<div class="title"> 设备健康管理系统</div>
|
</div>
|
<div class="headerright">
|
<div class="topmenubox">
|
<div
|
v-for="(item, i) in apps"
|
:key="i"
|
@click="switchApp(item.code)"
|
:class="`topmenuitem ${
|
moduleCode == item.code ? 'menuitemselected' : ''
|
}`"
|
>
|
<i
|
:class="`fa ${item.icon ? 'fa-' + item.icon : ''}`"
|
style="font-size: 1.5em"
|
></i>
|
<span>{{ item.name }}</span>
|
</div>
|
</div>
|
<div style="margin-left: 10px">
|
<a-dropdown style="color: #fff">
|
<span class="action ant-dropdown-link user-dropdown-menu">
|
<a-avatar v-if="avatar" class="avatar" size="small" :src="avatar" />
|
<span style="padding-left: 10px">{{ nickname }}</span>
|
</span>
|
<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
|
<a-menu-item key="3">
|
<a href="javascript:;" @click="handleLogout">
|
<a-icon type="logout" />
|
<span>退出登录</span>
|
</a>
|
</a-menu-item>
|
</a-menu>
|
</a-dropdown>
|
</div>
|
</div>
|
</a-layout-header>
|
</template>
|
|
<script>
|
import UserMenu from "../tools/UserMenu";
|
import SMenu from "../Menu/";
|
import Logo from "../tools/Logo";
|
import { mixin } from "@/utils/mixin";
|
import { mapActions, mapGetters, mapState } from "vuex";
|
import { ALL_APPS_MENU } from "@/store/mutation-types";
|
import Vue from "vue";
|
import avatar from "@/assets/images/avatar2.jpg";
|
import { message } from "ant-design-vue/es";
|
|
export default {
|
name: "GlobalHeader",
|
components: {
|
UserMenu,
|
SMenu,
|
Logo,
|
},
|
computed: {
|
...mapGetters(["userInfo"]),
|
...mapState({
|
topmenukeys: (state) => state.app.selectedKeys,
|
moduleCode: (state) => state.user.moduleCode,
|
nickname: (state) => state.user.realname,
|
}),
|
apps() {
|
return this.userInfo ? this.userInfo.apps : [];
|
},
|
},
|
created() {},
|
mixins: [mixin],
|
props: {
|
mode: {
|
type: String,
|
// sidemenu, topmenu
|
default: "sidemenu",
|
},
|
menus: {
|
type: Array,
|
required: true,
|
},
|
theme: {
|
type: String,
|
required: false,
|
default: "dark",
|
},
|
collapsed: {
|
type: Boolean,
|
required: false,
|
default: false,
|
},
|
device: {
|
type: String,
|
required: false,
|
default: "desktop",
|
},
|
},
|
data() {
|
return {
|
avatar: avatar,
|
};
|
},
|
mounted() {
|
// console.log(this.menus, 110);
|
this.SetModelSelectKeys([this.moduleCode]);
|
},
|
watch: {
|
topmenukeys(val, oldVal) {
|
if (val != oldVal && val.length > 0) {
|
// console.log(val,113)
|
this.switchApp(val[0]);
|
}
|
},
|
},
|
methods: {
|
...mapActions(["Logout", "MenuChange", "SetModelSelectKeys"]),
|
switchApp(appCode) {
|
const applicationData = this.userInfo.apps.filter(
|
(item) => item.code === appCode
|
);
|
this.MenuChange(applicationData[0]).then((res) => {});
|
},
|
handleLogout() {
|
this.$confirm("真的要注销登录吗 ?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
})
|
.then(() => {
|
this.Logout({})
|
.then(() => {
|
window.location.reload();
|
setTimeout(() => {}, 16);
|
})
|
.catch((err) => {
|
this.$message.error({
|
title: "错误",
|
description: err.message,
|
});
|
});
|
})
|
.catch((err) => {
|
this.$message.error({
|
title: "错误",
|
description: err.message,
|
});
|
});
|
},
|
toggle() {
|
this.$emit("toggle");
|
},
|
},
|
beforeDestroy() {},
|
};
|
</script>
|
|
<style scoped>
|
.headerbox {
|
display: flex;
|
justify-content: space-between;
|
}
|
.logo_title_box {
|
color: #fff;
|
display: flex;
|
justify-content: flex-start;
|
}
|
.logo_title_box .logo {
|
width: 24px;
|
height: 24px;
|
}
|
.logo_title_box .logo img {
|
width: 100%;
|
}
|
.logo_title_box .title {
|
font-size: 24px;
|
font-family: Arial, Helvetica, sans-serif;
|
font-weight: 900;
|
}
|
.headerright {
|
display: flex;
|
justify-content: flex-end;
|
}
|
.ant-layout-header {
|
background-image: url("../../assets/images/topheader.png");
|
padding: 0 15px;
|
}
|
.topmenubox {
|
background: transparent;
|
color: #fff;
|
display: flex;
|
justify-content: flex-end;
|
}
|
.topmenuitem {
|
padding: 5px 20px;
|
cursor: pointer;
|
}
|
.topmenuitem > i {
|
display: block;
|
line-height: 1.5;
|
height: 50%;
|
text-align: center;
|
}
|
.topmenuitem > span {
|
display: block;
|
line-height: 1.5;
|
height: 50%;
|
text-align: center;
|
font-size: 16px;
|
}
|
.topmenuitem.menuitemselected,
|
.topmenuitem:hover {
|
background: rgba(0, 0, 0, 0.2) !important;
|
color: #fff !important;
|
}
|
</style>
|
