Commit 6d1b6623091068cb3a884a0058a752d9f75fa4ab

Authored by ww
1 parent 5dda291d

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

1 1 import { defHttp } from '@/utils/external/http/axios'
2   -import { BaseSaveContentParams, BaseUpdateContentParams, DataViewListRecord } from './model/contentModel'
3   -
  2 +import { BaseSaveContentParams, BaseUpdateContentParams, DataViewListRecord, DateViewConfigurationInfoType } from './model/contentModel'
4 3 import type { ErrorMessageMode, PaginationResult } from '/#/external/axios'
5 4
6 5 enum Api {
... ... @@ -61,7 +60,7 @@ export function contentDeleteApi(data: [string], mode: ErrorMessageMode = 'modal
61 60 */
62 61
63 62 export const getDataView = (id: string) => {
64   - return defHttp.get<BaseUpdateContentParams>({
  63 + return defHttp.get<DateViewConfigurationInfoType>({
65 64 url: `${Api.DATA_VIEW}/get_configuration_info/${id}`
66 65 })
67 66 }
... ...
... ... @@ -32,7 +32,7 @@ export interface BaseUpdateContentParams {
32 32 dataViewId: string
33 33 dataViewName: string
34 34 organizationId: string
35   - state: number
  35 + state: number
36 36 thumbnail: string
37 37 }
38 38
... ... @@ -57,3 +57,15 @@ export interface DataViewListRecord {
57 57 organizationDTO: OrganizationDTO;
58 58 }
59 59
  60 +
  61 +export interface DateViewConfigurationInfoType {
  62 + dataViewId: string
  63 + dataViewName: string
  64 + state: number
  65 + organizationId: string
  66 + dataViewContent: {
  67 + id: string
  68 + enabled: boolean,
  69 + content: string
  70 + }
  71 +}
... ...
1 1 import { EditCanvasTypeEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
2 2 import { SyncEnum } from '@/enums/external/editPageEnum'
  3 +import { DateViewConfigurationInfoType } from '@/api/external/contentSave/model/contentModel'
3 4
4 5 export enum ProjectInfoEnum {
5 6 INFO = 'info',
6   - // ID
7   - PROJECT_ID = 'projectId',
8   - // 名称
9   - PROJECT_NAME = 'projectName',
10   - // 描述
11   - REMARKS = 'remarks',
12   - // 缩略图
13   - THUMBNAIL = 'thumbnail',
14   - // 是否公开发布
15   - RELEASE = 'release',
16   - // 组织id
17   - ORGANIZATION_ID = 'organizationId',
18   - //保存给服务端的state
19   - STATE_DATA = 'state',
20   -
21   - SAVE_STATUS = 'saveStatus'
  7 + SAVE_STATUS = 'saveStatus',
  8 + DATA_VIEW_NAME = 'dataViewName'
22 9 }
23 10
24 11 export enum EEditCanvasTypeEnum {
25 12 SAVE_STATUS = 'saveStatus',
26 13 }
27 14
28   -
29 15 // Store 类型
30 16 export interface ProjectInfoStoreType {
31   - [ProjectInfoEnum.INFO]: {
32   - [ProjectInfoEnum.PROJECT_ID]: string
33   - [ProjectInfoEnum.PROJECT_NAME]: string
34   - [ProjectInfoEnum.REMARKS]: string
35   - [ProjectInfoEnum.THUMBNAIL]: string
36   - [ProjectInfoEnum.RELEASE]: boolean
37   - [ProjectInfoEnum.RELEASE]: boolean
38   - [ProjectInfoEnum.ORGANIZATION_ID]: string
39   - [ProjectInfoEnum.STATE_DATA]: number
40   - }
  17 + [ProjectInfoEnum.INFO]: DateViewConfigurationInfoType
41 18
42 19 [ProjectInfoEnum.SAVE_STATUS]: SyncEnum
43 20 }
... ...
... ... @@ -11,19 +11,9 @@
11 11 </span>
12 12 </n-button>
13 13 </n-text>
14   -
15   - <n-input
16   - v-show="focus"
17   - ref="inputInstRef"
18   - size="small"
19   - type="text"
20   - maxlength="16"
21   - show-count
22   - placeholder="请输入项目名称"
23   - v-model:value.trim="title"
24   - @keyup.enter="handleBlur"
25   - @blur="handleBlur"
26   - ></n-input>
  14 + <!-- THINGS_KIT 修改标题保存 -->
  15 + <n-input v-show="focus" ref="inputInstRef" size="small" type="text" maxlength="16" show-count placeholder="请输入项目名称"
  16 + v-model:value.trim="title" @keyup.enter="focus = false" @blur="handleBlur"></n-input>
27 17 </n-space>
28 18 </template>
29 19
... ... @@ -33,6 +23,11 @@ import { fetchRouteParamsLocation, setTitle } from '@/utils'
33 23 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
34 24 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
35 25 import { icon } from '@/plugins'
  26 +// THINGS_KIT 更新标题
  27 +import { useProjectInfoStore } from '@/store/external/modules/projectInfo'
  28 +import { contentUpdateApi } from '@/api/external/contentSave/content'
  29 +import { BaseUpdateContentParams } from '@/api/external/contentSave/model/contentModel'
  30 +import { ProjectInfoEnum } from '@/store/external/modules/projectInfo.d'
36 31
37 32 const { FishIcon } = icon.ionicons5
38 33 const chartEditStore = useChartEditStore()
... ... @@ -49,14 +44,17 @@ const fetchProhectInfoById = () => {
49 44 return ''
50 45 }
51 46
52   -const title = ref<string>(fetchProhectInfoById() || '')
  47 +// THINGS_KIT 修改标题
  48 +const projectInfoStore = useProjectInfoStore()
  49 +const title = ref('')
53 50
  51 +// THINGS_KIT 修改标题
54 52 const comTitle = computed(() => {
55   - // eslint-disable-next-line vue/no-side-effects-in-computed-properties
56   - title.value = title.value.replace(/\s/g, '')
57   - const newTitle = title.value.length ? title.value : '新项目'
  53 + // eslint-disable-next-line vue/no-side-effects-in-computed-properties
  54 + const newTitle = projectInfoStore.getProjectInfo.dataViewName
58 55 setTitle(`工作空间-${newTitle}`)
59 56 chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PROJECT_NAME, newTitle)
  57 + projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.DATA_VIEW_NAME, newTitle)
60 58 return newTitle
61 59 })
62 60
... ... @@ -64,11 +62,24 @@ const handleFocus = () => {
64 62 focus.value = true
65 63 nextTick(() => {
66 64 inputInstRef.value && (inputInstRef.value as any).focus()
  65 + title.value = projectInfoStore.getProjectInfo.dataViewName
67 66 })
68 67 }
69 68
70   -const handleBlur = () => {
  69 +// THINGS_KIT 更新标题
  70 +const handleBlur = async () => {
71 71 focus.value = false
  72 + projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.DATA_VIEW_NAME, title.value)
  73 + const { dataViewName, dataViewId, dataViewContent } = projectInfoStore.getProjectInfo
  74 + const saveContent = {
  75 + dataViewName,
  76 + dataViewId,
  77 + dataViewContent: {
  78 + id: dataViewContent.id,
  79 + content: JSON.stringify(chartEditStore.getStorageInfo)
  80 + }
  81 + } as unknown as BaseUpdateContentParams
  82 + await contentUpdateApi(saveContent)
72 83 }
73 84 </script>
74 85 <style lang="scss" scoped>
... ...
... ... @@ -10,7 +10,7 @@ import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/a
10 10 import { SyncEnum } from '@/enums/external/editPageEnum'
11 11 import { useProjectInfoStore } from '@/store/external/modules/projectInfo'
12 12 import { useSync } from '../useSync.hook'
13   -import { BaseUpdateContentParams } from '@/api/external/contentSave/model/contentModel'
  13 +import { BaseUpdateContentParams, DateViewConfigurationInfoType } from '@/api/external/contentSave/model/contentModel'
14 14
15 15 /**
16 16 * * base64转file
... ... @@ -43,28 +43,8 @@ export const useSyncRemote = () => {
43 43 * @param projectData 项目数据
44 44 * @returns
45 45 */
46   - const updateStoreInfo = (projectData: {
47   - dataViewId: string
48   - dataViewName: string
49   - thumbnail: string
50   - id: string
51   - state: number
52   - organizationId: string
53   - dataViewContent: { id: string; content: string; enabled: boolean }
54   - }) => {
55   - const { dataViewId, dataViewName, thumbnail, state, dataViewContent, organizationId } = projectData
56   - // ID
57   - projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.PROJECT_ID, dataViewId)
58   - // 名称
59   - projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.PROJECT_NAME, dataViewName)
60   - // 描述
61   - projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.REMARKS, dataViewContent?.id)
62   - // 缩略图
63   - projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.THUMBNAIL, thumbnail)
64   - // 发布
65   - projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.RELEASE, state === 1)
66   - projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.ORGANIZATION_ID, organizationId)
67   - projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.STATE_DATA, state)
  46 + const updateStoreInfo = (projectData: DateViewConfigurationInfoType) => {
  47 + projectInfoStore.setProjectInfo(projectData)
68 48 }
69 49
70 50 // * 数据获取
... ... @@ -76,11 +56,9 @@ export const useSyncRemote = () => {
76 56 try {
77 57 const id = fetchRouteParamsLocation()
78 58 const res = await getDataView(id)
79   - updateStoreInfo(res)
80 59 // 更新全局数据
81 60 await updateComponent(JSONParse(res.dataViewContent.content))
82   -
83   - projectInfoStore.setProjectInfoByKey(ProjectInfoEnum.PROJECT_ID, res.dataViewId)
  61 + updateStoreInfo(res)
84 62 setTimeout(() => {
85 63 projectInfoStore.setSaveStatus(SyncEnum.SUCCESS)
86 64 }, 1000)
... ... @@ -93,13 +71,9 @@ export const useSyncRemote = () => {
93 71 // 数据保存
94 72 const dataSyncUpdate = throttle(async (updateImg = true) => {
95 73 if (!fetchRouteParamsLocation()) return
96   - const projectId = projectInfoStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID]
97   - const id = projectInfoStore.getProjectInfo[ProjectInfoEnum.REMARKS]
98   - const dataViewName = projectInfoStore.getProjectInfo[ProjectInfoEnum.PROJECT_NAME]
99   - const organizationId = projectInfoStore.getProjectInfo[ProjectInfoEnum.ORGANIZATION_ID]
100   - const state = projectInfoStore.getProjectInfo[ProjectInfoEnum.STATE_DATA]
  74 + const { dataViewId, state, organizationId, dataViewName, dataViewContent } = projectInfoStore.getProjectInfo
101 75
102   - if (projectId === null || projectId === '') {
  76 + if (dataViewId === null || dataViewId === '') {
103 77 window['$message'].error('数据初未始化成功,请刷新页面!')
104 78 return
105 79 }
... ... @@ -142,12 +116,11 @@ export const useSyncRemote = () => {
142 116 // 保存数据
143 117 const saveContent = {
144 118 dataViewContent: {
145   - id,
  119 + id: dataViewContent.id,
146 120 content: JSONStringify(chartEditStore.getStorageInfo || {})
147 121 },
148 122 dataViewName,
149   - dataViewId: projectId,
150   - projectId
  123 + dataViewId
151 124 }
152 125 await contentUpdateApi(saveContent as unknown as BaseUpdateContentParams)
153 126 window['$message'].success('保存成功!')
... ...