[update] 外标，企标左侧树拖拽排序

src/api/enterpriseStandardLibraryApi.js

@@ -16,6 +16,8 @@ const allocationStandardList = (params) => getAction('/laws/standard/common/getS
 const shiftStandard = (params) => getAction('/laws/standard/enterprise/removeStandard', params)
 // 获取左侧树列表
 const getTreeList = (params) => getAction('/laws/standard/lawsTreeNode/enterprise', params)
+// 左侧树编辑
+const editTreeNode = (params) => postAction('/laws/standard/lawsTreeNode/enterprise/edit', params)
 // 左侧树删除
 const deleteTreeNode = (params) => postAction('/laws/standard/lawsTreeNode/enterprise/delete', params)
 // 临时权限设置
@@ -69,6 +71,7 @@ export {
   allocationStandardList,
   shiftStandard,
   getTreeList,
+  editTreeNode,
   deleteTreeNode,
   temporaryPermissionSet,
   collectStandard,

src/views/enterpriseStandardLibrary/standard/EnterpriseStandardList.vue

@@ -14,7 +14,9 @@
             :tree-data="treeData"
             :expanded-keys.sync="expandedKeys"
             :selectedKeys="currentTreeNode"
-            :default-expand-all="defaultExpandAll">
+            :default-expand-all="defaultExpandAll"
+            draggable
+            @drop="onDropCataSort">
             <template #title="record">
               <div class="tree-operate-node"
                    @mouseenter="handleTreeMouseover(record.key)"
@@ -198,7 +200,8 @@ import {
   shiftStandard,
   collectStandard,
   cancelCollectStandard,
-  deleteTreeNode
+  deleteTreeNode,
+  editTreeNode
 } from '@api/enterpriseStandardLibraryApi'
 // 添加、编辑弹框
 import EnterpriseStandardModal from './modules/EnterpriseStandardModal'
@@ -303,7 +306,7 @@ export default {
   },
   methods: {
     // 获取左侧树数据
-    initTreeData (params) {
+    initTreeData (params, isPackUpExpand = true) {
       this.treeLoading = true
       getTreeList(params).then(res => {
         this.treeData = []
@@ -314,8 +317,10 @@ export default {
           this.treeData = res.result || []
           // this.expandedKeys = [this.treeData[0].key]
           if (this.expandedKeys.length <= 0) {
-            // 根节点默认展开
+            if (isPackUpExpand) {
-            this.expandedKeys = [this.treeData[0].key]
+              // 根节点默认展开
+              this.expandedKeys = [this.treeData[0].key]
+            }
           } else {
             const treeDataList = this.getTreeDataList(this.treeData)
             const treeDataListKeys = treeDataList.map(item => item.key)
@@ -334,6 +339,123 @@ export default {
         this.treeLoading = false
       })
     },
+    // 拖拽方法
+    onDropCataSort (info) {
+      console.log('------info', info)
+      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)
+
+      const paramObj = {}
+
+      // 判断只能在同级排序
+      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 {
+        paramObj.id = dragNodeData.id
+        paramObj.parentId = nodeData.parentId // 目标节点的父级id
+        // 排序序号要换成上面节点的nodeOrder+0.00000001，要根据dropPosition判断拖动到的目标节点是在
+        if (dropPos[dropPos.length - 1] < info.dropPosition) {
+          // 说明目标节点在拖动位置上方，获取目标节点下面一个节点的排序，从两个排序中去一个随机数给拖动节点，如果没有下一个同级节点，直接在当前节点排序上加0.0001
+          // 目标节点下面一个节点
+          const nextNode = this.getNextNode(this.treeData, nodeData.id)
+          console.log('---------nextNode', nextNode)
+          if (nextNode) {
+            console.log('-------获取随机数', nodeData.nodeOrder, nextNode.nodeOrder)
+            // 从两个排序获取随机数作为拖动节点的排序
+            paramObj.nodeOrder = this.getRandomArbitrary(nodeData.nodeOrder, nextNode.nodeOrder)
+          } else {
+            // 没有下一个就目标节点排序+0.0001
+            paramObj.nodeOrder = nodeData.nodeOrder + 0.0001
+          }
+        } else {
+          // 说明目标节点在拖动位置下方，要获取上面一个节点的数据，先从上一个节点和目标节点的排序中取一个随机数给拖拽节点，如果没有上一个节点，直接在当前节点排序上减0.0001
+          // 获取目标节点的上一个节点
+          const prevNode = this.getPrevNode(this.treeData, nodeData.id)
+          console.log('---------prevNode', prevNode)
+          if (prevNode) {
+            console.log('-------获取随机数', prevNode.nodeOrder, nodeData.nodeOrder)
+            // 从两个排序获取随机数作为拖动节点的排序
+            paramObj.nodeOrder = this.getRandomArbitrary(prevNode.nodeOrder, nodeData.nodeOrder)
+          } else {
+            // 没有上一个就目标节点排序-0.0001
+            paramObj.nodeOrder = nodeData.nodeOrder - 0.0001
+          }
+        }
+      }
+      // console.log("拖拽后对象是：", paramObj)
+      console.log('此处调用后端接口保存数据' + paramObj.id + paramObj.nodeOrder)
+      editTreeNode(paramObj).then(res => {
+        if (res.success) {
+          this.$message.success(res.message)
+          // 重新获取树节点不改变展开节点
+          this.initTreeData(false)
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    },
+    // 获取某个节点的上一个同级节点
+    getPrevNode (treeData, key) {
+      let node
+      for (let i = 0; i < treeData.length; i++) {
+        if (treeData[i].key === key) {
+          if (i - 1 < 0) {
+            // 说明是第一个节点，返回空
+            return null
+          } else {
+            node = treeData[i - 1]
+            return node
+          }
+        }
+        if (treeData[i].children) {
+          node = this.getPrevNode(treeData[i].children, key)
+          if (node) {
+            return node
+          }
+        }
+      }
+      return null
+    },
+    // 获取某个节点的下一个同级节点
+    getNextNode (treeData, key) {
+      let node
+      for (let i = 0; i < treeData.length; i++) {
+        if (treeData[i].key === key) {
+          node = treeData[i + 1]
+          return node
+        }
+        if (treeData[i].children) {
+          node = this.getNextNode(treeData[i].children, key)
+          if (node) {
+            return node
+          }
+        }
+      }
+      return null
+    },
+    // 获取两个数之间的随机数
+    getRandomArbitrary (min, max) {
+      return Math.random() * (max - min) + min
+    },
     getTreeDataList (treeData) {
       let treeDataList = []
       for (const item of treeData) {

src/views/standardRegulationLibrary/foreignStandard/ForeignStandardList.vue

@@ -11,7 +11,9 @@
                   :show-icon="true"
                   :tree-data="treeData"
                   :expanded-keys.sync="expandedKeys"
-                  :selected-keys="selectedTreeKeys">
+                  :selected-keys="selectedTreeKeys"
+                  draggable
+                  @drop="onDropCataSort">
             <template #title="record">
               <div class="tree-operate-node"
                    @mouseenter="handleTreeMouseover(record.key)"
@@ -241,9 +243,15 @@ import ForeignSystemTreeModal from './modules/ForeignSystemTreeModal'
 import SelectionForeignStandardDrawer from './modules/SelectionForeignStandardDrawer'
 import { OperationType, StandardSource, StandardSystemTreeNodeType, YesOrNoEnum } from '../../../enums/commonEnums'
 import {
-  cancelCollectionForeignStandard, collectionForeignStandard, configForeignStandard, deleteForeignSystemTree,
+  cancelCollectionForeignStandard,
+  collectionForeignStandard,
+  configForeignStandard,
+  deleteForeignSystemTree,
+  editForeignSystemTree,
   getForeignStandardSearchForm,
-  getForeignStandardTableHeader, getForeignStandardTree, removeForeignStandard
+  getForeignStandardTableHeader,
+  getForeignStandardTree,
+  removeForeignStandard
 } from '../../../api/standardRegulationLibraryApi'
 import { mapGetters } from 'vuex'
 import { ConfigurableTableMixin } from '../../../mixins/ConfigurableTableMixin'
@@ -321,7 +329,7 @@ export default {
     /**
      * 获取树数据
      */
-    initTreeData () {
+    initTreeData (isPackUpExpand = true) {
       this.treeLoading = true
       const params = {
         nodeName: this.treeInput
@@ -337,8 +345,10 @@ export default {
         if (res.success) {
           this.treeData = res.result || []
           if (this.expandedKeys.length <= 0) {
-            // 根节点默认展开
+            if (isPackUpExpand) {
-            this.expandedKeys = [this.treeData[0].key]
+              // 根节点默认展开
+              this.expandedKeys = [this.treeData[0].key]
+            }
           } else {
             const treeDataList = this.getTreeDataList(this.treeData)
             const treeDataListKeys = treeDataList.map(item => item.key)
@@ -354,6 +364,123 @@ export default {
         this.treeLoading = false
       })
     },
+    // 拖拽方法
+    onDropCataSort (info) {
+      console.log('------info', info)
+      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)
+
+      const paramObj = {}
+
+      // 判断只能在同级排序
+      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 {
+        paramObj.id = dragNodeData.id
+        paramObj.parentId = nodeData.parentId // 目标节点的父级id
+        // 排序序号要换成上面节点的nodeOrder+0.00000001，要根据dropPosition判断拖动到的目标节点是在
+        if (dropPos[dropPos.length - 1] < info.dropPosition) {
+          // 说明目标节点在拖动位置上方，获取目标节点下面一个节点的排序，从两个排序中去一个随机数给拖动节点，如果没有下一个同级节点，直接在当前节点排序上加0.0001
+          // 目标节点下面一个节点
+          const nextNode = this.getNextNode(this.treeData, nodeData.id)
+          console.log('---------nextNode', nextNode)
+          if (nextNode) {
+            console.log('-------获取随机数', nodeData.nodeOrder, nextNode.nodeOrder)
+            // 从两个排序获取随机数作为拖动节点的排序
+            paramObj.nodeOrder = this.getRandomArbitrary(nodeData.nodeOrder, nextNode.nodeOrder)
+          } else {
+            // 没有下一个就目标节点排序+0.0001
+            paramObj.nodeOrder = nodeData.nodeOrder + 0.0001
+          }
+        } else {
+          // 说明目标节点在拖动位置下方，要获取上面一个节点的数据，先从上一个节点和目标节点的排序中取一个随机数给拖拽节点，如果没有上一个节点，直接在当前节点排序上减0.0001
+          // 获取目标节点的上一个节点
+          const prevNode = this.getPrevNode(this.treeData, nodeData.id)
+          console.log('---------prevNode', prevNode)
+          if (prevNode) {
+            console.log('-------获取随机数', prevNode.nodeOrder, nodeData.nodeOrder)
+            // 从两个排序获取随机数作为拖动节点的排序
+            paramObj.nodeOrder = this.getRandomArbitrary(prevNode.nodeOrder, nodeData.nodeOrder)
+          } else {
+            // 没有上一个就目标节点排序-0.0001
+            paramObj.nodeOrder = nodeData.nodeOrder - 0.0001
+          }
+        }
+      }
+      // console.log("拖拽后对象是：", paramObj)
+      console.log('此处调用后端接口保存数据' + paramObj.id + paramObj.nodeOrder)
+      editForeignSystemTree(paramObj).then(res => {
+        if (res.success) {
+          this.$message.success(res.message)
+          // 重新获取树节点不改变展开节点
+          this.initTreeData({}, false)
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    },
+    // 获取某个节点的上一个同级节点
+    getPrevNode (treeData, key) {
+      let node
+      for (let i = 0; i < treeData.length; i++) {
+        if (treeData[i].key === key) {
+          if (i - 1 < 0) {
+            // 说明是第一个节点，返回空
+            return null
+          } else {
+            node = treeData[i - 1]
+            return node
+          }
+        }
+        if (treeData[i].children) {
+          node = this.getPrevNode(treeData[i].children, key)
+          if (node) {
+            return node
+          }
+        }
+      }
+      return null
+    },
+    // 获取某个节点的下一个同级节点
+    getNextNode (treeData, key) {
+      let node
+      for (let i = 0; i < treeData.length; i++) {
+        if (treeData[i].key === key) {
+          node = treeData[i + 1]
+          return node
+        }
+        if (treeData[i].children) {
+          node = this.getNextNode(treeData[i].children, key)
+          if (node) {
+            return node
+          }
+        }
+      }
+      return null
+    },
+    // 获取两个数之间的随机数
+    getRandomArbitrary (min, max) {
+      return Math.random() * (max - min) + min
+    },
     getTreeDataList (treeData) {
       let treeDataList = []
       for (const item of treeData) {