选择课时、课件弹窗组件loading加载逻辑优化

2025-06-28 13:04:40 +08:00 · 2023-08-04 09:35:46 +08:00 · 2023-08-04 09:35:46 +08:00 · 3b2f7f222c
commit 3b2f7f222c
parent 7f1902d490
4 changed files with 79 additions and 60 deletions
--- a/src/compenents/select-attachment/index.tsx
+++ b/src/compenents/select-attachment/index.tsx
@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Row, Modal, Tabs, Spin } from "antd";
+import { Row, Modal, Tabs } from "antd";
 import styles from "./index.module.less";
 import { UploadCoursewareSub } from "../../compenents";
 import type { TabsProps } from "antd";
@ -13,13 +13,12 @@ interface PropsInterface {

 export const SelectAttachment = (props: PropsInterface) => {
  const [refresh, setRefresh] = useState(true);
-  const [init, setInit] = useState(true);
+
  const [tabKey, setTabKey] = useState(1);
  const [selectKeys, setSelectKeys] = useState<any>([]);
  const [selectVideos, setSelectVideos] = useState<any>([]);

  useEffect(() => {
-    setInit(true);
    setRefresh(!refresh);
  }, [props.open]);

@ -28,10 +27,6 @@ export const SelectAttachment = (props: PropsInterface) => {
      key: "1",
      label: `课件`,
      children: (
-        <div
-          className="float-left"
-          style={{ display: init ? "none" : "block" }}
-        >
        <UploadCoursewareSub
          label="课件"
          defaultCheckedList={props.defaultKeys}
@ -40,11 +35,7 @@ export const SelectAttachment = (props: PropsInterface) => {
            setSelectKeys(arr);
            setSelectVideos(videos);
          }}
-            onSuccess={() => {
-              setInit(false);
-            }}
        />
-        </div>
      ),
    },
  ];
@ -77,11 +68,6 @@ export const SelectAttachment = (props: PropsInterface) => {
          <Row>
            <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
          </Row>
-          {init && (
-            <div className="float-left text-center mt-30">
-              <Spin></Spin>
-            </div>
-          )}
        </Modal>
      ) : null}
    </>
--- a/src/compenents/select-resource/index.tsx
+++ b/src/compenents/select-resource/index.tsx
@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Row, Modal, Tabs, Spin } from "antd";
+import { Row, Modal, Tabs } from "antd";
 import styles from "./index.module.less";
 import { UploadVideoSub } from "../../compenents";
 import type { TabsProps } from "antd";
@ -13,13 +13,11 @@ interface PropsInterface {

 export const SelectResource = (props: PropsInterface) => {
  const [refresh, setRefresh] = useState(true);
-  const [init, setInit] = useState(true);
  const [tabKey, setTabKey] = useState(1);
  const [selectKeys, setSelectKeys] = useState<any>([]);
  const [selectVideos, setSelectVideos] = useState<any>([]);

  useEffect(() => {
-    setInit(true);
    setRefresh(!refresh);
  }, [props.open]);

@ -28,10 +26,7 @@ export const SelectResource = (props: PropsInterface) => {
      key: "1",
      label: `视频`,
      children: (
-        <div
-          className="float-left"
-          style={{ display: init ? "none" : "block" }}
-        >
+        <div className="float-left">
          <UploadVideoSub
            label="视频"
            defaultCheckedList={props.defaultKeys}
@ -40,9 +35,6 @@ export const SelectResource = (props: PropsInterface) => {
              setSelectKeys(arr);
              setSelectVideos(videos);
            }}
-            onSuccess={() => {
-              setInit(false);
-            }}
          />
        </div>
      ),
@ -77,11 +69,6 @@ export const SelectResource = (props: PropsInterface) => {
          <Row>
            <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
          </Row>
-          {init && (
-            <div className="float-left text-center mt-30">
-              <Spin></Spin>
-            </div>
-          )}
        </Modal>
      ) : null}
    </>
--- a/src/compenents/upload-courseware-sub/index.tsx
+++ b/src/compenents/upload-courseware-sub/index.tsx
@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Row, Col, Empty, Table } from "antd";
+import { Row, Col, Empty, Table, Spin } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import { resource } from "../../api";
 import styles from "./index.module.less";
@ -34,10 +34,10 @@ interface PropsInterface {
  label: string;
  open: boolean;
  onSelected: (arr: any[], videos: []) => void;
-  onSuccess: () => void;
 }

 export const UploadCoursewareSub = (props: PropsInterface) => {
+  const [init, setInit] = useState(true);
  const [category_ids, setCategoryIds] = useState<any>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [videoList, setVideoList] = useState<VideoItem[]>([]);
@ -50,6 +50,7 @@ export const UploadCoursewareSub = (props: PropsInterface) => {

  // 加载列表
  useEffect(() => {
+    setInit(true);
    getvideoList();
  }, [props.open, category_ids, refresh, page, size]);

@ -61,6 +62,7 @@ export const UploadCoursewareSub = (props: PropsInterface) => {

  // 获取列表
  const getvideoList = () => {
+    setLoading(true);
    let categoryIds = category_ids.join(",");
    resource
      .resourceList(
@ -76,9 +78,12 @@ export const UploadCoursewareSub = (props: PropsInterface) => {
        setTotal(res.data.result.total);
        setExistingTypes(res.data.existing_types);
        setVideoList(res.data.result.data);
-        props.onSuccess();
+        setLoading(false);
+        setInit(false);
      })
      .catch((err) => {
+        setLoading(false);
+        setInit(false);
        console.log("错误,", err);
      });
  };
@ -154,12 +159,22 @@ export const UploadCoursewareSub = (props: PropsInterface) => {
    <>
      <Row style={{ width: 752, minHeight: 520 }}>
        <Col span={7}>
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left"
+            style={{ display: init ? "none" : "block" }}
+          >
            <TreeCategory
              selected={[]}
              type="no-cate"
              text={props.label}
              onUpdate={(keys: any) => setCategoryIds(keys)}
            />
+          </div>
        </Col>
        <Col span={17}>
          <Row style={{ marginBottom: 24, paddingLeft: 10 }}>
@ -172,7 +187,15 @@ export const UploadCoursewareSub = (props: PropsInterface) => {
              ></UploadCoursewareButton>
            </Col>
          </Row>
-          <div className={styles["video-list"]}>
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className={styles["video-list"]}
+            style={{ display: init ? "none" : "block" }}
+          >
            {videoList.length === 0 && (
              <Col span={24} style={{ marginTop: 150 }}>
                <Empty description="暂无课件" />
--- a/src/compenents/upload-video-sub/index.tsx
+++ b/src/compenents/upload-video-sub/index.tsx
@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Row, Col, Empty, Table } from "antd";
+import { Row, Col, Empty, Table, Spin } from "antd";
 import type { ColumnsType } from "antd/es/table";
 import { resource } from "../../api";
 import styles from "./index.module.less";
@ -35,10 +35,10 @@ interface PropsInterface {
  label: string;
  open: boolean;
  onSelected: (arr: any[], videos: []) => void;
-  onSuccess: () => void;
 }

 export const UploadVideoSub = (props: PropsInterface) => {
+  const [init, setInit] = useState(true);
  const [category_ids, setCategoryIds] = useState<any>([]);
  const [loading, setLoading] = useState<boolean>(false);
  const [videoList, setVideoList] = useState<VideoItem[]>([]);
@ -51,6 +51,7 @@ export const UploadVideoSub = (props: PropsInterface) => {

  // 加载列表
  useEffect(() => {
+    setInit(true);
    getvideoList();
  }, [props.open, category_ids, refresh, page, size]);

@ -62,6 +63,7 @@ export const UploadVideoSub = (props: PropsInterface) => {

  // 获取列表
  const getvideoList = () => {
+    setLoading(true);
    let categoryIds = category_ids.join(",");
    resource
      .resourceList(page, size, "", "", "", "VIDEO", categoryIds)
@ -69,9 +71,12 @@ export const UploadVideoSub = (props: PropsInterface) => {
        setTotal(res.data.result.total);
        setVideoExtra(res.data.videos_extra);
        setVideoList(res.data.result.data);
-        props.onSuccess();
+        setLoading(false);
+        setInit(false);
      })
      .catch((err) => {
+        setLoading(false);
+        setInit(false);
        console.log("错误,", err);
      });
  };
@ -154,12 +159,22 @@ export const UploadVideoSub = (props: PropsInterface) => {
    <>
      <Row style={{ width: 752, minHeight: 520 }}>
        <Col span={7}>
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left"
+            style={{ display: init ? "none" : "block" }}
+          >
            <TreeCategory
              selected={[]}
              type="no-cate"
              text={props.label}
              onUpdate={(keys: any) => setCategoryIds(keys)}
            />
+          </div>
        </Col>
        <Col span={17}>
          <Row style={{ marginBottom: 24, paddingLeft: 10 }}>
@ -172,7 +187,15 @@ export const UploadVideoSub = (props: PropsInterface) => {
              ></UploadVideoButton>
            </Col>
          </Row>
-          <div className={styles["video-list"]}>
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className={styles["video-list"]}
+            style={{ display: init ? "none" : "block" }}
+          >
            {videoList.length === 0 && (
              <Col span={24} style={{ marginTop: 150 }}>
                <Empty description="暂无视频" />