FE_occupationlab_server/src/layouts/header/index.vue

<template>
    <div class="header">
        <div style="line-height: 60px">
            <img class="logo" :src="logoUrl" />
            <span class="title">{{title}}</span>
        </div>
        <div class="action">
            <div class="user" @click="toPersonal">
                <el-avatar :size="40" :src="avatar"></el-avatar>
                <span class="m-l-10">{{ customer ? customerName : userName }}</span>
            </div>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" class="ml20" @click="loginout">退出</el-button>
        </div>
    </div>
</template>
<script>
import { mapState, mapActions } from "vuex";

export default {
    data() {
        return {

        };
    },
    computed: {
        ...mapState("user", [
            "avatar", "userName", "title", "logoUrl", "customer", "customerName"
        ])
    },
    mounted() {
        this.getSystemDetail();
        this.getUserDetail();
    },
    methods: {
        ...mapActions("user", [
            "setTitle", "setLogoUrl", "setAvatar", "setUserName"
        ]),
        loginout() { // 退出登录
            this.$router.push('/login');
            localStorage.clear();
            sessionStorage.clear()
            location.reload();
        },
        toPersonal() { // 个人中心(客户没有个人中心，老师有)
            if (!this.customer) {
                this.$router.push("/setting/person");
            }
        },
        getSystemDetail () { // 获取系统logo
            this.$get(this.api.logoDetail).then(res => {
                if (res.data) {
                    this.setTitle(res.data.title);
                    this.setLogoUrl(res.data.logoUrl);
                }
            }).catch(res => {});
        },
        getUserDetail () { // 获取用户详情
            this.$get(this.api.queryUserInfoDetails).then(res => {
                let {userAvatars, userName} = res.result.hrUserInfo;
                userAvatars && this.setAvatar(userAvatars);
                this.setUserName(userName);
            }).catch(res => {});
        },
    }
};
</script>
<style lang="scss" scoped>
.header {
    position: relative;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #333;
    background-color: #fff;

    .logo {
        height: 50px;
        margin: 0 20px;
    }
    .title {
        font-size: 18px;
        font-weight: bold;
    }

    .action {
        display: flex;
        padding-right: 50px;
        align-items: center;

        .user {
            display: inline-flex;
            align-items: center;
            cursor: pointer;
        }

        .el-button--text {
            margin-left: 20px;
            color: #333;
        }

        .el-divider {
            width: 2px;
            height: 15px;
            margin-left: 20px;
            background-color: #333;
        }
    }
}
</style>