feat: 新增导入导出功能😍

2026-04-23 00:00:12 +08:00 · 2022-04-10 17:56:51 +08:00
parent aef57f13f0
commit 16bf72ac24
9 changed files with 185 additions and 42 deletions
@@ -0,0 +1,107 @@
+import { ref, nextTick } from 'vue'
+import { UploadCustomRequestOptions } from 'naive-ui'
+import { FileTypeEnum } from '@/enums/fileTypeEnum'
+import { fetchChartComponent } from '@/packages/index'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { ChartEditStoreEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
+import { readFile, goDialog } from '@/utils'
+import { createComponent } from '@/packages'
+
+// 更新函数
+const updateComponent = async (fileData: any, isSplace = false) => {
+  const chartEditStore = useChartEditStore()
+  const chartHistoryStore = useChartHistoryStore()
+  if (isSplace) {
+    // 清除列表
+    chartEditStore.componentList = []
+    // 清除历史记录
+    chartHistoryStore.clearBackStack()
+    chartHistoryStore.clearForwardStack()
+  }
+  // 列表组件注册
+  fileData.componentList.forEach(async (e: CreateComponentType) => {
+    if (!window['$vue'].component(e.chartConfig.chartKey)) {
+      window['$vue'].component(
+        e.chartConfig.chartKey,
+        fetchChartComponent(e.chartConfig)
+      )
+    }
+  })
+  // 数据赋值
+  for (const key in fileData) {
+    // 组件
+    if (key === ChartEditStoreEnum.COMPONENT_LIST) {
+      for (const comItem of fileData[key]) {
+        // 补充 class 上的方法
+        let newComponent: CreateComponentType = await createComponent(
+          comItem.chartConfig
+        )
+        // 不保存到记录
+        chartEditStore.addComponentList(
+          Object.assign(newComponent, comItem),
+          false,
+          true
+        )
+      }
+    } else {
+      // 非组件
+      Object.assign((chartEditStore as any)[key], fileData[key])
+    }
+  }
+}
+
+export const useFile = () => {
+  const importUploadFileListRef = ref()
+  const chartEditStore = useChartEditStore()
+
+  // 上传-前置
+  //@ts-ignore
+  const importBeforeUpload = ({ file }) => {
+    importUploadFileListRef.value = []
+    const type = file.file.type
+    if (type !== FileTypeEnum.JSON && type !== FileTypeEnum.TXT) {
+      window['$message'].warning('仅支持上传 【JSON】 格式文件，请重新上传！')
+      return false
+    }
+    return true
+  }
+
+  // 上传-导入
+  const importCustomRequest = (options: UploadCustomRequestOptions) => {
+    const { file } = options
+    nextTick(() => {
+      if (file.file) {
+        readFile(file.file).then((fileData: any) => {
+          goDialog({
+            message: '请选择导入方式:',
+            positiveText: '新增（可撤回）',
+            negativeText: '覆盖（不可撤回）',
+            negativeButtonProps: { type: 'info', ghost: false },
+            // 新增
+            onNegativeCallback: async () => {
+              fileData = JSON.parse(fileData)
+              await updateComponent(fileData, true)
+              window['$message'].success('导入成功！')
+            },
+            // 覆盖
+            onPositiveCallback: async () => {
+              fileData = JSON.parse(fileData)
+              await updateComponent(fileData)
+              window['$message'].success('导入成功！')
+            }
+          })
+        })
+      } else {
+        window['$message'].error('导入失败，请检查数据或联系管理员！')
+      }
+    })
+  }
+
+  return {
+    importUploadFileListRef,
+    importBeforeUpload,
+    importCustomRequest
+  }
+}