blackteay/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-04-06 03:58:04 +08:00
Code Issues Projects Releases Wiki Activity

fix: 处理分组前进后退的问题

Browse Source
This commit is contained in:
奔跑的面条 2022-08-17 16:18:00 +08:00
parent 716379fc9f
commit 1ee76efeb8
3 changed files with 89 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
src/store/modules/chartEditStore/chartEditStore.ts
View File

@ -10,16 +10,13 @@ import { requestInterval, previewScaleType, requestIntervalUnit } from '@/settin
import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore'
// 全局设置 // 全局设置
import { useSettingStore } from '@/store/modules/settingStore/settingStore' import { useSettingStore } from '@/store/modules/settingStore/settingStore'
import { HistoryActionTypeEnum, HistoryItemType, HistoryTargetTypeEnum } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
import { MenuEnum } from '@/enums/editPageEnum'
import { import {
getUUID, HistoryActionTypeEnum,
loadingStart, HistoryItemType,
loadingFinish, HistoryTargetTypeEnum
loadingError, } from '@/store/modules/chartHistoryStore/chartHistoryStore.d'
isString, import { MenuEnum } from '@/enums/editPageEnum'
isArray import { getUUID, loadingStart, loadingFinish, loadingError, isString, isArray } from '@/utils'
} from '@/utils'
import { import {
ChartEditStoreEnum, ChartEditStoreEnum,
ChartEditStorage, ChartEditStorage,
@ -115,8 +112,8 @@ export const useChartEditStore = defineStore({
requestIntervalUnit: requestIntervalUnit, requestIntervalUnit: requestIntervalUnit,
requestParams: { requestParams: {
Body: { Body: {
"form-data": {}, 'form-data': {},
"x-www-form-urlencoded": {}, 'x-www-form-urlencoded': {},
json: '', json: '',
xml: '' xml: ''
}, },
@ -163,11 +160,11 @@ export const useChartEditStore = defineStore({
}, },
actions: { actions: {
// * 设置 editCanvas 数据项 // * 设置 editCanvas 数据项
setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) { setEditCanvas<T extends keyof EditCanvasType, K extends EditCanvasType[T]>(key: T, value: K) {
this.editCanvas[key] = value this.editCanvas[key] = value
}, },
// * 设置 editCanvasConfig（需保存后端） 数据项 // * 设置 editCanvasConfig（需保存后端） 数据项
setEditCanvasConfig<T extends keyof EditCanvasConfigType, K extends EditCanvasConfigType[T]>(key: T, value: K) { setEditCanvasConfig<T extends keyof EditCanvasConfigType, K extends EditCanvasConfigType[T]>(key: T, value: K) {
this.editCanvasConfig[key] = value this.editCanvasConfig[key] = value
}, },
// * 设置右键菜单 // * 设置右键菜单
@ -175,7 +172,7 @@ export const useChartEditStore = defineStore({
this.rightMenuShow = value this.rightMenuShow = value
}, },
// * 设置目标数据 hover // * 设置目标数据 hover
setTargetHoverChart(hoverId?:TargetChartType["hoverId"]) { setTargetHoverChart(hoverId?: TargetChartType['hoverId']) {
this.targetChart.hoverId = hoverId this.targetChart.hoverId = hoverId
}, },
// * 设置目标数据 select // * 设置目标数据 select
@ -226,7 +223,7 @@ export const useChartEditStore = defineStore({
}, },
// * 找到目标 id 数据的下标位置，id可为父级或子集数组（无则返回-1） // * 找到目标 id 数据的下标位置，id可为父级或子集数组（无则返回-1）
fetchTargetIndex(id?: string): number { fetchTargetIndex(id?: string): number {
const targetId = id || this.getTargetChart.selectId.length && this.getTargetChart.selectId[0] || undefined const targetId = id || (this.getTargetChart.selectId.length && this.getTargetChart.selectId[0]) || undefined
if (!targetId) { if (!targetId) {
loadingFinish() loadingFinish()
return -1 return -1
@ -238,9 +235,9 @@ export const useChartEditStore = defineStore({
return targetIndex return targetIndex
} else { } else {
const length = this.getComponentList.length const length = this.getComponentList.length
for(let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
if (this.getComponentList[i].isGroup) { if (this.getComponentList[i].isGroup) {
for(const cItem of (this.getComponentList[i] as CreateComponentGroupType).groupList) { for (const cItem of (this.getComponentList[i] as CreateComponentGroupType).groupList) {
if (cItem.id === targetId) { if (cItem.id === targetId) {
return i return i
} }
@ -256,7 +253,7 @@ export const useChartEditStore = defineStore({
if (!id) { if (!id) {
idArr.push(...this.getTargetChart.selectId) idArr.push(...this.getTargetChart.selectId)
return idArr return idArr
} }
if (isString(id)) idArr.push(id) if (isString(id)) idArr.push(id)
if (isArray(id)) idArr.push(...id) if (isArray(id)) idArr.push(...id)
return idArr return idArr
@ -268,16 +265,15 @@ export const useChartEditStore = defineStore({
* @param isHistory 是否进行记录 * @param isHistory 是否进行记录
* @returns * @returns
*/ */
addComponentList( addComponentList(
componentInstance: componentInstance:
| CreateComponentType | CreateComponentType
| CreateComponentGroupType | CreateComponentGroupType
| CreateComponentType[] | Array<CreateComponentType | CreateComponentGroupType>,
| CreateComponentGroupType[],
isHead = false, isHead = false,
isHistory = false isHistory = false
): void { ): void {
if(componentInstance instanceof Array) { if (componentInstance instanceof Array) {
componentInstance.forEach(item => { componentInstance.forEach(item => {
this.addComponentList(item, isHead, isHistory) this.addComponentList(item, isHead, isHistory)
}) })
@ -293,7 +289,7 @@ export const useChartEditStore = defineStore({
this.componentList.push(componentInstance) this.componentList.push(componentInstance)
}, },
// * 删除组件 // * 删除组件
removeComponentList(id?:string | string[], isHistory = true): void { removeComponentList(id?: string | string[], isHistory = true): void {
try { try {
const idArr = this.idPreFormat(id) const idArr = this.idPreFormat(id)
const history: Array<CreateComponentType | CreateComponentGroupType> = [] const history: Array<CreateComponentType | CreateComponentGroupType> = []
@ -302,7 +298,7 @@ export const useChartEditStore = defineStore({
loadingStart() loadingStart()
idArr.forEach(ids => { idArr.forEach(ids => {
const index = this.fetchTargetIndex(ids) const index = this.fetchTargetIndex(ids)
if (index !== -1) { if (index !== -1) {
history.push(this.getComponentList[index]) history.push(this.getComponentList[index])
this.componentList.splice(index, 1) this.componentList.splice(index, 1)
@ -311,7 +307,7 @@ export const useChartEditStore = defineStore({
isHistory && chartHistoryStore.createDeleteHistory(history) isHistory && chartHistoryStore.createDeleteHistory(history)
loadingFinish() loadingFinish()
return return
} catch(value) { } catch (value) {
loadingError() loadingError()
} }
}, },
@ -321,10 +317,7 @@ export const useChartEditStore = defineStore({
this.componentList[index] = newData this.componentList[index] = newData
}, },
// * 设置页面样式属性 // * 设置页面样式属性
setPageStyle<T extends keyof CSSStyleDeclaration>( setPageStyle<T extends keyof CSSStyleDeclaration>(key: T, value: any): void {
key: T,
value: any
): void {
const dom = this.getEditCanvas.editContentDom const dom = this.getEditCanvas.editContentDom
if (dom) { if (dom) {
dom.style[key] = value dom.style[key] = value
@ -343,17 +336,17 @@ export const useChartEditStore = defineStore({
return return
} }
const index = this.fetchTargetIndex() const index = this.fetchTargetIndex()
const targetData = this.getComponentList[index] const targetData = this.getComponentList[index]
if (index !== -1) { if (index !== -1) {
// 置底排除最底层, 置顶排除最顶层 // 置底排除最底层, 置顶排除最顶层
if ((isEnd && index === 0) || (!isEnd && index === length - 1 )) { if ((isEnd && index === 0) || (!isEnd && index === length - 1)) {
loadingFinish() loadingFinish()
return return
} }
// 记录原有位置 // 记录原有位置
const setIndex = (componentInstance:CreateComponentType | CreateComponentGroupType, i:number) => { const setIndex = (componentInstance: CreateComponentType | CreateComponentGroupType, i: number) => {
const temp = cloneDeep(componentInstance) const temp = cloneDeep(componentInstance)
temp.attr.zIndex = i temp.attr.zIndex = i
return temp return temp
@ -369,11 +362,11 @@ export const useChartEditStore = defineStore({
// 插入两端 // 插入两端
this.addComponentList(targetData, isEnd) this.addComponentList(targetData, isEnd)
this.getComponentList.splice(isEnd ? index + 1: index, 1) this.getComponentList.splice(isEnd ? index + 1 : index, 1)
loadingFinish() loadingFinish()
return return
} }
} catch(value) { } catch (value) {
loadingError() loadingError()
} }
}, },
@ -398,7 +391,7 @@ export const useChartEditStore = defineStore({
return return
} }
const index:number = this.fetchTargetIndex() const index: number = this.fetchTargetIndex()
if (index !== -1) { if (index !== -1) {
// 下移排除最底层, 上移排除最顶层 // 下移排除最底层, 上移排除最顶层
if ((isDown && index === 0) || (!isDown && index === length - 1)) { if ((isDown && index === 0) || (!isDown && index === length - 1)) {
@ -422,7 +415,7 @@ export const useChartEditStore = defineStore({
loadingFinish() loadingFinish()
return return
} }
} catch(value) { } catch (value) {
loadingError() loadingError()
} }
}, },
@ -441,17 +434,17 @@ export const useChartEditStore = defineStore({
if (this.getTargetChart.selectId.length > 1) return if (this.getTargetChart.selectId.length > 1) return
loadingStart() loadingStart()
const index:number = this.fetchTargetIndex() const index: number = this.fetchTargetIndex()
if (index !== -1) { if (index !== -1) {
const copyData:RecordChartType = { const copyData: RecordChartType = {
charts :this.getComponentList[index], charts: this.getComponentList[index],
type: isCut ? HistoryActionTypeEnum.CUT : HistoryActionTypeEnum.COPY type: isCut ? HistoryActionTypeEnum.CUT : HistoryActionTypeEnum.COPY
} }
this.setRecordChart(copyData) this.setRecordChart(copyData)
window['$message'].success(isCut ? '剪切图表成功' : '复制图表成功！') window['$message'].success(isCut ? '剪切图表成功' : '复制图表成功！')
loadingFinish() loadingFinish()
} }
} catch(value) { } catch (value) {
loadingError() loadingError()
} }
}, },
@ -499,7 +492,7 @@ export const useChartEditStore = defineStore({
this.setRecordChart(undefined) this.setRecordChart(undefined)
} }
loadingFinish() loadingFinish()
} catch(value) { } catch (value) {
loadingError() loadingError()
} }
}, },
@ -512,7 +505,7 @@ export const useChartEditStore = defineStore({
} }
let historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType> let historyData = HistoryItem.historyData as Array<CreateComponentType | CreateComponentGroupType>
if(isArray(historyData)) { if (isArray(historyData)) {
// 选中目标元素，支持多个 // 选中目标元素，支持多个
historyData.forEach((item: CreateComponentType | CreateComponentGroupType) => { historyData.forEach((item: CreateComponentType | CreateComponentGroupType) => {
this.setTargetSelectChart(item.id, true) this.setTargetSelectChart(item.id, true)
@ -566,10 +559,25 @@ export const useChartEditStore = defineStore({
const isUnGroup = HistoryItem.actionType === HistoryActionTypeEnum.UN_GROUP const isUnGroup = HistoryItem.actionType === HistoryActionTypeEnum.UN_GROUP
if (isGroup || isUnGroup) { if (isGroup || isUnGroup) {
if ((isGroup && isForward) || (isUnGroup && !isForward)) { if ((isGroup && isForward) || (isUnGroup && !isForward)) {
this.setGroup(false) const ids: string[] = []
if(historyData.length > 1) {
historyData.forEach(item => {
ids.push(item.id)
})
} else {
(historyData[0] as CreateComponentGroupType).groupList.forEach(item => {
ids.push(item.id)
})
}
this.setGroup(ids, false)
return return
} }
this.setUnGroup([historyData[0].id], undefined, false) // 都需使用子组件的id去解组
if(historyData.length > 1) {
this.setUnGroup([(historyData[0] as CreateComponentType).id], undefined, false)
} else {
this.setUnGroup([(historyData[0] as CreateComponentGroupType).groupList[0].id], undefined, false)
}
return return
} }
}, },
@ -584,8 +592,7 @@ export const useChartEditStore = defineStore({
} }
this.setBackAndSetForwardHandle(targetData) this.setBackAndSetForwardHandle(targetData)
loadingFinish() loadingFinish()
} catch (value) {
} catch(value) {
loadingError() loadingError()
} }
}, },
@ -600,36 +607,35 @@ export const useChartEditStore = defineStore({
} }
this.setBackAndSetForwardHandle(targetData, true) this.setBackAndSetForwardHandle(targetData, true)
loadingFinish() loadingFinish()
} catch (value) {
} catch(value) {
loadingError() loadingError()
} }
}, },
// * 移动位置 // * 移动位置
setMove(keyboardValue: MenuEnum) { setMove(keyboardValue: MenuEnum) {
const index = this.fetchTargetIndex() const index = this.fetchTargetIndex()
if (index === -1) return if (index === -1) return
const attr = this.getComponentList[index].attr const attr = this.getComponentList[index].attr
const distance = settingStore.getChartMoveDistance const distance = settingStore.getChartMoveDistance
switch (keyboardValue) { switch (keyboardValue) {
case MenuEnum.ARROW_UP: case MenuEnum.ARROW_UP:
attr.y -= distance attr.y -= distance
break; break
case MenuEnum.ARROW_RIGHT: case MenuEnum.ARROW_RIGHT:
attr.x += distance attr.x += distance
break; break
case MenuEnum.ARROW_DOWN: case MenuEnum.ARROW_DOWN:
attr.y += distance attr.y += distance
break; break
case MenuEnum.ARROW_LEFT: case MenuEnum.ARROW_LEFT:
attr.x -= distance attr.x -= distance
break; break
} }
}, },
// * 创建分组 // * 创建分组
setGroup(isHistory = true) { setGroup(id?: string | string[], isHistory = true) {
try { try {
const selectIds = this.getTargetChart.selectId const selectIds = this.idPreFormat(id) || this.getTargetChart.selectId
if (selectIds.length < 2) return if (selectIds.length < 2) return
loadingStart() loadingStart()
@ -649,12 +655,16 @@ export const useChartEditStore = defineStore({
selectIds.forEach((id: string) => { selectIds.forEach((id: string) => {
const targetIndex = this.fetchTargetIndex(id) const targetIndex = this.fetchTargetIndex(id)
if (targetIndex !== -1 && this.getComponentList[targetIndex].isGroup) { if (targetIndex !== -1 && this.getComponentList[targetIndex].isGroup) {
this.setUnGroup([id], (e: CreateComponentType[]) => { this.setUnGroup(
e.forEach(e => { [id],
this.addComponentList(e) (e: CreateComponentType[]) => {
newSelectIds.push(e.id) e.forEach(e => {
}) this.addComponentList(e)
}, false) newSelectIds.push(e.id)
})
},
false
)
} else if (targetIndex !== -1) { } else if (targetIndex !== -1) {
newSelectIds.push(id) newSelectIds.push(id)
} }
@ -671,15 +681,14 @@ export const useChartEditStore = defineStore({
// 宽 // 宽
groupAttr.r = r < x + w ? x + w : r groupAttr.r = r < x + w ? x + w : r
// 高 // 高
groupAttr.b = b < y + h ? y + h : b groupAttr.b = b < y + h ? y + h : b
targetList.push(item) targetList.push(item)
historyList.push(toRaw(item)) historyList.push(toRaw(item))
}) })
// 修改原数据之前，先记录 // 修改原数据之前，先记录
console.log(historyList) if (isHistory) chartHistoryStore.createGroupHistory(historyList)
if(isHistory) chartHistoryStore.createGroupHistory(historyList)
// 设置子组件的位置 // 设置子组件的位置
targetList.forEach((item: CreateComponentType) => { targetList.forEach((item: CreateComponentType) => {
@ -705,7 +714,7 @@ export const useChartEditStore = defineStore({
} }
}, },
// * 解除分组 // * 解除分组
setUnGroup(ids?:string[] , callBack?:(e: CreateComponentType[]) => void, isHistory = true) { setUnGroup(ids?: string[], callBack?: (e: CreateComponentType[]) => void, isHistory = true) {
try { try {
const selectGroupIdArr = ids || this.getTargetChart.selectId const selectGroupIdArr = ids || this.getTargetChart.selectId
if (selectGroupIdArr.length !== 1) return if (selectGroupIdArr.length !== 1) return
@ -717,7 +726,7 @@ export const useChartEditStore = defineStore({
if (!targetGroup.isGroup) return if (!targetGroup.isGroup) return
// 记录数据 // 记录数据
if(isHistory) chartHistoryStore.createUnGroupHistory([targetGroup]) if (isHistory) chartHistoryStore.createUnGroupHistory(cloneDeep([targetGroup]))
// 分离组件并还原位置属性 // 分离组件并还原位置属性
targetGroup.groupList.forEach(item => { targetGroup.groupList.forEach(item => {
@ -759,32 +768,24 @@ export const useChartEditStore = defineStore({
computedScale() { computedScale() {
if (this.getEditCanvas.editLayoutDom) { if (this.getEditCanvas.editLayoutDom) {
// 现有展示区域 // 现有展示区域
const width = const width = this.getEditCanvas.editLayoutDom.clientWidth - this.getEditCanvas.offset * 2 - 5
this.getEditCanvas.editLayoutDom.clientWidth - this.getEditCanvas.offset * 2 - 5 const height = this.getEditCanvas.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4
const height =
this.getEditCanvas.editLayoutDom.clientHeight - this.getEditCanvas.offset * 4
// 用户设定大小 // 用户设定大小
const editCanvasWidth = this.editCanvasConfig.width const editCanvasWidth = this.editCanvasConfig.width
const editCanvasHeight = this.editCanvasConfig.height const editCanvasHeight = this.editCanvasConfig.height
// 需保持的比例 // 需保持的比例
const baseProportion = parseFloat( const baseProportion = parseFloat((editCanvasWidth / editCanvasHeight).toFixed(5))
(editCanvasWidth / editCanvasHeight).toFixed(5)
)
const currentRate = parseFloat((width / height).toFixed(5)) const currentRate = parseFloat((width / height).toFixed(5))
if (currentRate > baseProportion) { if (currentRate > baseProportion) {
// 表示更宽 // 表示更宽
const scaleWidth = parseFloat( const scaleWidth = parseFloat(((height * baseProportion) / editCanvasWidth).toFixed(5))
((height * baseProportion) / editCanvasWidth).toFixed(5) this.setScale(scaleWidth > 1 ? 1 : scaleWidth)
)
this.setScale( scaleWidth > 1 ? 1 : scaleWidth)
} else { } else {
// 表示更高 // 表示更高
const scaleHeight = parseFloat( const scaleHeight = parseFloat((width / baseProportion / editCanvasHeight).toFixed(5))
(width / baseProportion / editCanvasHeight).toFixed(5)
)
this.setScale(scaleHeight > 1 ? 1 : scaleHeight) this.setScale(scaleHeight > 1 ? 1 : scaleHeight)
} }
} else { } else {

2
src/store/modules/chartHistoryStore/chartHistoryStore.ts
View File

@ -166,7 +166,7 @@ export const useChartHistoryStore = defineStore({
}, },
// * 解除分组 // * 解除分组
createUnGroupHistory(item: Array<CreateComponentType | CreateComponentGroupType>) { createUnGroupHistory(item: Array<CreateComponentType | CreateComponentGroupType>) {
this.createStackItem(item, HistoryActionTypeEnum.GROUP, HistoryTargetTypeEnum.CHART) this.createStackItem(item, HistoryActionTypeEnum.UN_GROUP, HistoryTargetTypeEnum.CHART)
} }
} }
}) })

2
src/views/chart/ContentEdit/components/EditHistory/index.vue
View File

@ -93,7 +93,7 @@ const labelHandle = (e: HistoryItemType) => {
// 画布编辑 // 画布编辑
if (e.targetType === HistoryTargetTypeEnum.CANVAS) { if (e.targetType === HistoryTargetTypeEnum.CANVAS) {
return historyActionTypeName[HistoryTargetTypeEnum.CANVAS] return historyActionTypeName[HistoryTargetTypeEnum.CANVAS]
} else if (e.actionType === HistoryActionTypeEnum.GROUP) { } else if (e.actionType === HistoryActionTypeEnum.GROUP || e.actionType === HistoryActionTypeEnum.UN_GROUP) {
return `${historyActionTypeName[e.actionType]}` return `${historyActionTypeName[e.actionType]}`
} else if (e.historyData.length) { } else if (e.historyData.length) {
return `${historyActionTypeName[e.actionType]} - ${(e.historyData[0] as CreateComponentType).chartConfig.title}` return `${historyActionTypeName[e.actionType]} - ${(e.historyData[0] as CreateComponentType).chartConfig.title}`