<script setup lang="ts">
import { userService } from '@/api/service/user'
import avatar from '@/assets/images/avatar
.webp'
import { use
AppStore, useMenuStore } from '@/store'
import { User } from '@element
-plus/icons
-vue'
import { useRouter } from 'vue
-router'
import
apps from '~icons/custom/
apps'
import exit from '~icons/custom/exit'
import
unlock from '~icons/custom/
unlock'
import ChangePasswordDialog from '
./change
-password/index
.vue'
import UserInfo from '
./user
-info/index
.vue'
import VOYAHlogo from '/Vhome
.svg'
defineOptions({
name: 'LayoutHeader',
})
// 修改密码的窗口是否可见
const changePasswordDialogVisible = ref(false)
// 个人信息的窗口是否可见
const checkUserInfoVisible = ref(false)
const
appStore = use
AppStore()
const {
isEnglish: _isEnglish,
} = storeToRefs(
appStore)
const router = useRouter()
const userInfoRef = ref()
function redirectGlobal() {
router
.push({ name: 'Dashboard' })
}
async function handleCommand(command: string | number | object) {
switch (command) {
case 'logout': {
try {
await ElMessageBox
.confirm(
'确认要注销吗？',
'提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
},
)
await userService
.logout()
localStorage
.setItem('token', '')
window
.$message
.success('注销成功')
router
.push({ name: 'Login' })
}
catch (error) {
console
.error(error)
window
.$message?
.error('注销失败，请重试')
}
break
}
case 'modifyPwd': {
changePasswordDialogVisible
.value = true
break
}
case 'userInfo': {
checkUserInfoVisible
.value = true
userInfoRef
.value
.open()
break
}
default: break
}
}
const userInfo = ref<any>({
avatar: '',
username: '',
roleName: '',
mobile: '',
roleNameList: [],
source: '',
email: '',
})
const menuStore = useMenuStore()
const { filterMenu } = menuStore
onActivated(async () => {
getUserInfoFn()
})
onMounted(() => {
getUserInfoFn()
})
async function getUserInfoFn() {
const { data } = await userService
.getUserInfo()
userInfo
.value = data
filterMenu(userInfo
.value
.roleIdList)
}
</script>
<template>
<div class="h
-full flex items
-center">
<div class="flex items
-center justify
-between wh
-full">
<div class="h
-full flex items
-center gap
-x
-4">
<el
-image class="wh
-8" :src="VOYAHlogo" fit="scale
-down" @click="redirectGlobal" />
<span class="header
-title text
-4 color
-[#
1A253B] font
-bold leading
-5
.5">
{{ $t('system
.title') }}
</span>
<el
-divider direction="vertical" style="height: 22px; margin:0;" />
<el
-button text circle>
<el
-icon size="20">
<
apps />
</el
-icon>
</el
-button>
</div>
<div class="header
-right
-content
-wr
apper flex items
-center gap
-x
-4">
<!
-- <el
-button circle>
<el
-icon :size="
16">
<GlobalSearch />
</el
-icon>
</el
-button>
-->
<!
-- 国际化
-->
<!
-- <el
-button circle @click="
appStore
.toggleLang()">
<el
-icon :size="
16">
<translate />
</el
-icon>
</el
-button>
-->
<!
-- 主题模式
-->
<!
-- <el
-button circle>
<el
-icon :size="
16">
<Theme />
</el
-icon>
</el
-button>
-->
<!
-- 通知公告
-->
<!
-- <el
-badge is
-dot>
<el
-button circle>
<el
-icon :size="
16">
<notification />
</el
-icon>
</el
-button>
</el
-badge>
-->
<!
-- 设置
-->
<!
-- <el
-button circle>
<el
-icon :size="
16">
<Global
Setting />
</el
-icon>
</el
-button>
-->
<!
-- 用户中心
-->
<el
-popover
popper
-class="user
-center w
-50" popper
-style="width: 200px; padding: 0;" placement="bottom"
:show
-arrow="false"
>
<template #reference>
<el
-avatar :src="userInfo
.avatar" :size="40" class="cursor
-pointer" />
</template>
<template #default>
<div class="user
-center
-content">
<div class="user
-info h
-30 flex flex
-col items
-center p
-4">
<el
-avatar :src="userInfo
.avatar" :size="40" class="cursor
-pointer" />
<span class="mt
-2 text
-sm color
-[#2
62
62
6] leading
-5">{{ userInfo
.username }}</span>
<span class="text
-xs color
-[#8C8C8C] leading
-5">{{ userInfo
.roleName }}</span>
</div>
<div class="operation flex flex
-col p
-4">
<el
-button class="operation
-btn" link @click="handleCommand('userInfo')">
<el
-icon :size="20" class="mr
-2">
<User />
</el
-icon>个人信息
</el
-button>
<el
-button class="operation
-btn" link @click="handleCommand('modifyPwd')">
<el
-icon :size="20" class="mr
-2">
<
unlock />
</el
-icon>修改密码
</el
-button>
<el
-divider class="operation
-divider" />
<el
-button class="operation
-btn" type="danger" link @click="handleCommand('logout')">
<el
-icon :size="20" class="mr
-2">
<exit />
</el
-icon>退出系统
</el
-button>
</div>
</div>
</template>
</el
-popover>
</div>
</div>
<ChangePasswordDialog v
-model="changePasswordDialogVisible" />
<UserInfo
ref="userInfoRef" v
-model="checkUserInfoVisible" v
-model:user
-info="userInfo"
@confirm
-ok="getUserInfoFn"
/>
</div>
</template>
<style lang="scss" scoped>
.header
-title {
font
-family: Alimama ShuHeiTi;
}
.header
-right
-content
-wr
apper {
.el
-button +
.el
-button {
margin
-left: 0;
}
}
</style>
<style>
.el
-popper
.el
-popover
.user
-center {
--el
-popover
-border
-radius: 8px;
background: url('@/assets/images/header/user
-center
-bg
.webp');
background
-position: center;
background
-size: auto
140%;
background
-repeat: no
-repeat;
border: none;
box
-shadow: 0px 8px 20px 0px rgba(3
1, 39, 5
1, 0
.09);
.operation {
.operation
-btn {
height: 32px;
margin
-left: 0;
}
.operation
-divider {
margin:
12px 0;
}
}
}
</style>
为什么我修改完之后userInfo
.avatar没有响应式更新啊？
扫一扫
1087
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
