From ded1f8ae4bd093c051677d060327d959bcde8e62 Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Tue, 1 Feb 2022 20:57:54 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=B1=82?= =?UTF-8?q?=E7=BA=A7=E7=A7=BB=E5=8A=A8=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chartEditStore/chartEditStore.d.ts | 4 +- .../modules/chartEditStore/chartEditStore.ts | 59 +++++++++++++++++-- src/views/chart/hooks/useContextMenu.hook.ts | 20 ++++--- 3 files changed, 68 insertions(+), 15 deletions(-) diff --git a/src/store/modules/chartEditStore/chartEditStore.d.ts b/src/store/modules/chartEditStore/chartEditStore.d.ts index b49774f4..02b263be 100644 --- a/src/store/modules/chartEditStore/chartEditStore.d.ts +++ b/src/store/modules/chartEditStore/chartEditStore.d.ts @@ -1,3 +1,5 @@ +import { CreateComponentType } from '@/packages/index.d' + // 编辑画布属性 export enum EditCanvasTypeEnum { EDIT_LAYOUT_DOM = 'editLayoutDom', @@ -67,5 +69,5 @@ export interface chartEditStoreType { [ChartEditStoreEnum.RIGHT_MENU_SHOW]: boolean [ChartEditStoreEnum.MOUSE_POSITION]: MousePositionType [ChartEditStoreEnum.TARGET_CHART]: TargetChartType - [ChartEditStoreEnum.COMPONENT_LIST]: any[] + [ChartEditStoreEnum.COMPONENT_LIST]: CreateComponentType[] } diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 898f0cdb..e4030c91 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -61,7 +61,7 @@ export const useChartEditStoreStore = defineStore({ getTargetChart():TargetChartType { return this.targetChart }, - getComponentList(): any[] { + getComponentList(): CreateComponentType[] { return this.componentList } }, @@ -92,7 +92,7 @@ export const useChartEditStoreStore = defineStore({ return index }, // * 新增组件列表 - addComponentList(chartData: T, isEnd = false): void { + addComponentList(chartData: CreateComponentType, isEnd = false): void { if(isEnd) { this.componentList.unshift(chartData) return @@ -113,18 +113,25 @@ export const useChartEditStoreStore = defineStore({ loadingError() } }, - // * 移动数组位置到两端 + // * 更新组件列表某一项的值 + updateComponentList(index: number, newData: CreateComponentType) { + if(index < 1 && index > this.getComponentList.length) return + this.componentList[index] = newData + }, + // * 移动组件列表位置到两端 setBothEnds(isEnd = false): void { try { loadingStart() const length = this.getComponentList.length - if(length < 2) return + if(length < 2) { + loadingFinish() + return + } const index = this.fetchTargetIndex() if (index !== -1) { - // 置底排除最底层, 置顶排除最顶层 - if((isEnd && index === 0) || (!isEnd && index === length - 1 )) { + if ((isEnd && index === 0) || (!isEnd && index === length - 1 )) { loadingFinish() return } @@ -156,6 +163,46 @@ export const useChartEditStoreStore = defineStore({ dom.style[key] = value } }, + // * 互换图表位置 + wrap(isDown = false) { + try { + loadingStart() + const length = this.getComponentList.length + if (length < 2) { + loadingFinish() + return + } + + const index:number = this.fetchTargetIndex() + if (index !== -1) { + + // 下移排除最底层, 上移排除最顶层 + if ((isDown && index === 0) || (!isDown && index === length - 1)) { + loadingFinish() + return + } + // 互换位置 + const swapIndex = isDown ? index - 1 : index + 1 + const targetItem = this.getComponentList[index] + const swapItem = this.getComponentList[swapIndex] + + this.updateComponentList(index, swapItem) + this.updateComponentList(swapIndex, targetItem) + loadingFinish() + return + } + } catch(value) { + loadingError() + } + }, + // * 上移 + setUp() { + this.wrap() + }, + // * 下移 + setDown() { + this.wrap(true) + }, // * 设置页面变换时候的 Class setPageSizeClass(): void { const dom = this.getEditCanvas.editContentDom diff --git a/src/views/chart/hooks/useContextMenu.hook.ts b/src/views/chart/hooks/useContextMenu.hook.ts index 1dfd71e5..c4bd2aa2 100644 --- a/src/views/chart/hooks/useContextMenu.hook.ts +++ b/src/views/chart/hooks/useContextMenu.hook.ts @@ -28,12 +28,6 @@ export interface MenuOptionsItemType { // * 默认选项 const defaultOptions: MenuOptionsItemType[] = [ - { - label: '删除', - key: MenuEnum.DELETE, - icon: renderIcon(TrashIcon), - fnHandle: chartEditStore.removeComponentList - }, { label: '复制', key: MenuEnum.COPY, @@ -60,13 +54,23 @@ const defaultOptions: MenuOptionsItemType[] = [ label: '上移一层', key: MenuEnum.UP, icon: renderIcon(ChevronUpIcon), - fnHandle: () => {} + fnHandle: chartEditStore.setUp }, { label: '下移一层', key: MenuEnum.DOWN, icon: renderIcon(ChevronDownIcon), - fnHandle: () => {} + fnHandle: chartEditStore.setDown + }, + { + type: 'divider', + key: 'd2' + }, + { + label: '删除', + key: MenuEnum.DELETE, + icon: renderIcon(TrashIcon), + fnHandle: chartEditStore.removeComponentList } ]