<script lang="ts" setup>
|
import { inject, nextTick, onMounted, reactive, toRefs } from 'vue';
|
|
import { useModal } from '@jnpf/ui/modal';
|
|
import { preferences } from '@vben/preferences';
|
import { useAccessStore } from '@vben/stores';
|
|
import { DownOutlined } from '@ant-design/icons-vue';
|
import { Dropdown, Menu } from 'ant-design-vue';
|
|
import { saasLoginApi } from '#/api';
|
import { getSaasList } from '#/api/permission/userSetting';
|
|
import DropMenuItem from '../user-dropdown/DropMenuItem.vue';
|
import Form from './Form.vue';
|
|
defineOptions({ name: 'TenantDropdown' });
|
|
interface State {
|
tenantList: any[];
|
activeItem: any;
|
}
|
|
const state = reactive<State>({
|
tenantList: [],
|
activeItem: {},
|
});
|
const { tenantList, activeItem } = toRefs(state);
|
const accessStore = useAccessStore();
|
const MenuItem = DropMenuItem;
|
const MenuDivider = Menu.Divider;
|
const [registerFormModal, { openModal: openFormModal }] = useModal();
|
const emitter: any = inject('emitter');
|
|
emitter.on('updateSassList', () => {
|
initData();
|
});
|
|
function initData() {
|
getSaasList().then((res) => {
|
state.tenantList = res.data || [];
|
state.activeItem = state.tenantList.filter((o) => o.currentTenant)[0] || {};
|
});
|
}
|
function handleLoginTenant(tenantId, account) {
|
saasLoginApi({ tenantId, account }).then((res) => {
|
accessStore.setAccessToken(res.data.token);
|
nextTick(() => {
|
window.location.href = preferences.app.defaultHomePath;
|
});
|
});
|
}
|
|
onMounted(() => {
|
initData();
|
});
|
</script>
|
<template>
|
<Dropdown overlay-class-name="jnpf-header-tenant-dropdown-overlay" placement="bottom">
|
<span class="jnpf-header-tenant-dropdown flex hover:bg-accent">{{ activeItem.companyName }}<DownOutlined class="ml-[4px]" /></span>
|
<template #overlay>
|
<Menu>
|
<template v-for="item in tenantList" :key="item.tenantId">
|
<MenuItem
|
:disabled="item.tenantId === activeItem.tenantId"
|
:text="item.companyName"
|
:item-key="item.tenantId"
|
@click="handleLoginTenant(item.tenantId, item.account)" />
|
</template>
|
<MenuDivider />
|
<MenuItem key="add" item-key="add" text="加入企业" icon="icon-ym icon-ym-join-enterprise" @click="openFormModal(true, {})" />
|
</Menu>
|
</template>
|
</Dropdown>
|
<Form @register="registerFormModal" @reload="initData" />
|
</template>
|
<style lang="scss">
|
.jnpf-header-tenant-dropdown {
|
align-items: center;
|
height: 32px;
|
padding: 10px;
|
overflow: hidden;
|
font-size: 14px;
|
cursor: pointer;
|
border-radius: var(--radius);
|
|
&-overlay {
|
min-width: 160px !important;
|
}
|
}
|
|
html:not(.dark) {
|
.jnpf-header-tenant-dropdown {
|
&:hover {
|
background-color: rgb(255 255 255 / 40%);
|
}
|
}
|
}
|
</style>
|
