From 16bf72ac24d0459885709d139de6b39b0bda1a2b Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Sun, 10 Apr 2022 17:56:51 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=AF=BC=E5=85=A5?= =?UTF-8?q?=E5=AF=BC=E5=87=BA=E5=8A=9F=E8=83=BD=F0=9F=98=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/packages/index.ts | 10 +- .../modules/chartEditStore/chartEditStore.ts | 2 +- .../chartHistoryStore/chartHistoryStore.ts | 5 + .../components/CanvasPage/index.vue | 2 +- .../EditTools/hooks/useFile.hooks.ts | 107 ++++++++++++++++++ .../components/EditTools/index.d.ts | 12 ++ .../components/EditTools/index.vue | 64 +++++++---- .../components/EditTools/utils/index.ts | 23 ++-- src/views/preview/hooks/useComInstall.hook.ts | 2 +- 9 files changed, 185 insertions(+), 42 deletions(-) create mode 100644 src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts create mode 100644 src/views/chart/ContentEdit/components/EditTools/index.d.ts diff --git a/src/packages/index.ts b/src/packages/index.ts index 84c7e510..adfa09f7 100644 --- a/src/packages/index.ts +++ b/src/packages/index.ts @@ -22,12 +22,12 @@ export let packagesList: PackagesType = { } /** - * * 获取目标拖拽组件配置信息 - * @param dropData + * * 获取目标组件配置信息 + * @param targetData */ - export const createComponent = async (dropData: ConfigType) => { - const { category, key } = dropData - const chart = await import(`./components/${dropData.package}/${category}/${key}/config.ts`) + export const createComponent = async (targetData: ConfigType) => { + const { category, key } = targetData + const chart = await import(`./components/${targetData.package}/${category}/${key}/config.ts`) return new chart.default() } diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index a1bf4c9a..e67456f6 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -5,7 +5,6 @@ import debounce from 'lodash/debounce' import cloneDeep from 'lodash/cloneDeep' import { defaultTheme, globalThemeJson } from '@/settings/chartThemes/index' import { requestInterval } from '@/settings/designSetting' -import { chartMoveDistance } from '@/settings/systemSetting' // 记录记录 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' // 全局设置 @@ -63,6 +62,7 @@ export const useChartEditStore = defineStore({ }, // 记录临时数据（复制等） recordChart: undefined, + // ----------------------- // 画布属性（需存储给后端） editCanvasConfig: { // 默认宽度 diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.ts index 4113eadd..1355cd75 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.ts @@ -100,6 +100,11 @@ export const useChartHistoryStore = defineStore({ clearForwardStack() { this.forwardStack = [] }, + // * 清空后退栈(保留初始化) + clearBackStack() { + const canvasHistory = this.getBackStack[0] + this.backStack = [canvasHistory] + }, // * 撤回 backAction() { try { diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue index b34f8b06..651094f2 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue @@ -121,7 +121,7 @@ const ChartDataSetting = loadAsyncComponent(() => import('./components/ChartDataSetting/index.vue') ) -// 页面设置 +// 展示颜色列表 const swatchesColors = [ '#232324', '#2a2a2b', diff --git a/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts b/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts new file mode 100644 index 00000000..f16810ea --- /dev/null +++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts @@ -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 + } +} diff --git a/src/views/chart/ContentEdit/components/EditTools/index.d.ts b/src/views/chart/ContentEdit/components/EditTools/index.d.ts new file mode 100644 index 00000000..e23da79b --- /dev/null +++ b/src/views/chart/ContentEdit/components/EditTools/index.d.ts @@ -0,0 +1,12 @@ +export enum TypeEnum { + BOTTON = 'bottom', + IMPORTUPLOAD = 'importUpload' +} + +export type BtnListType = { + key: string + type: TypeEnum + name: string + icon: any + handle?: () => void +} diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue index fe1e573c..369e481f 100644 --- a/src/views/chart/ContentEdit/components/EditTools/index.vue +++ b/src/views/chart/ContentEdit/components/EditTools/index.vue @@ -17,31 +17,44 @@ placement="left" > {{ item.name }} @@ -49,10 +62,12 @@