307 lines
9.8 KiB
Vue
307 lines
9.8 KiB
Vue
<template>
|
|
<j-modal
|
|
:title="$t('docTool.split.order')"
|
|
:width="width"
|
|
:visible="visible"
|
|
switchFullscreen
|
|
:maskClosable="false"
|
|
:footer="null"
|
|
:confirmLoading="confirmLoading"
|
|
:fullscreen.sync="fullscreen"
|
|
style="height: 100%"
|
|
class="split-tree-order-model"
|
|
@ok="handleOk"
|
|
@cancel="handleCancel">
|
|
<a-spin :spinning="confirmLoading">
|
|
<a-tree :show-line="true"
|
|
:show-icon="true"
|
|
style="height: 100%; overflow-y: auto"
|
|
:class="{fullscreen: fullscreen}"
|
|
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'
|
|
|
|
export default {
|
|
name: 'SplitTreeOrderModal',
|
|
data () {
|
|
return {
|
|
width: 600,
|
|
fullscreen: false,
|
|
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 = info.node.dataRef.displaySeq
|
|
const children = info.node.dataRef.children || []
|
|
if (children && children.length) {
|
|
displaySeq = children[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
|
|
if (this.treeData.length > 0 && this.expandedKeys <= 0) {
|
|
this.expandedKeys = [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.expandedKeys = []
|
|
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">
|
|
.fullscreen .tree-node-custom-title {
|
|
max-width: 90vw;
|
|
}
|
|
.tree-node-custom-title {
|
|
max-width: 460px;
|
|
}
|
|
.split-tree-order-model {
|
|
/deep/ .ant-modal-body {
|
|
height: 50vh;
|
|
}
|
|
/deep/ .ant-spin-container,
|
|
/deep/ .ant-spin-nested-loading {
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|