<script lang="ts" setup>
|
import { onMounted, reactive } from 'vue';
|
import { useRoute } from 'vue-router';
|
|
import { useGlobSetting } from '@jnpf/hooks';
|
|
import { useAccessStore } from '@vben/stores';
|
|
import { getDataReportInfo } from '#/api/onlineDev/dataReport';
|
import { getRealJnpfAppEnCode } from '#/utils/jnpf';
|
|
interface State {
|
url: string;
|
}
|
|
defineOptions({ name: 'DynamicDataReport' });
|
|
defineEmits(['register']);
|
const { dataReportPre } = useGlobSetting();
|
const accessStore = useAccessStore();
|
const state = reactive<State>({
|
url: '',
|
});
|
|
function init() {
|
const route = useRoute();
|
const id = route.meta.relationId;
|
if (!id) return;
|
let targetUrl = `${dataReportPre}/preview.html?id=${id}&token=${accessStore.accessToken}&appCode=${getRealJnpfAppEnCode()}&page=1&from=menu`;
|
getDataReportInfo(id).then((res) => {
|
const item = {};
|
if (res.data?.searchForm?.components && Array.isArray(res.data.searchForm.components)) {
|
listQuery(res.data.searchForm.components, item);
|
for (const key in item) {
|
const item1 = `&${key}=${item[key]}`;
|
targetUrl += item1;
|
}
|
}
|
state.url = targetUrl;
|
});
|
}
|
function listQuery(list, callback) {
|
for (const item of list) {
|
let arrayList: any[] = [];
|
if (item.cols && Array.isArray(item.cols)) {
|
arrayList = [...arrayList, ...item.cols];
|
}
|
if (item.children && Array.isArray(item.children)) {
|
arrayList = [...arrayList, ...item.children];
|
}
|
if (item.bindParameter && item.defaultValue) {
|
callback[item.bindParameter] = item.defaultValue;
|
}
|
listQuery(arrayList, callback);
|
}
|
}
|
|
onMounted(() => {
|
init();
|
});
|
</script>
|
<template>
|
<div class="jnpf-content-wrapper bg-white">
|
<iframe :src="state.url" width="100%" height="100%" frameborder="0"></iframe>
|
</div>
|
</template>
|
