faw-report-library-web/src/components/Header.vue

<template>
    <div class="header">
        <div class="logo">
<!--            <img src="@/assets/imgs/logo.jpg" alt="">-->
        </div>
        <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/report/list', query: {showId: $route.query.id } }"><img
                        src="@/assets/imgs/icon-home.png" alt=""><span>首页</span></el-breadcrumb-item>
                <el-breadcrumb-item v-if="this.$route.path == '/system/urlIndex'">{{this.$store.state.menuName}}</el-breadcrumb-item>
                <el-breadcrumb-item v-else-if="this.$route.path == '/system/401Page'">{{this.$store.state.menuName}}</el-breadcrumb-item>
                <template v-else v-for="item in $route.meta.crumb">
                    <el-breadcrumb-item>{{ item }}</el-breadcrumb-item>
                </template>
            </el-breadcrumb>
        </div>

        <div style="display: flex;margin-left: auto">
            <div class="setsys-menu" @click="goSystemPage" v-if="isSystemManager">
                <img src="../assets/imgs/icon-setting.png" alt="" class="setsys-menu-img">
                <span>系统设置</span>
            </div>

            <div>

                <el-popover v-model="popoverValue" trigger="click" transition="">
                    <div class="user-operate">
                        <el-row>
                            <el-col :span="24">
                                <el-button type="text" @click="logout">退出系统</el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <div class="user" slot="reference">
                        <img src="@/assets/imgs/avatar.png" alt="">
                        <span>你好，{{$store.state.userInfo.usname}}</span>
                        <i v-if="!popoverValue" class="el-icon-arrow-down"></i>
                        <i v-else class="el-icon-arrow-up"></i>
                    </div>
                </el-popover>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    import {BASE_URL} from "../utils/http";

    export default {
        name: "Header",
        data() {
            return {
                popoverValue: false
            }
        },
        computed: {
            ...mapGetters({
                menuData: 'menuData',
            }),
            isSystemManager() {
                return this.menuData.some(menu => menu.id === 'AVL9YSB7ZF');
            },
            isSystemManagerBelong() {
                return this.menuData.some(menu => menu.id === 'AVL9YSB7ZF' && menu.belong == 1);
            },
        },
        methods: {
            // 退出系统
            logout() {
                this.$confirm('确定退出系统?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.login.logout().then(_ => {
                        this.$message.success('退出成功');
                        this.$store.commit('saveUserInfo', null);

                        // var sevice = "http://"+window.location.host+"/";
                        // var serviceUrl = encodeURIComponent(sevice);
                        //正式
                        // window.open("https://caddmuat.changan.com.cn/cas/logout?service=http://10.64.23.30:7766/home", '_self');
                        //测试
                        // window.open(BASE_URL.BASE_CHANGAN + "/logout?service=" + BASE_URL.BASE_LOCAL + "/login?loginType=1", '_self');
                        this.$router.push('/login');
                    })
                })
            },
            goSystemPage() {
                if(this.isSystemManagerBelong){
                    if (this.$route.path === '/system/menu') return;
                    this.$store.commit('savePathUrl', '/system/menu');
                    this.$router.push({path: '/system/menu', query: {id: 'AVL9YSB7ZF'}});
                }else{
                    if(this.$route.path == '/system/401Page'){

                    }else{
                        this.$router.replace({name: '401Page', query: {id: 'AVL9YSB7ZF'}});
                    }
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .header {
        display: flex;
        align-items: center;
        height: 100%;
        position: relative;
        background: rgb(4, 71, 155);

        .logo {
            width: 200px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: auto !important;
                height: 40px !important;
                // width: 172px;
                // height: 26px;
                margin-top: 0 !important;
            }
        }

        .breadcrumb {
            padding-left: 30px;
            height: 100%;

            ::v-deep .el-breadcrumb {
                height: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .el-breadcrumb__item {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .el-breadcrumb__inner {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                    }
                }

                img {
                    width: 14px;
                    height: 14px;
                    margin-right: 3px;
                    margin-top: -2px;
                }

                span {
                    color: #FFFFFF;
                    font-weight: 500;
                }

                .el-breadcrumb__separator {
                    margin: 0 5px;
                }
            }
        }

        .setsys-menu {
            margin-right: 10px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            /*position: absolute;*/
            /*right: 225px;*/
            cursor: pointer;

            &-img {
                width: 14px;
                height: 14px;
            }

            span {
                color: #FFFFFF;
                margin-left: 5px;
                font-size: 14px;
            }
        }

        .user {
            /*position: absolute;*/
            /*top: 0;*/
            /*right: 0;*/
            /*bottom: 0;*/
            height: 100%;
            display: flex;
            align-items: center;

            img {
                width: 38px;
                height: 38px;
                margin-right: 15px;
            }

            span {
                font-size: 16px;
                color: #FFFFFF;
                margin-right: 19px;
            }

            i {
                margin-right: 17px;
                color: #FFFFFF;
            }
        }

    }

    .user-operate {
        ::v-deep .el-button {
            width: 100%;
            font-size: 14px;
        }
    }
</style>