feat: 新增添加节点逻辑

TingShine · Jan 24, 2023 · 3659dc5 · 3659dc5
1 parent ae3ca45
commit 3659dc5
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 13 deletions.
diff --git a/src/components/draggable-nested-tree/index.ts b/src/components/draggable-nested-tree/index.ts
@@ -1,4 +1,6 @@
-import type { IInitDataOptionalItem, INodeItem } from "./type";
+import { useColor } from "@/utils/color-random";
+import { MessagePlugin } from "tdesign-vue-next";
+import type { IInitDataOptionalItem, INodeItem, ITempNode } from "./type";
 
 export const initNodeItemData: IInitDataOptionalItem = {
   isKeyEditing: false,
@@ -27,7 +29,7 @@ export const useTool = () => {
         element.children = [];
       }
 
-      const firstElement = element.children[0]
+      const firstElement = element.children[0];
       if (firstElement && firstElement.temp) {
         return;
       }
@@ -65,7 +67,7 @@ export const useTool = () => {
   return {
     handleChooseTool,
     handleEditKey,
-    handleDeleteNode
+    handleDeleteNode,
   };
 };
 
@@ -98,3 +100,65 @@ export const useHover = () => {
     handleMouseLeaveItem,
   };
 };
+
+export const useAddNode = ($emit: Function) => {
+  const onCustomAdd = (
+    element: INodeItem,
+    list: INodeItem[],
+    parentType: "Array" | "Object",
+    params: any
+  ) => {
+    const newParams = { ...params, ...initNodeItemData, parentType };
+    handleCustomAdd(element, list, newParams);
+  };
+
+  const handleCustomAdd = (
+    element: INodeItem,
+    list: INodeItem[],
+    params: any
+  ) => {
+    $emit("customAdd", element, list, params);
+  };
+
+  const handleAddNode = (
+    element: ITempNode,
+    list: INodeItem[],
+    params: any
+  ) => {
+    console.log(element, list, params);
+    const { key, type } = params;
+
+    if (list.some((node) => node.key === key && !node.temp)) {
+      MessagePlugin.error("当前key值重复，无法添加");
+      return;
+    }
+
+    switch (type) {
+      case "Array":
+        addArrayOrObjectNode(element, params);
+        break;
+      case "Object":
+        addArrayOrObjectNode(element, params);
+        break;
+    }
+  };
+
+  const { getRandomColor } = useColor("bg");
+  const addArrayOrObjectNode = (element: ITempNode, params: any) => {
+    const { type, key } = params;
+    Object.assign(element, {
+      ...initNodeItemData,
+      key,
+      type,
+      children: [],
+      bg: getRandomColor(3),
+      temp: false,
+    });
+  };
+
+  return {
+    onCustomAdd,
+    handleCustomAdd,
+    handleAddNode,
+  }
+};
diff --git a/src/components/draggable-nested-tree/index.vue b/src/components/draggable-nested-tree/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <nested-tree :list="treeData"></nested-tree>
+  <nested-tree :list="treeData" @custom-add="handleCustomAdd"></nested-tree>
   <json-displayer :value="treeData" title="对应数据"></json-displayer>
 </template>
 
@@ -9,6 +9,7 @@ import { defineComponent, ref, onMounted, toRefs, type PropType } from "vue";
 import { useColor } from "../../utils/color-random";
 import JsonDisplayer from "../json-displayer/index.vue";
 import { initNodeItemData } from ".";
+import type { INodeItem } from "./type";
 
 export default defineComponent({
   name: "DraggableTree",
@@ -51,8 +52,17 @@ export default defineComponent({
       });
     };
 
+    const handleCustomAdd = (
+      element: INodeItem,
+      list: INodeItem[],
+      params: any
+    ) => {
+      console.log(element, list, params);
+    };
+
     return {
       treeData,
+      handleCustomAdd,
     };
   },
 });

diff --git a/src/components/draggable-nested-tree/nested-tree.vue b/src/components/draggable-nested-tree/nested-tree.vue
@@ -18,8 +18,11 @@
           <template v-if="element.temp">
             <div>
               <cascader-input
+                @submit="(params) => handleAddNode(element, list, params)"
                 @delete="handleDeleteNode(element, list)"
-                @custom-add="(params) => handleCustomAdd(element, list, params)"
+                @custom-add="
+                  (params) => onCustomAdd(element, list, parentType, params)
+                "
               ></cascader-input>
             </div>
           </template>
@@ -62,9 +65,11 @@
                   v-model="element.key"
                   @finish="element.isKeyEditing = false"
                 ></input-field>
-                <span v-if="element.type === 'Array'" class="ml-1"> []</span>
+                <span v-if="element.type === 'Array'" class="ml-1">
+                  <t-tag theme="primary" variant="light">[]</t-tag></span
+                >
                 <span v-else-if="element.type === 'Object'" class="ml-1">
-                  {}</span
+                  <t-tag theme="primary" variant="light">{}</t-tag></span
                 >
               </div>
 
@@ -99,6 +104,7 @@
               class="item-sub ml-4"
               :list="element.children"
               parent-type="Array"
+              @custom-add="handleCustomAdd"
             >
               <template #tools="{ element: childElement, parent }">
                 <default-tool-bar
@@ -120,6 +126,7 @@
               class="item-sub ml-4"
               :list="element.children"
               parent-type="Object"
+              @custom-add="handleCustomAdd"
             >
               <template #tools="{ element: childElement, parent }">
                 <default-tool-bar
@@ -150,8 +157,9 @@ import { reactive, type PropType, computed, ref } from "vue";
 import type { INodeItem, ITempNode } from "./type";
 import { CaretDownSmallIcon, CaretUpSmallIcon } from "tdesign-icons-vue-next";
 import CascaderInput from "../cascader-input/index.vue";
-import { useHover, useTool } from ".";
-import { Tag as TTag } from "tdesign-vue-next";
+import { initNodeItemData, useAddNode, useHover, useTool } from ".";
+import { Tag as TTag, MessagePlugin } from "tdesign-vue-next";
+import { useColor } from "@/utils/color-random";
 
 const props = defineProps({
   list: {
@@ -164,6 +172,8 @@ const props = defineProps({
   },
 });
 
+const $emit = defineEmits(["customAdd"]);
+
 //
 const dragDefaultOptions = reactive({
   animation: 0,
@@ -198,8 +208,7 @@ const handleClick = (element: INodeItem) => {
   element.hideChildren = !element.hideChildren;
 };
 
-//
-const handleCustomAdd = (element, list, params) => {};
+const { onCustomAdd, handleAddNode, handleCustomAdd } = useAddNode($emit);
 
 const {
   handleMouseEnterItem,

diff --git a/src/index.vue b/src/index.vue
@@ -35,13 +35,13 @@ const list = ref([
         children: [
           {
             id: 4,
-            key: "Lord Farquad",
+            key: "LordFarquad",
             type: "String",
             children: [],
           },
           {
             id: 7,
-            key: "Lord Logo",
+            key: "LordLogo",
             type: "String",
             value: '测试',
             children: [],

diff --git a/src/utils/config.ts b/src/utils/config.ts
@@ -2,5 +2,7 @@ export const cascaderSelectOptions = [
   { label: "字符串", value: "String" },
   { label: "数值", value: "Number" },
   { label: "布尔值", value: "Boolean" },
+  { label: "数组", value: "Array" },
+  { label: "对象", value: "Object" },
   { label: "自定义", value: "Custom" },
 ];