<script lang="ts" setup>
|
import { onMounted, onUnmounted, reactive, toRefs } from 'vue';
|
import { useRoute } from 'vue-router';
|
|
import emptyImage from '#/assets/images/portal/dashboardNodata.png';
|
import PortalLayout from '#/components/VisualPortal/Portal/Layout/index.vue';
|
import { usePortal } from '#/hooks/portal/usePortal';
|
|
defineOptions({ name: 'DynamicPortal' });
|
|
defineEmits(['register']);
|
|
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 { loading, layout, type, linkType, currentView, url, ajaxing, portalId, enabledLock } = toRefs(state);
|
|
function init() {
|
const route = useRoute();
|
state.portalId = (route.meta.relationId as string) || '';
|
state.menuId = (route.meta.modelId as string) || '';
|
if (!state.portalId) return;
|
initData();
|
}
|
|
onMounted(() => init());
|
onUnmounted(() => clearAutoRefresh());
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper" v-loading="loading">
|
<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>
|
</div>
|
</template>
|
<style scoped lang="scss">
|
: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>
|
