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 @@
</template>
<script setup lang="ts">
-import { ref, nextTick, computed } from 'vue'
-import { fetchRouteParams } from '@/utils'
+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 { updateProjectApi } from '@/api/path/project'
+import { useSync } from '../../hooks/useSync.hook'
import { icon } from '@/plugins'
+
+const chartEditStore = useChartEditStore()
+const { dataSyncUpdate } = useSync()
const { FishIcon } = icon.ionicons5
const focus = ref<boolean>(false)
const inputInstRef = ref(null)
-// 根据路由 id 参数获取项目信息
-const fetchProhectInfoById = () => {
- const routeParamsRes = fetchRouteParams()
- if (!routeParamsRes) return
- const { id } = routeParamsRes
- if (id.length) {
- return id[0]
- }
- return ''
-
-}
-
-const title = ref<string>(fetchProhectInfoById() || '')
+const title = ref<string>(fetchRouteParamsLocation())
+watchEffect(() => {
+ title.value = chartEditStore.getEditCanvasConfig.projectName || ''
+})
const comTitle = computed(() => {
- title.value = title.value.replace(/\s/g, "");
- return title.value.length ? title.value : '新项目'
+ title.value = title.value && title.value.replace(/\s/g, "")
+ return title.value.length ? title.value : fetchRouteParamsLocation()
})
const handleFocus = () => {
@@ -59,7 +58,20 @@ const handleFocus = () => {
})
}
-const handleBlur = () => {
+const handleBlur = async () => {
focus.value = false
+ chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PROJECT_NAME, title.value || '')
+ const { remarks, backgroundImage, background } = chartEditStore.getEditCanvasConfig
+ const res:any = await updateProjectApi({
+ id: fetchRouteParamsLocation(),
+ projectName: title.value,
+ indexImage: backgroundImage || background,
+ remarks: remarks
+ })
+ if(res.code === ResultEnum.SUCCESS) {
+ dataSyncUpdate()
+ } else {
+ httpErrorHandle()
+ }
}
</script>
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