index.vue
4.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<template>
<section>
<preview v-if="!allowLoadPreviewPage" :key="key"></preview>
<NEmpty v-if="isEmpty" style="position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);" />
<NModal :show="showModal" :maskClosable="false" :closable="false" style="width: 300px;">
<NCard>
<NForm @keyup.enter="handleSubmit">
<NFormItem label="访问令牌">
<NInputGroup>
<NInput v-model:value="accessCredentials" show-password-on="mousedown" type="password"
style="width: 70%;" />
<NButton :loading="loading" type="primary" style="width: 30%;" @click="handleSubmit">
<svg style="transform: rotate(180deg);" t="1682068997810" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="79416" width="24" height="24">
<path
d="M512 928H128c-19.2 0-32-12.8-32-32V128c0-19.2 12.8-32 32-32h384c19.2 0 32 12.8 32 32s-12.8 32-32 32H160v704h352c19.2 0 32 12.8 32 32s-12.8 32-32 32z"
fill="#fff" p-id="79417" />
<path
d="M534.4 736c-9.6 0-16-3.2-22.4-9.6l-192-192c-12.8-12.8-12.8-32 0-44.8l192-192c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L387.2 512l169.6 169.6c12.8 12.8 12.8 32 0 44.8-6.4 6.4-16 9.6-22.4 9.6z"
fill="#fff" p-id="79418" />
<path d="M896 544H342.4c-19.2 0-32-12.8-32-32s12.8-32 32-32H896c19.2 0 32 12.8 32 32s-12.8 32-32 32z"
fill="#fff" p-id="79419" />
</svg>
</NButton>
</NInputGroup>
</NFormItem>
</NForm>
</NCard>
</NModal>
</section>
</template>
<script setup lang="ts">
import { NEmpty, NCard, NForm, NFormItem, NInput, NButton, NInputGroup } from 'naive-ui'
import { getSessionStorageInfo } from '../preview/utils'
import type { ChartEditStorageType } from '../preview/index.d'
import { SavePageEnum } from '@/enums/editPageEnum'
import { JSONParse, setSessionStorage, setTitle } from '@/utils'
import { StorageEnum } from '@/enums/storageEnum'
import { onMounted, ref, unref } from 'vue'
import Preview from '../preview/index.vue'
import { useRoute } from 'vue-router'
import { useUserStore } from '@/store/external/modules/user'
import { checkSharePageNeedAccessToken, getPublicToken, getShareContentData } from '@/api/external/sys/share'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
const allowLoadPreviewPage = ref(true)
const showModal = ref(false)
const ROUTE = useRoute()
const accessCredentials = ref('')
const loading = ref(false)
const userStore = useUserStore()
const chartEditStore = useChartEditStore()
const getToken = async () => {
const { params } = ROUTE
const { publicId } = params as Record<'id' | 'publicId', string>
const { token, refreshToken } = await getPublicToken(publicId)
userStore.storeShareToken(token, refreshToken)
}
const checkNeedAccessToken = async () => {
const { params } = ROUTE
const { id } = params as Record<'id' | 'publicId', string>
const res = await checkSharePageNeedAccessToken(id)
return res.data
}
const sharePageHandlerProcess = async () => {
await getToken()
const flag = await checkNeedAccessToken()
if (flag) {
showModal.value = true
} else {
allowLoadPreviewPage.value = false
await getSharePageContentData()
}
}
const isEmpty = ref(false)
const getSharePageContentData = async () => {
try {
const { params } = ROUTE
const { id } = params as Record<'id' | 'publicId', string>
loading.value = true
const res = await getShareContentData({ id, accessCredentials: unref(accessCredentials) })
const { dataViewContent, dataViewName, dataViewId } = res.data
if (!dataViewContent.content) isEmpty.value = true
const content = JSONParse(dataViewContent.content || '{}') as ChartEditStorageType
if (content) {
const { editCanvasConfig, requestGlobalConfig, componentList } = content
chartEditStore.editCanvasConfig = editCanvasConfig
chartEditStore.requestGlobalConfig = requestGlobalConfig
chartEditStore.componentList = componentList
}
setTitle(dataViewName || '')
showModal.value = false
allowLoadPreviewPage.value = false
} catch (error) {
console.log(error)
} finally {
loading.value = false
}
}
const handleSubmit = () => {
getSharePageContentData()
}
onMounted(() => {
sharePageHandlerProcess()
})
let key = ref(Date.now())
// 数据变更 -> 组件销毁重建
;[SavePageEnum.JSON, SavePageEnum.CHART].forEach((saveEvent: string) => {
if (!window.opener) return
window.opener.addEventListener(saveEvent, async (e: any) => {
const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
setSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST, [{ ...e.detail, id: localStorageInfo.id }])
key.value = Date.now()
})
})
</script>