From 9ea4858770e30bff5f7745babeec3f887f15c470 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 18:16:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=84=E7=90=86=E5=88=86=E7=BB=84?=
=?UTF-8?q?=E5=B1=95=E7=A4=BA=EF=BC=8C=E5=A4=9A=E9=80=89=E5=8F=B3=E9=94=AE?=
=?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../modules/chartEditStore/chartEditStore.ts | 4 -
.../ContentEdit/components/EditGroup/index.ts | 3 +
.../components/EditGroup/index.vue | 78 ++++++++++++++++++
src/views/chart/ContentEdit/index.vue | 80 +++++++++++--------
src/views/chart/ContentLayers/index.vue | 6 +-
5 files changed, 130 insertions(+), 41 deletions(-)
create mode 100644 src/views/chart/ContentEdit/components/EditGroup/index.ts
create mode 100644 src/views/chart/ContentEdit/components/EditGroup/index.vue
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index 53f13c35..a74b4d43 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -605,10 +605,6 @@ export const useChartEditStore = defineStore({
// * 解除分组
setUnGroup() {
const selectGroupIdArr = this.getTargetChart.selectId
- if(selectGroupIdArr.length > 1) {
- window['$message'].error('解除分组失败，请联系管理员！')
- return
- }
// 解组
const unGroup = (targetIndex: number) => {
diff --git a/src/views/chart/ContentEdit/components/EditGroup/index.ts b/src/views/chart/ContentEdit/components/EditGroup/index.ts
new file mode 100644
index 00000000..4fd9d529
--- /dev/null
+++ b/src/views/chart/ContentEdit/components/EditGroup/index.ts
@@ -0,0 +1,3 @@
+import EditGroup from './index.vue'
+
+export { EditGroup }
diff --git a/src/views/chart/ContentEdit/components/EditGroup/index.vue b/src/views/chart/ContentEdit/components/EditGroup/index.vue
new file mode 100644
index 00000000..c20e0108
--- /dev/null
+++ b/src/views/chart/ContentEdit/components/EditGroup/index.vue
@@ -0,0 +1,78 @@
+<template>
+ <div class="go-edit-group-box">
+ <!-- 组合组件 -->
+ <edit-shape-box
+ v-for="item in groupData.groupList"
+ :key="item.id"
+ :data-id="item.id"
+ :index="groupIndex"
+ :style="useComponentStyle(item.attr, groupIndex)"
+ :item="item"
+ @click="mouseClickHandle($event, item)"
+ @mousedown="mousedownHandle($event, item)"
+ @mouseenter="mouseenterHandle($event, item)"
+ @mouseleave="mouseleaveHandle($event, item)"
+ @contextmenu="handleContextMenu($event, item, undefined, undefined, pickOptionsList)"
+ >
+ <component
+ class="edit-content-chart"
+ :class="animationsClass(item.styles.animations)"
+ :is="item.chartConfig.chartKey"
+ :chartConfig="item"
+ :themeSetting="themeSetting"
+ :themeColor="themeColor"
+ :style="{
+ ...useSizeStyle(item.attr),
+ ...getFilterStyle(item.styles),
+ ...getTransformStyle(item.styles)
+ }"
+ ></component>
+ </edit-shape-box>
+ </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+import { MenuEnum } from '@/enums/editPageEnum'
+import { chartColors } from '@/settings/chartThemes/index'
+import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
+import { animationsClass, getFilterStyle, getTransformStyle } from '@/utils'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
+import { useMouseHandle } from '../../hooks/useDrag.hook'
+import { useComponentStyle, useSizeStyle } from '../../hooks/useStyle.hook'
+import { EditShapeBox } from '../../components/EditShapeBox'
+
+
+const props = defineProps({
+ groupData: {
+ type: Object as PropType<CreateComponentGroupType>,
+ required: true
+ },
+ groupIndex: {
+ type: Number,
+ required: true
+ }
+})
+
+const chartEditStore = useChartEditStore()
+const { handleContextMenu } = useContextMenu()
+
+// 右键
+const pickOptionsList = [MenuEnum.UN_GROUP]
+
+// 点击事件
+const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
+
+// 配置项
+const themeColor = computed(() => {
+ const chartThemeColor = chartEditStore.getEditCanvasConfig.chartThemeColor
+ return chartColors[chartThemeColor]
+})
+
+// 主题色
+const themeSetting = computed(() => {
+ const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting
+ return chartThemeSetting
+})
+</script>
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index f08cb06c..f982920d 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -15,38 +15,43 @@
<!-- 展示 -->
<edit-range>
<!-- 滤镜预览 -->
- <div :style="{
+ <div
+ :style="{
...getFilterStyle(chartEditStore.getEditCanvasConfig),
...rangeStyle
- }">
+ }"
+ >
<!-- 图表 -->
- <edit-shape-box
- v-for="(item, index) in chartEditStore.getComponentList"
- :key="item.id"
- :data-id="item.id"
- :index="index"
- :style="useComponentStyle(item.attr, index)"
- :item="item"
- @click="mouseClickHandle($event, item)"
- @mousedown="mousedownHandle($event, item)"
- @mouseenter="mouseenterHandle($event, item)"
- @mouseleave="mouseleaveHandle($event, item)"
- @contextmenu="handleContextMenu($event, item, optionsHandle)"
- >
- <component
- class="edit-content-chart"
- :class="animationsClass(item.styles.animations)"
- :is="item.chartConfig.chartKey"
- :chartConfig="item"
- :themeSetting="themeSetting"
- :themeColor="themeColor"
- :style="{
- ...useSizeStyle(item.attr),
- ...getFilterStyle(item.styles),
- ...getTransformStyle(item.styles),
- }"
- ></component>
- </edit-shape-box>
+ <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
+ <EditGroup v-if="item.isGroup" :groupData="item" :groupIndex="index"> </EditGroup>
+ <!-- 单组件 -->
+ <edit-shape-box
+ v-else
+ :data-id="item.id"
+ :index="index"
+ :style="useComponentStyle(item.attr, index)"
+ :item="item"
+ @click="mouseClickHandle($event, item)"
+ @mousedown="mousedownHandle($event, item)"
+ @mouseenter="mouseenterHandle($event, item)"
+ @mouseleave="mouseleaveHandle($event, item)"
+ @contextmenu="handleContextMenu($event, item, optionsHandle)"
+ >
+ <component
+ class="edit-content-chart"
+ :class="animationsClass(item.styles.animations)"
+ :is="item.chartConfig.chartKey"
+ :chartConfig="item"
+ :themeSetting="themeSetting"
+ :themeColor="themeColor"
+ :style="{
+ ...useSizeStyle(item.attr),
+ ...getFilterStyle(item.styles),
+ ...getTransformStyle(item.styles)
+ }"
+ ></component>
+ </edit-shape-box>
+ </div>
</div>
</edit-range>
</div>
@@ -79,6 +84,7 @@ import { dragHandle, dragoverHandle, useMouseHandle } from './hooks/useDrag.hook
import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook'
import { ContentBox } from '../ContentBox/index'
+import { EditGroup } from './components/EditGroup'
import { EditRange } from './components/EditRange'
import { EditBottom } from './components/EditBottom'
import { EditShapeBox } from './components/EditShapeBox'
@@ -94,15 +100,21 @@ useLayout()
const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
// 右键事件
-const optionsHandle = (targetList: MenuOptionsItemType[], allList: MenuOptionsItemType[], item: CreateComponentType | CreateComponentGroupType) => {
+const optionsHandle = (
+ targetList: MenuOptionsItemType[],
+ allList: MenuOptionsItemType[],
+ item: CreateComponentType
+) => {
// 多选处理
- if(chartEditStore.getTargetChart.selectId.length > 1) {
+ if (chartEditStore.getTargetChart.selectId.length > 1) {
+ const list: MenuOptionsItemType[] = []
targetList.forEach(item => {
- if(item.key !== MenuEnum.GROUP) {
- item.disabled = true
+ // 成组
+ if (item.key === MenuEnum.GROUP) {
+ list.push(item)
}
})
- return targetList
+ return list
}
return targetList
}
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index 13ec488f..13184805 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/src/views/chart/ContentLayers/index.vue
@@ -20,16 +20,16 @@
<template #item="{ element }">
<div>
<!-- 组合 -->
- <LayersGroupListItem v-if="element.isGroup" :componentGroupData="element"></LayersGroupListItem>
+ <layers-group-list-item v-if="element.isGroup" :componentGroupData="element"></layers-group-list-item>
<!-- 单组件 -->
- <LayersListItem
+ <layers-list-item
v-else
:componentData="element"
@mousedown="mousedownHandle(element)"
@mouseenter="mouseenterHandle(element)"
@mouseleave="mouseleaveHandle(element)"
@contextmenu="handleContextMenu($event, element)"
- ></LayersListItem>
+ ></layers-list-item>
</div>
</template>
</draggable>