<script lang="ts" setup>
|
import { computed, onMounted, onUnmounted, reactive, toRefs, unref } from 'vue';
|
|
import { ScrollContainer } from '@jnpf/ui';
|
import { useDrawer } from '@jnpf/ui/drawer';
|
|
import { useUserStore } from '@vben/stores';
|
|
import emptyImage from '#/assets/images/portal/dashboardNodata.png';
|
import PortalLayout from '#/components/VisualPortal/Portal/Layout/index.vue';
|
import { usePortal } from '#/hooks/portal/usePortal';
|
|
import Default from './default/index.vue';
|
import Setting from './Setting.vue';
|
|
interface State {
|
portalId: string;
|
layout: any[];
|
type: number;
|
linkType: number;
|
currentView: string;
|
url: string;
|
ajaxing: boolean;
|
loading: boolean;
|
noData: boolean;
|
refreshData: any;
|
timerList: any[];
|
formData: any;
|
enabledLock: number;
|
systemId: string;
|
menuId: string;
|
}
|
|
const state = reactive<State>({
|
portalId: '',
|
layout: [],
|
type: 0,
|
linkType: 0,
|
currentView: '',
|
url: '',
|
ajaxing: true,
|
loading: false,
|
noData: false,
|
refreshData: {},
|
timerList: [],
|
formData: {},
|
enabledLock: 1,
|
systemId: '',
|
menuId: '',
|
});
|
|
const { initData, clearAutoRefresh, layoutUpdatedEvent } = usePortal(state);
|
const { portalId, layout, type, linkType, currentView, url, ajaxing, loading, noData, enabledLock } = toRefs(state);
|
const userStore = useUserStore();
|
const [registerSettingDrawer, { openDrawer: openSettingDrawer }] = useDrawer();
|
|
const getUserInfo: any = computed(() => userStore.getUserInfo || {});
|
|
function init() {
|
state.systemId = unref(getUserInfo)?.systemId;
|
state.portalId = unref(getUserInfo)?.portalId as string;
|
state.menuId = '';
|
initData();
|
}
|
function refresh(id) {
|
if (!id) return;
|
state.portalId = id;
|
clearAutoRefresh();
|
initData();
|
}
|
|
onMounted(() => init());
|
onUnmounted(() => clearAutoRefresh());
|
</script>
|
|
<template>
|
<div class="home-container" v-loading="loading">
|
<template v-if="!noData">
|
<template v-if="!ajaxing">
|
<template v-if="portalId">
|
<PortalLayout :layout="layout" :enabled-lock="enabledLock" v-if="type === 0" @layout-updated-event="layoutUpdatedEvent" />
|
<div class="custom-page" v-if="type === 1">
|
<component :is="currentView" v-if="linkType === 0" />
|
<embed :src="url" width="100%" height="100%" type="text/html" v-if="linkType === 1" />
|
</div>
|
</template>
|
<div class="portal-layout-nodata" v-else>
|
<jnpf-empty :image="emptyImage" />
|
</div>
|
</template>
|
<Setting @register="registerSettingDrawer" @refresh="refresh" />
|
<a-button type="primary" pre-icon="icon-ym icon-ym-left" class="setting-btn" size="large" @click="openSettingDrawer(true, { id: portalId })" />
|
</template>
|
<template v-else>
|
<ScrollContainer>
|
<Default />
|
</ScrollContainer>
|
</template>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.home-container {
|
position: relative;
|
height: 100%;
|
overflow: hidden;
|
border-radius: 8px;
|
|
.custom-page {
|
width: 100%;
|
height: 100%;
|
}
|
|
:deep(.layout-area) {
|
width: 100%;
|
overflow: hidden;
|
border-radius: 4px;
|
}
|
|
.setting-btn {
|
position: fixed;
|
top: 300px;
|
right: 0;
|
z-index: 100;
|
width: 40px;
|
height: 40px;
|
padding: 0;
|
text-align: center;
|
border-radius: 20px 0 0 20px;
|
|
:deep(i) {
|
font-size: 20px;
|
font-weight: 580;
|
}
|
}
|
|
:deep(.vue-grid-layout) {
|
margin: -10px;
|
}
|
|
:deep(.scrollbar__view) {
|
overflow: hidden;
|
}
|
|
:deep(.ant-card) {
|
border: unset;
|
}
|
}
|
</style>
|
<style lang="scss">
|
@use '#/components/VisualPortal/style/index.scss' as *;
|
</style>
|
