fix: iframe嵌入式无法从仪表板编辑页面打开数据集

This commit is contained in:
fit2cloud-chenyw 2024-04-02 09:28:37 +08:00
parent 9d417d3e44
commit c4a2f1f571
5 changed files with 46 additions and 15 deletions

View File

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

View File

@ -5,12 +5,9 @@ import { Plus, Search } from '@element-plus/icons-vue'
import { useI18n } from '@/hooks/web/useI18n' import { useI18n } from '@/hooks/web/useI18n'
import { useAppStoreWithOut } from '@/store/modules/app' import { useAppStoreWithOut } from '@/store/modules/app'
import _ from 'lodash' import _ from 'lodash'
import { useRouter } from 'vue-router'
import { getDatasetTree } from '@/api/dataset' import { getDatasetTree } from '@/api/dataset'
import { ElFormItem, FormInstance } from 'element-plus-secondary' import { ElFormItem, FormInstance } from 'element-plus-secondary'
const { resolve } = useRouter()
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
themes?: EditorTheme themes?: EditorTheme
@ -44,7 +41,12 @@ const initDataset = () => {
}) })
} }
const emits = defineEmits(['update:modelValue', 'update:stateObj', 'onDatasetChange']) const emits = defineEmits([
'update:modelValue',
'update:stateObj',
'onDatasetChange',
'addDsWindow'
])
const _modelValue = computed({ const _modelValue = computed({
get() { get() {
@ -151,8 +153,7 @@ const refresh = () => {
initDataset() initDataset()
} }
const addDataset = () => { const addDataset = () => {
const { href } = resolve('/dataset-form') emits('addDsWindow')
window.open(href, '_blank')
} }
const datasetSelectorPopover = ref() const datasetSelectorPopover = ref()

View File

@ -51,7 +51,9 @@ import { useDraggable } from '@vueuse/core'
import { set, concat, keys } from 'lodash-es' import { set, concat, keys } from 'lodash-es'
import { Field, getFieldByDQ } from '@/api/chart' import { Field, getFieldByDQ } from '@/api/chart'
import ChartTemplateInfo from '@/views/chart/components/editor/common/ChartTemplateInfo.vue' import ChartTemplateInfo from '@/views/chart/components/editor/common/ChartTemplateInfo.vue'
import { XpackComponent } from '@/components/plugin'
import { useEmbedded } from '@/store/modules/embedded'
const embeddedStore = useEmbedded()
const snapshotStore = snapshotStoreWithOut() const snapshotStore = snapshotStoreWithOut()
const dvMainStore = dvMainStoreWithOut() const dvMainStore = dvMainStoreWithOut()
const { canvasCollapse, curComponent, componentData, editMode } = storeToRefs(dvMainStore) const { canvasCollapse, curComponent, componentData, editMode } = storeToRefs(dvMainStore)
@ -977,15 +979,34 @@ const saveResultFilter = () => {
const collapseChange = type => { const collapseChange = type => {
canvasCollapse.value[type] = !canvasCollapse.value[type] canvasCollapse.value[type] = !canvasCollapse.value[type]
} }
const openHandler = ref(null)
const initOpenHandler = newWindow => {
if (openHandler?.value) {
const pm = {
methodName: 'initOpenHandler',
args: newWindow
}
openHandler.value.invokeMethod(pm)
}
}
const addDsWindow = () => {
const path =
embeddedStore.getToken && appStore.getIsIframe ? 'dataset-embedded-form' : '/dataset-form'
let routeData = router.resolve(path)
const newWindow = window.open(routeData.href, '_blank')
initOpenHandler(newWindow)
}
const editDs = () => { const editDs = () => {
const path =
embeddedStore.getToken && appStore.getIsIframe ? 'dataset-embedded-form' : '/dataset-form'
let routeData = router.resolve({ let routeData = router.resolve({
path: '/dataset-form', path: path,
query: { query: {
id: view.value.tableId id: view.value.tableId
} }
}) })
window.open(routeData.href, '_blank') const newWindow = window.open(routeData.href, '_blank')
initOpenHandler(newWindow)
} }
const showQuotaEditCompare = item => { const showQuotaEditCompare = item => {
@ -1846,6 +1867,7 @@ const onRefreshChange = val => {
:state-obj="state" :state-obj="state"
v-model="view.tableId" v-model="view.tableId"
:themes="themes" :themes="themes"
@add-ds-window="addDsWindow"
@onDatasetChange="recordSnapshotInfo('calcData')" @onDatasetChange="recordSnapshotInfo('calcData')"
/> />
<el-tooltip :effect="toolTip" content="编辑数据集" placement="top"> <el-tooltip :effect="toolTip" content="编辑数据集" placement="top">
@ -2211,6 +2233,7 @@ const onRefreshChange = val => {
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
<XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>

View File

@ -39,7 +39,7 @@ import {
import type { Table } from '@/api/dataset' import type { Table } from '@/api/dataset'
import DatasetUnion from './DatasetUnion.vue' import DatasetUnion from './DatasetUnion.vue'
import { cloneDeep, debounce } from 'lodash-es' import { cloneDeep, debounce } from 'lodash-es'
import { XpackComponent } from '@/components/plugin'
interface DragEvent extends MouseEvent { interface DragEvent extends MouseEvent {
dataTransfer: DataTransfer dataTransfer: DataTransfer
} }
@ -573,8 +573,10 @@ const getTableName = async (datasourceId, tableName) => {
searchTable.value = tableName searchTable.value = tableName
} }
} }
let p = null
const initEdite = () => { const XpackLoaded = () => p(true)
const initEdite = async () => {
await new Promise(r => (p = r))
const { id, datasourceId, tableName } = route.query const { id, datasourceId, tableName } = route.query
const { id: copyId } = route.params const { id: copyId } = route.params
if (datasourceId) { if (datasourceId) {
@ -1896,6 +1898,11 @@ const getDsIconName = data => {
</el-button> </el-button>
</template> </template>
</el-dialog> </el-dialog>
<XpackComponent
jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvTmV3V2luZG93SGFuZGxlcg=="
@loaded="XpackLoaded"
@load-fail="XpackLoaded"
/>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>

@ -1 +1 @@
Subproject commit fac43165280525519002d8aed6882ce691169280 Subproject commit c2a9c373068f756bd0f19ba5ec1a8b56372062dc