课程新建除课时列表部分

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>
+    </>
+  );
+};

src/index.less

@@ -148,6 +148,12 @@ code {
   flex-direction: column;
 }
 
+.c-a-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .flex-1 {
   flex: 1;
 }
@@ -501,3 +507,22 @@ textarea.ant-input {
     height: 3px !important;
   }
 }
+
+.list-select-column-box {
+  .ant-checkbox-wrapper {
+    margin-inline-start: 0px;
+    height: 38px;
+  }
+
+  .video-title {
+    width: 390px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .video-time {
+    width: 80px;
+    display: flex;
+    flex-direction: row-reverse;
+  }
+}

src/pages/course/compenents/create.module.less

@@ -20,3 +20,25 @@
     margin-right: 0;
   }
 }
+
+.hous-box {
+  width: 502px;
+  min-height: 56px;
+  background: #ffffff;
+  border-radius: 6px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  /* Firefox */
+  -webkit-box-sizing: border-box;
+  /* Safari */
+  padding: 16px;
+  margin-left: 42px;
+  .no-hours {
+    height: 24px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.25);
+    line-height: 24px;
+  }
+}

src/pages/course/compenents/create.tsx

@@ -13,7 +13,7 @@ import {
 } from "antd";
 import styles from "./create.module.less";
 import { course, department } from "../../../api/index";
-import { UploadImageButton } from "../../../compenents";
+import { UploadImageButton, SelectResource } from "../../../compenents";
 import { ExclamationCircleFilled } from "@ant-design/icons";
 import { getHost } from "../../../utils/index";
 
@@ -41,6 +41,9 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
   const [thumb, setThumb] = useState<string>("");
   const [type, setType] = useState<string>("open");
   const [chapterType, setChapterType] = useState(0);
+  const [chapters, setChapters] = useState<any>([]);
+  const [hours, setHours] = useState<any>([]);
+  const [videoVisible, setVideoVisible] = useState<boolean>(false);
 
   useEffect(() => {
     getParams();
@@ -58,6 +61,8 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
       hasChapter: 0,
     });
     setThumb(defaultThumb1);
+    setChapters([]);
+    setHours([]);
   }, [form, open]);
 
   const getParams = () => {
@@ -137,6 +142,8 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
       cancelText: "取消",
       onOk() {
         setChapterType(e.target.value);
+        setChapters([]);
+        setHours([]);
       },
       onCancel() {
         form.setFieldsValue({
@@ -164,6 +171,16 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
         width={634}
       >
         <div className="float-left mt-24">
+          <SelectResource
+            open={videoVisible}
+            onCancel={() => {
+              setVideoVisible(false);
+            }}
+            onSelected={(arr: any, label: any) => {
+              console.log("sel", arr, label);
+              setVideoVisible(false);
+            }}
+          />
           <Form
             form={form}
             name="basic"
@@ -336,13 +353,24 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
               </Radio.Group>
             </Form.Item>
             {chapterType === 0 && (
-              <Form.Item>
-                <div className="ml-120">
-                  <Button onClick={() => null} type="primary">
-                    添加课时
-                  </Button>
+              <div className="c-flex">
+                <Form.Item>
+                  <div className="ml-120">
+                    <Button
+                      onClick={() => setVideoVisible(true)}
+                      type="primary"
+                    >
+                      添加课时
+                    </Button>
+                  </div>
+                </Form.Item>
+                <div className={styles["hous-box"]}>
+                  {hours.length === 0 && (
+                    <span className={styles["no-hours"]}>请添加课时内容</span>
+                  )}
+                  {hours.length > 0 && 13}
                 </div>
-              </Form.Item>
+              </div>
             )}
           </Form>
         </div>

src/pages/course/compenents/hours.tsx

@@ -0,0 +1,37 @@
+import { message, Tree } from "antd";
+import { useState, useEffect } from "react";
+
+interface Option {
+  id: string | number;
+  name: string;
+}
+
+interface PropInterface {
+  data: Option[];
+  onUpdate: () => void;
+}
+
+export const TreeHours = (props: PropInterface) => {
+  const [treeData, setTreeData] = useState<any>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  useEffect(() => {
+    const hours = props.data;
+    if (hours.length === 0) {
+      return;
+    }
+    const arr = [];
+    for (let i = 0; i < hours.length; i++) {
+      arr.push({
+        title: hours[i].name,
+        key: hours[i].id,
+      });
+    }
+    setTreeData(arr);
+  }, [props.data]);
+
+  return (
+    <div>
+      <Tree selectable={false} treeData={treeData} />
+    </div>
+  );
+};