FE_occupationlab_client/src/layouts/header/index.vue

<template>
    <div class="header">
        <a class="logo" @click="toIndex">
            <img v-if="isIndex" src="@/assets/img/logo.png" alt="">
            <template v-else>
                <img :src="logoUrl" height="50" />
                <span class="title">{{title}}</span>
            </template>
        </a>
        <div class="inner">
            <navbar class="nav-wrap" ref="nav"></navbar>
            <div class="user-wrap">
                <template v-if="token">
                    <div class="user" @click="toPersonal">
                        <el-avatar :size="35" :src="avatar"></el-avatar>
                        <span class="username">{{ customerName || userName }}</span>
                    </div>
                    <el-divider direction="vertical"></el-divider>
                    <a class="logout" @click="logout">退出</a>
                </template>
                <div v-else class="login" @click="toLogin">
                    <img src="@/assets/img/user.png" alt="">
                    <span>登录</span>
                </div>
            </div>
        </div>

        <el-dialog title="更新日志" :visible.sync="logVisible" :close-on-click-modal="false" custom-class="user-dia" append-to-body width="1000px">
            <log></log>
        </el-dialog>
    </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import Setting from "@/setting";
import util from "@/libs/util";
import navbar from "../navbar";
import log from '@/components/log'
export default {
    data() {
        return {
            token: util.local.get(Setting.tokenKey),
            isIndex: Setting.whiteList.find(e => e === this.$route.path), // 是否是在白名单页面
            logVisible: false
        };
    },
    components: {
        navbar,
        log
    },
    computed: {
        ...mapState("user", [
            "title", "logoUrl", "avatar", "userName", 'customerName', 'logView'
        ])
    },
    mounted() {
      if (this.token) {
        this.getSystemDetail();
        this.getUserInfo();
        this.logView || this.getLogStatus() // logView为false才需要查询接口
      }
    },
    methods: {
        ...mapMutations("user", [
            'SET_CUSTOMERNAME', 'SET_LOG'
        ]),
        ...mapActions("user", [
            "logout", "setTitle", "setLogoUrl", "setAvatar", "setUserName"
        ]),
        // 获取日志状态
        getLogStatus() {
            this.$get(this.api.logNotification).then(({ notification }) => {
              this.SET_LOG() // 把查看日志状态设置为true
              if (notification) this.logVisible = true // 返回true，则显示日志弹框
            }).catch(res => {})
        },
        getSystemDetail () {
            this.$get(this.api.logoDetail).then(res => {
                if (res.data) {
                    this.setTitle(res.data.title);
                    this.setLogoUrl(res.data.logoUrl);
                }
            }).catch(res => {});
        },
        getUserInfo() {
            this.$get(this.api.queryUserInfoDetails).then(res => {
                const {userAvatars, userName} = res.result.hrUserInfo || {}
                userAvatars && this.setAvatar(userAvatars);
                this.setUserName(userName);
                if (!userName && !this.customerName) {
                    this.$get(this.api.isClient).then(res => {
                        res.customerName && this.SET_CUSTOMERNAME(res.customerName)
                    }).catch(res => {})
                }
            }).catch(err => {})
        },
        toPersonal() {
          // 如果在官网页面，则打开新窗口去到职站个人中心
          if (this.isIndex) {
            window.open(this.$router.resolve('/setting/person').href)
          } else {
            this.customerName || this.$router.push("/setting/person") // 如果有客户名称，是不能进个人中心的
          }
        },
        toIndex() {
            this.$refs.nav.jump({
                index: this.isIndex ? '/index/list' : '/station/list'
            })
        },
        toLogin() {
          if (util.cookies.get('serverLogin') === 'true' && util.local.get('oc_server_token')) {
            window.open(process.env.NODE_ENV === 'development' ?
              'http://192.168.31.125:8081/#/index' :
              `${location.origin}/admin/#/index`)
          } else {
            window.open(this.$router.resolve('/login').href)
          }
        }
    }
};
</script>
<style scoped lang="scss">
$height: 64px;
.header {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-width: $min-width;
    height: $height;
    background-color: #fff;
    box-shadow: 0px 0px 6px 0px rgba(178, 178, 178, 0.32);
    .inner{
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: $min-width;
        padding: 0 80px 0 10px;
        margin: 0 auto;
    }
    .logo{
        position: absolute;
        top: 0;
        left: 40px;
        font-size: 28px;
        color: #568DF2;
        line-height: $height;
        cursor: pointer;
        img {
            margin-right: 10px;
        }
    }
    .title {
        font-size: 18px;
        font-weight: bold;
    }
    .nav-wrap {
        height: 64px;
    }
    .user-wrap {
        display: inline-flex;
        align-items: center;
    }
    .user {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }
    .el-divider--vertical {
        width: 2px;
        height: 15px;
        margin-left: 15px;
        background-color: #D8D8D8;
    }
    .username {
        margin-left: 10px;
        font-size: 12px;
    }
    .logout {
        margin-left: 5px;
        font-size: 12px;
        color: #666;
        cursor: pointer;
    }
    .login{
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        &:hover{
            opacity: .9;
        }
        span{
            margin-left: 5px;
            color: #666;
            font-size: 14px;
        }
    }
}
@media (max-width: 1430px) {
    .header {
        .logo {
            left: 20px;
        }
        .inner {
            padding-right: 20px;
        }
    }
}
/deep/.timeline {
    display: flex;
    flex-direction: column;
    .item {
        display: flex;
        justify-content: center;
        margin-bottom: 30px;
    }
    .date {
        width: 350px;
        margin-right: 50px;
        text-align: right;
        color: #6a6a6a;
        font-size: 14px;
    }
    .right {
        flex: 1;
    }
    h6 {
        margin-bottom: 15px;
        font-size: 18px;
        color: #333;
        line-height: 1;
    }
    .cover {
        max-width: 400px;
        margin: 10px 0 20px;
    }
    .detail {
        li {
            margin-bottom: 20px;
        }
        .name {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            font-size: 14px;
            img {
                width: 20px;
                margin-right: 8px;
            }
        }
        .val {
            font-size: 15px;
            line-height: 1.8;
            white-space: pre-wrap;
            p {
              position: relative;
              color: #505050;
              &:before {
                content: '';
                display: inline-block;
                width: 5px;
                height: 5px;
                margin: 0 15px 0 8px;
                vertical-align: middle;
                border-radius: 20px;
                background-color: $main-color;
              }
            }
        }
    }
}
</style>