288 lines
8.0 KiB
Vue
288 lines
8.0 KiB
Vue
<script setup>
|
||
import { ArrowDown } from "@element-plus/icons-vue";
|
||
import { useRouter } from "vue-router";
|
||
import { onMounted, ref } from "vue";
|
||
import axios from "@/utils/axios";
|
||
import updatePassword from "@/views/user-center/updatepassword.vue";
|
||
import { useTabStore, useUserStore } from "@/store";
|
||
|
||
const router = useRouter();
|
||
const userStore = useUserStore();
|
||
const tabStore = useTabStore();
|
||
|
||
const title = ref("G3服务平台");
|
||
|
||
let yjt_svg =
|
||
'<svg data-v-c361ffca="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="18px" height="18px" viewBox="0 0 48 48" class="iconify iconify--icon-park-outline"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m19 12l12 12l-12 12"></path></svg>';
|
||
|
||
let grzx_svg =
|
||
'<svg data-v-c361ffca="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="18px" height="18px" viewBox="0 0 24 24" class="iconify iconify--tdesign"><g fill="none"><path d="M16.5 7.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2z"></path><path stroke="currentColor" stroke-linecap="square" stroke-width="2" d="M16.5 7.5a4.5 4.5 0 1 1-9 0a4.5 4.5 0 0 1 9 0ZM20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2z"></path></g></svg>';
|
||
|
||
let xgmm_svg =
|
||
'<svg data-v-c361ffca="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="18px" height="18px" viewBox="0 0 24 24" class="iconify iconify--mdi"><path fill="currentColor" d="M12 17a2 2 0 0 1-2-2c0-1.11.89-2 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2m6 3V10H6v10zm0-12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10c0-1.11.89-2 2-2h1V6a5 5 0 0 1 5-5a5 5 0 0 1 5 5v2zm-6-5a3 3 0 0 0-3 3v2h6V6a3 3 0 0 0-3-3"></path></svg>';
|
||
|
||
let logout_svg =
|
||
'<svg data-v-c361ffca="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="18px" height="18px" viewBox="0 0 24 24" class="iconify iconify--mdi"><path fill="currentColor" d="M14.08 15.59L16.67 13H7v-2h9.67l-2.59-2.59L15.5 7l5 5l-5 5zM19 3a2 2 0 0 1 2 2v4.67l-2-2V5H5v14h14v-2.67l2-2V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5c0-1.11.89-2 2-2z"></path></svg>';
|
||
// 跳转到个人中心
|
||
function goToProfile() {
|
||
router.push("/user-center");
|
||
}
|
||
|
||
const passwordDialogVisible = ref(false);
|
||
function handleUpdatePassword() {
|
||
passwordDialogVisible.value = true;
|
||
}
|
||
|
||
// 退出登录
|
||
function logout() {
|
||
tabStore.reset();
|
||
userStore.reset();
|
||
|
||
router.push("/login");
|
||
}
|
||
|
||
onMounted(async () => {
|
||
let searchsql = `select * from s_keyvalue where b_key='maincaption'`;
|
||
const response = await axios.get("/selectlistbysql", { params: { sql: searchsql } });
|
||
if (response.data?.success) {
|
||
const records = response.data.data.records || [];
|
||
if (records.length > 0) {
|
||
title.value = records[0].b_value;
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="g3-topbar">
|
||
<div />
|
||
<div class="g3-topbar-right">
|
||
<div class="company-name">
|
||
{{ title }}
|
||
</div>
|
||
|
||
<div class="topbar-divider" />
|
||
|
||
<el-dropdown placement="bottom-end">
|
||
<div class="user-card">
|
||
<img
|
||
class="avatar"
|
||
src="https://api.dicebear.com/9.x/initials/svg?seed=User&backgroundColor=e5e7eb&fontColor=6b7280"
|
||
/>
|
||
<div class="name">{{ userStore.userInfo.userid || "未登录" }}</div>
|
||
<el-icon :size="14">
|
||
<arrow-down />
|
||
</el-icon>
|
||
</div>
|
||
|
||
<template #dropdown>
|
||
<div class="user-dropdown">
|
||
<div class="user-info">
|
||
<img
|
||
class="avatar"
|
||
src="https://api.dicebear.com/9.x/initials/svg?seed=User&backgroundColor=e5e7eb&fontColor=6b7280"
|
||
/>
|
||
<div>
|
||
<div class="name">{{ userStore.userInfo.userid || "未登录" }}</div>
|
||
<div class="orgid">
|
||
<div>机构码：</div>
|
||
<div>{{ userStore.userInfo.orgid || "无机构码" }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-dropdown-menu>
|
||
<el-dropdown-item divided @click="goToProfile">
|
||
<div class="g3flex g3color">
|
||
<div>
|
||
<div class="g3grzx" v-html="grzx_svg"></div>
|
||
<div class="g3lable">个人中心</div>
|
||
</div>
|
||
<div class="g3yjtsvg" v-html="yjt_svg"></div>
|
||
</div>
|
||
</el-dropdown-item>
|
||
<el-dropdown-item @click="handleUpdatePassword">
|
||
<div class="g3flex g3color">
|
||
<div>
|
||
<div class="g3grzx" v-html="xgmm_svg"></div>
|
||
<div class="g3lable">修改密码</div>
|
||
</div>
|
||
<div class="g3yjtsvg" v-html="yjt_svg"></div>
|
||
</div>
|
||
</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
<div class="g3hr"></div>
|
||
<div class="g3logout">
|
||
<div @click="logout">
|
||
<div class="g3logoutsvg" v-html="logout_svg"></div>
|
||
<div class="g3lable">退出登录</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-dropdown>
|
||
</div>
|
||
</div>
|
||
|
||
<updatePassword v-model:visible="passwordDialogVisible" />
|
||
</template>
|
||
|
||
<style lang="css" scoped>
|
||
.g3-topbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
max-width: 100%;
|
||
height: 48px;
|
||
flex-shrink: 0;
|
||
/* border-bottom: 1px solid var(--g3-layout-divider-color); */
|
||
padding: 0 10px;
|
||
border-radius: 0 0 6px 6px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.g3-topbar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0px 4px;
|
||
}
|
||
|
||
.company-name {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.topbar-divider {
|
||
width: 1px;
|
||
height: 16px;
|
||
background-color: var(--g3-layout-divider-color);
|
||
margin: 0px 12px;
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.user-info > div {
|
||
min-width: 157px;
|
||
}
|
||
|
||
.user-card {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
outline: none;
|
||
box-shadow: none;
|
||
|
||
.name {
|
||
margin: 0 6px;
|
||
}
|
||
|
||
.avatar {
|
||
width: 32px;
|
||
height: 32px;
|
||
background-color: rgba(204, 204, 204, 1);
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.user-dropdown {
|
||
padding: 8px 14px;
|
||
.avatar {
|
||
width: 34px;
|
||
height: 34px;
|
||
background-color: rgba(204, 204, 204, 1);
|
||
margin-right: 12px;
|
||
}
|
||
|
||
.name {
|
||
display: flex;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: rgb(31, 34, 37);
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.orgid {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 12px;
|
||
color: rgb(118, 124, 130);
|
||
}
|
||
}
|
||
|
||
:deep(.el-dropdown-menu__item) {
|
||
padding: 12px 20px;
|
||
}
|
||
.g3flex {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
}
|
||
.g3flex > div {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.g3grzx {
|
||
margin-right: 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
:deep(.el-dropdown-menu__item:not(.is-disabled):focus),
|
||
:deep(.el-dropdown-menu__item:not(.is-disabled):hover) {
|
||
background-color: rgba(243, 243, 245, 1);
|
||
color: unset;
|
||
border-radius: 8px;
|
||
}
|
||
.g3color {
|
||
color: rgb(51, 54, 57);
|
||
}
|
||
.g3lable {
|
||
font-size: 14px;
|
||
font-family:
|
||
v-sans,
|
||
system-ui,
|
||
-apple-system,
|
||
BlinkMacSystemFont,
|
||
"Segoe UI",
|
||
sans-serif,
|
||
"Apple Color Emoji",
|
||
"Segoe UI Emoji",
|
||
"Segoe UI Symbol";
|
||
}
|
||
.g3logout {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 14px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.g3logout > div {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 500;
|
||
padding: 0px 14px;
|
||
font-size: 14px;
|
||
height: 34px;
|
||
border-radius: 8px;
|
||
color: rgb(118, 124, 130);
|
||
background-color: rgba(46, 51, 56, 0.05);
|
||
cursor: pointer;
|
||
}
|
||
.g3logoutsvg {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 6px;
|
||
color: rgb(118, 124, 130);
|
||
}
|
||
.g3hr {
|
||
background-color: #ebeef5;
|
||
width: 100%;
|
||
height: 1px;
|
||
}
|
||
</style>
|