课程新建除课时列表部分

src/compenents/index.ts

@@ -6,4 +6,6 @@ export * from "./tree-department";
 export * from "./back-bar";
 export * from "./permission-button";
 export * from "./tree-category";
-export * from "./duration-text";
+export * from "./duration-text";
+export * from "./upload-video-sub";
+export * from "./select-resource";

src/compenents/select-resource/index.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import { Button, Row, Col, Modal, message, Tabs } from "antd";
+import styles from "./index.module.less";
+import { UploadVideoSub } from "../../compenents";
+import type { TabsProps } from "antd";
+
+interface VideoItem {
+  id: number;
+  category_id: number;
+  name: string;
+  duration: number;
+}
+
+interface PropsInterface {
+  open: boolean;
+  onSelected: (arr: any[], label: any[]) => void;
+  onCancel: () => void;
+}
+
+export const SelectResource = (props: PropsInterface) => {
+  const [refresh, setRefresh] = useState(true);
+  const [tabKey, setTabKey] = useState(1);
+  const [selectKeys, setSelectKeys] = useState<any>([]);
+  const [selectLabel, setSelectLabel] = useState<any>([]);
+
+  const items: TabsProps["items"] = [
+    {
+      key: "1",
+      label: `视频`,
+      children: (
+        <div className="float-left">
+          <UploadVideoSub
+            label="视频"
+            defaultCheckedList={[]}
+            open={refresh}
+            onSelected={(arr: any[], label: any[]) => {
+              setSelectKeys(arr);
+              setSelectLabel(label);
+            }}
+          />
+        </div>
+      ),
+    },
+  ];
+
+  const onChange = (key: string) => {
+    setTabKey(Number(key));
+  };
+
+  return (
+    <>
+      <Modal
+        title="资源素材库"
+        centered
+        closable={false}
+        onCancel={() => {
+          setSelectKeys([]);
+          props.onCancel();
+        }}
+        open={props.open}
+        width={800}
+        maskClosable={false}
+        onOk={() => props.onSelected(selectKeys, selectLabel)}
+      >
+        <Row>
+          <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
+        </Row>
+      </Modal>
+    </>
+  );
+};

src/compenents/upload-video-sub/index.module.less

@@ -0,0 +1,8 @@
+.video-list {
+  width: calc(100% -100px);
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  margin-left: 10px;
+  min-height: 380px;
+}

src/compenents/upload-video-sub/index.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useState } from "react";
+import { Checkbox, Row, Col, Empty, message, Pagination } from "antd";
+import { resource } from "../../api";
+import styles from "./index.module.less";
+import { UploadVideoButton } from "../upload-video-button";
+import { DurationText, TreeCategory } from "../../compenents";
+import type { CheckboxChangeEvent } from "antd/es/checkbox";
+import type { CheckboxValueType } from "antd/es/checkbox/Group";
+
+const CheckboxGroup = Checkbox.Group;
+
+interface VideoItem {
+  id: number;
+  category_id: number;
+  name: string;
+  duration: number;
+}
+
+interface PropsInterface {
+  defaultCheckedList: any[];
+  label: string;
+  open: boolean;
+  onSelected: (arr: any[], label: any) => void;
+}
+
+export const UploadVideoSub = (props: PropsInterface) => {
+  const [category_ids, setCategoryIds] = useState<any>([]);
+
+  const [videoList, setVideoList] = useState<VideoItem[]>([]);
+  const [videosExtra, setVideoExtra] = useState<any>([]);
+  const [refresh, setRefresh] = useState(false);
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(10);
+  const [total, setTotal] = useState(0);
+  const [pureTotal, setPureTotal] = useState(0);
+  const [categoryCount, setCategoryCount] = useState<any>({});
+
+  const [plainOptions, setPlainOptions] = useState<any>([]);
+  const [checkedList, setCheckedList] = useState<CheckboxValueType[]>(
+    props.defaultCheckedList
+  );
+  const [indeterminate, setIndeterminate] = useState(true);
+  const [checkAll, setCheckAll] = useState(false);
+
+  // 获取列表
+  const getvideoList = () => {
+    let categoryIds = category_ids.join(",");
+    resource
+      .resourceList(page, size, "", "", "", "VIDEO", categoryIds)
+      .then((res: any) => {
+        setTotal(res.data.result.total);
+        setVideoExtra(res.data.videos_extra);
+        setCategoryCount(res.data.category_count);
+        setPureTotal(res.data.pure_total);
+        setVideoList(res.data.result.data);
+        let data = res.data.result.data;
+        const arr = [];
+        for (let i = 0; i < data.length; i++) {
+          arr.push({
+            label: (
+              <div className="d-flex">
+                <i
+                  className="iconfont icon-icon-video"
+                  style={{
+                    fontSize: 16,
+                    color: "rgba(0,0,0,0.3)",
+                  }}
+                />
+                <div className="video-title ml-8">{data[i].name}</div>
+                <div className="video-time">
+                  <DurationText
+                    duration={res.data.videos_extra[data[i].id].duration}
+                  ></DurationText>
+                </div>
+              </div>
+            ),
+            value: data[i].id,
+          });
+        }
+        setPlainOptions(arr);
+      })
+      .catch((err) => {
+        console.log("错误,", err);
+      });
+  };
+  // 重置列表
+  const resetVideoList = () => {
+    setPage(1);
+    setVideoList([]);
+    setRefresh(!refresh);
+  };
+
+  // 加载列表
+  useEffect(() => {
+    getvideoList();
+  }, [props.open, category_ids, refresh, page, size]);
+
+  const onChange = (list: CheckboxValueType[]) => {
+    setCheckedList(list);
+    setIndeterminate(!!list.length && list.length < plainOptions.length);
+    setCheckAll(list.length === plainOptions.length);
+    let arrLabel: any = [];
+    for (let i = 0; i < list.length; i++) {
+      videoList.map((item: any) => {
+        if (item.id === list[i]) {
+          arrLabel.push(item.name);
+        }
+      });
+    }
+
+    props.onSelected(list, arrLabel);
+  };
+
+  const onCheckAllChange = (e: CheckboxChangeEvent) => {
+    const arr = plainOptions.map((item: any) => item.value);
+    const arrLabel = videoList.map((item: any) => item.name);
+    setCheckedList(e.target.checked ? arr : []);
+    setIndeterminate(false);
+    setCheckAll(e.target.checked);
+    if (e.target.checked) {
+      props.onSelected(arr, arrLabel);
+    } else {
+      props.onSelected([], []);
+    }
+  };
+
+  return (
+    <>
+      <Row style={{ width: 752, minHeight: 520 }}>
+        <Col span={7}>
+          <TreeCategory
+            resourceTotal={pureTotal}
+            categoryCount={{ categoryCount }}
+            text={props.label}
+            onUpdate={(keys: any) => setCategoryIds(keys)}
+          />
+        </Col>
+        <Col span={17}>
+          <Row style={{ marginBottom: 24, paddingLeft: 10 }}>
+            <Col span={24}>
+              <UploadVideoButton
+                categoryIds={category_ids}
+                onUpdate={() => {
+                  resetVideoList();
+                }}
+              ></UploadVideoButton>
+            </Col>
+          </Row>
+          <div className={styles["video-list"]}>
+            {videoList.length === 0 && (
+              <Col span={24} style={{ marginTop: 150 }}>
+                <Empty description="暂无视频" />
+              </Col>
+            )}
+            {videoList.length > 0 && (
+              <div className="list-select-column-box c-flex">
+                <Checkbox
+                  indeterminate={indeterminate}
+                  onChange={onCheckAllChange}
+                  checked={checkAll}
+                >
+                  全选
+                </Checkbox>
+                <CheckboxGroup
+                  className="c-flex"
+                  options={plainOptions}
+                  value={checkedList}
+                  onChange={onChange}
+                />
+              </div>
+            )}
+            {/* {videoList.map((item) => (
+              <div className={styles["video-item"]} key={item.id}>
+                {item.name}
+              </div>
+            ))} */}
+          </div>
+          <Row
+            style={{
+              paddingLeft: 10,
+            }}
+          >
+            {videoList.length > 0 && (
+              <Col
+                span={24}
+                style={{ display: "flex", flexDirection: "row-reverse" }}
+              >
+                <Pagination
+                  onChange={(currentPage, currentSize) => {
+                    setPage(currentPage);
+                    setSize(currentSize);
+                  }}
+                  defaultCurrent={page}
+                  total={total}
+                />
+              </Col>
+            )}
+          </Row>
+        </Col>
+      </Row>
+    </>
+  );
+};