Merge remote-tracking branch 'origin/main' into feature/0710_下载中心_rxd
# Conflicts: # src/components/_base/navbar/index.vue
This commit is contained in:
rd
@ -7,18 +7,53 @@
|
||||
@click="openDownloadCenter"
|
||||
/>
|
||||
|
||||
<!-- 头像 -->
|
||||
<a-dropdown trigger="click" class="layout-avatar-dropdown">
|
||||
<a-avatar class="cursor-pointer" :size="32">
|
||||
<img alt="avatar" src="@/assets/avatar.svg" />
|
||||
</a-avatar>
|
||||
<template #content>
|
||||
<div>
|
||||
<a-doption v-for="item in RIGHT_DROPDOWN_MENU" :key="item.label">
|
||||
<a-space class="flex justify-between w-100%" @click="item.onClick">
|
||||
<a-doption>
|
||||
<a-space class="flex justify-between w-100%" @click="setServerMenu">
|
||||
<div class="flex items-center">
|
||||
<img :src="item.icon" class="w-16px h-16px mr-8px" />
|
||||
<span>{{ item.label }}</span>
|
||||
<img :src="icon1" class="w-16px h-16px mr-8px" />
|
||||
<span>管理中心</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
<a-dsubmenu value="option-1" position="lt" trigger="hover" class="enterprises-dsubmenu">
|
||||
<a-doption class="enterprises-doption">
|
||||
<a-space class="flex justify-between w-100%">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon3" class="w-16px h-16px mr-8px" />
|
||||
<span>切换企业账号</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
</a-doption>
|
||||
<template #content>
|
||||
<a-doption
|
||||
v-for="(item, index) in enterprises"
|
||||
:key="index"
|
||||
class="rounded-8px hover:bg-#F2F3F5"
|
||||
@click="onEnterpriseItemClick(item)"
|
||||
>
|
||||
<div
|
||||
class="flex items-center w-100% justify-between"
|
||||
:class="enterpriseInfo?.id === item.id ? '!color-#6D4CFE' : ''"
|
||||
>
|
||||
<span>{{ item.name }}</span>
|
||||
<icon-check v-if="enterpriseInfo?.id === item.id" size="16" />
|
||||
</div>
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dsubmenu>
|
||||
<a-doption>
|
||||
<a-space class="flex justify-between w-100%" @click="clickExit">
|
||||
<div class="flex items-center">
|
||||
<img :src="icon2" class="w-16px h-16px mr-8px" />
|
||||
<span>退出登录</span>
|
||||
</div>
|
||||
<icon-right size="12" />
|
||||
</a-space>
|
||||
@ -34,6 +69,8 @@
|
||||
|
||||
<script setup>
|
||||
import router from '@/router';
|
||||
import { useEnterpriseStore } from '@/stores/modules/enterprise';
|
||||
import { useUserStore } from '@/stores';
|
||||
|
||||
import ExitAccountModal from '@/components/_base/exit-account-modal';
|
||||
import DownloadCenterModal from '../download-center-modal';
|
||||
@ -42,36 +79,32 @@ import icon1 from '@/assets/option.svg';
|
||||
import icon2 from '@/assets/exit.svg';
|
||||
import icon3 from '@/assets/change.svg';
|
||||
|
||||
const RIGHT_DROPDOWN_MENU = [
|
||||
{
|
||||
label: '管理中心',
|
||||
icon: icon1,
|
||||
onClick: () => {
|
||||
router.push('/management/person');
|
||||
},
|
||||
},
|
||||
// {
|
||||
// label: '切换企业账号',
|
||||
// icon: icon3,
|
||||
// onClick: () => {
|
||||
// console.log('切换企业账号');
|
||||
// },
|
||||
// },
|
||||
{
|
||||
label: '退出登录',
|
||||
icon: icon2,
|
||||
onClick: () => {
|
||||
exitAccountModalRef.value?.open();
|
||||
},
|
||||
},
|
||||
];
|
||||
const enterpriseStore = useEnterpriseStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
const exitAccountModalRef = ref(null);
|
||||
const downloadCenterModalRef = ref(null);
|
||||
|
||||
const enterprises = computed(() => {
|
||||
return userStore.userInfo?.enterprises ?? [];
|
||||
});
|
||||
const enterpriseInfo = computed(() => {
|
||||
return enterpriseStore?.enterpriseInfo ?? {};
|
||||
});
|
||||
|
||||
const openDownloadCenter = () => {
|
||||
downloadCenterModalRef.value.open();
|
||||
};
|
||||
const onEnterpriseItemClick = async (item) => {
|
||||
enterpriseStore.setEnterpriseInfo(item);
|
||||
window.location.reload();
|
||||
};
|
||||
const clickExit = async () => {
|
||||
exitAccountModalRef.value?.open();
|
||||
};
|
||||
const setServerMenu = () => {
|
||||
router.push('/management/person');
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@ -83,7 +116,8 @@ const openDownloadCenter = () => {
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.layout-avatar-dropdown {
|
||||
.layout-avatar-dropdown,
|
||||
.enterprises-dsubmenu {
|
||||
.arco-dropdown {
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--BG-300, #e6e6e8);
|
||||
@ -100,24 +134,28 @@ const openDownloadCenter = () => {
|
||||
align-items: center;
|
||||
.menu-item-text {
|
||||
color: var(--Text-2, #3c4043);
|
||||
font-family: 'PuHuiTi-Regular';
|
||||
font-family: $font-family-regular;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 22px; /* 137.5% */
|
||||
}
|
||||
}
|
||||
.arco-dropdown-option-content {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background-color: transparent;
|
||||
.arco-dropdown-option-content {
|
||||
border-radius: 8px;
|
||||
// border-radius: 8px;
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-avatar-dropdown {
|
||||
.layout-avatar-dropdown,
|
||||
.enterprises-dsubmenu {
|
||||
width: 200px;
|
||||
.arco-dropdown {
|
||||
padding: 12px 4px;
|
||||
@ -128,5 +166,67 @@ const openDownloadCenter = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.arco-dropdown-option-suffix {
|
||||
display: none;
|
||||
}
|
||||
.enterprises-doption {
|
||||
.arco-dropdown-option-content {
|
||||
padding: 0 !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background-color: transparent;
|
||||
.arco-dropdown-option-content {
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .layout-avatar-dropdown {
|
||||
// .arco-dropdown {
|
||||
// border-radius: 8px;
|
||||
// border: 1px solid var(--BG-300, #e6e6e8);
|
||||
// background: var(--BG-white, #fff);
|
||||
// padding: 12px 0px;
|
||||
// .arco-dropdown-option {
|
||||
// padding: 0 12px;
|
||||
// margin-bottom: 4px;
|
||||
// &-content {
|
||||
// display: flex;
|
||||
// height: 40px;
|
||||
// width: 100%;
|
||||
// padding: 10px 24px;
|
||||
// align-items: center;
|
||||
// .menu-item-text {
|
||||
// color: var(--Text-2, #3c4043);
|
||||
// font-family: 'PuHuiTi-Regular';
|
||||
// font-size: 16px;
|
||||
// font-style: normal;
|
||||
// font-weight: 400;
|
||||
// line-height: 22px; /* 137.5% */
|
||||
// }
|
||||
// }
|
||||
// &:not(.arco-dropdown-option-disabled):hover {
|
||||
// background-color: transparent;
|
||||
// .arco-dropdown-option-content {
|
||||
// border-radius: 8px;
|
||||
// background: var(--BG-200, #f2f3f5);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .layout-avatar-dropdown {
|
||||
// width: 200px;
|
||||
// .arco-dropdown {
|
||||
// padding: 12px 4px;
|
||||
// .arco-dropdown-option {
|
||||
// padding: 0 !important;
|
||||
// &-content {
|
||||
// padding: 0 12px !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
@ -30,5 +30,20 @@ import router from '@/router';
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.arco-dropdown-option-suffix {
|
||||
display: none;
|
||||
}
|
||||
.enterprises-doption {
|
||||
.arco-dropdown-option-content {
|
||||
padding: 0 !important;
|
||||
border-radius: 8px;
|
||||
}
|
||||
&:not(.arco-dropdown-option-disabled):hover {
|
||||
background-color: transparent;
|
||||
.arco-dropdown-option-content {
|
||||
background: var(--BG-200, #f2f3f5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</div>
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:data="dataSource"
|
||||
:pagination="pagination"
|
||||
class="mt-8px h-540px"
|
||||
@page-change="handlePageChange"
|
||||
@ -79,7 +79,7 @@ const columns = [
|
||||
slotName: 'action',
|
||||
},
|
||||
];
|
||||
const data = ref([]);
|
||||
const dataSource = ref([]);
|
||||
const pagination = reactive({
|
||||
total: 0,
|
||||
showPageSize: true,
|
||||
@ -130,10 +130,10 @@ function handlePageSizeChange(pageSize: number) {
|
||||
|
||||
async function getSubAccount() {
|
||||
const res = await fetchSubAccountPage(params);
|
||||
const { data, total, code } = res.data;
|
||||
const { data, code } = res;
|
||||
if (code === 200) {
|
||||
pagination.total = total;
|
||||
data.value = data;
|
||||
pagination.total = data.total;
|
||||
dataSource.value = data?.data ?? [];
|
||||
}
|
||||
}
|
||||
async function handleAddAccount() {
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
:wrapper-col-props="{ span: 21, offset: 0 }"
|
||||
>
|
||||
<a-form-item field="head_image" label="头像">
|
||||
<div class="flex item-center">
|
||||
<div class="flex items-center">
|
||||
<a-avatar :image-url="userInfoForm.file_url" :size="48" />
|
||||
<span class="upload-button" @click="triggerFileInput">
|
||||
<input
|
||||
|
||||
Reference in New Issue
Block a user