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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<template>
<div class='app-header-user'>
<dropdown transfer-class-name="user-dropdownMenu" @on-click="userSelect" :transfer="true">
<div class='user'>
<span>{{user.name ? user.name : $t('components.appUser.name')}}</span>
<avatar :src="user.avatar" />
</div>
<dropdown-menu class='menu' slot='list' style='font-size: 15px !important;'>
<dropdown-item name='updatepwd' style='font-size: 15px !important;'>
<span><Icon type="ios-create-outline" style='margin-right: 8px;'/></span>
<span>{{$t('components.appUser.changepwd')}}</span>
</dropdown-item>
<dropdown-item name='logout' style='font-size: 15px !important;'>
<span><i aria-hidden='true' class='ivu-icon ivu-icon-md-power' 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';
import { Subject } from 'rxjs';
@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();
}
});
}else if (Object.is(data, 'updatepwd')) {
let container: Subject<any> = this.$appmodal.openModal({ viewname: 'app-update-password', title: (this.$t('components.appUser.changepwd') as string), width: 500, height: 400, }, {}, {});
container.subscribe((result: any) => {
if (!result || !Object.is(result.ret, 'OK')) {
return;
}
});
}
}
/**
* 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;
}
}
if(localStorage.getItem("user")){
let user:any = JSON.parse(localStorage.getItem("user") as string);
if(user && user.personname){
_user.name = user.personname;
}
}
Object.assign(this.user,_user,{
time: +new Date
});
}
/**
* 退出登录
*
* @memberof AppUser
*/
public logout() {
const get: Promise<any> = this.$http.get('/v7/logout');
get.then((response:any) =>{
if (response && response.status === 200) {
localStorage.removeItem('user');
localStorage.removeItem('token');
let leftTime = new Date();
leftTime.setTime(leftTime.getSeconds() - 1);
document.cookie = "ibzuaa-token=;expires=" + leftTime.toUTCString();
this.$router.push({ name: 'login' });
}
}).catch((error: any) =>{
console.error(error);
})
}
}
</script>
<style lang="less">
@import './app-user.less';
</style>