Showing
5 changed files
with
56 additions
and
84 deletions
| 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('保存成功!') | ... | ... |