center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

refactor:优化仪表板上移，下移，置顶，置底移动算法可以实时得到移动效果，解决置顶不准确问题

Browse Source
This commit is contained in:
wangjiahao 2021-11-10 11:07:18 +08:00
parent 4e7ecfd318
commit 43aea696a1
2 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/canvas/store/layer.js
View File

@ -1,4 +1,4 @@
import { swap } from '@/components/canvas/utils/utils'
import { swap, toBottom, toTop, moveUp, moveDown } from '@/components/canvas/utils/utils'
import toast from '@/components/canvas/utils/toast'
export default {
@ -6,7 +6,7 @@ export default {
upComponent({ componentData, curComponentIndex }) {
// 上移图层 index，表示元素在数组中越往后
if (curComponentIndex < componentData.length - 1) {
swap(componentData, curComponentIndex, curComponentIndex + 1)
moveUp(componentData, curComponentIndex)
} else {
toast('已经到顶了')
}
@ -15,7 +15,7 @@ export default {
downComponent({ componentData, curComponentIndex }) {
// 下移图层 index，表示元素在数组中越往前
if (curComponentIndex > 0) {
swap(componentData, curComponentIndex, curComponentIndex - 1)
moveDown(componentData, curComponentIndex)
} else {
toast('已经到底了')
}
@ -24,7 +24,7 @@ export default {
topComponent({ componentData, curComponentIndex }) {
// 置顶
if (curComponentIndex < componentData.length - 1) {
swap(componentData, curComponentIndex, componentData.length - 1)
toTop(componentData, curComponentIndex)
} else {
toast('已经到顶了')
}
@ -33,7 +33,7 @@ export default {
bottomComponent({ componentData, curComponentIndex }) {
// 置底
if (curComponentIndex > 0) {
swap(componentData, curComponentIndex, 0)
toBottom(componentData, curComponentIndex)
} else {
toast('已经到底了')
}

17
frontend/src/components/canvas/utils/utils.js
View File

@ -16,11 +16,28 @@ export function deepCopy(target) {
}
export function swap(arr, i, j) {
console.log('before:' + i + '-->' + j + JSON.stringify(arr))
const temp = arr[i]
arr[i] = arr[j]
arr[j] = temp
console.log('after:' + JSON.stringify(arr))
}
export function moveUp(arr, i) {
arr.splice(i + 1, 0, arr.splice(i, 1)[0])
}
export function moveDown(arr, i) {
arr.splice(i, 0, arr.splice(i - 1, 1)[0])
}
export function toTop(arr, i, j) {
arr.push(arr.splice(i, 1)[0])
}
export function toBottom(arr, i) {
arr.unshift(arr.splice(i, 1)[0])
}
export function $(selector) {
return document.querySelector(selector)
}