app-user.vue 2.9 KB
Newer Older
ibizdev's avatar
ibizdev committed
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
<template>
    <div class='app-header-user'>
        <dropdown @on-click="userSelect" :transfer="true">
            <div class='user'>
                <span>{{user.name ? user.name : $t('components.appUser.name')}}</span>
                &nbsp;&nbsp;<avatar :src="user.avatar" />
            </div>
            <dropdown-menu class='menu' slot='list' style='font-size: 15px !important;'>
                <dropdown-item name='logout' style='font-size: 15px !important;'>
                    <span><i aria-hidden='true' class='fa fa-cogs' style='margin-right: 8px;'></i></span>
                    <span>{{$t('components.appUser.logout')}}</span>
                </dropdown-item>
            </dropdown-menu>
        </dropdown>
    </div>
</template>
<script lang = 'ts'>
import { Vue, Component } from 'vue-property-decorator';

@Component({
})
export default class AppUser extends Vue {

    /**
     * 用户信息 
     *
     * @memberof AppUser
     */
    public user = {
        name: '',
        avatar: './assets/img/avatar.png',
    }

    /**
     * 下拉选选中回调
     *
     * @param {*} data
     * @memberof AppUser
     */
    public userSelect(data: any) {
        if (Object.is(data, 'logout')) {
            const title: any = this.$t('components.appUser.surelogout');
            this.$Modal.confirm({
                title: title,
                onOk: () => {
                    this.logout();
                }
            });
        }
    }

    /**
     * vue  生命周期
     *
     * @memberof AppUser
     */
    public mounted() {
        let _user:any = {};
        if(this.$store.getters.getAppData()){
            if(this.$store.getters.getAppData().context && this.$store.getters.getAppData().context.srfusername){
                _user.name = this.$store.getters.getAppData().context.srfusername;
            }
            if(this.$store.getters.getAppData().context && this.$store.getters.getAppData().context.srfusericonpath){
                _user.avatar = this.$store.getters.getAppData().context.srfusericonpath;
            }
        }
ibizdev's avatar
ibizdev committed
67 68 69 70 71 72
        if(localStorage.getItem("user")){
            let user:any = JSON.parse(localStorage.getItem("user") as string);
            if(user && user.personname){
                _user.name = user.personname;
            }
        }
ibizdev's avatar
ibizdev committed
73 74 75 76 77 78 79 80 81 82 83
        Object.assign(this.user,_user,{
            time: +new Date
        });
    }

    /**
     * 退出登录
     *
     * @memberof AppUser
     */
    public logout() {
ibizdev's avatar
ibizdev committed
84 85 86 87 88 89 90 91 92 93
        const get: Promise<any> = this.$http.get('v7/logout');
        get.then((response:any) =>{
            if (response && response.status === 200) {
                localStorage.removeItem('user');
                localStorage.removeItem('token');
                this.$router.push({ name: 'login' });
            }
        }).catch((error: any) =>{
            console.error(error);
        })
ibizdev's avatar
ibizdev committed
94 95 96 97 98 99 100
    }
}
</script>

<style lang="less">
@import './app-user.less';
</style>