<script lang="ts" setup>
|
import { onMounted, reactive } from 'vue';
|
|
import { useGlobSetting } from '@jnpf/hooks';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { useAccessStore } from '@vben/stores';
|
|
import { getRealJnpfAppEnCode } from '#/utils/jnpf';
|
|
interface State {
|
url: string;
|
}
|
|
const emit = defineEmits(['register', 'reload']);
|
const { dataReportPre } = useGlobSetting();
|
const accessStore = useAccessStore();
|
const [registerModal, { closeModal }] = useModalInner(init);
|
const state = reactive<State>({
|
url: '',
|
});
|
|
function init(data) {
|
state.url = `${dataReportPre}/index.html?token=${accessStore.accessToken}&appCode=${getRealJnpfAppEnCode()}${data.id ? `&id=${data.id}` : ''}`;
|
}
|
function handleMessage(e) {
|
const data = e.data;
|
if (data !== 'closeDialog') return;
|
state.url = '';
|
closeModal();
|
emit('reload');
|
}
|
|
onMounted(() => {
|
window.addEventListener('message', handleMessage);
|
});
|
</script>
|
<template>
|
<BasicModal
|
v-bind="$attrs"
|
@register="registerModal"
|
default-fullscreen
|
:footer="null"
|
:closable="false"
|
:keyboard="false"
|
class="jnpf-full-modal full-modal report-modal designer-modal">
|
<iframe :src="state.url" width="100%" height="100%" frameborder="0" class="frame"></iframe>
|
</BasicModal>
|
</template>
|
<style lang="scss">
|
.report-modal {
|
.ant-modal-header {
|
display: none !important;
|
}
|
|
.scrollbar {
|
padding: 0 !important;
|
}
|
}
|
</style>
|
