86 lines
2.3 KiB
Vue
86 lines
2.3 KiB
Vue
<template>
|
|
<!-- 公司名 -->
|
|
<div class="name-box font12" style="padding-top: 2px">
|
|
<span style="margin-right: 10px; margin-left: 10px">
|
|
{{ userStore?.userInfo?.corp?.corp_name ? userStore?.userInfo?.corp?.corp_name : "" }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- 用户名 -->
|
|
<div class="name-box font12">
|
|
<el-dropdown trigger="click" class="triangle-box">
|
|
<div>
|
|
{{ userStore?.userInfo?.nickname }}
|
|
<el-icon class="triangle">
|
|
<i-ep-arrow-down />
|
|
</el-icon>
|
|
</div>
|
|
<template #dropdown>
|
|
<el-dropdown-menu>
|
|
<el-dropdown-item @click="logout">
|
|
<el-icon> <i-ep-switch-button /> </el-icon>重新登录
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { logoutApi } from "@/api/modules/login";
|
|
// import { useMsg } from "@/hooks/useMsg";
|
|
import { useUserStore } from "@/stores/modules/user";
|
|
import { ElMessageBox } from "element-plus";
|
|
import { usePathUrl } from "@/hooks/usePathUrl";
|
|
const userStore: any = useUserStore();
|
|
|
|
// 退出登录
|
|
const logout = () => {
|
|
ElMessageBox.confirm("您是否确认重新登录?", "温馨提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning"
|
|
}).then(async () => {
|
|
const result: any = await logoutApi();
|
|
if (result?.code === 0) {
|
|
userStore.$reset();
|
|
//清除本地
|
|
localStorage.clear();
|
|
location.href = usePathUrl();
|
|
}
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.name-box {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #303133;
|
|
cursor: pointer;
|
|
::v-deep(.el-dropdown) {
|
|
color: #303133;
|
|
}
|
|
}
|
|
.name-box::before {
|
|
position: absolute;
|
|
top: 50%;
|
|
display: block;
|
|
height: 20px;
|
|
content: "";
|
|
border-left: 1px solid #e4e7ed;
|
|
transform: translateY(-50%);
|
|
}
|
|
.triangle-box {
|
|
margin: 0 10px;
|
|
}
|
|
.triangle {
|
|
margin-left: 3px;
|
|
transition: transform 0.3s ease; /* 添加动画过渡效果 */
|
|
}
|
|
.triangle-box:hover .triangle {
|
|
transform: rotate(180deg); /* 鼠标悬停时旋转180度 */
|
|
}
|
|
</style>
|