创建课程加入课件

src/pages/course/compenents/attachments.tsx

@@ -0,0 +1,157 @@
+import { message, Tree, Tooltip } from "antd";
+import { useState, useEffect } from "react";
+import type { DataNode, TreeProps } from "antd/es/tree";
+
+interface Option {
+  id: number;
+  name: string;
+}
+
+interface PropInterface {
+  data: Option[];
+  onRemoveItem: (id: number) => void;
+  onUpdate: (arr: any[]) => void;
+}
+
+export const TreeAttachments = (props: PropInterface) => {
+  const [treeData, setTreeData] = useState<any>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  useEffect(() => {
+    const hours = props.data;
+    if (hours.length === 0) {
+      return;
+    }
+    checkTree(hours);
+  }, [props.data]);
+
+  const checkTree = (hours: any) => {
+    const arr = [];
+    for (let i = 0; i < hours.length; i++) {
+      arr.push({
+        title: (
+          <div className="d-flex">
+            <div className="d-flex">
+              <i
+                className="iconfont icon-icon-file"
+                style={{
+                  fontSize: 16,
+                  color: "rgba(0,0,0,0.3)",
+                }}
+              />
+              <div className="tree-video-title mr-24">{hours[i].name}</div>
+            </div>
+            <Tooltip placement="top" title="可拖拽排序">
+              <i
+                className="iconfont icon-icon-drag mr-16"
+                style={{ fontSize: 24 }}
+              />
+            </Tooltip>
+            <i
+              className="iconfont icon-icon-delete"
+              style={{ fontSize: 24 }}
+              onClick={() => removeItem(hours[i].rid)}
+            />
+          </div>
+        ),
+        key: hours[i].rid,
+      });
+    }
+    setTreeData(arr);
+  };
+
+  const removeItem = (id: number) => {
+    if (id === 0) {
+      return;
+    }
+    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
+        draggable
+        blockNode
+        onDragEnter={onDragEnter}
+        onDrop={onDrop}
+        selectable={false}
+        treeData={treeData}
+      />
+    </div>
+  );
+};

src/pages/course/compenents/create.tsx

@@ -14,9 +14,14 @@ import {
 import styles from "./create.module.less";
 import { useSelector } from "react-redux";
 import { course, department } from "../../../api/index";
-import { UploadImageButton, SelectResource } from "../../../compenents";
+import {
+  UploadImageButton,
+  SelectResource,
+  SelectAttachment,
+} from "../../../compenents";
 import { ExclamationCircleFilled } from "@ant-design/icons";
 import { TreeHours } from "./hours";
+import { TreeAttachments } from "./attachments";
 
 const { confirm } = Modal;
 
@@ -58,6 +63,10 @@ export const CourseCreate: React.FC<PropInterface> = ({
   const [videoVisible, setVideoVisible] = useState<boolean>(false);
   const [treeData, setTreeData] = useState<any>([]);
   const [addvideoCurrent, setAddvideoCurrent] = useState(0);
+  const [showDrop, setShowDrop] = useState<boolean>(false);
+  const [attachmentVisible, setAttachmentVisible] = useState<boolean>(false);
+  const [attachmentData, setAttachmentData] = useState<any>([]);
+  const [attachments, setAttachments] = useState<any>([]);
 
   useEffect(() => {
     if (open) {
@@ -80,6 +89,7 @@ export const CourseCreate: React.FC<PropInterface> = ({
     setChapterHours([]);
     setHours([]);
     setTreeData([]);
+    setAttachmentData([]);
   }, [form, open]);
 
   const getParams = () => {
@@ -225,7 +235,7 @@ export const CourseCreate: React.FC<PropInterface> = ({
         values.category_ids,
         chapters,
         treeData,
-        []
+        attachmentData
       )
       .then((res: any) => {
         message.success("保存成功！");
@@ -269,6 +279,20 @@ export const CourseCreate: React.FC<PropInterface> = ({
     setVideoVisible(false);
   };
 
+  const selectAttachmentData = (arr: any, videos: any) => {
+    if (arr.length === 0) {
+      message.error("请选择课件");
+      return;
+    }
+    let keys = [...attachments];
+    let data = [...attachmentData];
+    keys = keys.concat(arr);
+    data = data.concat(videos);
+    setAttachments(keys);
+    setAttachmentData(data);
+    setAttachmentVisible(false);
+  };
+
   const getChapterType = (e: any) => {
     const arr = [...chapters];
     if (arr.length > 0) {
@@ -327,6 +351,36 @@ export const CourseCreate: React.FC<PropInterface> = ({
     setTreeData(newArr);
   };
 
+  const delAttachments = (id: number) => {
+    const data = [...attachmentData];
+    const index = data.findIndex((i: any) => i.rid === id);
+    if (index >= 0) {
+      data.splice(index, 1);
+    }
+    if (data.length > 0) {
+      setAttachmentData(data);
+      const keys = data.map((item: any) => item.rid);
+      setAttachments(keys);
+    } else {
+      setAttachmentData([]);
+      setAttachments([]);
+    }
+  };
+
+  const transAttachments = (arr: any) => {
+    setAttachments(arr);
+    const data = [...attachmentData];
+    const newArr: any = [];
+    for (let i = 0; i < arr.length; i++) {
+      data.map((item: any) => {
+        if (item.rid === arr[i]) {
+          newArr.push(item);
+        }
+      });
+    }
+    setAttachmentData(newArr);
+  };
+
   const addNewChapter = () => {
     const arr = [...chapters];
     const keys = [...chapterHours];
@@ -446,6 +500,16 @@ export const CourseCreate: React.FC<PropInterface> = ({
               }
             }}
           />
+          <SelectAttachment
+            defaultKeys={attachments}
+            open={attachmentVisible}
+            onCancel={() => {
+              setAttachmentVisible(false);
+            }}
+            onSelected={(arr: any, videos: any) => {
+              selectAttachmentData(arr, videos);
+            }}
+          ></SelectAttachment>
           <Form
             form={form}
             name="create-basic"
@@ -622,14 +686,6 @@ export const CourseCreate: React.FC<PropInterface> = ({
                 </div>
               </div>
             </Form.Item>
-            <Form.Item label="课程简介" name="short_desc">
-              <Input.TextArea
-                style={{ width: 424, minHeight: 80 }}
-                allowClear
-                placeholder="请输入课程简介（最多200字）"
-                maxLength={200}
-              />
-            </Form.Item>
             <Form.Item
               label="课时列表"
               name="hasChapter"
@@ -643,7 +699,7 @@ export const CourseCreate: React.FC<PropInterface> = ({
               </Radio.Group>
             </Form.Item>
             {chapterType === 0 && (
-              <div className="c-flex">
+              <div className="c-flex mb-24">
                 <Form.Item>
                   <div className="ml-120">
                     <Button
@@ -675,7 +731,7 @@ export const CourseCreate: React.FC<PropInterface> = ({
               </div>
             )}
             {chapterType === 1 && (
-              <div className="c-flex">
+              <div className="c-flex mb-24">
                 {chapters.length > 0 &&
                   chapters.map((item: any, index: number) => {
                     return (
@@ -738,6 +794,54 @@ export const CourseCreate: React.FC<PropInterface> = ({
                 </Form.Item>
               </div>
             )}
+            <Form.Item label="更多选项">
+              <div
+                className={showDrop ? "drop-item active" : "drop-item"}
+                onClick={() => setShowDrop(!showDrop)}
+              >
+                <i className="iconfont icon-icon-xiala c-red" />
+                <span>(课程简介、课件)</span>
+              </div>
+            </Form.Item>
+            <div
+              className="c-flex"
+              style={{ display: showDrop ? "block" : "none" }}
+            >
+              <Form.Item label="课程简介" name="short_desc">
+                <Input.TextArea
+                  style={{ width: 424, minHeight: 80 }}
+                  allowClear
+                  placeholder="请输入课程简介（最多200字）"
+                  maxLength={200}
+                />
+              </Form.Item>
+              <Form.Item label="课程附件">
+                <Button
+                  onClick={() => setAttachmentVisible(true)}
+                  type="primary"
+                >
+                  添加课件
+                </Button>
+              </Form.Item>
+              <div className={styles["hous-box"]}>
+                {attachmentData.length === 0 && (
+                  <span className={styles["no-hours"]}>
+                    请点击上方按钮添加课件
+                  </span>
+                )}
+                {attachmentData.length > 0 && (
+                  <TreeAttachments
+                    data={attachmentData}
+                    onRemoveItem={(id: number) => {
+                      delAttachments(id);
+                    }}
+                    onUpdate={(arr: any[]) => {
+                      transAttachments(arr);
+                    }}
+                  />
+                )}
+              </div>
+            </div>
           </Form>
         </div>
       </Drawer>