[update] 国标体系树拖拽

src/api/standardRegulationLibraryApi.js

@@ -20,6 +20,8 @@ const addDomesticSystemTree = (params) => postAction('/laws/standard/lawsTreeNod
 const editDomesticSystemTree = (params) => postAction('/laws/standard/lawsTreeNode/domestic/edit', params)
 // 国内标准-体系删除
 const deleteDomesticSystemTree = (params) => postAction('/laws/standard/lawsTreeNode/domestic/delete', params)
+// 国内标准-体系拖拽排序后保存
+const domesticSystemTreeSortSave = (params) => getAction('', params)
 // 国内标准-配置标准
 const configDomesticStandard = (params) => getAction('/laws/standard/domestic/relatedStandard', params)
 // 国内标准-移出标准
@@ -112,6 +114,7 @@ export {
   addDomesticSystemTree,
   editDomesticSystemTree,
   deleteDomesticSystemTree,
+  domesticSystemTreeSortSave,
   configDomesticStandard,
   removeDomesticStandard,
   getDomesticStandardTree,

src/views/standardRegulationLibrary/domesticStandard/DomesticStandardList.vue

@@ -9,9 +9,11 @@
         <a-spin :spinning="treeLoading">
           <a-tree :show-line="true"
                   :show-icon="true"
+                  draggable
                   :tree-data="treeData"
                   :expanded-keys.sync="expandedKeys"
-                  :selected-keys="selectedTreeKeys">
+                  :selected-keys="selectedTreeKeys"
+                  @drop="onDropCataSort">
             <template #title="record">
               <div class="tree-operate-node"
                    @mouseenter="handleTreeMouseover(record.key)"
@@ -260,7 +262,7 @@ import {
   removeDomesticStandard,
   shareDomesticStandard,
   collectionDomesticStandard,
-  cancelCollectionDomesticStandard
+  cancelCollectionDomesticStandard, domesticSystemTreeSortSave
 } from '../../../api/standardRegulationLibraryApi'
 import {
   OperationType,
@@ -374,7 +376,7 @@ export default {
     /**
      * 获取树数据
      */
-    initTreeData () {
+    initTreeData (isPackUpExpand = true) {
       this.treeLoading = true
       const params = {
         nodeName: this.treeInput
@@ -389,8 +391,10 @@ export default {
         this.filters.nodeCode = null
         if (res.success) {
           this.treeData = res.result || []
-          // 根节点默认展开
+          if (isPackUpExpand) {
-          this.expandedKeys = [this.treeData[0].key]
+            // 根节点默认展开
+            this.expandedKeys = [this.treeData[0].key]
+          }
         } else {
           this.$message.warn(res.message)
         }
@@ -398,6 +402,101 @@ export default {
         this.treeLoading = false
       })
     },
+    // 拖拽方法
+    onDropCataSort (info) {
+      console.log('------info', info)
+      // 拖动节点
+      const dragKey = info.dragNode.eventKey
+      const dropPos = info.node.pos.split('-')
+      // 拖动的位置，info.dropPosition拖到了目标节点的上面则当前元素 -1，下面则是 1
+      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
+
+      const node = info.node // 目标节点
+      const dragNode = info.dragNode // 拖动节点
+      const dragNodeData = dragNode.dataRef
+      const nodeData = node.dataRef
+      console.log('---------dragNodeData', dragNodeData)
+      console.log('---------nodeData', nodeData)
+
+      let paramObj = {}
+      // const data = info.dropToGap
+      //   ? node.$parent.dataRef === undefined
+      //     ? node.$parent.treeData
+      //     : node.$parent.dataRef
+      //   : node.dataRef
+
+      // 判断只能在同级排序
+      if (!info.dropToGap) {
+        // 不在缝隙中，在内容区
+        this.$message.warning('请拖动到缝隙中')
+        return false
+      } else if (
+        (info.node.children || []).length > 0 && // Has children
+        info.node.expanded && // Is expanded
+        dropPosition === 1 // On the bottom gap
+      ) {
+        this.$message.warning('请重新拖拽')
+      } else if (dropPos.length === 2 && info.dropToGap) {
+        this.$message.warning('不能移动到最顶级')
+        return false
+      } else {
+        if (dragNodeData.parentId !== nodeData.parentId) {
+          this.$message.warning('只能同级排序')
+          return false
+        }
+
+        // let nodeArray = data.children === undefined ? [] : data.children
+        // nodeArray = nodeArray.filter((item) => { return item.id !== dragNodeData.id })
+        // let index
+        // if (nodeData.parentId === dragNodeData.parentId) {
+        //   index = info.dropPosition
+        // } else {
+        //   index =
+        //     dropPos[dropPos.length - 1] < info.dropPosition
+        //       ? info.dropPosition
+        //       : dropPos[dropPos.length - 1]
+        // }
+        // // console.log("index: ", index)
+        // if (!info.dropToGap) {
+        //   nodeArray.push({
+        //     id: dragNodeData.id,
+        //     parentId: dragNodeData.parentId,
+        //     sort: dragNodeData.sort
+        //   })
+        // } else {
+        //   nodeArray.splice(index === -1 ? 0 : index, 0, dragNodeData)
+        // }
+        // nodeArray.forEach((element) => {
+        //   element.pid = dropPos.length === 2 && info.dropToGap ? '' : data.id
+        // })
+        // // console.log("nodeData: ", nodeData)
+        // // console.log("dropPosition: ", dropPosition)
+        // nodeArray.forEach((element, i) => {
+        //   if (element.id === dragKey) {
+        //     const dept = {
+        //       id: element.id,
+        //       parentId: element.pid,
+        //       sort: dropPosition === 1 ? i : i + 1
+        //     }
+        //     paramObj = dept
+        //   }
+        // })
+        paramObj.nodeId = 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)
+      domesticSystemTreeSortSave(paramObj).then(res => {
+        if (res.success) {
+          this.$message.success(res.message)
+          // 重新获取树节点不改变展开节点
+          this.initTreeData(false)
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    },
     /**
      * 树节点查询
      */