From 171e0aa408ef791bb6da45edf8fd447c7b94d6d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
<1262327911@qq.com>
Date: Tue, 30 Aug 2022 15:03:25 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=AE=8C=E5=96=84=E9=A6=96=E9=A1=B5?=
=?UTF-8?q?=E9=A2=84=E8=A7=88=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/utils/router.ts | 4 ++--
src/views/preview/utils/storage.ts | 2 +-
.../components/ProjectItemsCard/index.vue | 16 ++++++++++----
.../ProjectItemsList/hooks/useModal.hook.ts | 14 +++++++++----
.../components/ProjectItemsList/index.vue | 21 ++++---------------
5 files changed, 29 insertions(+), 28 deletions(-)
diff --git a/src/utils/router.ts b/src/utils/router.ts
index 5a117357..5f104f56 100644
--- a/src/utils/router.ts
+++ b/src/utils/router.ts
@@ -205,9 +205,9 @@ export const loginCheck = () => {
* * 预览地址
* @returns
*/
- export const previewPath = () => {
+ export const previewPath = (id?: string | number) => {
const { origin, pathname } = document.location
const path = fetchPathByName(PreviewEnum.CHART_PREVIEW_NAME, 'href')
- const previewPath = `${origin}${pathname}${path}/${fetchRouteParamsLocation()}`
+ const previewPath = `${origin}${pathname}${path}/${id || fetchRouteParamsLocation()}`
return previewPath
}
\ No newline at end of file
diff --git a/src/views/preview/utils/storage.ts b/src/views/preview/utils/storage.ts
index b708488c..494315c7 100644
--- a/src/views/preview/utils/storage.ts
+++ b/src/views/preview/utils/storage.ts
@@ -16,7 +16,7 @@ export const getSessionStorageInfo = async () => {
)
// 是否本地预览
- if (!storageList) {
+ if (!storageList || storageList.findIndex(e => e.id === id.toString()) === -1) {
// 接口调用
const res = await fetchProjectApi({ projectId: id }) as unknown as MyResponseType
if (res.code === ResultEnum.SUCCESS) {
diff --git a/src/views/project/items/components/ProjectItemsCard/index.vue b/src/views/project/items/components/ProjectItemsCard/index.vue
index d9622c95..a0f847cf 100644
--- a/src/views/project/items/components/ProjectItemsCard/index.vue
+++ b/src/views/project/items/components/ProjectItemsCard/index.vue
@@ -7,7 +7,7 @@
<mac-os-control-btn
class="top-btn"
:hidden="['remove']"
- @close="deleteHanlde"
+ @close="deleteHandle"
@resize="resizeHandle"
></mac-os-control-btn>
</div>
@@ -98,7 +98,7 @@ const {
SendIcon
} = icon.ionicons5
-const emit = defineEmits(['delete', 'resize', 'edit', 'release'])
+const emit = defineEmits(['preview', 'delete', 'resize', 'edit', 'release'])
const props = defineProps({
cardData: Object as PropType<Chartype>
@@ -165,8 +165,11 @@ const selectOptions = ref([
const handleSelect = (key: string) => {
switch (key) {
+ case 'preview':
+ previewHandle()
+ break
case 'delete':
- deleteHanlde()
+ deleteHandle()
break
case 'release':
releaseHandle()
@@ -177,8 +180,13 @@ const handleSelect = (key: string) => {
}
}
+// 预览处理
+const previewHandle = () => {
+ emit('preview', props.cardData)
+}
+
// 删除处理
-const deleteHanlde = () => {
+const deleteHandle = () => {
emit('delete', props.cardData)
}
diff --git a/src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts b/src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts
index af74d44a..e28b1f91 100644
--- a/src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts
+++ b/src/views/project/items/components/ProjectItemsList/hooks/useModal.hook.ts
@@ -1,6 +1,6 @@
import { ref } from 'vue'
import { ChartEnum } from '@/enums/pageEnum'
-import { fetchPathByName, routerTurnByPath } from '@/utils'
+import { fetchPathByName, routerTurnByPath, openNewWindow, previewPath } from '@/utils'
import { Chartype } from '../../../index.d'
export const useModalDataInit = () => {
const modalShow = ref<boolean>(false)
@@ -12,25 +12,31 @@ export const useModalDataInit = () => {
modalData.value = null
}
- // 打开 modal
+ // 缩放处理
const resizeHandle = (cardData: Chartype) => {
if (!cardData) return
modalShow.value = true
modalData.value = cardData
}
- // 打开 modal
+ // 编辑处理
const editHandle = (cardData: Chartype) => {
if (!cardData) return
const path = fetchPathByName(ChartEnum.CHART_HOME_NAME, 'href')
routerTurnByPath(path, [cardData.id], undefined, true)
}
+ // 预览处理
+ const previewHandle = (cardData: Chartype) => {
+ openNewWindow(previewPath(cardData.id))
+ }
+
return {
modalData,
modalShow,
closeModal,
resizeHandle,
- editHandle
+ editHandle,
+ previewHandle
}
}
diff --git a/src/views/project/items/components/ProjectItemsList/index.vue b/src/views/project/items/components/ProjectItemsList/index.vue
index 73783e8a..2ce7145c 100644
--- a/src/views/project/items/components/ProjectItemsList/index.vue
+++ b/src/views/project/items/components/ProjectItemsList/index.vue
@@ -6,15 +6,11 @@
</div>
<!-- 列表 -->
<div v-show="!loading">
- <n-grid
- :x-gap="20"
- :y-gap="20"
- cols="2 s:2 m:3 l:4 xl:4 xxl:4"
- responsive="screen"
- >
+ <n-grid :x-gap="20" :y-gap="20" cols="2 s:2 m:3 l:4 xl:4 xxl:4" responsive="screen">
<n-grid-item v-for="(item, index) in list" :key="item.id">
<project-items-card
:cardData="item"
+ @preview="previewHandle"
@resize="resizeHandle"
@delete="deleteHandle(item)"
@release="releaseHandle(item, index)"
@@ -56,17 +52,8 @@ import { useModalDataInit } from './hooks/useModal.hook'
import { useDataListInit } from './hooks/useData.hook'
const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
-const { modalData, modalShow, closeModal, resizeHandle, editHandle } =
- useModalDataInit()
-const {
- loading,
- paginat,
- list,
- changeSize,
- changePage,
- releaseHandle,
- deleteHandle,
-} = useDataListInit()
+const { modalData, modalShow, closeModal, previewHandle, resizeHandle, editHandle } = useModalDataInit()
+const { loading, paginat, list, changeSize, changePage, releaseHandle, deleteHandle } = useDataListInit()
</script>
<style lang="scss" scoped>