[update 资料中心] 树节点拖拽,排序改成小数

This commit is contained in:
danshihao
2024-08-28 17:19:40 +08:00
parent ba848380ca
commit 4a9cd4b0e8
2 changed files with 81 additions and 12 deletions
@@ -274,13 +274,36 @@ export default {
this.$message.warning('不能移动到最顶级')
return false
} else {
if (dragNodeData.parentId !== nodeData.parentId) {
this.$message.warning('只能同级排序')
return false
paramObj.id = dragNodeData.id
paramObj.parentId = nodeData.parentId // 目标节点的父级id
// 排序序号要换成上面节点的sort+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.sort, nextNode.sort)
// 从两个排序获取随机数作为拖动节点的排序
paramObj.sort = this.getRandomArbitrary(nodeData.sort, nextNode.sort)
} else {
// 没有下一个就目标节点排序+0.0001
paramObj.sort = nodeData.sort + 0.01
}
} else {
// 说明目标节点在拖动位置下方,要获取上面一个节点的数据,先从上一个节点和目标节点的排序中取一个随机数给拖拽节点,如果没有上一个节点,直接在当前节点排序上减0.0001
// 获取目标节点的上一个节点
const prevNode = this.getPrevNode(this.treeData, nodeData.id)
console.log('---------prevNode', prevNode)
if (prevNode) {
console.log('-------获取随机数', prevNode.sort, nodeData.sort)
// 从两个排序获取随机数作为拖动节点的排序
paramObj.sort = this.getRandomArbitrary(prevNode.sort, nodeData.sort)
} else {
// 没有上一个就目标节点排序-0.0001
paramObj.sort = nodeData.sort - 0.01
}
}
paramObj.id = dragNodeData.id // 拖拽节点的id
// paramObj.parentId = nodeData.parentId // 目标节点的父级id
paramObj.sort = dropPos[dropPos.length - 1] < info.dropPosition ? info.dropPosition : dropPos[dropPos.length - 1] // 要设置的排序值
}
// console.log("拖拽后对象是:", paramObj)
console.log('此处调用后端接口保存数据' + paramObj.id + paramObj.sort)
@@ -294,6 +317,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
},
/**
* 获取树数据
*/
@@ -33,10 +33,13 @@
</a-form-item>
<!--文件夹顺序-->
<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('treeRight.folderOrder')">
<a-input :placeholder="$t('pleaseEnter') + $t('treeRight.folderOrder')"
:maxLength="50"
type="number"
v-decorator="['sort', validatorRules.sort]" />
<a-input-number v-decorator="['sort', validatorRules.sort]" :min="0" :max="99999.99"
:placeholder="$t('pleaseEnter') + $t('treeRight.folderOrder')"
:precision="2" style="width: 100%" />
<!--<a-input :placeholder="$t('pleaseEnter') + $t('treeRight.folderOrder')"-->
<!-- :maxLength="50"-->
<!-- type="number"-->
<!-- v-decorator="['sort', validatorRules.sort]" />-->
</a-form-item>
</a-form>
@@ -85,8 +88,8 @@ export default {
// 顺序
sort: {
rules: [
{ required: true, message: this.$t('pleaseEnter') + this.$t('treeRight.folderOrder') },
{ validator: this.validateNumber }
{ required: true, message: this.$t('pleaseEnter') + this.$t('treeRight.folderOrder') }
// { validator: this.validateNumber }
],
validateTrigger: 'blur'
}