线上课新建无章节课时选择逻辑优化

src/pages/course/compenents/create.tsx

@@ -190,6 +190,20 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
     }
   };
 
+  const transHour = (arr: any) => {
+    setHours(arr);
+    const data = [...treeData];
+    const newArr: any = [];
+    for (let i = 0; i < arr.length; i++) {
+      data.map((item: any) => {
+        if (item.rid === arr[i]) {
+          newArr.push(item);
+        }
+      });
+    }
+    setTreeData(newArr);
+  };
+
   return (
     <>
       <Drawer
@@ -415,6 +429,9 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
                       onRemoveItem={(id: number) => {
                         delHour(id);
                       }}
+                      onUpdate={(arr: any[]) => {
+                        transHour(arr);
+                      }}
                     />
                   )}
                 </div>

src/pages/course/compenents/hours.tsx

@@ -1,5 +1,6 @@
 import { message, Tree, Tooltip } from "antd";
 import { useState, useEffect } from "react";
+import type { DataNode, TreeProps } from "antd/es/tree";
 
 interface Option {
   id: number;
@@ -9,6 +10,7 @@ interface Option {
 interface PropInterface {
   data: Option[];
   onRemoveItem: (id: number) => void;
+  onUpdate: (arr: any[]) => void;
 }
 
 export const TreeHours = (props: PropInterface) => {
@@ -21,6 +23,7 @@ export const TreeHours = (props: PropInterface) => {
       return;
     }
     checkTree(hours);
+    console.log(hours);
   }, [props.data]);
 
   const checkTree = (hours: any) => {
@@ -48,11 +51,11 @@ export const TreeHours = (props: PropInterface) => {
             <i
               className="iconfont icon-icon-delete"
               style={{ fontSize: 24 }}
-              onClick={() => removeItem(hours[i].id)}
+              onClick={() => removeItem(hours[i].rid)}
             />
           </div>
         ),
-        key: hours[i].id,
+        key: hours[i].rid,
       });
     }
     setTreeData(arr);
@@ -64,10 +67,93 @@ export const TreeHours = (props: PropInterface) => {
     }
     props.onRemoveItem(id);
   };
+  const onDrop: TreeProps["onDrop"] = (info) => {
+    const dropKey = info.node.key;
+    const dragKey = info.dragNode.key;
+    const dropPos = info.node.pos.split("-");
+    const dropPosition =
+      info.dropPosition - Number(dropPos[dropPos.length - 1]);
+    const loop = (
+      data: DataNode[],
+      key: React.Key,
+      callback: (node: DataNode, i: number, data: DataNode[]) => void
+    ) => {
+      for (let i = 0; i < data.length; i++) {
+        if (data[i].key === key) {
+          return callback(data[i], i, data);
+        }
+        if (data[i].children) {
+          loop(data[i].children!, key, callback);
+        }
+      }
+    };
+    const data = [...treeData];
+    let isTop = false;
+
+    for (let i = 0; i < data.length; i++) {
+      if (data[i].key === dragKey) {
+        isTop = true;
+      }
+    }
+
+    // Find dragObject
+    let dragObj: DataNode;
+    loop(data, dragKey, (item, index, arr) => {
+      arr.splice(index, 1);
+      dragObj = item;
+    });
+
+    if (!info.dropToGap) {
+      // Drop on the content
+      loop(data, dropKey, (item) => {
+        item.children = item.children || [];
+        // where to insert 示例添加到头部，可以是随意位置
+        item.children.unshift(dragObj);
+      });
+    } else if (
+      ((info.node as any).props.children || []).length > 0 && // Has children
+      (info.node as any).props.expanded && // Is expanded
+      dropPosition === 1 // On the bottom gap
+    ) {
+      loop(data, dropKey, (item) => {
+        item.children = item.children || [];
+        // where to insert 示例添加到头部，可以是随意位置
+        item.children.unshift(dragObj);
+        // in previous version, we use item.children.push(dragObj) to insert the
+        // item to the tail of the children
+      });
+    } else {
+      let ar: DataNode[] = [];
+      let i: number;
+      loop(data, dropKey, (_item, index, arr) => {
+        ar = arr;
+        i = index;
+      });
+      if (dropPosition === -1) {
+        ar.splice(i!, 0, dragObj!);
+      } else {
+        ar.splice(i! + 1, 0, dragObj!);
+      }
+    }
+    setTreeData(data);
+    const keys = data.map((item: any) => item.key);
+    props.onUpdate(keys);
+  };
+
+  const onDragEnter: TreeProps["onDragEnter"] = (info) => {
+    console.log(info);
+  };
 
   return (
     <div>
-      <Tree selectable={false} treeData={treeData} />
+      <Tree
+        draggable
+        blockNode
+        onDragEnter={onDragEnter}
+        onDrop={onDrop}
+        selectable={false}
+        treeData={treeData}
+      />
     </div>
   );
 };