Merge pull request #13219 from dataease/pr@dev-v2_st

feat(仪表板): 优化内容：支持资源树上节点拖拽移动位置。 #12982

core/core-frontend/src/utils/treeDraggble.ts

@@ -0,0 +1,81 @@
+const treeDraggble = (state, key, req, type) => {
+  let dragNodeParentId = ''
+  let dragNodeId = ''
+  let dragNodeIndex = 0
+
+  const dfsTreeNode = (arr, parentId) => {
+    arr.forEach((element, index) => {
+      if (element.id === dragNodeId) {
+        dragNodeIndex = index
+        dragNodeParentId = parentId
+      }
+      if (element.children?.length) {
+        dfsTreeNode(element.children, element.id)
+      }
+    })
+  }
+
+  const dfsTreeNodeBack = (arr, parentId, params) => {
+    arr.forEach(element => {
+      if (element.id === params.id) {
+        params.pid = parentId
+      }
+      if (element.children?.length) {
+        dfsTreeNodeBack(element.children, element.id, params)
+      }
+    })
+  }
+
+  const dfsTreeNodeReset = (arr, node) => {
+    arr.forEach(element => {
+      if (element.id === dragNodeParentId) {
+        element.children.splice(dragNodeIndex, 0, node)
+      }
+      if (element.children?.length) {
+        dfsTreeNodeReset(element.children, node)
+      }
+    })
+  }
+
+  const handleDragStart = node => {
+    dragNodeId = node.data.id
+    dfsTreeNode(state[key], '0')
+  }
+
+  const allowDrop = (_, dropNode) => {
+    return !dropNode.data?.leaf
+  }
+
+  const handleDrop = (draggingNode, dropNode, dropType) => {
+    const params = {
+      id: draggingNode.data?.id,
+      name: draggingNode.data?.name,
+      nodeType: draggingNode.data?.leaf ? type : 'folder',
+      pid: '0',
+      action: 'move'
+    }
+
+    if (dropType === 'inner') {
+      params.pid = dropNode.data?.id
+    } else {
+      dfsTreeNodeBack(state[key], '0', params)
+    }
+
+    req(params).catch(() => {
+      if (dragNodeParentId === '0') {
+        state[key].splice(dragNodeIndex, 0, draggingNode.data)
+        return
+      }
+
+      dfsTreeNodeReset(state[key], draggingNode.data)
+    })
+  }
+
+  return {
+    handleDrop,
+    allowDrop,
+    handleDragStart
+  }
+}
+
+export { treeDraggble }

core/core-frontend/src/utils/treeDraggbleChart.ts

@@ -0,0 +1,90 @@
+import { dvNameCheck, moveResource } from '@/api/visualization/dataVisualization'
+const treeDraggbleChart = (state, key, type) => {
+  let dragNodeParentId = ''
+  let dragNodeId = ''
+  let dragNodeIndex = 0
+
+  const dfsTreeNode = (arr, parentId) => {
+    arr.forEach((element, index) => {
+      if (element.id === dragNodeId) {
+        dragNodeIndex = index
+        dragNodeParentId = parentId
+      }
+      if (element.children?.length) {
+        dfsTreeNode(element.children, element.id)
+      }
+    })
+  }
+
+  const dfsTreeNodeBack = (arr, parentId, params) => {
+    arr.forEach(element => {
+      if (element.id === params.id) {
+        params.pid = parentId
+      }
+      if (element.children?.length) {
+        dfsTreeNodeBack(element.children, element.id, params)
+      }
+    })
+  }
+
+  const dfsTreeNodeReset = (arr, node) => {
+    arr.forEach(element => {
+      if (element.id === dragNodeParentId) {
+        element.children.splice(dragNodeIndex, 0, node)
+      }
+      if (element.children?.length) {
+        dfsTreeNodeReset(element.children, node)
+      }
+    })
+  }
+
+  const handleDragStart = node => {
+    dragNodeId = node.data.id
+    dfsTreeNode(state[key], '0')
+  }
+
+  const allowDrop = (_, dropNode) => {
+    return !dropNode.data?.leaf
+  }
+
+  const handleDrop = async (draggingNode, dropNode, dropType) => {
+    const params = {
+      id: draggingNode.data?.id,
+      name: draggingNode.data?.name,
+      nodeType: draggingNode.data?.leaf ? 'leaf' : 'folder',
+      pid: '0',
+      opt: 'move',
+      type
+    }
+
+    try {
+      await dvNameCheck(params)
+    } catch (error) {
+      console.error(error)
+    }
+    delete params.opt
+
+    if (dropType === 'inner') {
+      params.pid = dropNode.data?.id
+    } else {
+      dfsTreeNodeBack(state[key], '0', params)
+    }
+
+    moveResource(params).catch(() => {
+      if (dragNodeParentId === '0') {
+        state[key].splice(dragNodeIndex, 0, draggingNode.data)
+        return
+      }
+
+      dfsTreeNodeReset(state[key], draggingNode.data)
+    })
+  }
+
+  return {
+    handleDrop,
+    allowDrop,
+    handleDragStart
+  }
+}
+
+export { treeDraggbleChart }

core/core-frontend/src/views/common/DeResourceTree.vue

@@ -4,6 +4,7 @@ import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import dvCopyDark from '@/assets/svg/dv-copy-dark.svg'
 import dvDelete from '@/assets/svg/dv-delete.svg'
 import dvMove from '@/assets/svg/dv-move.svg'
+import { treeDraggbleChart } from '@/utils/treeDraggbleChart'
 import dvRename from '@/assets/svg/dv-rename.svg'
 import dvDashboardSpine from '@/assets/svg/dv-dashboard-spine.svg'
 import dvScreenSpine from '@/assets/svg/dv-screen-spine.svg'
@@ -153,7 +154,11 @@ const resourceTypeList = computed(() => {
   ]
   return list
 })
-
+const { handleDrop, allowDrop, handleDragStart } = treeDraggbleChart(
+  state,
+  'resourceTree',
+  curCanvasType.value
+)
 const menuList = computed(() => {
   const list = [
     {
@@ -640,6 +645,10 @@ defineExpose({
         @node-expand="nodeExpand"
         @node-collapse="nodeCollapse"
         @node-click="nodeClick"
+        @node-drag-start="handleDragStart"
+        :allow-drop="allowDrop"
+        @node-drop="handleDrop"
+        draggable
       >
         <template #default="{ node, data }">
           <span class="custom-tree-node">

core/core-frontend/src/views/visualized/data/dataset/index.vue

@@ -6,10 +6,12 @@ import icon_intoItem_outlined from '@/assets/svg/icon_into-item_outlined.svg'
 import icon_rename_outlined from '@/assets/svg/icon_rename_outlined.svg'
 import dvNewFolder from '@/assets/svg/dv-new-folder.svg'
 import icon_fileAdd_outlined from '@/assets/svg/icon_file-add_outlined.svg'
+import { moveDatasetTree } from '@/api/dataset'
 import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
 import dvSortAsc from '@/assets/svg/dv-sort-asc.svg'
 import dvSortDesc from '@/assets/svg/dv-sort-desc.svg'
 import dvFolder from '@/assets/svg/dv-folder.svg'
+import { treeDraggble } from '@/utils/treeDraggble'
 import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import icon_dashboard_outlined from '@/assets/svg/icon_dashboard_outlined.svg'
@@ -247,6 +249,13 @@ const infoList = computed(() => {
   }
 })
 
+const { handleDrop, allowDrop, handleDragStart } = treeDraggble(
+  state,
+  'datasetTree',
+  moveDatasetTree,
+  'dataset'
+)
+
 const generateColumns = (arr: Field[]) =>
   arr.map(ele => ({
     key: ele.dataeaseName,
@@ -852,6 +861,10 @@ const getMenuList = (val: boolean) => {
             :filter-node-method="filterNode"
             expand-on-click-node
             highlight-current
+            @node-drag-start="handleDragStart"
+            :allow-drop="allowDrop"
+            @node-drop="handleDrop"
+            draggable
             @node-expand="nodeExpand"
             @node-collapse="nodeCollapse"
             :default-expanded-keys="expandedKey"

core/core-frontend/src/views/visualized/data/datasource/index.vue

@@ -34,6 +34,7 @@ import {
   ElScrollbar,
   ElAside
 } from 'element-plus-secondary'
+import { treeDraggble } from '@/utils/treeDraggble'
 import GridTable from '@/components/grid-table/src/GridTable.vue'
 import ArrowSide from '@/views/common/DeResourceArrow.vue'
 import relationChart from '@/components/relation-chart/index.vue'
@@ -734,6 +735,13 @@ const handleEdit = async data => {
   editDatasource()
 }
 
+const { handleDrop, allowDrop, handleDragStart } = treeDraggble(
+  state,
+  'datasourceTree',
+  move,
+  'datasource'
+)
+
 const handleCopy = async data => {
   getById(data.id).then(res => {
     let {
@@ -1101,6 +1109,10 @@ const getMenuList = (val: boolean) => {
             :default-expanded-keys="expandedKey"
             :data="state.datasourceTree"
             :props="defaultProps"
+            @node-drag-start="handleDragStart"
+            :allow-drop="allowDrop"
+            @node-drop="handleDrop"
+            draggable
             @node-click="handleNodeClick"
           >
             <template #default="{ node, data }">