!95 feat: JSON编辑优化以及兼容后端接口保存

Merge pull request !95 from 潘潘/master-fetch-dev

src/views/chart/ContentEdit/components/EditTools/hooks/useSyncUpdate.hook.ts

@@ -6,28 +6,26 @@ import { ChartEnum } from '@/enums/pageEnum'
 import { SavePageEnum } from '@/enums/editPageEnum'
 import { editToJsonInterval } from '@/settings/designSetting'
 
-const { updateComponent } = useSync()
+const { updateComponent, dataSyncUpdate } = useSync()
 const chartEditStore = useChartEditStore()
- 
+
 // 侦听器更新
 const useSyncUpdateHandle = () => {
-  const routerParamsInfo = useRoute()
   // 定义侦听器变量
   let timer: any
   const updateFn = (e: any) => updateComponent(e!.detail, true, false)
-  const syncData = () => {
-    if (routerParamsInfo.name == ChartEnum.CHART_HOME_NAME) {
-      dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
-    }
+  const syncData = async () => {
+    dataSyncUpdate && (await dataSyncUpdate())
+    dispatchEvent(new CustomEvent(SavePageEnum.CHART, { detail: chartEditStore.getStorageInfo }))
   }
 
   // 开启侦听
   const use = () => {
-    // 1、定时同步数据
-    timer = setInterval(() => {
-      // 窗口激活并且处于工作台
-      document.hasFocus() && syncData()
-    }, editToJsonInterval)
+    // // 1、定时同步数据
+    // timer = setInterval(() => {
+    //   // 窗口激活并且处于工作台
+    //   document.hasFocus() && syncData()
+    // }, editToJsonInterval)
     // 2、失焦同步数据
     addEventListener('blur', syncData)
 
@@ -37,7 +35,7 @@ const useSyncUpdateHandle = () => {
 
   // 关闭侦听
   const unUse = () => {
-    clearInterval(timer)
+    // clearInterval(timer)
     removeEventListener(SavePageEnum.JSON, updateFn)
     removeEventListener('blur', syncData)
   }

src/views/chart/ContentEdit/components/EditTools/index.vue

@@ -137,7 +137,8 @@ const toolsMouseoutHandle = () => {
 
 // 编辑处理
 const editHandle = () => {
-  window['$message'].warning('将开启失焦更新与 5 秒同步更新！')
+  window['$message'].warning('将开启失焦更新！')
+//   window['$message'].warning('将开启失焦更新与 5 秒同步更新！')
   setTimeout(() => {
     // 获取id路径
     const path = fetchPathByName(EditEnum.CHART_EDIT_NAME, 'href')

src/views/chart/hooks/useSync.hook.ts

@@ -238,7 +238,7 @@ export const useSync = () => {
   }
 
   // * 数据保存
-  const dataSyncUpdate = throttle(async () => {
+  const dataSyncUpdate = throttle(async (updateImg = true) => {
     if(!fetchRouteParamsLocation()) return
 
     let projectId = chartEditStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID];
@@ -249,25 +249,32 @@ export const useSync = () => {
 
     chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START)
 
-    // 获取缩略图片
-    const range = document.querySelector('.go-edit-range') as HTMLElement
-    // 生成图片
-    const canvasImage: HTMLCanvasElement = await html2canvas(range, {
-      backgroundColor: null,
-      allowTaint: true,
-      useCORS: true
-    })
+    // 异常处理：缩略图上传失败不影响JSON的保存
+    try {
+      if (updateImg) {
+        // 获取缩略图片
+        const range = document.querySelector('.go-edit-range') as HTMLElement
+        // 生成图片
+        const canvasImage: HTMLCanvasElement = await html2canvas(range, {
+          backgroundColor: null,
+          allowTaint: true,
+          useCORS: true
+        })
 
-    // 上传预览图
-    let uploadParams = new FormData()
-    uploadParams.append('object', base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`))
-    const uploadRes = await uploadFile(uploadParams) as unknown as MyResponseType
-    // 保存预览图
-    if(uploadRes.code === ResultEnum.SUCCESS) {
-      await updateProjectApi({
-        id: fetchRouteParamsLocation(),
-        indexImage: `${systemStore.getFetchInfo.OSSUrl}${uploadRes.data.fileName}`
-      })
+        // 上传预览图
+        let uploadParams = new FormData()
+        uploadParams.append('object', base64toFile(canvasImage.toDataURL(), `${fetchRouteParamsLocation()}_index_preview.png`))
+        const uploadRes = await uploadFile(uploadParams) as unknown as MyResponseType
+        // 保存预览图
+        if(uploadRes.code === ResultEnum.SUCCESS) {
+          await updateProjectApi({
+            id: fetchRouteParamsLocation(),
+            indexImage: `${systemStore.getFetchInfo.OSSUrl}${uploadRes.data.fileName}`
+          })
+        }
+      }
+    } catch (e) {
+      console.log(e)
     }
 
     // 保存数据

src/views/edit/index.vue

@@ -38,20 +38,23 @@ import { MonacoEditor } from '@/components/Pages/MonacoEditor'
 import { SavePageEnum } from '@/enums/editPageEnum'
 import { getSessionStorageInfo } from '../preview/utils'
 import type { ChartEditStorageType } from '../preview/index.d'
-import { setSessionStorage } from '@/utils'
+import { setSessionStorage, fetchRouteParamsLocation } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 import { icon } from '@/plugins'
-
+import { useSync } from '@/views/chart/hooks/useSync.hook'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { ProjectInfoEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+const chartEditStore = useChartEditStore()
+const { dataSyncUpdate } = useSync()
 const { ChevronBackOutlineIcon, DownloadIcon } = icon.ionicons5
 const showOpenFilePicker: Function = (window as any).showOpenFilePicker
-let content = ref('')
-
+const content = ref('')
 // 从sessionStorage 获取数据
-function getDataBySession() {
-  const localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as unknown as ChartEditStorageType
+async function getDataBySession() {
+  const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as unknown as ChartEditStorageType
   content.value = JSON.stringify(localStorageInfo, undefined, 2)
 }
-getDataBySession()
+setTimeout(getDataBySession)
 
 // 返回父窗口
 function back() {
@@ -86,7 +89,7 @@ document.addEventListener('keydown', function (e) {
 addEventListener('blur', updateSync)
 
 // 同步更新
-function updateSync() {
+async function updateSync() {
   if (!window.opener) {
     return window['$message'].error('源窗口已关闭，视图同步失败')
   }
@@ -94,6 +97,11 @@ function updateSync() {
     const detail = JSON.parse(content.value)
     delete detail.id
     // 保持id不变
+    // 带后端版本额外处理请求
+    if (dataSyncUpdate) {
+      chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_ID, fetchRouteParamsLocation())
+      await dataSyncUpdate(false) // JSON界面保存不上传缩略图
+    }
     window.opener.dispatchEvent(new CustomEvent(SavePageEnum.JSON, { detail }))
   } catch (e) {
     window['$message'].error('内容格式有误')

src/views/preview/wrapper.vue

@@ -12,12 +12,12 @@ import { ref } from 'vue'
 import Preview from './index.vue'
 
 let key = ref(Date.now())
-let localStorageInfo: ChartEditStorageType = getSessionStorageInfo() as unknown as ChartEditStorageType
 
-// 数据变更 -> 同步sessionStorage -> reload页面 （重新执行Mounted）
+// 数据变更 -> 组件销毁重建
 ;[SavePageEnum.JSON, SavePageEnum.CHART].forEach((saveEvent: string) => {
   if (!window.opener) return
-  window.opener.addEventListener(saveEvent, (e: any) => {
+  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()
   })