简柏林 / thingskit-view · Commits

Commit b4d090c70f443fc3b06412cfd22ceb5b4b53c213

Authored by ww
1 parent cc60d29c

perf: 重构新增功能逻辑

Inline Side-by-side
Showing 17 changed files with 294 additions and 258 deletions
1 import { defHttp } from '@/utils/external/http/axios' 1 import { defHttp } from '@/utils/external/http/axios'
2 -import { BaseSaveContentParams, BaseUpdateContentParams } from './model/contentModel' 2 +import { BaseSaveContentParams, BaseUpdateContentParams, DataViewListRecord } from './model/contentModel'
3 3
4 -import type { ErrorMessageMode } from '/#/external/axios' 4 +import type { ErrorMessageMode, PaginationResult } from '/#/external/axios'
5 5
6 enum Api { 6 enum Api {
7 //大屏设计器 7 //大屏设计器
@@ -61,7 +61,7 @@ export function contentDeleteApi(data: [string], mode: ErrorMessageMode = 'modal @@ -61,7 +61,7 @@ export function contentDeleteApi(data: [string], mode: ErrorMessageMode = 'modal
61 */ 61 */
62 62
63 export const getDataView = (id: string) => { 63 export const getDataView = (id: string) => {
64 - return defHttp.get({ 64 + return defHttp.get<BaseUpdateContentParams>({
65 url: `${Api.DATA_VIEW}/get_configuration_info/${id}` 65 url: `${Api.DATA_VIEW}/get_configuration_info/${id}`
66 }) 66 })
67 } 67 }
@@ -71,7 +71,7 @@ export const getDataView = (id: string) => { @@ -71,7 +71,7 @@ export const getDataView = (id: string) => {
71 */ 71 */
72 72
73 export const getDataViewList = (params: object) => { 73 export const getDataViewList = (params: object) => {
74 - return defHttp.get({ 74 + return defHttp.get<PaginationResult<DataViewListRecord>>({
75 url: `${Api.DATA_VIEW}`, 75 url: `${Api.DATA_VIEW}`,
76 params 76 params
77 }) 77 })
@@ -30,5 +30,28 @@ export interface BaseUpdateContentParams { @@ -30,5 +30,28 @@ export interface BaseUpdateContentParams {
30 dataViewContent: BaseSaveContentParams 30 dataViewContent: BaseSaveContentParams
31 dataViewId?: string 31 dataViewId?: string
32 dataViewName: string 32 dataViewName: string
  33 + organizationId: string
33 state?: number 34 state?: number
34 } 35 }
  36 +
  37 +export interface OrganizationDTO {
  38 + name: string;
  39 + enabled: boolean;
  40 + sort: number;
  41 + children: any[];
  42 +}
  43 +
  44 +export interface DataViewListRecord {
  45 + id: string;
  46 + creator: string;
  47 + createTime: string;
  48 + updater: string;
  49 + updateTime: string;
  50 + name: string;
  51 + enabled: boolean;
  52 + tenantId: string;
  53 + organizationId: string;
  54 + thumbnail: string;
  55 + organizationDTO: OrganizationDTO;
  56 +}
  57 +
@@ -144,8 +144,9 @@ const transform: AxiosTransform = { @@ -144,8 +144,9 @@ const transform: AxiosTransform = {
144 } catch (error: any) { 144 } catch (error: any) {
145 throw new Error(error); 145 throw new Error(error);
146 } 146 }
  147 + console.log([error])
147 checkStatus(error?.response?.status, msg, errorMessageMode); 148 checkStatus(error?.response?.status, msg, errorMessageMode);
148 - return Promise.reject(response.data); 149 + return Promise.reject(response?.data);
149 }, 150 },
150 }; 151 };
151 152
@@ -20,9 +20,9 @@ export const readFile = (file: File) => { @@ -20,9 +20,9 @@ export const readFile = (file: File) => {
20 20
21 /** 21 /**
22 * * 通过 a 标签下载数据 22 * * 通过 a 标签下载数据
23 - * @param url  
24 - * @param filename  
25 - * @param fileSuffix 23 + * @param url
  24 + * @param filename
  25 + * @param fileSuffix
26 */ 26 */
27 export const downloadByA = (url: string, filename = new Date().getTime(), fileSuffix?: string) => { 27 export const downloadByA = (url: string, filename = new Date().getTime(), fileSuffix?: string) => {
28 const ele = document.createElement('a') // 创建下载链接 28 const ele = document.createElement('a') // 创建下载链接
@@ -43,26 +43,12 @@ export const downloadByA = (url: string, filename = new Date().getTime(), fileSu @@ -43,26 +43,12 @@ export const downloadByA = (url: string, filename = new Date().getTime(), fileSu
43 * @param { ?string } filename 文件名称（默认随机字符） 43 * @param { ?string } filename 文件名称（默认随机字符）
44 * @param { ?string } fileSuffix 文件名称（默认随机字符） 44 * @param { ?string } fileSuffix 文件名称（默认随机字符）
45 */ 45 */
46 -export const downloadTextFile = (content: string, filename = new Date().getTime(), fileSuffix?: string) => { 46 +export const downloadTextFile = (
  47 + content: string,
  48 + filename = new Date().getTime(),
  49 + fileSuffix?: string
  50 +) => {
47 // 字符内容转变成blob地址 51 // 字符内容转变成blob地址
48 const blob = new Blob([content]) 52 const blob = new Blob([content])
49 downloadByA(URL.createObjectURL(blob), filename, fileSuffix) 53 downloadByA(URL.createObjectURL(blob), filename, fileSuffix)
50 } 54 }
51 -// THINGS_KIT  
52 -/**  
53 - * * base64转file  
54 - * @param dataurl  
55 - * @param fileName  
56 - * @returns  
57 - */  
58 -export const base64toFile = (dataurl: string, fileName: string) => {  
59 - let dataArr = dataurl.split(','),  
60 - mime = (dataArr as any[])[0].match(/:(.*?);/)[1],  
61 - bstr = atob(dataArr[1]),  
62 - n = bstr.length,  
63 - u8arr = new Uint8Array(n)  
64 - while (n--) {  
65 - u8arr[n] = bstr.charCodeAt(n)  
66 - }  
67 - return new File([u8arr], fileName, { type: mime })  
68 -}  
@@ -28,7 +28,7 @@ export const exportHandle = () => { @@ -28,7 +28,7 @@ export const exportHandle = () => {
28 // 百分百展示页面 28 // 百分百展示页面
29 chartEditStore.setScale(1, true) 29 chartEditStore.setScale(1, true)
30 // 展示水印 30 // 展示水印
31 - // THINGS_KIT 31 + // THINGS_KIT 隐藏水印
32 watermark.style.display = 'none' 32 watermark.style.display = 'none'
33 33
34 setTimeout(() => { 34 setTimeout(() => {
@@ -59,7 +59,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore @@ -59,7 +59,7 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
59 59
60 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' 60 import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
61 import { HistoryStackEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d' 61 import { HistoryStackEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
62 -// THINGS_KIT 新增同步逻辑 62 +// THINGS_KIT 修改同步逻辑
63 import { useSyncRemote } from '../../hooks/external/useRemote.hook' 63 import { useSyncRemote } from '../../hooks/external/useRemote.hook'
64 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' 64 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
65 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' 65 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
1 -import { fetchRouteParamsLocation, JSONStringify, JSONParse, base64toFile } from '@/utils'  
2 -import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'  
3 -import { ProjectInfoEnum } from '@/store/external/module/projectInfo.d' 1 +import { fetchRouteParamsLocation, JSONStringify, JSONParse } from '@/utils'
  2 +import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
  3 +import { ProjectInfoEnum } from '@/store/external/module/projectInfo.d'
4 import { onUnmounted } from 'vue' 4 import { onUnmounted } from 'vue'
5 import { saveInterval } from '@/settings/designSetting' 5 import { saveInterval } from '@/settings/designSetting'
6 import throttle from 'lodash/throttle' 6 import throttle from 'lodash/throttle'
7 import html2canvas from 'html2canvas' 7 import html2canvas from 'html2canvas'
8 import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/api/external/contentSave/content' 8 import { saveDataViewList, contentUpdateApi, getDataView, uploadFile } from '@/api/external/contentSave/content'
9 // 画布枚举 9 // 画布枚举
10 -import { SyncEnum } from '@/enums/external/editPageEnum' 10 +import { SyncEnum } from '@/enums/external/editPageEnum'
11 import { useProjectInfoStore } from '@/store/external/module/projectInfo' 11 import { useProjectInfoStore } from '@/store/external/module/projectInfo'
12 import { useSync } from '../useSync.hook' 12 import { useSync } from '../useSync.hook'
13 13
14 - 14 +/**
  15 + * * base64转file
  16 + * @param dataurl
  17 + * @param fileName
  18 + * @returns
  19 + */
  20 +export const base64toFile = (dataurl: string, fileName: string) => {
  21 +
  22 + const dataArr = dataurl.split(',')
  23 + const mime = (dataArr as any[])[0].match(/:(.*?);/)[1]
  24 + const bstr = atob(dataArr[1])
  25 + let n = bstr.length;
  26 + const u8arr = new Uint8Array(n)
  27 + while (n--) {
  28 + u8arr[n] = bstr.charCodeAt(n)
  29 + }
  30 + return new File([u8arr], fileName, { type: mime })
  31 +}
  32 +
15 33
16 // 请求处理 34 // 请求处理
17 export const useSyncRemote = () => { 35 export const useSyncRemote = () => {
18 - const chartEditStore = useChartEditStore() 36 + const chartEditStore = useChartEditStore()
19 const projectInfoStore = useProjectInfoStore() 37 const projectInfoStore = useProjectInfoStore()
20 const { updateComponent } = useSync() 38 const { updateComponent } = useSync()
21 - 39 +
22 /** 40 /**
23 * * 赋值全局数据 41 * * 赋值全局数据
24 * @param projectData 项目数据 42 * @param projectData 项目数据
@@ -73,7 +91,7 @@ export const useSyncRemote = () => { @@ -73,7 +91,7 @@ export const useSyncRemote = () => {
73 91
74 // 数据保存 92 // 数据保存
75 const dataSyncUpdate = throttle(async (updateImg = true) => { 93 const dataSyncUpdate = throttle(async (updateImg = true) => {
76 - if (!fetchRouteParamsLocation()) return 94 + if (!fetchRouteParamsLocation()) return
77 const projectId = projectInfoStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID] 95 const projectId = projectInfoStore.getProjectInfo[ProjectInfoEnum.PROJECT_ID]
78 const id = projectInfoStore.getProjectInfo[ProjectInfoEnum.REMARKS] 96 const id = projectInfoStore.getProjectInfo[ProjectInfoEnum.REMARKS]
79 const dataViewName = projectInfoStore.getProjectInfo[ProjectInfoEnum.PROJECT_NAME] 97 const dataViewName = projectInfoStore.getProjectInfo[ProjectInfoEnum.PROJECT_NAME]
@@ -152,7 +170,7 @@ export const useSyncRemote = () => { @@ -152,7 +170,7 @@ export const useSyncRemote = () => {
152 clearInterval(syncTiming) 170 clearInterval(syncTiming)
153 }) 171 })
154 } 172 }
155 - return { 173 + return {
156 dataSyncFetch, 174 dataSyncFetch,
157 dataSyncUpdate, 175 dataSyncUpdate,
158 intervalDataSyncUpdate 176 intervalDataSyncUpdate
  1 +import { fetchRouteParamsLocation, JSONParse, } from '@/utils'
  2 +import { getDataView } from '@/api/external/contentSave/content'
  3 +import { ChartEditStorageType } from '..'
  4 +
  5 +export const getSessionStorageInfo = async (): Promise<ChartEditStorageType> => {
  6 + const id = fetchRouteParamsLocation()
  7 +
  8 + const res = await getDataView(id)
  9 + if (res) {
  10 + const { dataViewContent, dataViewName, dataViewId } = res
  11 + return { ...JSONParse(dataViewContent?.content), id: dataViewId, projectName: dataViewName } as ChartEditStorageType
  12 + }
  13 + return {} as unknown as ChartEditStorageType
  14 +}
  15 +
1 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d' 1 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
2 2
3 export interface ChartEditStorageType extends ChartEditStorage { 3 export interface ChartEditStorageType extends ChartEditStorage {
4 - // THINGS_KIT  
5 - id: string,  
6 - projectName:string,  
7 - isRelease?: boolean 4 + id: string
8 } 5 }
1 -<!-- THINGS_KIT -->  
2 -  
3 <template> 1 <template>
4 - <suspense>  
5 - <suspense-index></suspense-index>  
6 - </suspense> 2 + <div :class="`go-preview ${localStorageInfo.editCanvasConfig.previewScaleType}`">
  3 + <template v-if="showEntity">
  4 + <!-- 实体区域 -->
  5 + <div ref="entityRef" class="go-preview-entity">
  6 + <!-- 缩放层 -->
  7 + <div ref="previewRef" class="go-preview-scale">
  8 + <!-- 展示层 -->
  9 + <div :style="previewRefStyle" v-if="show">
  10 + <!-- 渲染层 -->
  11 + <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
  12 + </div>
  13 + </div>
  14 + </div>
  15 + </template>
  16 + <template v-else>
  17 + <!-- 缩放层 -->
  18 + <div ref="previewRef" class="go-preview-scale">
  19 + <!-- 展示层 -->
  20 + <div :style="previewRefStyle" v-if="show">
  21 + <!-- 渲染层 -->
  22 + <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>
  23 + </div>
  24 + </div>
  25 + </template>
  26 + </div>
7 </template> 27 </template>
8 28
9 -<script setup lang="ts">  
10 -import suspenseIndex from './suspenseIndex.vue' 29 +<script setup lang="ts" >
  30 +import { computed } from 'vue'
  31 +import { PreviewRenderList } from './components/PreviewRenderList'
  32 +import { getFilterStyle, setTitle } from '@/utils'
  33 +
  34 +// THINGS_KIT 预览逻辑修改
  35 +// import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'
  36 +import { getEditCanvasConfigStyle } from './utils'
  37 +import { getSessionStorageInfo } from './external/usePreview'
  38 +
  39 +import { useComInstall } from './hooks/useComInstall.hook'
  40 +import { useScale } from './hooks/useScale.hook'
  41 +import { useStore } from './hooks/useStore.hook'
  42 +import { PreviewScaleEnum } from '@/enums/styleEnum'
  43 +import type { ChartEditStorageType } from './index.d'
  44 +
  45 +const localStorageInfo: ChartEditStorageType = await getSessionStorageInfo() as ChartEditStorageType
  46 +setTitle(`预览-${localStorageInfo.editCanvasConfig.projectName}`)
  47 +
  48 +const previewRefStyle = computed(() => {
  49 + return {
  50 + ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),
  51 + ...getFilterStyle(localStorageInfo.editCanvasConfig)
  52 + }
  53 +})
  54 +
  55 +const showEntity = computed(() => {
  56 + const type = localStorageInfo.editCanvasConfig.previewScaleType
  57 + return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X
  58 +})
  59 +
  60 +useStore(localStorageInfo)
  61 +const { entityRef, previewRef } = useScale(localStorageInfo)
  62 +const { show } = useComInstall(localStorageInfo)
11 </script> 63 </script>
  64 +
  65 +<style lang="scss" scoped>
  66 +@include go('preview') {
  67 + position: relative;
  68 + height: 100vh;
  69 + width: 100vw;
  70 + @include background-image('background-image');
  71 +
  72 + &.fit,
  73 + &.full {
  74 + display: flex;
  75 + align-items: center;
  76 + justify-content: center;
  77 + overflow: hidden;
  78 +
  79 + .go-preview-scale {
  80 + transform-origin: center center;
  81 + }
  82 + }
  83 +
  84 + &.scrollY {
  85 + overflow-x: hidden;
  86 +
  87 + .go-preview-scale {
  88 + transform-origin: left top;
  89 + }
  90 + }
  91 +
  92 + &.scrollX {
  93 + overflow-y: hidden;
  94 +
  95 + .go-preview-scale {
  96 + transform-origin: left top;
  97 + }
  98 + }
  99 +
  100 + .go-preview-entity {
  101 + overflow: hidden;
  102 + }
  103 +}
  104 +</style>
1 -<!-- THINGS_KIT -->  
2 -<template>  
3 - <div :class="`go-preview ${localStorageInfo.editCanvasConfig.previewScaleType}`">  
4 - <template v-if="showEntity">  
5 - <!-- 实体区域 -->  
6 - <div ref="entityRef" class="go-preview-entity">  
7 - <!-- 缩放层 -->  
8 - <div ref="previewRef" class="go-preview-scale">  
9 - <!-- 展示层 -->  
10 - <div :style="previewRefStyle" v-if="show">  
11 - <!-- 渲染层 -->  
12 - <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>  
13 - </div>  
14 - </div>  
15 - </div>  
16 - </template>  
17 - <template v-else>  
18 - <!-- 缩放层 -->  
19 - <div ref="previewRef" class="go-preview-scale">  
20 - <!-- 展示层 -->  
21 - <div :style="previewRefStyle" v-if="show">  
22 - <!-- 渲染层 -->  
23 - <preview-render-list :localStorageInfo="localStorageInfo"></preview-render-list>  
24 - </div>  
25 - </div>  
26 - </template>  
27 - </div>  
28 -</template>  
29 -  
30 -<script setup lang="ts">  
31 -import { computed } from 'vue'  
32 -import { PreviewRenderList } from './components/PreviewRenderList'  
33 -import { getFilterStyle, routerTurnByName, getSessionStorage, setTitle } from '@/utils'  
34 -import { getEditCanvasConfigStyle, getSessionStorageInfo } from './utils'  
35 -import { PageEnum } from '@/enums/pageEnum'  
36 -import { StorageEnum } from '@/enums/storageEnum'  
37 -import { useScale } from './hooks/useScale.hook'  
38 -import { useStore } from './hooks/useStore.hook'  
39 -import { PreviewScaleEnum } from '@/enums/styleEnum'  
40 -import { useComInstall } from './hooks/useComInstall.hook'  
41 -import type { ChartEditStorageType } from './index.d'  
42 -  
43 -const storageList: ChartEditStorageType[] = getSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST)  
44 -// THINGS_KIT  
45 -const localStorageInfo = (await getSessionStorageInfo()) as unknown as ChartEditStorageType  
46 -setTitle(`预览-${localStorageInfo?.projectName}`)  
47 -// THINGS_KIT  
48 -// @ts-ignore  
49 -// if (localStorageInfo.isRelease === false) {  
50 -// routerTurnByName(PageEnum.REDIRECT_UN_PUBLISH_NAME, true, false)  
51 -// }  
52 -  
53 -const previewRefStyle = computed(() => {  
54 - return {  
55 - ...getEditCanvasConfigStyle(localStorageInfo.editCanvasConfig),  
56 - ...getFilterStyle(localStorageInfo.editCanvasConfig.filterShow ? localStorageInfo.editCanvasConfig : undefined)  
57 - }  
58 -})  
59 -  
60 -const showEntity = computed(() => {  
61 - const type = localStorageInfo.editCanvasConfig.previewScaleType  
62 - return type === PreviewScaleEnum.SCROLL_Y || type === PreviewScaleEnum.SCROLL_X  
63 -})  
64 -  
65 -useStore(localStorageInfo)  
66 -const { entityRef, previewRef } = useScale(localStorageInfo)  
67 -const { show } = useComInstall(localStorageInfo)  
68 -</script>  
69 -  
70 -<style lang="scss" scoped>  
71 -@include go('preview') {  
72 - position: relative;  
73 - height: 100vh;  
74 - width: 100vw;  
75 - @include background-image('background-image');  
76 - &.fit,  
77 - &.full {  
78 - display: flex;  
79 - align-items: center;  
80 - justify-content: center;  
81 - overflow: hidden;  
82 - .go-preview-scale {  
83 - transform-origin: center center;  
84 - }  
85 - }  
86 - &.scrollY {  
87 - overflow-x: hidden;  
88 - .go-preview-scale {  
89 - transform-origin: left top;  
90 - }  
91 - }  
92 - &.scrollX {  
93 - overflow-y: hidden;  
94 - .go-preview-scale {  
95 - transform-origin: left top;  
96 - }  
97 - }  
98 - .go-preview-entity {  
99 - overflow: hidden;  
100 - }  
101 -}  
102 -</style>  
1 -import { getSessionStorage, fetchRouteParamsLocation, JSONParse } from '@/utils' 1 +import { getSessionStorage } from '@/utils'
2 import { StorageEnum } from '@/enums/storageEnum' 2 import { StorageEnum } from '@/enums/storageEnum'
3 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d' 3 import { ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d'
4 -import { getDataView } from '@/api/external/contentSave/content'  
5 4
6 export interface ChartEditStorageType extends ChartEditStorage { 5 export interface ChartEditStorageType extends ChartEditStorage {
7 id: string 6 id: string
8 } 7 }
9 -// THINGS_KIT 8 +
10 // 根据路由 id 获取存储数据的信息 9 // 根据路由 id 获取存储数据的信息
11 -export const getSessionStorageInfo = async () => {  
12 - const id = fetchRouteParamsLocation()  
13 - const storageList: ChartEditStorageType[] = getSessionStorage(StorageEnum.GO_CHART_STORAGE_LIST)  
14 - console.log(id)  
15 - console.log(storageList)  
16 - // 是否本地预览  
17 - // if (!storageList || storageList.findIndex(e => e.id === id.toString()) === -1) {  
18 - // 接口调用  
19 - const res = await getDataView(id)  
20 - if (res) {  
21 - const { dataViewContent, state, dataViewName, dataViewId } = res  
22 - // if (state === 1) {  
23 - // // 跳转未发布页  
24 - // return { isRelease: false }  
25 - // }  
26 - return { ...JSONParse(dataViewContent?.content), id: dataViewId, projectName: dataViewName }  
27 - // } else {  
28 - // console.log('本地读取')  
29 - // // 本地读取  
30 - // for (let i = 0; i < storageList.length; i++) {  
31 - // if (id.toString() === storageList[i]['id']) {  
32 - // return storageList[i]  
33 - // }  
34 - // }  
35 - // } 10 +export const getSessionStorageInfo = () => {
  11 + const urlHash = document.location.hash
  12 + const toPathArray = urlHash.split('/')
  13 + const id = toPathArray && toPathArray[toPathArray.length - 1]
  14 +
  15 + const storageList: ChartEditStorageType[] = getSessionStorage(
  16 + StorageEnum.GO_CHART_STORAGE_LIST
  17 + )
  18 +
  19 + if(!storageList) return
  20 +
  21 + for (let i = 0; i < storageList.length; i++) {
  22 + if (id.toString() === storageList[i]['id']) {
  23 + return storageList[i]
  24 + }
36 } 25 }
37 } 26 }
1 <template> 1 <template>
2 - <preview :key="key"></preview> 2 + <!-- THINGS_KIT 预览时需要异步请求接口 改为异步加载组件 -->
  3 + <Suspense>
  4 + <preview :key="key"></preview>
  5 + </Suspense>
3 </template> 6 </template>
4 7
5 <script setup lang="ts"> 8 <script setup lang="ts">
  1 +import { getDataViewList } from "@/api/external/contentSave/content"
  2 +import { DataViewListRecord } from "@/api/external/contentSave/model/contentModel"
  3 +import { onMounted, Ref } from "vue"
  4 +import { ChartList } from "../../.."
  5 +
  6 +export function useListData(list: Ref<ChartList>) {
  7 + onMounted(async () => {
  8 + try {
  9 + const { items } = await getDataViewList({ page: 1, pageSize: 10 })
  10 + list.value = items as unknown as ChartList
  11 + } catch (error) {
  12 + console.log(error)
  13 + }
  14 + })
  15 +}
1 import { ref } from 'vue' 1 import { ref } from 'vue'
2 import { goDialog } from '@/utils' 2 import { goDialog } from '@/utils'
3 import { DialogEnum } from '@/enums/pluginEnum' 3 import { DialogEnum } from '@/enums/pluginEnum'
4 -// THINGS_KIT  
5 -// import { ChartList } from '../../../index.d'  
6 -// THINGS_KIT 4 +import { ChartList } from '../../..'
7 // 数据初始化 5 // 数据初始化
8 export const useDataListInit = () => { 6 export const useDataListInit = () => {
9 - // const list = ref<ChartList>([  
10 - // {  
11 - // id: 'b6fab428-80d3-42aa-992c-bc7da5f52489',  
12 - // title: '物料1-假数据不可用',  
13 - // release: true,  
14 - // label: '官方案例'  
15 - // },  
16 - // {  
17 - // id: '9c5e3ace-dd8f-4334-9c7e-607d9f74755c',  
18 - // title: '物料2-假数据不可用',  
19 - // release: false,  
20 - // label: '官方案例'  
21 - // },  
22 - // {  
23 - // id: '427a06cf-ddd5-4239-bf96-3d97ab5bf814',  
24 - // title: '物料3-假数据不可用',  
25 - // release: false,  
26 - // label: '官方案例'  
27 - // },  
28 - // {  
29 - // id: 4,  
30 - // title: '物料4-假数据不可用',  
31 - // release: false,  
32 - // label: '官方案例'  
33 - // },  
34 - // {  
35 - // id: 5,  
36 - // title: '物料5-假数据不可用',  
37 - // release: false,  
38 - // label: '官方案例'  
39 - // }  
40 - // ])  
41 -// THINGS_KIT 7 + const list = ref<ChartList>([
  8 + {
  9 + id: 1,
  10 + title: '物料1-假数据不可用',
  11 + release: true,
  12 + label: '官方案例'
  13 + },
  14 + {
  15 + id: 2,
  16 + title: '物料2-假数据不可用',
  17 + release: false,
  18 + label: '官方案例'
  19 + },
  20 + {
  21 + id: 3,
  22 + title: '物料3-假数据不可用',
  23 + release: false,
  24 + label: '官方案例'
  25 + },
  26 + {
  27 + id: 4,
  28 + title: '物料4-假数据不可用',
  29 + release: false,
  30 + label: '官方案例'
  31 + },
  32 + {
  33 + id: 5,
  34 + title: '物料5-假数据不可用',
  35 + release: false,
  36 + label: '官方案例'
  37 + }
  38 + ])
  39 +
42 // 删除 40 // 删除
43 const deleteHandle = (cardData: object, index: number) => { 41 const deleteHandle = (cardData: object, index: number) => {
44 - // goDialog({  
45 - // type: DialogEnum.DELETE,  
46 - // promise: true,  
47 - // onPositiveCallback: () =>  
48 - // new Promise(res => setTimeout(() => res(1), 1000)),  
49 - // promiseResCallback: (e: any) => {  
50 - // window.$message.success('删除成功')  
51 - // list.value.splice(index, 1)  
52 - // }  
53 - // }) 42 + goDialog({
  43 + type: DialogEnum.DELETE,
  44 + promise: true,
  45 + onPositiveCallback: () =>
  46 + new Promise(res => setTimeout(() => res(1), 1000)),
  47 + promiseResCallback: (e: any) => {
  48 + window.$message.success('删除成功')
  49 + list.value.splice(index, 1)
  50 + }
  51 + })
54 } 52 }
55 53
56 return { 54 return {
57 - // list, 55 + list,
58 deleteHandle 56 deleteHandle
59 } 57 }
60 } 58 }
1 <template> 1 <template>
2 <div class="go-items-list"> 2 <div class="go-items-list">
3 - <n-grid :x-gap="20" :y-gap="20" cols="2 s:2 m:3 l:4 xl:4 xxl:4" responsive="screen"> 3 + <n-grid
  4 + :x-gap="20"
  5 + :y-gap="20"
  6 + cols="2 s:2 m:3 l:4 xl:4 xxl:4"
  7 + responsive="screen"
  8 + >
4 <n-grid-item v-for="(item, index) in list" :key="item.id"> 9 <n-grid-item v-for="(item, index) in list" :key="item.id">
5 - <project-items-card :cardData="item" @resize="resizeHandle" @delete="deleteHandle($event, index)"  
6 - @edit="editHandle"></project-items-card> 10 + <project-items-card
  11 + :cardData="item"
  12 + @resize="resizeHandle"
  13 + @delete="deleteHandle($event, index)"
  14 + @edit="editHandle"
  15 + ></project-items-card>
7 </n-grid-item> 16 </n-grid-item>
8 </n-grid> 17 </n-grid>
9 <div class="list-pagination"> 18 <div class="list-pagination">
10 - <n-pagination :item-count="10" :page-sizes="[10, 20, 30, 40]" show-size-picker /> 19 + <n-pagination
  20 + :item-count="10"
  21 + :page-sizes="[10, 20, 30, 40]"
  22 + show-size-picker
  23 + />
11 </div> 24 </div>
12 </div> 25 </div>
13 - <project-items-modal-card v-if="modalData" :modalShow="modalShow" :cardData="modalData" @close="closeModal"  
14 - @edit="editHandle"></project-items-modal-card> 26 + <project-items-modal-card
  27 + v-if="modalData"
  28 + :modalShow="modalShow"
  29 + :cardData="modalData"
  30 + @close="closeModal"
  31 + @edit="editHandle"
  32 + ></project-items-modal-card>
15 </template> 33 </template>
16 34
17 <script setup lang="ts"> 35 <script setup lang="ts">
@@ -20,42 +38,27 @@ import { ProjectItemsModalCard } from '../ProjectItemsModalCard/index' @@ -20,42 +38,27 @@ import { ProjectItemsModalCard } from '../ProjectItemsModalCard/index'
20 import { icon } from '@/plugins' 38 import { icon } from '@/plugins'
21 import { useModalDataInit } from './hooks/useModal.hook' 39 import { useModalDataInit } from './hooks/useModal.hook'
22 import { useDataListInit } from './hooks/useData.hook' 40 import { useDataListInit } from './hooks/useData.hook'
23 -import { getDataViewList } from "@/api/external/contentSave/content";  
24 -import { onMounted, ref } from "vue";  
25 -// THINGS_KIT  
26 -import { ChartList } from '../../index.d' 41 +import { useListData } from './external/useListData'
27 42
28 const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5 43 const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
29 -const { deleteHandle } = useDataListInit() 44 +const { list, deleteHandle } = useDataListInit()
30 const { modalData, modalShow, closeModal, resizeHandle, editHandle } = useModalDataInit() 45 const { modalData, modalShow, closeModal, resizeHandle, editHandle } = useModalDataInit()
31 46
32 -// THINGS_KIT  
33 -const list = ref<ChartList>([])  
34 -onMounted(async () => {  
35 - try {  
36 - const { items } = await getDataViewList({ page: 1, pageSize: 10 })  
37 - list.value = items  
38 - } catch (error) {  
39 - console.log(error)  
40 - }  
41 -})  
42 - 47 +// THINGS_KIT 创建项目列表
  48 +useListData(list)
43 </script> 49 </script>
44 50
45 <style lang="scss" scoped> 51 <style lang="scss" scoped>
46 $contentHeight: 250px; 52 $contentHeight: 250px;
47 -  
48 @include go('items-list') { 53 @include go('items-list') {
49 display: flex; 54 display: flex;
50 flex-direction: column; 55 flex-direction: column;
51 justify-content: space-between; 56 justify-content: space-between;
52 min-height: calc(100vh - #{$--header-height} * 2 - 2px); 57 min-height: calc(100vh - #{$--header-height} * 2 - 2px);
53 -  
54 .list-content { 58 .list-content {
55 position: relative; 59 position: relative;
56 height: $contentHeight; 60 height: $contentHeight;
57 } 61 }
58 -  
59 .list-pagination { 62 .list-pagination {
60 display: flex; 63 display: flex;
61 justify-content: flex-end; 64 justify-content: flex-end;
1 export type Chartype = { 1 export type Chartype = {
2 id: number | string 2 id: number | string
3 - title?: string // 标题  
4 - label?: string // 标签  
5 - release?: boolean // 0未发布 | 1已发布  
6 - name: string // 0未发布 | 1已发布  
7 - // THINGS_KIT  
8 - state: number // 0未发布 | 1已发布 3 + title: string // 标题
  4 + label: string // 标签
  5 + release: boolean // 0未发布 | 1已发布
9 } 6 }
10 7
11 export type ChartList = Chartype[] 8 export type ChartList = Chartype[]