Merge pull request #8823 from dataease/pr@dev-v2@fix_iframe_embedded_new_window_preview

fix: iframe嵌入式仪表板树无法使用新页面预览功能

core/core-frontend/src/components/dashboard/DbToolbar.vue

@@ -25,6 +25,7 @@ import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
 import TabsGroup from '@/custom-component/component-group/TabsGroup.vue'
 import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
 import OuterParamsSet from '@/components/visualization/OuterParamsSet.vue'
+import { XpackComponent } from '@/components/plugin'
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
@@ -102,7 +103,8 @@ const previewOuter = () => {
   }
   canvasSave(() => {
     const url = '#/preview?dvId=' + dvInfo.value.id
-    window.open(url, '_blank')
+    const newWindow = window.open(url, '_blank')
+    initOpenHandler(newWindow)
   })
 }
 
@@ -323,6 +325,17 @@ const onDvNameChange = () => {
 }
 const appStore = useAppStoreWithOut()
 const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
+
+const openHandler = ref(null)
+const initOpenHandler = newWindow => {
+  if (openHandler?.value) {
+    const pm = {
+      methodName: 'initOpenHandler',
+      args: newWindow
+    }
+    openHandler.value.invokeMethod(pm)
+  }
+}
 </script>
 
 <template>
@@ -574,6 +587,7 @@ const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
     />
     <outer-params-set ref="outerParamsSetRef"> </outer-params-set>
   </div>
+  <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
 </template>
 
 <style lang="less" scoped>

core/core-frontend/src/permission.ts

@@ -23,7 +23,7 @@ const { start, done } = useNProgress()
 const { loadStart, loadDone } = usePageLoading()
 
 const whiteList = ['/login', '/de-link', '/chart-view'] // 不重定向白名单
-const embeddedWindowWhiteList = ['/dvCanvas', '/dashboard']
+const embeddedWindowWhiteList = ['/dvCanvas', '/dashboard', '/preview']
 const embeddedRouteWhiteList = ['/dataset-embedded', '/dataset-form', '/dataset-embedded-form']
 router.beforeEach(async (to, from, next) => {
   start()

core/core-frontend/src/views/data-visualization/PreviewCanvas.vue

@@ -9,6 +9,7 @@ import { Base64 } from 'js-base64'
 import { getOuterParamsInfo } from '@/api/visualization/outerParams'
 import { ElMessage } from 'element-plus-secondary'
 import { useI18n } from '@/hooks/web/useI18n'
+import { XpackComponent } from '@/components/plugin'
 const dvMainStore = dvMainStoreWithOut()
 const { t } = useI18n()
 const state = reactive({
@@ -92,8 +93,10 @@ const loadCanvasDataAsync = async (dvId, dvType) => {
     }
   )
 }
-
-onMounted(() => {
+let p = null
+const XpackLoaded = () => p(true)
+onMounted(async () => {
+  await new Promise(r => (p = r))
   const { dvId, dvType } = router.currentRoute.value.query
   if (dvId) {
     loadCanvasDataAsync(dvId, dvType)
@@ -118,6 +121,11 @@ defineExpose({
       :cur-gap="state.curPreviewGap"
     ></de-preview>
   </div>
+  <XpackComponent
+    jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvTmV3V2luZG93SGFuZGxlcg=="
+    @loaded="XpackLoaded"
+    @load-fail="XpackLoaded"
+  />
 </template>
 
 <style lang="less">

core/core-frontend/src/views/data-visualization/PreviewHead.vue

@@ -7,6 +7,7 @@ import DvDetailInfo from '@/views/common/DvDetailInfo.vue'
 import { storeApi, storeStatusApi } from '@/api/visualization/dataVisualization'
 import { ref, watch, computed } from 'vue'
 import ShareVisualHead from '@/views/share/share/ShareVisualHead.vue'
+import { XpackComponent } from '@/components/plugin'
 const dvMainStore = dvMainStoreWithOut()
 const appStore = useAppStoreWithOut()
 const { dvInfo } = storeToRefs(dvMainStore)
@@ -16,7 +17,8 @@ const { t } = useI18n()
 const favorited = ref(false)
 const preview = () => {
   const url = '#/preview?dvId=' + dvInfo.value.id
-  window.open(url, '_blank')
+  const newWindow = window.open(url, '_blank')
+  initOpenHandler(newWindow)
 }
 const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 
@@ -33,7 +35,8 @@ const downloadAsAppTemplate = downloadType => {
 
 const dvEdit = () => {
   const baseUrl = dvInfo.value.type === 'dataV' ? '#/dvCanvas?dvId=' : '#/dashboard?resourceId='
-  window.open(baseUrl + dvInfo.value.id, '_blank')
+  const newWindow = window.open(baseUrl + dvInfo.value.id, '_blank')
+  initOpenHandler(newWindow)
 }
 
 const executeStore = () => {
@@ -58,6 +61,17 @@ watch(
     storeQuery()
   }
 )
+
+const openHandler = ref(null)
+const initOpenHandler = newWindow => {
+  if (openHandler?.value) {
+    const pm = {
+      methodName: 'initOpenHandler',
+      args: newWindow
+    }
+    openHandler.value.invokeMethod(pm)
+  }
+}
 </script>
 
 <template>
@@ -147,6 +161,7 @@ watch(
       </el-dropdown>
     </div>
   </div>
+  <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
 </template>
 
 <style lang="less">