From dcb7806847bd7151042701ce93e7061702b749ea 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: Mon, 15 Aug 2022 16:50:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=A4=9A=E9=80=89?=
=?UTF-8?q?=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../modules/chartEditStore/chartEditStore.ts | 41 ++++++++++++++-----
.../components/EditGroup/index.vue | 10 ++++-
src/views/chart/ContentEdit/index.vue | 12 ++++--
3 files changed, 48 insertions(+), 15 deletions(-)
diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts
index e9c8c578..95b467e8 100644
--- a/src/store/modules/chartEditStore/chartEditStore.ts
+++ b/src/store/modules/chartEditStore/chartEditStore.ts
@@ -139,7 +139,7 @@ export const useChartEditStore = defineStore({
getEditCanvasConfig(): EditCanvasConfigType {
return this.editCanvasConfig
},
- getTargetChart():TargetChartType {
+ getTargetChart(): TargetChartType {
return this.targetChart
},
getRecordChart(): RecordChartType | undefined {
@@ -249,6 +249,14 @@ export const useChartEditStore = defineStore({
}
return -1
},
+ // * 统一格式化处理入参 id
+ idPreFormat(id?: string | string[]) {
+ const idArr = []
+ if (!id) idArr.push(...this.getTargetChart.selectId)
+ if (isString(id)) idArr.push(id)
+ if (isArray(id)) idArr.push(...id)
+ return idArr
+ },
/**
* * 新增组件列表
* @param chartConfig 新图表实例
@@ -266,17 +274,21 @@ export const useChartEditStore = defineStore({
}
this.componentList.push(chartConfig)
},
- // * 删除单个组件
- removeComponentList(id?:string, isHistory = true): void {
+ // * 删除组件
+ removeComponentList(id?:string | string[], isHistory = true): void {
try {
loadingStart()
- const index = this.fetchTargetIndex(id)
- if (index !== -1) {
- isHistory ? chartHistoryStore.createDeleteHistory(this.getComponentList[index]) : undefined
- this.componentList.splice(index, 1)
- loadingFinish()
- return
- }
+ const idArr = this.idPreFormat(id)
+ // 遍历所有对象
+ idArr.forEach(ids => {
+ const index = this.fetchTargetIndex(ids)
+ if (index !== -1) {
+ isHistory ? chartHistoryStore.createDeleteHistory(this.getComponentList[index]) : undefined
+ this.componentList.splice(index, 1)
+ }
+ })
+ loadingFinish()
+ return
} catch(value) {
loadingError()
}
@@ -299,6 +311,9 @@ export const useChartEditStore = defineStore({
// * 移动组件列表层级位置到两端
setBothEnds(isEnd = false, isHistory = true): void {
try {
+ // 暂不支持多选
+ if (this.getTargetChart.selectId.length > 1) return
+
loadingStart()
const length = this.getComponentList.length
if (length < 2) {
@@ -351,6 +366,9 @@ export const useChartEditStore = defineStore({
// * 上移/下移互换图表位置
wrap(isDown = false, isHistory = true) {
try {
+ // 暂不支持多选
+ if (this.getTargetChart.selectId.length > 1) return
+
loadingStart()
const length = this.getComponentList.length
if (length < 2) {
@@ -397,6 +415,9 @@ export const useChartEditStore = defineStore({
// * 复制
setCopy(isCut = false) {
try {
+ // 暂不支持多选
+ if (this.getTargetChart.selectId.length > 1) return
+
loadingStart()
const index:number = this.fetchTargetIndex()
if (index !== -1) {
diff --git a/src/views/chart/ContentEdit/components/EditGroup/index.vue b/src/views/chart/ContentEdit/components/EditGroup/index.vue
index 994440f1..ad18dfe5 100644
--- a/src/views/chart/ContentEdit/components/EditGroup/index.vue
+++ b/src/views/chart/ContentEdit/components/EditGroup/index.vue
@@ -88,6 +88,12 @@ 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 => {
@@ -100,9 +106,9 @@ const optionsHandle = (
// 多选处理
if (chartEditStore.getTargetChart.selectId.length > 1) {
- return filter([MenuEnum.GROUP])
+ return filter(moreMenuEnums)
} else {
- return [...filter([MenuEnum.UN_GROUP]), divider(), ...targetList]
+ return [...filter(singleMenuEnums), divider(), ...targetList]
}
}
diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index 6d3a1cc9..b428d24e 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -107,18 +107,24 @@ const optionsHandle = (
allList: MenuOptionsItemType[],
targetInstance: CreateComponentType
) => {
+ // 多选
+ const moreMenuEnums = [MenuEnum.GROUP, MenuEnum.DELETE]
+ // 单选
+ const singleMenuEnums = targetList
+
// 多选处理
if (chartEditStore.getTargetChart.selectId.length > 1) {
const list: MenuOptionsItemType[] = []
- targetList.forEach(item => {
+
+ allList.forEach(item => {
// 成组
- if (item.key === MenuEnum.GROUP) {
+ if (moreMenuEnums.includes(item.key as MenuEnum)) {
list.push(item)
}
})
return list
}
- return targetList
+ return singleMenuEnums
}
// 主题色