[update 资料中心] 树节点拖拽

src/views/standardRegulationLibrary/profileCenter/ProfileCenterList.vue

@@ -7,7 +7,12 @@
                       @search="handleTreeSearch" />
       <div class="page-tree-box page-tree-box-has-search">
         <a-spin :spinning="treeLoading">
-          <a-tree :show-line="true" :show-icon="true" :tree-data="treeData" :selected-keys="selectedTreeKeys">
+          <a-tree :show-line="true"
+                  :show-icon="true"
+                  :draggable="true"
+                  :tree-data="treeData"
+                  :selected-keys="selectedTreeKeys"
+                  @drop="onDropCataSort">
             <template #title="record">
               <div class="tree-operate-node"
                    :class="{'tree-operate-node-selected': selectedTreeKeys.includes(record.id)}"
@@ -145,7 +150,11 @@
 <script>
 import JTable from '../../../components/jero/JTable.vue'
 import { JeroListMixin } from '../../../mixins/JeroListMixin.js'
-import { deleteProfileCenterTree, getProfileCenterTree } from '../../../api/standardRegulationLibraryApi.js'
+import {
+  deleteProfileCenterTree,
+  editSortProfileCenterTree,
+  getProfileCenterTree
+} from '../../../api/standardRegulationLibraryApi.js'
 import ProfileCenterModal from './modules/ProfileCenterModal.vue'
 import ProfileCenterTreeModal from './modules/ProfileCenterTreeModal.vue'
 import { filterObj } from '../../../utils/util'
@@ -236,6 +245,55 @@ export default {
     this.initTreeData()
   },
   methods: {
+    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 {
+        if (dragNodeData.parentId !== nodeData.parentId) {
+          this.$message.warning('只能同级排序')
+          return false
+        }
+        paramObj.id = 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)
+      editSortProfileCenterTree(paramObj).then(res => {
+        if (res.success) {
+          this.$message.success(res.message)
+          // 重新获取树节点不改变展开节点
+          this.initTreeData()
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    },
     /**
      * 获取树数据
      */