From 423890a4df7dfb2826ad22f42b167307a9e18bcf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Thu, 26 May 2022 01:01:59 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E4=BF=A1=E6=81=AF=E4=BF=AE=E6=94=B9=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/path/project.ts | 2 +- .../chartEditStore/chartEditStore.d.ts | 8 +++- .../modules/chartEditStore/chartEditStore.ts | 4 ++ src/utils/router.ts | 2 +- .../chart/ContentHeader/headerTitle/index.vue | 48 ++++++++++++------- src/views/chart/hooks/useSync.hook.ts | 24 ++++++++-- 6 files changed, 62 insertions(+), 26 deletions(-) diff --git a/src/api/path/project.ts b/src/api/path/project.ts index 56dbe67c..69899dde 100644 --- a/src/api/path/project.ts +++ b/src/api/path/project.ts @@ -42,7 +42,7 @@ export const saveProjectApi = async (data: object) => { } } -// * 修改项目 +// * 修改项目基础信息 export const updateProjectApi = async (data: object) => { try { const res = await http(RequestHttpEnum.POST)(`${ModuleTypeEnum.PROJECT}/edit`, data); diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 34a24a8d..92718352 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -42,8 +42,10 @@ export type EditCanvasType = { [EditCanvasTypeEnum.SAVE_STATUS]: SyncEnum } -// 滤镜/背景色/宽高主题等 +// 画布数据/滤镜/背景色/宽高主题等 export enum EditCanvasConfigEnum { + PROJECT_NAME = 'projectName', + REMARKS = 'remarks', WIDTH = 'width', HEIGHT = 'height', CHART_THEME_COLOR = 'chartThemeColor', @@ -56,6 +58,10 @@ export enum EditCanvasConfigEnum { // 画布属性（需保存） export interface EditCanvasConfigType { + // 项目名称 + [EditCanvasConfigEnum.PROJECT_NAME]: string, + // 项目描述 + [EditCanvasConfigEnum.REMARKS]: string, // 滤镜-色相 [FilterEnum.HUE_ROTATE]: number // 滤镜-饱和度 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 16e4e09e..095d510e 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -72,6 +72,10 @@ export const useChartEditStore = defineStore({ // ----------------------- // 画布属性（需存储给后端） editCanvasConfig: { + // 项目名称 + projectName: '', + // 描述 + remarks: '', // 默认宽度 width: 1920, // 默认高度 diff --git a/src/utils/router.ts b/src/utils/router.ts index b1ee6a76..db3d6134 100644 --- a/src/utils/router.ts +++ b/src/utils/router.ts @@ -167,7 +167,7 @@ export const fetchRouteParams = () => { * * 通过硬解析获取当前路由下的参数 * @returns object */ -export const fetchRouteParamsByhistory = () => { +export const fetchRouteParamsLocation = () => { try { return document.location.hash.split('/').pop() || '' } catch (error) { diff --git a/src/views/chart/ContentHeader/headerTitle/index.vue b/src/views/chart/ContentHeader/headerTitle/index.vue index a0cebe50..05fca106 100644 --- a/src/views/chart/ContentHeader/headerTitle/index.vue +++ b/src/views/chart/ContentHeader/headerTitle/index.vue @@ -24,32 +24,31 @@ diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts index 553ce522..95b8a37f 100644 --- a/src/views/chart/hooks/useSync.hook.ts +++ b/src/views/chart/hooks/useSync.hook.ts @@ -1,7 +1,7 @@ import { onUnmounted } from 'vue'; -import { getUUID, httpErrorHandle, fetchRouteParamsByhistory } from '@/utils' +import { getUUID, httpErrorHandle, fetchRouteParamsLocation } from '@/utils' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' -import { EditCanvasTypeEnum, ChartEditStoreEnum } from '@/store/modules/chartEditStore/chartEditStore.d' +import { EditCanvasTypeEnum, ChartEditStoreEnum, EditCanvasConfigEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d' import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' import { fetchChartComponent, createComponent } from '@/packages/index' import { CreateComponentType } from '@/packages/index.d' @@ -24,7 +24,7 @@ export const useSync = () => { * @param isSplace 是否替换数据 * @returns */ - const updateComponent = async (projectData: any, isSplace = false) => { + const updateComponent = async (projectData: ChartEditStorage, isSplace = false) => { if (isSplace) { // 清除列表 chartEditStore.componentList = [] @@ -65,14 +65,27 @@ export const useSync = () => { } } + /** + * * 赋值全局数据 + * @param projectData 项目数据 + * @returns + */ + const updateStoreInfo = (projectData: ChartEditStorage) => { + const { projectName, remarks } = projectData.editCanvasConfig + chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PROJECT_NAME, projectName) + chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.REMARKS, remarks) + } + // 数据获取 const dataSyncFetch = async () => { chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START) try { - const res: any = await fetchProjectApi({ projectId: fetchRouteParamsByhistory() }) + const res: any = await fetchProjectApi({ projectId: fetchRouteParamsLocation() }) if (res.code === ResultEnum.SUCCESS) { if (res.data) { const data = JSON.parse(res.data) + updateStoreInfo(data) + // 更新全局数据 await updateComponent(data) return } @@ -93,7 +106,7 @@ export const useSync = () => { chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START) let params = new FormData() - params.append('projectId', fetchRouteParamsByhistory()) + params.append('projectId', fetchRouteParamsLocation()) params.append('content', JSON.stringify(chartEditStore.getStorageInfo || {})) const res: any = await saveProjectApi(params) @@ -123,6 +136,7 @@ export const useSync = () => { return { updateComponent, + updateStoreInfo, dataSyncFetch, dataSyncUpdate, intervalDataSyncUpdate