diff --git a/src/enums/editPageEnum.ts b/src/enums/editPageEnum.ts index e2044bd8..df395653 100644 --- a/src/enums/editPageEnum.ts +++ b/src/enums/editPageEnum.ts @@ -1,7 +1,7 @@ // 鼠标点击左右键 export enum MouseEventButton { LEFT = 1, - RIGHT = 2, + RIGHT = 2 } // 页面拖拽键名 @@ -41,7 +41,15 @@ export enum MenuEnum { // 后退 BACK = 'back', // 前进 - FORWORD = 'forward' + FORWORD = 'forward', + // 锁定 + LOCK = 'lock', + // 解除锁定 + UNLOCK = 'unLock', + // 隐藏 + HIDE = 'hide', + // 显示 + SHOW = 'show' } // Win 键盘枚举 @@ -49,9 +57,9 @@ export enum WinKeyboard { CTRL = 'ctrl', SHIFT = 'shift', ALT = ' alt', - CTRL_SOURCE_KEY = "control", - SHIFT_SOURCE_KEY = "shift", - ALT_SOURCE_KEY = "alt" + CTRL_SOURCE_KEY = 'control', + SHIFT_SOURCE_KEY = 'shift', + ALT_SOURCE_KEY = 'alt' } // Mac 键盘枚举 @@ -60,7 +68,7 @@ export enum MacKeyboard { CTRL = '⌘', SHIFT = '⇧', ALT = '⌥', - CTRL_SOURCE_KEY = "⌘", - SHIFT_SOURCE_KEY = "⇧", - ALT_SOURCE_KEY = "⌥" + CTRL_SOURCE_KEY = '⌘', + SHIFT_SOURCE_KEY = '⇧', + ALT_SOURCE_KEY = '⌥' } diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 32c55a94..455d6339 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -602,7 +602,8 @@ export const useChartEditStore = defineStore({ ids.push(item.id) }) } else { - (historyData[0] as CreateComponentGroupType).groupList.forEach(item => { + const group = historyData[0] as CreateComponentGroupType + group.groupList.forEach(item => { ids.push(item.id) }) } @@ -795,6 +796,70 @@ export const useChartEditStore = defineStore({ loadingFinish() } }, + // * 锁定 + setLock(status: boolean = true, isHistory: boolean = true) { + try { + // 暂不支持多选 + if (this.getTargetChart.selectId.length > 1) return + + loadingStart() + const index: number = this.fetchTargetIndex() + if (index !== -1) { + // 更新状态 + const targetItem = this.getComponentList[index] + targetItem.status.lock = status + + // 历史记录 + if (isHistory) { + chartHistoryStore.createLayerHistory( + [targetItem], + status ? HistoryActionTypeEnum.LOCK : HistoryActionTypeEnum.UNLOCK + ) + } + this.updateComponentList(index, targetItem) + loadingFinish() + return + } + } catch (value) { + loadingError() + } + }, + // * 解除锁定 + setUnLock(isHistory: boolean = true) { + this.setLock(false, isHistory) + }, + // * 隐藏 + setHide(status: boolean = true, isHistory: boolean = true) { + try { + // 暂不支持多选 + if (this.getTargetChart.selectId.length > 1) return + + loadingStart() + const index: number = this.fetchTargetIndex() + if (index !== -1) { + // 更新状态 + const targetItem = this.getComponentList[index] + targetItem.status.hide = status + + // 历史记录 + if (isHistory) { + chartHistoryStore.createLayerHistory( + [targetItem], + status ? HistoryActionTypeEnum.HIDE : HistoryActionTypeEnum.SHOW + ) + } + this.updateComponentList(index, targetItem) + loadingFinish() + return + } + } catch (value) { + loadingError() + } + }, + // * 显示 + setShow(isHistory: boolean = true) { + this.setHide(false, isHistory) + }, // ---------------- // * 设置页面大小 setPageSize(scale: number): void { diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts index 0ea7be39..e27240bb 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.d.ts @@ -2,6 +2,7 @@ import { CreateComponentType, CreateComponentGroupType } from '@/packages/index. import { EditCanvasType } from '@/store/modules/chartEditStore/chartEditStore.d' // 操作类型枚举 + export enum HistoryActionTypeEnum { // 新增 ADD = 'add', @@ -30,7 +31,15 @@ export enum HistoryActionTypeEnum { // 解组 UN_GROUP = 'unGroup', // 选择历史记录 - SELECT_HISTORY = 'selectHistory' + SELECT_HISTORY = 'selectHistory', + // 锁定 + LOCK = 'lock', + // 解除锁定 + UNLOCK = 'unLock', + // 隐藏 + HIDE = 'hide', + // 显示 + SHOW = 'show' } // 对象类型 diff --git a/src/store/modules/chartHistoryStore/chartHistoryStore.ts b/src/store/modules/chartHistoryStore/chartHistoryStore.ts index b8627ca6..63da3ff8 100644 --- a/src/store/modules/chartHistoryStore/chartHistoryStore.ts +++ b/src/store/modules/chartHistoryStore/chartHistoryStore.ts @@ -153,6 +153,10 @@ export const useChartHistoryStore = defineStore({ | HistoryActionTypeEnum.DOWN | HistoryActionTypeEnum.UP | HistoryActionTypeEnum.BOTTOM + | HistoryActionTypeEnum.LOCK + | HistoryActionTypeEnum.UNLOCK + | HistoryActionTypeEnum.HIDE + | HistoryActionTypeEnum.SHOW ) { this.createStackItem(item, type, HistoryTargetTypeEnum.CHART) }, diff --git a/src/views/chart/ContentEdit/components/EditGroup/index.vue b/src/views/chart/ContentEdit/components/EditGroup/index.vue index c78b0b27..3a217c45 100644 --- a/src/views/chart/ContentEdit/components/EditGroup/index.vue +++ b/src/views/chart/ContentEdit/components/EditGroup/index.vue @@ -85,26 +85,32 @@ const optionsHandle = ( allList: MenuOptionsItemType[], targetInstance: CreateComponentType ) => { - // 多选 - const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE] - // 单选 - const singleMenuEnums = [MenuEnum.UN_GROUP] - const filter = (menulist: MenuEnum[]) => { - const list: MenuOptionsItemType[] = [] - allList.forEach(item => { - if (menulist.includes(item.key as MenuEnum)) { - list.push(item) - } - }) - return list + return allList.filter(i => menulist.includes(i.key as MenuEnum)) } // 多选处理 if (chartEditStore.getTargetChart.selectId.length > 1) { - return filter(moreMenuEnums) + return filter([MenuEnum.GROUP, MenuEnum.DELETE]) } else { - return [...filter(singleMenuEnums), divider(), ...targetList] + const statusMenuEnums: MenuEnum[] = [] + if (targetInstance.status.lock) { + statusMenuEnums.push(MenuEnum.LOCK) + } else { + statusMenuEnums.push(MenuEnum.UNLOCK) + } + if (targetInstance.status.hide) { + statusMenuEnums.push(MenuEnum.HIDE) + } else { + statusMenuEnums.push(MenuEnum.SHOW) + } + // 单选 + const singleMenuEnums = [MenuEnum.UN_GROUP] + return [ + ...filter(singleMenuEnums), + divider(), + ...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum)) + ] } } diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index 2f6d9cc3..02242ab5 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -114,24 +114,22 @@ const optionsHandle = ( allList: MenuOptionsItemType[], targetInstance: CreateComponentType ) => { - // 多选 - const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE] - // 单选 - const singleMenuEnums = targetList - // 多选处理 if (chartEditStore.getTargetChart.selectId.length > 1) { - const list: MenuOptionsItemType[] = [] - - allList.forEach(item => { - // 成组 - if (moreMenuEnums.includes(item.key as MenuEnum)) { - list.push(item) - } - }) - return list + return allList.filter(i => [MenuEnum.GROUP, MenuEnum.DELETE].includes(i.key as MenuEnum)) } - return singleMenuEnums + const statusMenuEnums: MenuEnum[] = [] + if (targetInstance.status.lock) { + statusMenuEnums.push(MenuEnum.LOCK) + } else { + statusMenuEnums.push(MenuEnum.UNLOCK) + } + if (targetInstance.status.hide) { + statusMenuEnums.push(MenuEnum.HIDE) + } else { + statusMenuEnums.push(MenuEnum.SHOW) + } + return targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum)) } // 主题色 diff --git a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue index ae6d0418..c971276b 100644 --- a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue +++ b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue @@ -23,8 +23,8 @@ {{ componentGroupData.chartConfig.title }} - - + +
@@ -95,20 +95,29 @@ const optionsHandle = ( targetInstance: CreateComponentType ) => { const filter = (menulist: MenuEnum[]) => { - const list: MenuOptionsItemType[] = [] - allList.forEach(item => { - if (menulist.includes(item.key as MenuEnum)) { - list.push(item) - } - }) - return list + return allList.filter(i => menulist.includes(i.key as MenuEnum)) } // 多选处理 if (chartEditStore.getTargetChart.selectId.length > 1) { return filter([MenuEnum.GROUP]) } else { - return [...filter([MenuEnum.UN_GROUP]), divider(), ...targetList] + const statusMenuEnums: MenuEnum[] = [] + if (targetInstance.status.lock) { + statusMenuEnums.push(MenuEnum.LOCK) + } else { + statusMenuEnums.push(MenuEnum.UNLOCK) + } + if (targetInstance.status.hide) { + statusMenuEnums.push(MenuEnum.HIDE) + } else { + statusMenuEnums.push(MenuEnum.SHOW) + } + return [ + ...filter([MenuEnum.UN_GROUP]), + divider(), + ...targetList.filter(i => !statusMenuEnums.includes(i.key as MenuEnum)) + ] } } @@ -136,6 +145,10 @@ const hover = computed(() => { return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId }) +const status = computed(() => { + return props.componentGroupData.status +}) + // 组点击事件 const groupMousedownHandle = (e: MouseEvent) => { onClickOutSide() diff --git a/src/views/chart/ContentLayers/components/LayersListItem/index.vue b/src/views/chart/ContentLayers/components/LayersListItem/index.vue index e113e9bc..d37d8c63 100644 --- a/src/views/chart/ContentLayers/components/LayersListItem/index.vue +++ b/src/views/chart/ContentLayers/components/LayersListItem/index.vue @@ -13,8 +13,8 @@ {{ props.componentData.chartConfig.title }} - - + +
@@ -64,6 +64,10 @@ const select = computed(() => { const hover = computed(() => { return props.componentData.id === chartEditStore.getTargetChart.hoverId }) + +const status = computed(() => { + return props.componentData.status +})