<script lang="ts" setup>
|
import { computed, reactive, toRefs } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicDrawer, useDrawerInner } from '@jnpf/ui/drawer';
|
|
import { useUserStore } from '@vben/stores';
|
|
import { CheckCircleFilled } from '@ant-design/icons-vue';
|
import { cloneDeep } from 'lodash-es';
|
|
import { getHomePortalList, setDefaultPortal } from '#/api/onlineDev/portal';
|
import { $t } from '#/locales';
|
|
interface State {
|
list: any[];
|
activeId: string;
|
keyword: string;
|
}
|
|
const emit = defineEmits(['register', 'refresh']);
|
const state = reactive<State>({
|
list: [],
|
activeId: '',
|
keyword: '',
|
});
|
const { activeId, keyword } = toRefs(state);
|
const userStore = useUserStore();
|
const { createMessage } = useMessage();
|
const [registerDrawer, { changeLoading, closeDrawer }] = useDrawerInner(init);
|
|
const getPortalList = computed(() => cloneDeep(state.list).filter((o) => o.fullName.includes(state.keyword)));
|
|
function init(data) {
|
state.activeId = data.id || '';
|
state.keyword = '';
|
initData();
|
}
|
function initData() {
|
changeLoading(true);
|
getHomePortalList()
|
.then((res) => {
|
state.list = res?.data?.list || [];
|
changeLoading(false);
|
})
|
.catch(() => {
|
changeLoading(false);
|
});
|
}
|
function selectItem(id) {
|
if (state.activeId == id) return;
|
changeLoading(true);
|
setDefaultPortal(id)
|
.then((res) => {
|
state.activeId = id;
|
emit('refresh', id);
|
changeLoading(false);
|
createMessage.success(res.msg);
|
closeDrawer();
|
userStore.setUserInfo({ portalId: id });
|
})
|
.catch(() => {
|
changeLoading(false);
|
});
|
}
|
</script>
|
<template>
|
<BasicDrawer v-bind="$attrs" @register="registerDrawer" width="340px" class="full-drawer portal-toggle-drawer" title="切换门户">
|
<div class="tool">
|
<a-input-search :placeholder="$t('common.drawerSearchText')" allow-clear v-model:value="keyword" />
|
</div>
|
<div class="main">
|
<div class="item" v-if="getPortalList.length">
|
<div class="item-list">
|
<div class="item-list-item" v-for="(item, i) in getPortalList" :key="i" @click="selectItem(item.id)" :class="{ active: activeId === item.id }">
|
<p class="item-list-item-name com-hover" :title="item.fullName">{{ item.fullName }}</p>
|
<CheckCircleFilled class="icon-right" />
|
</div>
|
</div>
|
</div>
|
<jnpf-empty v-else />
|
</div>
|
</BasicDrawer>
|
</template>
|
