<template>
|
<el-dropdown trigger="click">
|
<span class="username" v-html="username"></span>
|
</el-dropdown>
|
<el-dropdown trigger="click">
|
<div class="avatar">
|
<el-avatar :src="avatar" @error="errorHandler">
|
<img :src="localImage" />
|
</el-avatar>
|
</div>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item divided @click="logout">
|
<el-icon><SwitchButton /></el-icon>{{ $t("header.logout") }}
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
<!-- infoDialog -->
|
<InfoDialog ref="infoRef"></InfoDialog>
|
<!-- passwordDialog -->
|
<PasswordDialog ref="passwordRef"></PasswordDialog>
|
</template>
|
|
<script setup lang="ts">
|
import { ref } from "vue";
|
import { LOGIN_URL } from "@/config";
|
import { useRouter } from "vue-router";
|
import { logoutApi } from "@/api/modules/login";
|
import { useUserStore } from "@/stores/modules/user";
|
import { ElMessageBox, ElMessage } from "element-plus";
|
import InfoDialog from "./InfoDialog.vue";
|
import PasswordDialog from "./PasswordDialog.vue";
|
import { useI18n } from "vue-i18n";
|
import { SwitchButton } from "@element-plus/icons-vue";
|
import { getUserName } from "@/api/modules/hxzk/user/user";
|
import localImage from "../../../../assets/images/UserPhoto.png";
|
const { t } = useI18n();
|
const router = useRouter();
|
const userStore = useUserStore();
|
const avatar = ref("");
|
const username = ref("");
|
getUserName().then(TbUser => {
|
avatar.value = TbUser.avatar;
|
username.value = TbUser.username;
|
});
|
const errorHandler = () => true;
|
// 处理图片加载错误
|
|
// 退出登录
|
const logout = () => {
|
ElMessageBox.confirm(t("HandleData.confirmMessage", { message: t("header.logout") }), t("HandleData.confirmTitle"), {
|
confirmButtonText: t("HandleData.confirmButton"),
|
cancelButtonText: t("HandleData.cancelButton"),
|
type: "warning"
|
}).then(async () => {
|
// 1.执行退出登录接口
|
await logoutApi();
|
|
// 2.清除 Token
|
userStore.setToken("");
|
|
// 3.重定向到登陆页
|
router.replace(LOGIN_URL);
|
ElMessage.success(t("HandleData.successMessage", { action: t("header.logout") }));
|
});
|
};
|
|
// 打开修改密码和个人信息弹窗
|
const infoRef = ref<InstanceType<typeof InfoDialog> | null>(null);
|
const passwordRef = ref<InstanceType<typeof PasswordDialog> | null>(null);
|
</script>
|
|
<style scoped lang="scss">
|
.avatar {
|
width: 40px;
|
height: 40px;
|
overflow: hidden;
|
cursor: pointer;
|
border-radius: 50%;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.username {
|
margin: 0 20px;
|
font-size: 15px;
|
color: var(--el-header-text-color);
|
}
|
</style>
|
