95 lines
2.5 KiB
Vue
95 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<a-dropdown v-if="currentUser && currentUser.name" placement="bottomRight">
|
|
<span class="ant-pro-account-avatar">
|
|
<a-avatar
|
|
size="small"
|
|
src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
|
|
class="antd-pro-global-header-index-avatar"
|
|
/>
|
|
<span>{{ currentUser.name }}</span>
|
|
</span>
|
|
<template v-slot:overlay>
|
|
<a-menu class="ant-pro-drop-down menu" :selected-keys="[]">
|
|
<!-- <a-menu-item v-if="menu" key="center" @click="handleToCenter">
|
|
<a-icon type="user" />
|
|
个人中心
|
|
</a-menu-item>
|
|
<a-menu-item v-if="menu" key="settings" @click="handleToSettings">
|
|
<a-icon type="setting" />
|
|
个人设置
|
|
</a-menu-item>
|
|
<a-menu-divider v-if="menu" />-->
|
|
<a-menu-item key="password" @click="handlerChangePassword">
|
|
<a-icon type="lock" />
|
|
修改密码
|
|
</a-menu-item>
|
|
<a-menu-item key="logout" @click="handleLogout">
|
|
<a-icon type="logout" />
|
|
退出登录
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
<span v-else>
|
|
<a-spin size="small" :style="{ marginLeft: 8, marginRight: 8 }" />
|
|
</span>
|
|
<ChangePassword ref="changePassword"></ChangePassword>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { Modal } from 'ant-design-vue'
|
|
import ChangePassword from '@/components/GlobalHeader/ChangePassword.vue'
|
|
|
|
export default {
|
|
name: 'AvatarDropdown',
|
|
components: { ChangePassword },
|
|
props: {
|
|
currentUser: {
|
|
type: Object,
|
|
default: () => null
|
|
},
|
|
menu: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
methods: {
|
|
// 修改密码
|
|
handlerChangePassword () {
|
|
this.$refs.changePassword.show()
|
|
},
|
|
handleToCenter () {
|
|
this.$router.push({ path: '/account/center' })
|
|
},
|
|
handleToSettings () {
|
|
this.$router.push({ path: '/account/settings' })
|
|
},
|
|
handleLogout (e) {
|
|
Modal.confirm({
|
|
title: this.$t('layouts.usermenu.dialog.title'),
|
|
content: this.$t('layouts.usermenu.dialog.content'),
|
|
onOk: () => {
|
|
return this.$store.dispatch('Logout').then(() => {
|
|
this.$router.push({ name: 'login' })
|
|
})
|
|
},
|
|
onCancel () {}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.ant-pro-drop-down {
|
|
/deep/ .action {
|
|
margin-right: 8px;
|
|
}
|
|
/deep/ .ant-dropdown-menu-item {
|
|
min-width: 160px;
|
|
}
|
|
}
|
|
</style>
|