[update 拆分编辑] 左侧树节点可拖拽

src/api/documentToolApi.js

@@ -52,6 +52,8 @@ const copyClause = (params) => getAction('/laws/DocumentTool/documentSplit/copyD
 const getInterpretationArticlesList = (params) => getAction('/laws/DocumentTool/documentSplit/queryInterpretationArticlesList', params)
 // 标准对应的解读信息
 const getStandardInterpretation = (params) => postAction('/laws/DocumentTool/documentSplit/queryDocumentSplitDetailList', params)
+// 文档拆分-编辑-拖拽节点
+const dragClauseTreeNode = (params) => getAction('/split/sarFileSplitMenu/updateMenuLevel', params)
 
 // 文档对比-发布/撤回
 const withdrawPublication = (params) => postAction('/compare/sarFileCompareInfo/changeState', params)
@@ -135,6 +137,7 @@ export {
   copyClause,
   getInterpretationArticlesList,
   getStandardInterpretation,
+  dragClauseTreeNode,
 
   // 文档比对
   withdrawPublication,

src/views/documentTool/documentSplit/DocumentSplitDetail.vue

@@ -11,7 +11,10 @@
                     :tree-data="treeData"
                     :selected-keys="selectedKeys"
                     :expanded-keys.sync="expandedKeys"
-                    :replaceFields="{key: 'id'}">
+                    :replaceFields="{key: 'id'}"
+                    class="draggable-tree"
+                    draggable
+                    @drop="onDrop">
               <template #title="record">
                 <div class="tree-operate-node"
                      @mouseenter="handleTreeMouseover(record.id)"
@@ -219,7 +222,7 @@ import {
   batchCopyClause,
   merageClause,
   getClauseTreeData,
-  copyClause
+  copyClause, dragClauseTreeNode
 } from '../../../api/documentToolApi.js'
 import Search from '../../../components/customField/Search.vue'
 import { isHasPermission } from '../../../utils/hasPermission.js'
@@ -346,6 +349,31 @@ export default {
     this.loadMenuData()
   },
   methods: {
+    // 拖拽事件
+    onDrop (info) {
+      // 拖到节点间隙就不做处理，只能拖到节点上
+      if (info.dropToGap) {
+        return
+      }
+      // console.log('拖拽全部参数', info)
+      console.log('拖拽的节点', info.node.eventKey, info.node.dataRef.name, info.node.dataRef.itemName)
+      console.log('拖拽到节点', info.dragNode.eventKey, info.dragNode.dataRef.name, info.dragNode.dataRef.itemName)
+      const sourceId = info.node.eventKey
+      const targetId = info.dragNode.eventKey
+      this.loading = true
+      dragClauseTreeNode({ targetId, sourceId }).then(res => {
+        if (res.success) {
+          this.$message.success(res.message)
+          this.onClearSelected()
+          this.loadMenuData()
+          this.loadData()
+        } else {
+          this.$message.warn(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
     // 查看文件
     handleViewFile (_, record) {
       this.$refs.uploadFile.open(record.technical_specification_design_guide)
@@ -699,4 +727,16 @@ 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>