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

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}
     </>

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
+        <div className="float-left">
-          className="float-left"
-          style={{ display: init ? "none" : "block" }}
-        >
           <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}
     </>

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="暂无课件" />

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="暂无视频" />