fix(嵌入式): div 嵌入仪表板和数据大屏 新建和编辑页面需要返回按钮

This commit is contained in:
dataeaseShu 2024-07-24 14:49:20 +08:00
parent e278d7fad0
commit 79f85203c4
4 changed files with 25 additions and 36 deletions

View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus-secondary' import { ElMessage, ElMessageBox } from 'element-plus-secondary'
import eventBus from '@/utils/eventBus' import eventBus from '@/utils/eventBus'
import { useEmbedded } from '@/store/modules/embedded'
import { deepCopy } from '@/utils/utils' import { deepCopy } from '@/utils/utils'
import { nextTick, reactive, ref, computed, toRefs } from 'vue' import { nextTick, reactive, ref, computed, toRefs } from 'vue'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
@ -228,8 +229,14 @@ const backToMain = () => {
backHandler(url) backHandler(url)
} }
} }
const embeddedStore = useEmbedded()
const backHandler = (url: string) => { const backHandler = (url: string) => {
if (isEmbedded.value) {
embeddedStore.clearState()
useEmitt().emitter.emit('changeCurrentComponent', 'DashboardPanel')
return
}
if (window['dataease-embedded-host'] && openHandler?.value) { if (window['dataease-embedded-host'] && openHandler?.value) {
const pm = { const pm = {
methodName: 'embeddedInteractive', methodName: 'embeddedInteractive',
@ -391,7 +398,7 @@ const onDvNameChange = () => {
snapshotStore.recordSnapshotCache() snapshotStore.recordSnapshotCache()
} }
const appStore = useAppStoreWithOut() const appStore = useAppStoreWithOut()
const isDataEaseBi = computed(() => appStore.getIsDataEaseBi) const isEmbedded = computed(() => appStore.getIsDataEaseBi || appStore.getIsIframe)
const openHandler = ref(null) const openHandler = ref(null)
const initOpenHandler = newWindow => { const initOpenHandler = newWindow => {
@ -417,11 +424,7 @@ const initOpenHandler = newWindow => {
<div class="middle-area"></div> <div class="middle-area"></div>
</template> </template>
<template v-else> <template v-else>
<el-icon <el-icon v-if="!batchOptStatus" class="custom-el-icon back-icon" @click="backToMain()">
v-if="!batchOptStatus && !isDataEaseBi"
class="custom-el-icon back-icon"
@click="backToMain()"
>
<Icon class="toolbar-icon" name="icon_left_outlined" /> <Icon class="toolbar-icon" name="icon_left_outlined" />
</el-icon> </el-icon>
<div class="left-area" v-if="editMode === 'edit' && !batchOptStatus"> <div class="left-area" v-if="editMode === 'edit' && !batchOptStatus">

View File

@ -2,6 +2,7 @@
import { ElMessage, ElMessageBox } from 'element-plus-secondary' import { ElMessage, ElMessageBox } from 'element-plus-secondary'
import eventBus from '@/utils/eventBus' import eventBus from '@/utils/eventBus'
import { ref, nextTick, computed, toRefs } from 'vue' import { ref, nextTick, computed, toRefs } from 'vue'
import { useEmbedded } from '@/store/modules/embedded'
import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain' import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot' import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
import { useAppStoreWithOut } from '@/store/modules/app' import { useAppStoreWithOut } from '@/store/modules/app'
@ -179,7 +180,15 @@ const backToMain = () => {
backHandler(url) backHandler(url)
} }
} }
const embeddedStore = useEmbedded()
const isEmbedded = computed(() => appStore.getIsDataEaseBi || appStore.getIsIframe)
const backHandler = (url: string) => { const backHandler = (url: string) => {
if (isEmbedded.value) {
embeddedStore.clearState()
useEmitt().emitter.emit('changeCurrentComponent', 'ScreenPanel')
return
}
if (window['dataease-embedded-host'] && openHandler?.value) { if (window['dataease-embedded-host'] && openHandler?.value) {
const pm = { const pm = {
methodName: 'embeddedInteractive', methodName: 'embeddedInteractive',
@ -247,7 +256,7 @@ const fullScreenPreview = () => {
<div class="middle-area"></div> <div class="middle-area"></div>
</template> </template>
<template v-else> <template v-else>
<el-icon v-if="!isDataEaseBi" class="custom-el-icon back-icon" @click="backToMain()"> <el-icon class="custom-el-icon back-icon" @click="backToMain()">
<Icon class="toolbar-icon" name="icon_left_outlined" /> <Icon class="toolbar-icon" name="icon_left_outlined" />
</el-icon> </el-icon>
<div class="left-area"> <div class="left-area">

View File

@ -16,7 +16,6 @@ import { interactiveStoreWithOut } from '@/store/modules/interactive'
const interactiveStore = interactiveStoreWithOut() const interactiveStore = interactiveStoreWithOut()
import router from '@/router' import router from '@/router'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { parseUrl } from '@/utils/ParseUrl'
import _ from 'lodash' import _ from 'lodash'
import DeResourceCreateOptV2 from '@/views/common/DeResourceCreateOptV2.vue' import DeResourceCreateOptV2 from '@/views/common/DeResourceCreateOptV2.vue'
import { useCache } from '@/hooks/web/useCache' import { useCache } from '@/hooks/web/useCache'
@ -106,8 +105,7 @@ const dvSvgType = computed(() =>
curCanvasType.value === 'dashboard' ? 'dv-dashboard-spine' : 'dv-screen-spine' curCanvasType.value === 'dashboard' ? 'dv-dashboard-spine' : 'dv-screen-spine'
) )
const isDataEaseBi = computed(() => appStore.getIsDataEaseBi) const isEmbedded = computed(() => appStore.getIsDataEaseBi || appStore.getIsIframe)
const isIframe = computed(() => appStore.getIsIframe)
const resourceTypeList = computed(() => { const resourceTypeList = computed(() => {
const list = [ const list = [
@ -281,7 +279,7 @@ const operation = (cmd: string, data: BusiTreeNode, nodeType: string) => {
curCanvasType.value === 'dataV' curCanvasType.value === 'dataV'
? `#/dvCanvas?opt=copy&pid=${params.pid}&dvId=${data.data}` ? `#/dvCanvas?opt=copy&pid=${params.pid}&dvId=${data.data}`
: `#/dashboard?opt=copy&pid=${params.pid}&resourceId=${data.data}` : `#/dashboard?opt=copy&pid=${params.pid}&resourceId=${data.data}`
if (isDataEaseBi.value) { if (isEmbedded.value) {
embeddedStore.clearState() embeddedStore.clearState()
embeddedStore.setPid(params.pid as string) embeddedStore.setPid(params.pid as string)
embeddedStore.setOpt('copy') embeddedStore.setOpt('copy')
@ -296,12 +294,6 @@ const operation = (cmd: string, data: BusiTreeNode, nodeType: string) => {
) )
return return
} }
if (isIframe.value) {
router.push(parseUrl(baseUrl))
return
}
const newWindow = window.open(baseUrl, '_blank') const newWindow = window.open(baseUrl, '_blank')
initOpenHandler(newWindow) initOpenHandler(newWindow)
}) })
@ -321,7 +313,7 @@ const addOperation = (
const baseUrl = const baseUrl =
curCanvasType.value === 'dataV' ? '#/dvCanvas?opt=create' : '#/dashboard?opt=create' curCanvasType.value === 'dataV' ? '#/dvCanvas?opt=create' : '#/dashboard?opt=create'
let newWindow = null let newWindow = null
if (isDataEaseBi.value) { if (isEmbedded.value) {
embeddedStore.clearState() embeddedStore.clearState()
embeddedStore.setOpt('create') embeddedStore.setOpt('create')
if (data?.id) { if (data?.id) {
@ -333,11 +325,6 @@ const addOperation = (
) )
return return
} }
if (isIframe.value) {
router.push(parseUrl(data?.id ? baseUrl + `&pid=${data.id}` : baseUrl))
return
}
if (data?.id) { if (data?.id) {
newWindow = window.open(baseUrl + `&pid=${data.id}`, '_blank') newWindow = window.open(baseUrl + `&pid=${data.id}`, '_blank')
} else { } else {
@ -362,7 +349,7 @@ function createNewObject() {
const resourceEdit = resourceId => { const resourceEdit = resourceId => {
const baseUrl = curCanvasType.value === 'dataV' ? '#/dvCanvas?dvId=' : '#/dashboard?resourceId=' const baseUrl = curCanvasType.value === 'dataV' ? '#/dvCanvas?dvId=' : '#/dashboard?resourceId='
if (isDataEaseBi.value) { if (isEmbedded.value) {
embeddedStore.clearState() embeddedStore.clearState()
if (curCanvasType.value === 'dataV') { if (curCanvasType.value === 'dataV') {
embeddedStore.setDvId(resourceId) embeddedStore.setDvId(resourceId)
@ -376,10 +363,6 @@ const resourceEdit = resourceId => {
return return
} }
if (isIframe.value) {
router.push(parseUrl(baseUrl + resourceId))
return
}
const newWindow = window.open(baseUrl + resourceId, '_blank') const newWindow = window.open(baseUrl + resourceId, '_blank')
initOpenHandler(newWindow) initOpenHandler(newWindow)
} }
@ -396,7 +379,7 @@ const resourceCreateFinish = templateData => {
? '#/dvCanvas?opt=create&createType=template' ? '#/dvCanvas?opt=create&createType=template'
: '#/dashboard?opt=create&createType=template' : '#/dashboard?opt=create&createType=template'
let newWindow = null let newWindow = null
if (isDataEaseBi.value) { if (isEmbedded.value) {
embeddedStore.clearState() embeddedStore.clearState()
embeddedStore.setOpt('create') embeddedStore.setOpt('create')
embeddedStore.setCreateType('template') embeddedStore.setCreateType('template')
@ -410,12 +393,6 @@ const resourceCreateFinish = templateData => {
return return
} }
if (isIframe.value) {
router.push(
parseUrl(state.templateCreatePid ? baseUrl + `&pid=${state.templateCreatePid}` : baseUrl)
)
return
}
if (state.templateCreatePid) { if (state.templateCreatePid) {
newWindow = window.open(baseUrl + `&pid=${state.templateCreatePid}`, '_blank') newWindow = window.open(baseUrl + `&pid=${state.templateCreatePid}`, '_blank')
} else { } else {

View File

@ -41,7 +41,7 @@ const downloadAsAppTemplate = downloadType => {
} }
const dvEdit = () => { const dvEdit = () => {
if (isDataEaseBi.value) { if (isDataEaseBi.value || isIframe.value) {
embeddedStore.clearState() embeddedStore.clearState()
if (dvInfo.value.type === 'dataV') { if (dvInfo.value.type === 'dataV') {
embeddedStore.setDvId(dvInfo.value.id) embeddedStore.setDvId(dvInfo.value.id)