fix: 修复拖拽节点时父节点类型没有校验的问题

packages/components/draggable-nested-tree/index.ts

@@ -5,3 +5,4 @@ export * from "./useId";
 export * from "./config";
 export * from "./useTreeData";
 export * from "./type";
+export * from "./useMove";

packages/components/draggable-nested-tree/index.vue

@@ -15,6 +15,7 @@ import {
 } from "vue";
 import type { INodeItem } from "./type";
 import { useTreeData } from ".";
+import { useData } from "./useData";
 
 export default defineComponent({
   name: "DraggableTree",
@@ -38,7 +39,7 @@ export default defineComponent({
     const { getParsedTreeData, generateTreeData, cpmpleteTreeData } =
       useTreeData();
     const { initData, initTreeData } = toRefs(props);
-    const treeData = ref<any[]>([]);
+    const { treeData } = useData()
     const parsedTreeData = computed(() => getParsedTreeData(treeData.value));
     watchEffect(() => {
       if (treeData.value.length) {

packages/components/draggable-nested-tree/nested-tree.vue

@@ -1,10 +1,11 @@
 <template>
   <draggable
-    v-bind="dragOptions"
+    v-bind="dragDefaultOptions"
     tag="div"
     :list="list"
     class="item-container"
     item-key="id"
+    :move="handleMoveCallback"
   >
     <template #item="{ element }">
       <div
@@ -178,13 +179,13 @@
 import Draggable from "vuedraggable";
 import DefaultToolBar from "../default-toolbar/index.vue";
 import { useDoubleClick } from "../../utils/double-click";
-import { reactive, type PropType, computed, useSlots } from "vue";
+import { reactive, type PropType, useSlots } from "vue";
 import {
   CaretDownSmallIcon,
   CaretRightSmallIcon,
 } from "tdesign-icons-vue-next";
 import CascaderInput from "../cascader-input/index.vue";
-import { useAddNode, useHover, useTool, type INodeItem } from ".";
+import { useAddNode, useHover, useMove, useTool, type INodeItem } from ".";
 import { Tag as TTag } from "tdesign-vue-next";
 
 const props = defineProps({
@@ -194,31 +195,20 @@ const props = defineProps({
   },
   parentType: {
     type: String,
-    default: "",
+    default: "Single_Object",
   },
 });
 
 const $emit = defineEmits(["customAdd"]);
 const slots = useSlots();
 
-//
 const dragDefaultOptions = reactive({
   animation: 0,
   group: "DraggableTree",
   disabled: false,
   put: true,
   ghostClass: "ghost",
 });
-const dragOptions = computed(() => {
-  if (props.list.length === 1) {
-    const lastItem = props.list[0];
-    if (lastItem.type !== "Array" || lastItem.type !== "Object") {
-      return Object.assign({ put: false }, dragDefaultOptions);
-    }
-  }
-
-  return dragDefaultOptions;
-});
 
 // 点击展开收缩图标
 const handleClick = (element: INodeItem) => {
@@ -241,11 +231,11 @@ const {
   handleDeleteNode,
 } = useTool();
 const { handleDoubleClick } = useDoubleClick(handleEditKey);
+
+const { handleMoveCallback } = useMove();
 </script>
 
 <style scoped>
-.item-container {
-}
 .item {
   margin: 10px;
   border: solid black 1px;

packages/components/draggable-nested-tree/useAddNode.ts

@@ -86,7 +86,7 @@ export const useAddNode = ($emit: Function) => {
   const addBaseNode = (element: ITempNode, params: IAddNodeParams) => {
     const { type, value, parentType } = params;
 
-    if (parentType !== "Array") {
+    if (!["Array", "Single_Array"].includes(parentType!)) {
       MessagePlugin.error("当前父节点不为数组，无法添加数值节点");
       return;
     }

packages/components/draggable-nested-tree/useData.ts

@@ -0,0 +1,9 @@
+import { ref } from "vue";
+
+const treeData = ref<any[]>([]);
+
+export const useData = () => {
+  return {
+    treeData
+  }
+}

packages/components/draggable-nested-tree/useMove.ts

@@ -0,0 +1,51 @@
+import type { INodeItem } from "./type";
+import { useData } from "./useData";
+import { canAddChildNode } from "./useTool";
+
+export const useMove = () => {
+  const { treeData } = useData();
+
+  const checkChildren = (parent: any[], list: any[]): false | INodeItem => {
+    let parentNode = null;
+    parent.some((node) => {
+      if (node.children === list) {
+        parentNode = node;
+        return true;
+      }
+
+      if (Array.isArray(node.children) && node.children.length > 0) {
+        return checkChildren(node.children, list);
+      }
+
+      return false;
+    });
+
+    return parentNode || false;
+  };
+
+  const handleMoveCallback = (evt: any): boolean => {
+    const { draggedContext, relatedContext } = evt;
+
+    if (!relatedContext.list) {
+      return false;
+    }
+    const fromType = draggedContext.element?.type;
+    const { list } = relatedContext;
+
+    // 判断在root节点
+    if (treeData.value === list) {
+      return canAddChildNode(fromType, "Single_Object");
+    }
+
+    const node = checkChildren(treeData.value, list);
+    if (node) {
+      return canAddChildNode(fromType, node.type!);
+    }
+
+    return true;
+  };
+
+  return {
+    handleMoveCallback,
+  };
+};

packages/components/draggable-nested-tree/useTool.ts

@@ -12,7 +12,7 @@ const baseTools = ["CopyIcon", "EditIcon", "DeleteIcon"];
 const arrObjTools = ["AddIcon", "CopyIcon", "EditIcon", "DeleteIcon"];
 
 // 判断是否能添加子节点
-const canAddChildNode = (
+export const canAddChildNode = (
   childType: INodeItemType,
   parentType: INodeItemType
 ): boolean => {