[update 拆分] 拖拽
This commit is contained in:
danshihao
@@ -3,7 +3,10 @@
|
||||
<div class="page-left-right-layout">
|
||||
<!--树部分-->
|
||||
<div class="page-left-box">
|
||||
<a-input-search class="tree-search" v-model="searchValue" :placeholder="$t('nodeQuickLookup')" @search="onSearch" />
|
||||
<div class="tree-search-box">
|
||||
<a-input-search v-model="searchValue" :placeholder="$t('nodeQuickLookup')" @search="onSearch" />
|
||||
<a-icon @click="handleBatchOrder" class="tree-search-order" type="ordered-list" />
|
||||
</div>
|
||||
<div class="page-tree-box page-tree-box-has-search">
|
||||
<a-spin :spinning="treeLoading">
|
||||
<a-tree :show-line="true"
|
||||
@@ -204,6 +207,8 @@
|
||||
<split-add-form ref="modalForm" :flag="StandardSource.ENTERPRISE.value" :infoId="infoId" :menuId="menuId" :itemId="itemId" @ok="modalFormOk" />
|
||||
<!--查看上传文件-->
|
||||
<upload-file ref="uploadFile" :return-url="false" disabled />
|
||||
<!--树节点批量排序-->
|
||||
<split-tree-order-modal ref="splitTreeOrderModal" @ok="nodeAddOk" @close="nodeAddOk"/>
|
||||
</internal-detail-page>
|
||||
</template>
|
||||
|
||||
@@ -234,10 +239,12 @@ import SplitDetailBatchEditDrawer from './modules/SplitDetailBatchEditDrawer.vue
|
||||
import { downFile, downloadFile, postAction } from '../../../api/manage'
|
||||
import UploadFile from '@comp/UploadFile'
|
||||
import { StandardSource } from '@/enums/commonEnums'
|
||||
import SplitTreeOrderModal from '@views/documentTool/documentSplit/modules/SplitTreeOrderModal'
|
||||
|
||||
export default {
|
||||
name: 'DocumentSplitDetail',
|
||||
components: {
|
||||
SplitTreeOrderModal,
|
||||
UploadFile,
|
||||
InternalDetailPage,
|
||||
JTable,
|
||||
@@ -354,6 +361,10 @@ export default {
|
||||
this.loadMenuData()
|
||||
},
|
||||
methods: {
|
||||
// 批量排序
|
||||
handleBatchOrder () {
|
||||
this.$refs.splitTreeOrderModal.open(this.infoId)
|
||||
},
|
||||
// 修改拖拽状态
|
||||
changeDraggingStatus (status) {
|
||||
this.dragging = status
|
||||
@@ -363,17 +374,48 @@ export default {
|
||||
* @param info
|
||||
*/
|
||||
onDrop (info) {
|
||||
// 拖到节点间隙就不做处理，只能拖到节点上
|
||||
if (info.node.pos.split('-').length === 2 && info.dropToGap) {
|
||||
this.$message.warning(this.$t('docTool.split.noDragTopLevelNode'))
|
||||
return false
|
||||
}
|
||||
// 拖到节点间隙
|
||||
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 = info.dragNode.eventKey
|
||||
// 拖拽到节点的父节点id
|
||||
params.targetId = info.node.dataRef.parentId || (this.getParentNode(this.treeData, info.node.eventKey) || {}).id
|
||||
// console.log('排序参数', params)
|
||||
this.treeNodeSort(params)
|
||||
return
|
||||
}
|
||||
// 拖拽到节点内部
|
||||
// console.log('拖拽全部参数', info)
|
||||
console.log('拖拽的节点', info.dragNode.eventKey, info.dragNode.dataRef.name, info.dragNode.dataRef.itemName)
|
||||
console.log('拖拽到节点', info.node.eventKey, info.node.dataRef.name, info.node.dataRef.itemName)
|
||||
const sourceId = info.dragNode.eventKey
|
||||
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.loading = true
|
||||
dragClauseTreeNode({ targetId, sourceId }).then(res => {
|
||||
dragClauseTreeNode(params).then(res => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
this.onClearSelected()
|
||||
@@ -386,6 +428,74 @@ export default {
|
||||
this.loading = 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
|
||||
}
|
||||
},
|
||||
// 查看文件
|
||||
handleViewFile (_, record) {
|
||||
this.$refs.uploadFile.open(record.technical_specification_design_guide)
|
||||
@@ -746,16 +856,4 @@ export default {
|
||||
font-size: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
// 不显示拖拽到节点间隙的样式，只能拖拽到节点上
|
||||
.draggable-tree {
|
||||
/deep/ li {
|
||||
&.drag-over-gap-top,
|
||||
&.drag-over-gap-bottom {
|
||||
& > span[draggable] {
|
||||
border-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user