From 9098443c83131967afdb83d6c3d90e558b5f7b83 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: Fri, 27 May 2022 11:49:25 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BF=AE=E6=94=B9=E9=A1=B9=E7=9B=AE?= =?UTF-8?q?=E4=BF=A1=E6=81=AF=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chartEditStore/chartEditStore.d.ts | 23 +++++++++++++--- .../modules/chartEditStore/chartEditStore.ts | 18 ++++++++++--- .../chart/ContentHeader/headerTitle/index.vue | 9 +++---- src/views/chart/hooks/useSync.hook.ts | 26 ++++++++++++------- 4 files changed, 54 insertions(+), 22 deletions(-) diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index 92718352..022fc543 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -8,6 +8,23 @@ import type { GlobalThemeJsonType, } from '@/settings/chartThemes/index' +// 项目数据枚举 +export enum ProjectInfoEnum { + // 名称 + PROJECT_NAME = 'projectName', + // 描述 + REMARKS = 'remarks', + // 缩略图 + THUMBNAIL= 'thumbnail' +} + +// 项目数据 +export type ProjectInfoType = { + projectName: string, + remarks: string, + thumbnail: string +} + // 编辑画布属性 export enum EditCanvasTypeEnum { EDIT_LAYOUT_DOM = 'editLayoutDom', @@ -44,8 +61,6 @@ export type EditCanvasType = { // 画布数据/滤镜/背景色/宽高主题等 export enum EditCanvasConfigEnum { - PROJECT_NAME = 'projectName', - REMARKS = 'remarks', WIDTH = 'width', HEIGHT = 'height', CHART_THEME_COLOR = 'chartThemeColor', @@ -57,7 +72,7 @@ export enum EditCanvasConfigEnum { } // 画布属性（需保存） -export interface EditCanvasConfigType { +export type EditCanvasConfigType = { // 项目名称 [EditCanvasConfigEnum.PROJECT_NAME]: string, // 项目描述 @@ -129,6 +144,7 @@ export type RecordChartType = { // Store 枚举 export enum ChartEditStoreEnum { + PROJECT_INFO = 'projectInfo', EDIT_RANGE = 'editRange', EDIT_CANVAS = 'editCanvas', RIGHT_MENU_SHOW = 'rightMenuShow', @@ -161,6 +177,7 @@ export type RequestConfigType = { // Store 类型 export interface ChartEditStoreType { + [ChartEditStoreEnum.PROJECT_INFO]: ProjectInfoType [ChartEditStoreEnum.EDIT_CANVAS]: EditCanvasType [ChartEditStoreEnum.EDIT_CANVAS_CONFIG]: EditCanvasConfigType [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 095d510e..7d64add2 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -15,6 +15,7 @@ import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@ import { MenuEnum, SyncEnum } from '@/enums/editPageEnum' import { + ProjectInfoType, ChartEditStoreEnum, ChartEditStorage, ChartEditStoreType, @@ -33,6 +34,12 @@ const settingStore = useSettingStore() export const useChartEditStore = defineStore({ id: 'useChartEditStore', state: (): ChartEditStoreType => ({ + // 项目数据 + projectInfo: { + projectName: '', + remarks: '', + thumbnail: '' + }, // 画布属性 editCanvas: { // 编辑区域 Dom @@ -72,10 +79,6 @@ export const useChartEditStore = defineStore({ // ----------------------- // 画布属性（需存储给后端） editCanvasConfig: { - // 项目名称 - projectName: '', - // 描述 - remarks: '', // 默认宽度 width: 1920, // 默认高度 @@ -117,6 +120,9 @@ export const useChartEditStore = defineStore({ componentList: [] }), getters: { + getProjectInfo(): ProjectInfoType { + return this.projectInfo + }, getMousePosition(): MousePositionType { return this.mousePosition }, @@ -151,6 +157,10 @@ export const useChartEditStore = defineStore({ } }, actions: { + // * 设置 peojectInfo 数据项 + setProjectInfo(key: T, value: K) { + this.projectInfo[key] = value + }, // * 设置 editCanvas 数据项 setEditCanvas(key: T, value: K) { this.editCanvas[key] = value diff --git a/src/views/chart/ContentHeader/headerTitle/index.vue b/src/views/chart/ContentHeader/headerTitle/index.vue index 05fca106..a56f2556 100644 --- a/src/views/chart/ContentHeader/headerTitle/index.vue +++ b/src/views/chart/ContentHeader/headerTitle/index.vue @@ -28,7 +28,7 @@ import { ref, nextTick, computed, watchEffect } from 'vue' import { ResultEnum } from '@/enums/httpEnum' import { fetchRouteParamsLocation, httpErrorHandle } from '@/utils' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' -import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d' +import { ProjectInfoEnum } from '@/store/modules/chartEditStore/chartEditStore.d' import { updateProjectApi } from '@/api/path/project' import { useSync } from '../../hooks/useSync.hook' import { icon } from '@/plugins' @@ -43,7 +43,7 @@ const inputInstRef = ref(null) const title = ref(fetchRouteParamsLocation()) watchEffect(() => { - title.value = chartEditStore.getEditCanvasConfig.projectName || '' + title.value = chartEditStore.getProjectInfo.projectName || '' }) const comTitle = computed(() => { @@ -60,13 +60,10 @@ const handleFocus = () => { const handleBlur = async () => { focus.value = false - chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PROJECT_NAME, title.value || '') - const { remarks, backgroundImage, background } = chartEditStore.getEditCanvasConfig + chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_NAME, title.value || '') const res:any = await updateProjectApi({ id: fetchRouteParamsLocation(), projectName: title.value, - indexImage: backgroundImage || background, - remarks: remarks }) if(res.code === ResultEnum.SUCCESS) { dataSyncUpdate() diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts index 95b8a37f..b2549910 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, fetchRouteParamsLocation } from '@/utils' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' -import { EditCanvasTypeEnum, ChartEditStoreEnum, EditCanvasConfigEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d' +import { EditCanvasTypeEnum, ChartEditStoreEnum, ProjectInfoEnum, 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' @@ -50,7 +50,6 @@ export const useSync = () => { let newComponent: CreateComponentType = await createComponent( comItem.chartConfig ) - // 不保存到记录 chartEditStore.addComponentList( Object.assign(newComponent, {...comItem, id: getUUID()}), false, @@ -70,10 +69,19 @@ 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 updateStoreInfo = (projectData: { + id: string, + projectName: string, + indexImage: string, + remarks: string, + }) => { + const { projectName, remarks, indexImage } = projectData + // 名称 + chartEditStore.setProjectInfo(ProjectInfoEnum.PROJECT_NAME, projectName) + // 描述 + chartEditStore.setProjectInfo(ProjectInfoEnum.REMARKS, remarks) + // 缩略图 + chartEditStore.setProjectInfo(ProjectInfoEnum.THUMBNAIL, indexImage) } // 数据获取 @@ -83,10 +91,9 @@ export const useSync = () => { const res: any = await fetchProjectApi({ projectId: fetchRouteParamsLocation() }) if (res.code === ResultEnum.SUCCESS) { if (res.data) { - const data = JSON.parse(res.data) - updateStoreInfo(data) + updateStoreInfo(res.data) // 更新全局数据 - await updateComponent(data) + await updateComponent(JSON.parse(res.data.content)) return } setTimeout(() => { @@ -103,6 +110,7 @@ export const useSync = () => { // 数据保存 const dataSyncUpdate = async () => { + if(!fetchRouteParamsLocation()) return chartEditStore.setEditCanvas(EditCanvasTypeEnum.SAVE_STATUS, SyncEnum.START) let params = new FormData()