feat(title): 标题修改和保存

ww
1 parent 5dda291d
Showing 5 changed files with 56 additions and 84 deletions
src/api/external/contentSave/content.ts
src/api/external/contentSave/model/contentModel.ts
src/store/external/modules/projectInfo.d.ts
src/views/chart/ContentHeader/headerTitle/index.vue
src/views/chart/hooks/external/useRemote.hook.ts
--- a/src/api/external/contentSave/content.ts
View file @6d1b662
+++ b/src/api/external/contentSave/content.ts
View file @6d1b662
 import { defHttp } from '@/utils/external/http/axios'
-import { BaseSaveContentParams, BaseUpdateContentParams, DataViewListRecord } from './model/contentModel'
-
+import { BaseSaveContentParams, BaseUpdateContentParams, DataViewListRecord, DateViewConfigurationInfoType } from './model/contentModel'
 import type { ErrorMessageMode, PaginationResult } from '/#/external/axios'
 enum Api {
@@ -61,7 +60,7 @@ export function contentDeleteApi(data: [string], mode: ErrorMessageMode = 'modal
  */
 export const getDataView = (id: string) => {
-  return defHttp.get<BaseUpdateContentParams>({
+  return defHttp.get<DateViewConfigurationInfoType>({
     url: `${Api.DATA_VIEW}/get_configuration_info/${id}`
   })
 }
--- a/src/api/external/contentSave/model/contentModel.ts
View file @6d1b662
+++ b/src/api/external/contentSave/model/contentModel.ts
View file @6d1b662
@@ -32,7 +32,7 @@ export interface BaseUpdateContentParams {
   dataViewId: string
   dataViewName: string
   organizationId: string
-  state: number  
+  state: number
   thumbnail: string
 }
@@ -57,3 +57,15 @@ export interface DataViewListRecord {
   organizationDTO: OrganizationDTO;
 }
+
+export interface DateViewConfigurationInfoType {
+  dataViewId: string
+  dataViewName: string
+  state: number
+  organizationId: string
+  dataViewContent: {
+    id: string
+    enabled: boolean,
+    content: string
+  }
+}
--- a/src/store/external/modules/projectInfo.d.ts
View file @6d1b662
+++ b/src/store/external/modules/projectInfo.d.ts
View file @6d1b662
 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { SyncEnum } from '@/enums/external/editPageEnum'
+import { DateViewConfigurationInfoType } from '@/api/external/contentSave/model/contentModel'
 export enum ProjectInfoEnum {
   INFO = 'info',
-  // ID
-  PROJECT_ID = 'projectId',
-  // 名称
-  PROJECT_NAME = 'projectName',
-  // 描述
-  REMARKS = 'remarks',
-  // 缩略图
-  THUMBNAIL = 'thumbnail',
-  // 是否公开发布
-  RELEASE = 'release',
-  // 组织id
-  ORGANIZATION_ID = 'organizationId',
-  //保存给服务端的state
-  STATE_DATA = 'state',
-
-  SAVE_STATUS = 'saveStatus'
+  SAVE_STATUS = 'saveStatus',
+  DATA_VIEW_NAME = 'dataViewName'
 }
 export enum EEditCanvasTypeEnum {
   SAVE_STATUS = 'saveStatus',
 }
-
 // Store 类型
 export interface ProjectInfoStoreType {
-  [ProjectInfoEnum.INFO]: {
-    [ProjectInfoEnum.PROJECT_ID]: string
-    [ProjectInfoEnum.PROJECT_NAME]: string
-    [ProjectInfoEnum.REMARKS]: string
-    [ProjectInfoEnum.THUMBNAIL]: string
-    [ProjectInfoEnum.RELEASE]: boolean
-    [ProjectInfoEnum.RELEASE]: boolean
-    [ProjectInfoEnum.ORGANIZATION_ID]: string
-    [ProjectInfoEnum.STATE_DATA]: number
-  }
+  [ProjectInfoEnum.INFO]: DateViewConfigurationInfoType
   [ProjectInfoEnum.SAVE_STATUS]: SyncEnum
 }
--- a/src/views/chart/ContentHeader/headerTitle/index.vue
View file @6d1b662
+++ b/src/views/chart/ContentHeader/headerTitle/index.vue
View file @6d1b662
@@ -11,19 +11,9 @@
         </span>
       </n-button>
     </n-text>
-
-    <n-input
-      v-show="focus"
-      ref="inputInstRef"
-      size="small"
-      type="text"
-      maxlength="16"
-      show-count
-      placeholder="请输入项目名称"
-      v-model:value.trim="title"
-      @keyup.enter="handleBlur"
-      @blur="handleBlur"
-    ></n-input>
+    <!-- THINGS_KIT 修改标题保存 -->
+    <n-input v-show="focus" ref="inputInstRef" size="small" type="text" maxlength="16" show-count placeholder="请输入项目名称"
+      v-model:value.trim="title" @keyup.enter="focus = false" @blur="handleBlur"></n-input>
   </n-space>
 </template>
@@ -33,6 +23,11 @@ import { fetchRouteParamsLocation, setTitle } from '@/utils'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { icon } from '@/plugins'
+// THINGS_KIT 更新标题
+import { useProjectInfoStore } from '@/store/external/modules/projectInfo'
+import { contentUpdateApi } from '@/api/external/contentSave/content'
+import { BaseUpdateContentParams } from '@/api/external/contentSave/model/contentModel'
+import { ProjectInfoEnum } from '@/store/external/modules/projectInfo.d'
 const { FishIcon } = icon.ionicons5
 const chartEditStore = useChartEditStore()
@@ -49,14 +44,17 @@ const fetchProhectInfoById = () => {
   return ''
 }
-const title = ref<string>(fetchProhectInfoById() || '')
+// THINGS_KIT 修改标题
+const projectInfoStore = useProjectInfoStore()
+const title = ref('')
+// THINGS_KIT 修改标题
 const comTitle = computed(() => {
-  // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-  title.value = title.value.replace(/\s/g, '')
-  const newTitle = title.value.length ? title.value : '新项目'
+  // eslint-disable-next-line vue/no-side-effects-in-computed-properties  
+  const newTitle = projectInfoStore.getProjectInfo.dataViewName
   setTitle(`工作空间-${newTitle}`)
   chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PROJECT_NAME, newTitle)
+  projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.DATA_VIEW_NAME, newTitle)
   return newTitle
 })
@@ -64,11 +62,24 @@ const handleFocus = () => {
   focus.value = true
   nextTick(() => {
     inputInstRef.value && (inputInstRef.value as any).focus()
+    title.value = projectInfoStore.getProjectInfo.dataViewName
   })
 }
-const handleBlur = () => {
+// THINGS_KIT 更新标题
+const handleBlur = async () => {
   focus.value = false
+  projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.DATA_VIEW_NAME, title.value)
+  const { dataViewName, dataViewId, dataViewContent } = projectInfoStore.getProjectInfo
+  const saveContent = {
+    dataViewName,
+    dataViewId,
+    dataViewContent: {
+      id: dataViewContent.id,
+      content: JSON.stringify(chartEditStore.getStorageInfo)
+    }
+  } as unknown as BaseUpdateContentParams
+  await contentUpdateApi(saveContent)
 }
 </script>
 <style lang="scss" scoped>
--- a/src/views/chart/hooks/external/useRemote.hook.ts
View file @6d1b662
+++ b/src/views/chart/hooks/external/useRemote.hook.ts
View file @6d1b662
@@ -10,7 +10,7 @@ import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/a
 import { SyncEnum } from '@/enums/external/editPageEnum'
 import { useProjectInfoStore } from '@/store/external/modules/projectInfo'
 import { useSync } from '../useSync.hook'
-import { BaseUpdateContentParams } from '@/api/external/contentSave/model/contentModel'
+import { BaseUpdateContentParams, DateViewConfigurationInfoType } from '@/api/external/contentSave/model/contentModel'
 /**
  * * base64转file
@@ -43,28 +43,8 @@ export const useSyncRemote = () => {
    * @param projectData 项目数据
    * @returns
    */
-  const updateStoreInfo = (projectData: {
-    dataViewId: string
-    dataViewName: string
-    thumbnail: string
-    id: string
-    state: number
-    organizationId: string
-    dataViewContent: { id: string; content: string; enabled: boolean }
-  }) => {
-    const { dataViewId, dataViewName, thumbnail, state, dataViewContent, organizationId } = projectData
-    // ID
-    projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.PROJECT_ID, dataViewId)
-    // 名称
-    projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.PROJECT_NAME, dataViewName)
-    // 描述
-    projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.REMARKS, dataViewContent?.id)
-    // 缩略图
-    projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.THUMBNAIL, thumbnail)
-    // 发布
-    projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.RELEASE, state === 1)
-    projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.ORGANIZATION_ID, organizationId)
-    projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.STATE_DATA, state)
+  const updateStoreInfo = (projectData: DateViewConfigurationInfoType) => {
+    projectInfoStore.setProjectInfo(projectData)
   }
   // * 数据获取
@@ -76,11 +56,9 @@ export const useSyncRemote = () => {
     try {
       const id = fetchRouteParamsLocation()
       const res = await getDataView(id)
-      updateStoreInfo(res)
       // 更新全局数据
       await updateComponent(JSONParse(res.dataViewContent.content))
-
-      projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.PROJECT_ID, res.dataViewId)
+      updateStoreInfo(res)
       setTimeout(() => {
         projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
       }, 1000)
@@ -93,13 +71,9 @@ export const useSyncRemote = () => {
   // 数据保存
   const dataSyncUpdate = throttle(async (updateImg = true) => {
     if (!fetchRouteParamsLocation()) return
-    const projectId = projectInfoStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID]
-    const id = projectInfoStore.getProjectInfo[ProjectInfoEnum.REMARKS]
-    const dataViewName = projectInfoStore.getProjectInfo[ProjectInfoEnum.PROJECT_NAME]
-    const organizationId = projectInfoStore.getProjectInfo[ProjectInfoEnum.ORGANIZATION_ID]
-    const state = projectInfoStore.getProjectInfo[ProjectInfoEnum.STATE_DATA]
+    const { dataViewId, state, organizationId, dataViewName, dataViewContent } = projectInfoStore.getProjectInfo
-    if (projectId === null || projectId === '') {
+    if (dataViewId === null || dataViewId === '') {
       window['$message'].error('数据初未始化成功,请刷新页面！')
       return
     }
@@ -142,12 +116,11 @@ export const useSyncRemote = () => {
     // 保存数据
     const saveContent = {
       dataViewContent: {
-        id,
+        id: dataViewContent.id,
         content: JSONStringify(chartEditStore.getStorageInfo || {})
       },
       dataViewName,
-      dataViewId: projectId,
-      projectId
+      dataViewId
     }
     await contentUpdateApi(saveContent as unknown as BaseUpdateContentParams)
     window['$message'].success('保存成功！')