资源课件上传组件

src/compenents/index.ts

@@ -10,3 +10,4 @@ export * from ".//tree-adminroles";
 export * from "./duration-text";
 export * from "./upload-video-sub";
 export * from "./select-resource";
+export * from "./upload-courseware-button";

src/compenents/upload-courseware-button/index.tsx

@@ -0,0 +1,237 @@
+import { InboxOutlined } from "@ant-design/icons";
+import {
+  Button,
+  Col,
+  message,
+  Modal,
+  Progress,
+  Row,
+  Table,
+  Tag,
+  Upload,
+} from "antd";
+import Dragger from "antd/es/upload/Dragger";
+import { useEffect, useRef, useState } from "react";
+import { generateUUID, parseVideo } from "../../utils";
+import { minioMergeVideo, minioUploadId } from "../../api/upload";
+import { UploadChunk } from "../../js/minio-upload-chunk";
+
+interface PropsInterface {
+  categoryIds: number[];
+  onUpdate: () => void;
+}
+
+export const UploadCoursewareButton = (props: PropsInterface) => {
+  const [showModal, setShowModal] = useState(false);
+  const localFileList = useRef<FileItem[]>([]);
+  const intervalId = useRef<number>();
+  const [fileList, setFileList] = useState<FileItem[]>([]);
+
+  const getMinioUploadId = async (extension: string) => {
+    let resp: any = await minioUploadId(extension);
+    return resp.data;
+  };
+
+  useEffect(() => {
+    if (showModal) {
+      intervalId.current = setInterval(() => {
+        if (localFileList.current.length === 0) {
+          return;
+        }
+        for (let i = 0; i < localFileList.current.length; i++) {
+          if (localFileList.current[i].upload.status === 0) {
+            localFileList.current[i].upload.handler.start();
+            break;
+          }
+          if (localFileList.current[i].upload.status === 3) {
+            break;
+          }
+        }
+      }, 1000);
+      console.log("定时器已创建", intervalId.current);
+    } else {
+      window.clearInterval(intervalId.current);
+      console.log("定时器已销毁");
+    }
+  }, [showModal]);
+
+  const uploadProps = {
+    multiple: true,
+    beforeUpload: async (file: File) => {
+      let extension: any = file.name.split(".");
+      extension = extension[extension.length - 1];
+      console.log(extension);
+      console.log(file.type);
+      if (
+        file.type ===
+          "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
+        file.type === "text/plain" ||
+        file.type === "application/pdf" ||
+        file.type === "application/x-zip-compressed" ||
+        file.type ===
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+      ) {
+        // 添加到本地待上传
+        let data = await getMinioUploadId(extension);
+        let run = new UploadChunk(file, data["upload_id"], data["filename"]);
+        let item: FileItem = {
+          id: generateUUID(),
+          file: file,
+          upload: {
+            handler: run,
+            progress: 0,
+            status: 0,
+            remark: "",
+          },
+        };
+        item.upload.handler.on("success", () => {
+          minioMergeVideo(
+            data["filename"],
+            data["upload_id"],
+            props.categoryIds.join(","),
+            item.file.name,
+            extension,
+            item.file.size,
+            0,
+            ""
+          ).then(() => {
+            item.upload.progress = 100;
+            item.upload.status = item.upload.handler.getUploadStatus();
+            setFileList([...localFileList.current]);
+          });
+        });
+        item.upload.handler.on("progress", (p: number) => {
+          item.upload.status = item.upload.handler.getUploadStatus();
+          item.upload.progress = p >= 100 ? 99 : p;
+          setFileList([...localFileList.current]);
+        });
+        item.upload.handler.on("error", (msg: string) => {
+          item.upload.status = item.upload.handler.getUploadStatus();
+          item.upload.remark = msg;
+          setFileList([...localFileList.current]);
+        });
+        // 先插入到ref
+        localFileList.current.push(item);
+        // 再更新list
+        setFileList([...localFileList.current]);
+      } else {
+        message.error(`${file.name} 并不是可上传文件`);
+      }
+      return Upload.LIST_IGNORE;
+    },
+  };
+
+  const closeWin = () => {
+    if (fileList.length > 0) {
+      fileList.forEach((item) => {
+        if (item.upload.status !== 5 && item.upload.status !== 7) {
+          item.upload.handler.cancel();
+        }
+      });
+    }
+    props.onUpdate();
+    localFileList.current = [];
+    setFileList([]);
+    setShowModal(false);
+  };
+
+  return (
+    <>
+      <Button
+        type="primary"
+        onClick={() => {
+          setShowModal(true);
+        }}
+      >
+        上传课件
+      </Button>
+
+      {showModal ? (
+        <Modal
+          width={800}
+          title="上传课件"
+          open={true}
+          onCancel={() => {
+            closeWin();
+          }}
+          maskClosable={false}
+          closable={false}
+          onOk={() => {
+            closeWin();
+          }}
+          okText="完成"
+        >
+          <Row gutter={[0, 10]}>
+            <Col span={24}>
+              <Dragger {...uploadProps}>
+                <p className="ant-upload-drag-icon">
+                  <InboxOutlined />
+                </p>
+                <p className="ant-upload-text">请将文件拖拽到此处上传</p>
+                <p className="ant-upload-hint">支持一次上传多个文件</p>
+              </Dragger>
+            </Col>
+            <Col span={24}>
+              <Table
+                pagination={false}
+                rowKey="id"
+                columns={[
+                  {
+                    title: "课件",
+                    dataIndex: "name",
+                    key: "name",
+                    render: (_, record) => <span>{record.file.name}</span>,
+                  },
+                  {
+                    title: "大小",
+                    dataIndex: "size",
+                    key: "size",
+                    render: (_, record) => (
+                      <span>
+                        {(record.file.size / 1024 / 1024).toFixed(2)}M
+                      </span>
+                    ),
+                  },
+                  {
+                    title: "进度",
+                    dataIndex: "progress",
+                    key: "progress",
+                    render: (_, record: FileItem) => (
+                      <>
+                        {record.upload.status === 0 ? (
+                          "等待上传"
+                        ) : (
+                          <Progress
+                            size="small"
+                            steps={20}
+                            percent={record.upload.progress}
+                          />
+                        )}
+                      </>
+                    ),
+                  },
+                  {
+                    title: "操作",
+                    key: "action",
+                    render: (_, record) => (
+                      <>
+                        {record.upload.status === 5 ? (
+                          <Tag color="red">{record.upload.remark}</Tag>
+                        ) : null}
+
+                        {record.upload.status === 7 ? (
+                          <Tag color="success">上传成功</Tag>
+                        ) : null}
+                      </>
+                    ),
+                  },
+                ]}
+                dataSource={fileList}
+              />
+            </Col>
+          </Row>
+        </Modal>
+      ) : null}
+    </>
+  );
+};

src/pages/resource/courseware/index.tsx

@@ -16,7 +16,12 @@ import { useLocation } from "react-router-dom";
 import { DownOutlined, ExclamationCircleFilled } from "@ant-design/icons";
 import type { ColumnsType } from "antd/es/table";
 import { dateFormat } from "../../../utils/index";
-import { TreeCategory, DurationText, PerButton } from "../../../compenents";
+import {
+  TreeCategory,
+  DurationText,
+  PerButton,
+  UploadCoursewareButton,
+} from "../../../compenents";
 
 const { confirm } = Modal;
 
@@ -281,9 +286,15 @@ const ResourceCoursewarePage = () => {
           </div>
           <div className="float-left  j-b-flex  mb-24">
             <div>
+              <UploadCoursewareButton
+                categoryIds={category_ids}
+                onUpdate={() => {
+                  resetList();
+                }}
+              ></UploadCoursewareButton>
               <Button
                 type="default"
-                className="mr-16"
+                className="ml-16"
                 onClick={() => {
                   setSelectedRowKeys([]);
                   setMultiConfig(!multiConfig);
@@ -293,6 +304,7 @@ const ResourceCoursewarePage = () => {
               </Button>
               <Button
                 type="default"
+                className="ml-16"
                 onClick={() => removeResourceMulti()}
                 disabled={selectedRowKeys.length === 0}
               >