[update 拆分] 拖拽
This commit is contained in:
danshihao
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<j-modal
|
||||
:title="$t('docTool.split.order')"
|
||||
:width="width"
|
||||
:visible="visible"
|
||||
switchFullscreen
|
||||
:maskClosable="false"
|
||||
:footer="null"
|
||||
:confirmLoading="confirmLoading"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-tree :show-line="true"
|
||||
:show-icon="true"
|
||||
style="height: 50vh; overflow-y: auto"
|
||||
checkable
|
||||
:tree-data="treeData"
|
||||
:selected-keys="selectedKeys"
|
||||
:expanded-keys.sync="expandedKeys"
|
||||
checkStrictly
|
||||
v-model="checkTreeKeys"
|
||||
:replaceFields="{key: 'id'}"
|
||||
class="draggable-tree"
|
||||
draggable
|
||||
@dragstart="changeDraggingStatus(true)"
|
||||
@dragend="changeDraggingStatus(false)"
|
||||
@drop="onDrop">
|
||||
<template #title="record">
|
||||
<div class="tree-operate-node">
|
||||
<a-icon class="parent-node-icon"
|
||||
type="folder"
|
||||
v-if="record.dataRef.children && record.dataRef.children.length > 0" />
|
||||
<!-- 拖拽中不显示 -->
|
||||
<a-tooltip placement="topLeft" v-if="!dragging">
|
||||
<template #title>
|
||||
{{ record.name }}{{ record.itemName }}
|
||||
</template>
|
||||
<span class="tree-node-custom-title">{{ record.name }} {{ record.itemName }}</span>
|
||||
</a-tooltip>
|
||||
<span class="tree-node-custom-title" v-else>{{ record.name }} {{ record.itemName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</a-tree>
|
||||
</a-spin>
|
||||
</j-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { batchEditClauseTreeNodeSort, dragClauseTreeNode, getClauseTreeData } from '@api/documentToolApi'
|
||||
import STreeSelect from '@comp/STreeSelect'
|
||||
|
||||
export default {
|
||||
name: 'SplitTreeOrderModal',
|
||||
data () {
|
||||
return {
|
||||
width: 600,
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
selectedKeys: [],
|
||||
expandedKeys: [],
|
||||
treeData: [],
|
||||
checkTreeKeys: {}, // 选择的树节点key
|
||||
dragging: false,
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 6 }
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: { span: 24 },
|
||||
sm: { span: 16 }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 修改拖拽状态
|
||||
changeDraggingStatus (status) {
|
||||
this.dragging = status
|
||||
},
|
||||
/**
|
||||
* 拖拽到某个节点触发
|
||||
* @param info
|
||||
*/
|
||||
onDrop (info) {
|
||||
// 拖到节点间隙
|
||||
if (!this.checkTreeKeys.checked || this.checkTreeKeys.checked.length === 0) {
|
||||
this.$message.warn(this.$t('docTool.split.checkableNode'))
|
||||
return
|
||||
}
|
||||
// 只能拖拽勾选的节点
|
||||
if (!this.checkTreeKeys.checked.includes(info.dragNode.eventKey)) {
|
||||
this.$message.warn(this.$t('docTool.split.dragCheckable'))
|
||||
return
|
||||
}
|
||||
// 不能拖拽到勾选的节点上下或内部
|
||||
if (this.checkTreeKeys.checked.includes(info.node.eventKey)) {
|
||||
this.$message.warn(this.$t('docTool.split.noDragNode'))
|
||||
return
|
||||
}
|
||||
if (info.node.pos.split('-').length === 2 && info.dropToGap) {
|
||||
this.$message.warning(this.$t('docTool.split.noDragTopLevelNode'))
|
||||
return false
|
||||
}
|
||||
// console.log('拖拽的节点', info.dragNode.eventKey, info.dragNode.dataRef.name, info.dragNode.dataRef.itemName)
|
||||
// console.log('拖拽到节点', info.node.eventKey, info.node, info.node.dataRef.name, info.node.dataRef.itemName, info.node.pos)
|
||||
// 拖到节点间隙需要传序号，拖拽到节点里面不需要
|
||||
if (info.dropToGap) {
|
||||
const dropPos = info.dropPosition
|
||||
const nodePos = Number(info.node.pos.split('-').pop())
|
||||
const params = {}
|
||||
// 拖拽到某个节点之下,就取该节点的序号
|
||||
if (dropPos > nodePos) {
|
||||
params.displaySeq = info.node.dataRef.displaySeq
|
||||
} else {
|
||||
// 拖拽到某个节点之上,就要找到上一个节点的序号，如果没有就传0
|
||||
const preNodeData = this.getPrevNode(this.treeData, info.node.eventKey)
|
||||
params.displaySeq = preNodeData ? preNodeData.displaySeq : 0
|
||||
}
|
||||
// 复选框勾选的节点
|
||||
params.sourceId = this.checkTreeKeys.checked.join(',')
|
||||
// 拖拽到节点的父节点id
|
||||
params.targetId = info.node.dataRef.parentId || (this.getParentNode(this.treeData, info.node.eventKey) || {}).id
|
||||
this.treeNodeSort(params)
|
||||
return
|
||||
}
|
||||
// 拖拽到节点内部
|
||||
// console.log('拖拽全部参数', info)
|
||||
const sourceId = this.checkTreeKeys.checked.join(',')
|
||||
const targetId = info.node.eventKey
|
||||
// 序号，拖拽到节点里面，就把序号设置成最后一个节点的序号
|
||||
let displaySeq = 0
|
||||
const parentNodeData = this.getParentNode(this.treeData, info.node.eventKey)
|
||||
if (parentNodeData && parentNodeData.children && parentNodeData.children.length) {
|
||||
displaySeq = parentNodeData.children[parentNodeData.children.length - 1].displaySeq
|
||||
}
|
||||
this.treeNodeSort({ sourceId, targetId, displaySeq })
|
||||
},
|
||||
// 发请求
|
||||
treeNodeSort (params) {
|
||||
this.confirmLoading = true
|
||||
dragClauseTreeNode(params).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.loadData()
|
||||
} else {
|
||||
this.$message.warn(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
},
|
||||
// 获取某个节点的父级节点
|
||||
getParentNode (treeData, key) {
|
||||
let foundParent = null
|
||||
function traverse (node) {
|
||||
if (node.children && node.children.length) {
|
||||
for (let i = 0; i < node.children.length; i++) {
|
||||
const child = node.children[i]
|
||||
if (child.id === key) {
|
||||
// 找到了目标节点的父节点
|
||||
foundParent = node
|
||||
return true // 停止递归
|
||||
} else if (traverse(child)) {
|
||||
// 如果子节点中找到了，也停止递归
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
// 从树的根节点开始遍历
|
||||
treeData.forEach(root => traverse(root))
|
||||
return foundParent
|
||||
},
|
||||
// 获取某个节点的上一个同级节点
|
||||
getPrevNode (treeData, key) {
|
||||
// 用于保存当前遍历路径上的节点
|
||||
const path = []
|
||||
// 用于保存目标节点的父节点
|
||||
let parent = null
|
||||
// 用于保存目标节点在父节点children数组中的索引
|
||||
let targetIndex = -1
|
||||
function traverse (node, path) {
|
||||
// 将当前节点添加到路径中
|
||||
path.push(node)
|
||||
// 如果找到了目标节点，记录其父节点及索引
|
||||
if (node.id === key) {
|
||||
parent = path[path.length - 2]
|
||||
if (parent) {
|
||||
targetIndex = parent.children.findIndex(child => child.id === key)
|
||||
}
|
||||
return true // 结束递归
|
||||
}
|
||||
// 遍历子节点
|
||||
if (node.children && node.children.length > 0) {
|
||||
for (const child of node.children) {
|
||||
if (traverse(child, path)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
// 移除路径中的当前节点
|
||||
path.pop()
|
||||
}
|
||||
// 开始遍历
|
||||
for (const root of treeData) {
|
||||
if (traverse(root, path)) {
|
||||
break
|
||||
}
|
||||
}
|
||||
// 检查是否找到了目标节点及其父节点
|
||||
if (parent !== null && targetIndex > 0) {
|
||||
// 返回目标节点前一个同级节点
|
||||
return parent.children[targetIndex - 1]
|
||||
} else {
|
||||
// 如果没找到或目标节点是第一个孩子，则返回null
|
||||
return null
|
||||
}
|
||||
},
|
||||
open (infoId) {
|
||||
this.model.infoId = infoId
|
||||
this.visible = true
|
||||
this.loadData()
|
||||
},
|
||||
loadData () {
|
||||
this.confirmLoading = true
|
||||
this.checkTreeKeys = {}
|
||||
getClauseTreeData({ infoId: this.model.infoId }).then(res => {
|
||||
if (res.success) {
|
||||
const treeData = res.result || []
|
||||
treeData.forEach(node => this.addTitleToNodes(node))
|
||||
this.treeData = treeData
|
||||
this.expandedKeys = this.treeData.length > 0 ? [this.treeData[0].id] : []
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
},
|
||||
addTitleToNodes (node) {
|
||||
// 给当前节点添加title属性
|
||||
node.title = (node.name || '') + ' ' + (node.itemName || '')
|
||||
// 如果当前节点有子节点，则递归处理子节点
|
||||
if (node.children && Array.isArray(node.children)) {
|
||||
node.children.forEach(child => this.addTitleToNodes(child))
|
||||
}
|
||||
},
|
||||
close () {
|
||||
this.$emit('close')
|
||||
this.model = {}
|
||||
this.treeData = []
|
||||
this.visible = false
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
handleOk () {
|
||||
this.form.validateFields(async (errors, values) => {
|
||||
if (!errors) {
|
||||
const params = Object.assign({}, this.model, values)
|
||||
if (Array.isArray(params.ids)) {
|
||||
params.ids = params.ids.join(',')
|
||||
}
|
||||
this.confirmLoading = true
|
||||
batchEditClauseTreeNodeSort(params).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.$emit('ok')
|
||||
this.close()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user