[update] 国内标准左侧树拖拽排序
This commit is contained in:
@@ -405,8 +405,6 @@ export default {
|
|||||||
// 拖拽方法
|
// 拖拽方法
|
||||||
onDropCataSort (info) {
|
onDropCataSort (info) {
|
||||||
console.log('------info', info)
|
console.log('------info', info)
|
||||||
// 拖动节点
|
|
||||||
const dragKey = info.dragNode.eventKey
|
|
||||||
const dropPos = info.node.pos.split('-')
|
const dropPos = info.node.pos.split('-')
|
||||||
// 拖动的位置,info.dropPosition拖到了目标节点的上面则当前元素 -1,下面则是 1
|
// 拖动的位置,info.dropPosition拖到了目标节点的上面则当前元素 -1,下面则是 1
|
||||||
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
|
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
|
||||||
@@ -418,12 +416,7 @@ export default {
|
|||||||
console.log('---------dragNodeData', dragNodeData)
|
console.log('---------dragNodeData', dragNodeData)
|
||||||
console.log('---------nodeData', nodeData)
|
console.log('---------nodeData', nodeData)
|
||||||
|
|
||||||
let paramObj = {}
|
const paramObj = {}
|
||||||
// const data = info.dropToGap
|
|
||||||
// ? node.$parent.dataRef === undefined
|
|
||||||
// ? node.$parent.treeData
|
|
||||||
// : node.$parent.dataRef
|
|
||||||
// : node.dataRef
|
|
||||||
|
|
||||||
// 判断只能在同级排序
|
// 判断只能在同级排序
|
||||||
if (!info.dropToGap) {
|
if (!info.dropToGap) {
|
||||||
@@ -440,51 +433,36 @@ export default {
|
|||||||
this.$message.warning('不能移动到最顶级')
|
this.$message.warning('不能移动到最顶级')
|
||||||
return false
|
return false
|
||||||
} else {
|
} else {
|
||||||
if (dragNodeData.parentId !== nodeData.parentId) {
|
|
||||||
this.$message.warning('只能同级排序')
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
|
|
||||||
// let nodeArray = data.children === undefined ? [] : data.children
|
|
||||||
// nodeArray = nodeArray.filter((item) => { return item.id !== dragNodeData.id })
|
|
||||||
// let index
|
|
||||||
// if (nodeData.parentId === dragNodeData.parentId) {
|
|
||||||
// index = info.dropPosition
|
|
||||||
// } else {
|
|
||||||
// index =
|
|
||||||
// dropPos[dropPos.length - 1] < info.dropPosition
|
|
||||||
// ? info.dropPosition
|
|
||||||
// : dropPos[dropPos.length - 1]
|
|
||||||
// }
|
|
||||||
// // console.log("index: ", index)
|
|
||||||
// if (!info.dropToGap) {
|
|
||||||
// nodeArray.push({
|
|
||||||
// id: dragNodeData.id,
|
|
||||||
// parentId: dragNodeData.parentId,
|
|
||||||
// nodeOrder: dragNodeData.nodeOrder
|
|
||||||
// })
|
|
||||||
// } else {
|
|
||||||
// nodeArray.splice(index === -1 ? 0 : index, 0, dragNodeData)
|
|
||||||
// }
|
|
||||||
// nodeArray.forEach((element) => {
|
|
||||||
// element.pid = dropPos.length === 2 && info.dropToGap ? '' : data.id
|
|
||||||
// })
|
|
||||||
// // console.log("nodeData: ", nodeData)
|
|
||||||
// // console.log("dropPosition: ", dropPosition)
|
|
||||||
// nodeArray.forEach((element, i) => {
|
|
||||||
// if (element.id === dragKey) {
|
|
||||||
// const dept = {
|
|
||||||
// id: element.id,
|
|
||||||
// parentId: element.pid,
|
|
||||||
// nodeOrder: dropPosition === 1 ? i : i + 1
|
|
||||||
// }
|
|
||||||
// paramObj = dept
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
paramObj.id = dragNodeData.id
|
paramObj.id = dragNodeData.id
|
||||||
// paramObj.nodeId = dragNodeData.id // 拖拽节点的id
|
|
||||||
paramObj.parentId = nodeData.parentId // 目标节点的父级id
|
paramObj.parentId = nodeData.parentId // 目标节点的父级id
|
||||||
paramObj.nodeOrder = dropPos[dropPos.length - 1] < info.dropPosition ? info.dropPosition : dropPos[dropPos.length - 1] // 要设置的排序值
|
// 排序序号要换成上面节点的nodeOrder+0.00000001,要根据dropPosition判断拖动到的目标节点是在
|
||||||
|
if (dropPos[dropPos.length - 1] < info.dropPosition) {
|
||||||
|
// 说明目标节点在拖动位置上方,获取目标节点下面一个节点的排序,从两个排序中去一个随机数给拖动节点,如果没有下一个同级节点,直接在当前节点排序上加0.0001
|
||||||
|
// 目标节点下面一个节点
|
||||||
|
const nextNode = this.getNextNode(this.treeData, nodeData.id)
|
||||||
|
console.log('---------nextNode', nextNode)
|
||||||
|
if (nextNode) {
|
||||||
|
console.log('-------获取随机数', nodeData.nodeOrder, nextNode.nodeOrder)
|
||||||
|
// 从两个排序获取随机数作为拖动节点的排序
|
||||||
|
paramObj.nodeOrder = this.getRandomArbitrary(nodeData.nodeOrder, nextNode.nodeOrder)
|
||||||
|
} else {
|
||||||
|
// 没有下一个就目标节点排序+0.0001
|
||||||
|
paramObj.nodeOrder = nodeData.nodeOrder + 0.0001
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 说明目标节点在拖动位置下方,要获取上面一个节点的数据,先从上一个节点和目标节点的排序中取一个随机数给拖拽节点,如果没有上一个节点,直接在当前节点排序上减0.0001
|
||||||
|
// 获取目标节点的上一个节点
|
||||||
|
const prevNode = this.getPrevNode(this.treeData, nodeData.id)
|
||||||
|
console.log('---------prevNode', prevNode)
|
||||||
|
if (prevNode) {
|
||||||
|
console.log('-------获取随机数', prevNode.nodeOrder, nodeData.nodeOrder)
|
||||||
|
// 从两个排序获取随机数作为拖动节点的排序
|
||||||
|
paramObj.nodeOrder = this.getRandomArbitrary(prevNode.nodeOrder, nodeData.nodeOrder)
|
||||||
|
} else {
|
||||||
|
// 没有上一个就目标节点排序-0.0001
|
||||||
|
paramObj.nodeOrder = nodeData.nodeOrder - 0.0001
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// console.log("拖拽后对象是:", paramObj)
|
// console.log("拖拽后对象是:", paramObj)
|
||||||
console.log('此处调用后端接口保存数据' + paramObj.id + paramObj.nodeOrder)
|
console.log('此处调用后端接口保存数据' + paramObj.id + paramObj.nodeOrder)
|
||||||
@@ -498,6 +476,49 @@ export default {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
// 获取某个节点的上一个同级节点
|
||||||
|
getPrevNode (treeData, key) {
|
||||||
|
let node
|
||||||
|
for (let i = 0; i < treeData.length; i++) {
|
||||||
|
if (treeData[i].key === key) {
|
||||||
|
if (i - 1 < 0) {
|
||||||
|
// 说明是第一个节点,返回空
|
||||||
|
return null
|
||||||
|
} else {
|
||||||
|
node = treeData[i - 1]
|
||||||
|
return node
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (treeData[i].children) {
|
||||||
|
node = this.getPrevNode(treeData[i].children, key)
|
||||||
|
if (node) {
|
||||||
|
return node
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
},
|
||||||
|
// 获取某个节点的下一个同级节点
|
||||||
|
getNextNode (treeData, key) {
|
||||||
|
let node
|
||||||
|
for (let i = 0; i < treeData.length; i++) {
|
||||||
|
if (treeData[i].key === key) {
|
||||||
|
node = treeData[i + 1]
|
||||||
|
return node
|
||||||
|
}
|
||||||
|
if (treeData[i].children) {
|
||||||
|
node = this.getNextNode(treeData[i].children, key)
|
||||||
|
if (node) {
|
||||||
|
return node
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
},
|
||||||
|
// 获取两个数之间的随机数
|
||||||
|
getRandomArbitrary (min, max) {
|
||||||
|
return Math.random() * (max - min) + min
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* 树节点查询
|
* 树节点查询
|
||||||
*/
|
*/
|
||||||
|
|||||||
Reference in New Issue
Block a user