From d7b74ed90d5e1d60281304f89bd235ef4146d8fe 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: Sat, 6 Aug 2022 17:20:56 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=88=90=E7=BB=84?= =?UTF-8?q?=EF=BC=8C=E8=A7=A3=E7=BB=84=EF=BC=8C=E5=9B=BE=E5=B1=82=E5=A4=84?= =?UTF-8?q?=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/enums/editPageEnum.ts | 5 +- src/packages/public/publicConfig.ts | 3 +- src/plugins/icon.ts | 10 +- src/settings/designSetting.ts | 5 +- .../modules/chartEditStore/chartEditStore.ts | 51 +++++- src/views/chart/ContentEdit/index.vue | 19 +- .../components/LayersGroupListItem/index.ts | 3 + .../components/LayersGroupListItem/index.vue | 170 ++++++++++++++++++ src/views/chart/ContentLayers/index.vue | 36 ++-- src/views/chart/hooks/useContextMenu.hook.ts | 31 +++- 10 files changed, 300 insertions(+), 33 deletions(-) create mode 100644 src/views/chart/ContentLayers/components/LayersGroupListItem/index.ts create mode 100644 src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue diff --git a/src/enums/editPageEnum.ts b/src/enums/editPageEnum.ts index 773963f4..a987d59e 100644 --- a/src/enums/editPageEnum.ts +++ b/src/enums/editPageEnum.ts @@ -1,7 +1,7 @@ // 鼠标点击左右键 export enum MouseEventButton { LEFT = 1, - RIGHT = 2 + RIGHT = 2, } // 页面拖拽键名 @@ -24,6 +24,9 @@ export enum MenuEnum { UP = 'up', DOWN = 'down', CLEAR = 'clear', + GROUP = 'group', + UN_GROUP = 'unGroup', + BACK = 'back', FORWORD = 'forward' } diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index 37b8fb05..cc752b8f 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -1,6 +1,7 @@ import { getUUID } from '@/utils' import { PublicConfigType, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' +import { groupTitle } from '@/settings/designSetting' import { RequestHttpEnum, RequestDataTypeEnum, @@ -83,7 +84,7 @@ export class PublicGroupConfigClass implements CreateComponentGroupType { public isGroup = true // 名称 public chartConfig = { - title: '分组' + title: groupTitle } // 组成员列表 public groupList: Array = [] diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index fd880959..90bf057c 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -55,7 +55,9 @@ import { Search as SearchIcon, ChevronUpOutline as ChevronUpOutlineIcon, ChevronDownOutline as ChevronDownOutlineIcon, - Pulse as PulseIcon + Pulse as PulseIcon, + Folder as FolderIcon, + FolderOpen as FolderOpenIcon } from '@vicons/ionicons5' import { @@ -205,7 +207,11 @@ const ionicons5 = { // 向下 ChevronDownOutlineIcon, // 脉搏 - PulseIcon + PulseIcon, + // 文件夹 + FolderIcon, + // 文件夹打开 + FolderOpenIcon } const carbon = { diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts index dbb86da5..0988c7a5 100644 --- a/src/settings/designSetting.ts +++ b/src/settings/designSetting.ts @@ -8,6 +8,9 @@ export const lang = LangEnum.ZH // 水印文字 export const watermarkText = "GoView 低代码平台" +// 分组名称 +export const groupTitle = "分组" + // 主题配置 export const theme = { // 默认是否开启深色主题 @@ -37,7 +40,7 @@ export const asideCollapsedWidth = 60 // 弹窗是否可以通过点击遮罩关闭 export const maskClosable = false -// 修改边框圆角 +// 全局边框圆角 export const borderRadius = '6px' // 轮播间隔 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index 828314d0..53f13c35 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -236,6 +236,32 @@ export const useChartEditStore = defineStore({ } return index }, + // * 找到组数据的下标位置，id可为父级或子集数组（无则返回-1） + fetchTargetGroupIndex(id?: string): number { + const targetId = id || this.getTargetChart.selectId.length && this.getTargetChart.selectId[0] || undefined + if(!targetId) { + loadingFinish() + return -1 + } + const targetIndex = this.fetchTargetIndex(targetId) + + // 当前 + if(targetIndex !== -1) { + return targetIndex + } else { + const length = this.getComponentList.length + for(let i = 0; i < length; i++) { + if(this.getComponentList[i].isGroup) { + for(const cItem of (this.getComponentList[i] as CreateComponentGroupType).groupList) { + if(cItem.id === targetId) { + return i + } + } + } + } + } + return -1 + }, /** * * 新增组件列表 * @param chartConfig 新图表实例 @@ -575,12 +601,33 @@ export const useChartEditStore = defineStore({ groupClass.groupList.push(item) }) this.addComponentList(groupClass) - // todo 输出 - console.log(this.getComponentList) }, // * 解除分组 setUnGroup() { + const selectGroupIdArr = this.getTargetChart.selectId + if(selectGroupIdArr.length > 1) { + window['$message'].error('解除分组失败，请联系管理员！') + return + } + + // 解组 + const unGroup = (targetIndex: number) => { + const targetGroup = this.getComponentList[targetIndex] as CreateComponentGroupType + targetGroup.groupList.forEach(item => { + this.addComponentList(item) + }) + this.setTargetSelectChart(targetGroup.id) + // 删除分组 + this.removeComponentList(false) + } + const targetIndex = this.fetchTargetGroupIndex(selectGroupIdArr[0]) + // 判断目标是否为分组父级 + if(targetIndex !== -1) { + unGroup(targetIndex) + } else { + window['$message'].error('解除分组失败，请联系管理员！') + } }, // ---------------- // * 设置页面大小 diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue index 02f7b974..f08cb06c 100644 --- a/src/views/chart/ContentEdit/index.vue +++ b/src/views/chart/ContentEdit/index.vue @@ -31,7 +31,7 @@ @mousedown="mousedownHandle($event, item)" @mouseenter="mouseenterHandle($event, item)" @mouseleave="mouseleaveHandle($event, item)" - @contextmenu="handleContextMenu($event, item)" + @contextmenu="handleContextMenu($event, item, optionsHandle)" > import { onMounted, computed } from 'vue' import { chartColors } from '@/settings/chartThemes/index' +import { MenuEnum } from '@/enums/editPageEnum' +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils' import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook' +import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' import { useLayout } from './hooks/useLayout.hook' @@ -90,6 +93,20 @@ useLayout() // 点击事件 const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle() +// 右键事件 +const optionsHandle = (targetList: MenuOptionsItemType[], allList: MenuOptionsItemType[], item: CreateComponentType | CreateComponentGroupType) => { + // 多选处理 + if(chartEditStore.getTargetChart.selectId.length > 1) { + targetList.forEach(item => { + if(item.key !== MenuEnum.GROUP) { + item.disabled = true + } + }) + return targetList + } + return targetList +} + // 主题色 const themeSetting = computed(() => { const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting diff --git a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.ts b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.ts new file mode 100644 index 00000000..25939326 --- /dev/null +++ b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.ts @@ -0,0 +1,3 @@ +import LayersGroupListItem from './index.vue' + +export { LayersGroupListItem } diff --git a/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue new file mode 100644 index 00000000..77ef5b98 --- /dev/null +++ b/src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue @@ -0,0 +1,170 @@ + + + + + diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue index bebfae42..13ec488f 100644 --- a/src/views/chart/ContentLayers/index.vue +++ b/src/views/chart/ContentLayers/index.vue @@ -16,20 +16,21 @@ 暂无图层~ - + @@ -44,22 +45,24 @@ import { ContentBox } from '../ContentBox/index' import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore' import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d' import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' -import { CreateComponentType } from '@/packages/index.d' +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook' import { MenuEnum } from '@/enums/editPageEnum' import { LayersListItem } from './components/LayersListItem/index' +import { LayersGroupListItem } from './components/LayersGroupListItem/index' + import { icon } from '@/plugins' const { LayersIcon } = icon.ionicons5 const chartLayoutStore = useChartLayoutStore() const chartEditStore = useChartEditStore() -const { handleContextMenu } = useContextMenu() +const { handleContextMenu, onClickOutSide } = useContextMenu() // 逆序展示 const reverseList = computed(() => { - const list: CreateComponentType[] = cloneDeep(chartEditStore.getComponentList) + const list: Array = cloneDeep(chartEditStore.getComponentList) return list.reverse() }) @@ -89,6 +92,7 @@ const onMoveCallback = (val: any) => { // 点击事件 const mousedownHandle = (item: CreateComponentType) => { + onClickOutSide() chartEditStore.setTargetSelectChart(item.id) } diff --git a/src/views/chart/hooks/useContextMenu.hook.ts b/src/views/chart/hooks/useContextMenu.hook.ts index 5272ea17..bb08e154 100644 --- a/src/views/chart/hooks/useContextMenu.hook.ts +++ b/src/views/chart/hooks/useContextMenu.hook.ts @@ -1,10 +1,11 @@ -import { ref, nextTick } from 'vue' +import { ref, nextTick, toRaw } from 'vue'; import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore' -import { CreateComponentType } from '@/packages/index.d' +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { renderIcon, loadingError } from '@/utils' import { icon } from '@/plugins' import { MenuOptionsItemType } from './useContextMenu.hook.d' import { MenuEnum } from '@/enums/editPageEnum' +import cloneDeep from 'lodash/cloneDeep' const { CopyIcon, CutIcon, ClipboardOutlineIcon, TrashIcon, ChevronDownIcon, ChevronUpIcon } = icon.ionicons5 const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Carbon3DCursorIcon } = icon.carbon @@ -81,10 +82,16 @@ const defaultOptions: MenuOptionsItemType[] = [ const defaultMultiSelectOptions: MenuOptionsItemType[] = [ { label: '创建分组', - key: MenuEnum.COPY, + key: MenuEnum.GROUP, icon: renderIcon(Carbon3DSoftwareIcon), fnHandle: chartEditStore.setGroup - } + }, + { + label: '解除分组', + key: MenuEnum.UN_GROUP, + icon: renderIcon(Carbon3DCursorIcon), + fnHandle: chartEditStore.setUnGroup + }, ] // * 无数据传递拥有的选项 @@ -123,7 +130,7 @@ const menuOptions = ref([]) const handleContextMenu = ( e: MouseEvent, // 右键对象 - item?: CreateComponentType, + item?: CreateComponentType | CreateComponentGroupType, // 判断函数 optionsHandle?: Function, // 隐藏选项列表 @@ -133,10 +140,13 @@ const handleContextMenu = ( ) => { e.stopPropagation() e.preventDefault() + let target = e.target while (target instanceof SVGElement) { target = target.parentNode } + + // 展示列表 chartEditStore.setRightMenuShow(false) // * 多选默认选项 @@ -148,16 +158,17 @@ const handleContextMenu = ( } if (!item) { - menuOptions.value = pickOption(menuOptions.value, defaultNoItemKeys) + menuOptions.value = pickOption(toRaw(menuOptions.value), defaultNoItemKeys) } if (hideOptionsList) { - menuOptions.value = hideOption(menuOptions.value, hideOptionsList) + menuOptions.value = hideOption([...defaultMultiSelectOptions, ...defaultOptions], hideOptionsList) } if (pickOptionsList) { - menuOptions.value = hideOption(menuOptions.value, pickOptionsList) + menuOptions.value = pickOption([...defaultMultiSelectOptions, ...defaultOptions], pickOptionsList) } if (optionsHandle) { - menuOptions.value = optionsHandle(menuOptions.value) + // 自定义函数能够拿到当前选项和所有选项 + menuOptions.value = optionsHandle(cloneDeep(toRaw(menuOptions.value)), [...defaultMultiSelectOptions, ...defaultOptions], item) } nextTick().then(() => { chartEditStore.setMousePosition(e.clientX, e.clientY) @@ -197,6 +208,8 @@ export const useContextMenu = () => { return { menuOptions, + defaultOptions, + defaultMultiSelectOptions, handleContextMenu, onClickOutSide, handleMenuSelect,