fix(嵌入式): 支持跳转，且支持“局部刷新”

core/core-frontend/src/pages/panel/App.vue

@@ -10,6 +10,7 @@ const DashboardEditor = defineAsyncComponent(() => import('@/views/dashboard/ind
 
 const Dashboard = defineAsyncComponent(() => import('./DashboardPreview.vue'))
 const ViewWrapper = defineAsyncComponent(() => import('./ViewWrapper.vue'))
+const Iframe = defineAsyncComponent(() => import('./Iframe.vue'))
 const Dataset = defineAsyncComponent(() => import('@/views/visualized/data/dataset/index.vue'))
 const Datasource = defineAsyncComponent(
   () => import('@/views/visualized/data/datasource/index.vue')
@@ -18,6 +19,9 @@ const ScreenPanel = defineAsyncComponent(() => import('@/views/data-visualizatio
 const DashboardPanel = defineAsyncComponent(
   () => import('@/views/dashboard/DashboardPreviewShow.vue')
 )
+
+const Preview = defineAsyncComponent(() => import('@/views/data-visualization/PreviewCanvas.vue'))
+
 const props = defineProps({
   componentName: propTypes.string.def('DashboardEditor')
 })
@@ -27,8 +31,10 @@ const componentMap = {
   DashboardEditor,
   VisualizationEditor,
   ViewWrapper,
+  Preview,
   Dashboard,
   Dataset,
+  Iframe,
   Datasource,
   ScreenPanel,
   DashboardPanel

core/core-frontend/src/pages/panel/Iframe.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useEmbedded } from '@/store/modules/embedded'
+const embeddedStore = useEmbedded()
+const outerUrl = computed(() => {
+  return embeddedStore.outerUrl
+})
+</script>
+
+<template>
+  <iframe class="de-jump_outer_url" :src="outerUrl" frameborder="0"></iframe>
+</template>
+
+<style lang="less" scoped>
+.de-jump_outer_url {
+  width: 100%;
+  height: 100%;
+}
+</style>

core/core-frontend/src/store/modules/embedded.ts

@@ -1,6 +1,5 @@
 import { defineStore } from 'pinia'
 import { store } from '../index'
-import { clear } from '@/api/sync/syncTaskLog'
 interface AppState {
   type: string
   token: string
@@ -14,6 +13,8 @@ interface AppState {
   opt: string
   createType: string
   templateParams: string
+  jumpInfoParam: string
+  outerUrl: string
 }
 
 export const userStore = defineStore('embedded', {
@@ -30,13 +31,21 @@ export const userStore = defineStore('embedded', {
       resourceId: '',
       opt: '',
       createType: '',
-      templateParams: ''
+      templateParams: '',
+      outerUrl: '',
+      jumpInfoParam: ''
     }
   },
   getters: {
     getType(): string {
       return this.type
     },
+    getJumpInfoParam(): string {
+      return this.jumpInfoParam
+    },
+    getOuterUrl(): string {
+      return this.outerUrl
+    },
     getCreateType(): string {
       return this.createType
     },
@@ -87,6 +96,12 @@ export const userStore = defineStore('embedded', {
     setType(type: string) {
       this.type = type
     },
+    setOuterUrl(outerUrl: string) {
+      this.outerUrl = outerUrl
+    },
+    setJumpInfoParam(jumpInfoParam: string) {
+      this.jumpInfoParam = jumpInfoParam
+    },
     setCreateType(createType: string) {
       this.createType = createType
     },
@@ -137,6 +152,8 @@ export const userStore = defineStore('embedded', {
       this.setTemplateParams('')
       this.setResourceId('')
       this.setDvId('')
+      this.setJumpInfoParam('')
+      this.setOuterUrl('')
     }
   }
 })

core/core-frontend/src/views/chart/components/views/index.vue

@@ -346,11 +346,15 @@ const initOpenHandler = newWindow => {
   }
 }
 
+const divEmbedded = type => {
+  useEmitt().emitter.emit('changeCurrentComponent', type)
+}
+
 const windowsJump = (url, jumpType) => {
   try {
     const newWindow = window.open(url, jumpType)
     initOpenHandler(newWindow)
-    if (jumpType === '_self' && !embeddedStore.baseUrl) {
+    if (jumpType === '_self') {
       location.reload()
     }
   } catch (e) {
@@ -384,6 +388,7 @@ const jumpClick = param => {
     param.sourceViewId = param.viewId
     param.sourceFieldId = dimension.id
     let embeddedBaseUrl = ''
+    const divSelf = isDataEaseBi.value && jumpInfo.jumpType === '_self'
     if (isDataEaseBi.value) {
       embeddedBaseUrl = embeddedStore.baseUrl
     }
@@ -406,6 +411,12 @@ const jumpClick = param => {
           const url = `${embeddedBaseUrl}#/preview?dvId=${
             jumpInfo.targetDvId
           }&jumpInfoParam=${encodeURIComponent(Base64.encode(JSON.stringify(param)))}`
+          if (divSelf) {
+            embeddedStore.setDvId(jumpInfo.targetDvId)
+            embeddedStore.setJumpInfoParam(encodeURIComponent(Base64.encode(JSON.stringify(param))))
+            divEmbedded('Preview')
+            return
+          }
           windowsJump(url, jumpInfo.jumpType)
         }
       } else {
@@ -415,6 +426,11 @@ const jumpClick = param => {
       const colList = [...param.dimensionList, ...param.quotaList]
       let url = setIdValueTrans('id', 'value', jumpInfo.content, colList)
       url = checkAddHttp(url)
+      if (divSelf) {
+        embeddedStore.setOuterUrl(url)
+        divEmbedded('Iframe')
+        return
+      }
       windowsJump(url, jumpInfo.jumpType)
     }
   } else {

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

@@ -8,11 +8,13 @@ import { queryTargetVisualizationJumpInfo } from '@/api/visualization/linkJump'
 import { Base64 } from 'js-base64'
 import { getOuterParamsInfo } from '@/api/visualization/outerParams'
 import { ElMessage } from 'element-plus-secondary'
+import { useEmbedded } from '@/store/modules/embedded'
 import { useI18n } from '@/hooks/web/useI18n'
 import { XpackComponent } from '@/components/plugin'
 
 const dvMainStore = dvMainStoreWithOut()
 const { t } = useI18n()
+const embeddedStore = useEmbedded()
 const state = reactive({
   canvasDataPreview: null,
   canvasStylePreview: null,
@@ -34,7 +36,7 @@ const props = defineProps({
 })
 
 const loadCanvasDataAsync = async (dvId, dvType) => {
-  const { jumpInfoParam } = router.currentRoute.value.query
+  const jumpInfoParam = embeddedStore.jumpInfoParam || router.currentRoute.value.query.jumpInfoParam
   let jumpParam
   // 获取外部跳转参数
   if (jumpInfoParam) {
@@ -105,7 +107,8 @@ let p = null
 const XpackLoaded = () => p(true)
 onMounted(async () => {
   await new Promise(r => (p = r))
-  const { dvId, dvType, callBackFlag } = router.currentRoute.value.query
+  const dvId = embeddedStore.dvId || router.currentRoute.value.query.dvId
+  const { dvType, callBackFlag } = router.currentRoute.value.query
   if (dvId) {
     loadCanvasDataAsync(dvId, dvType)
     return