课件、课时选择弹窗增加loading

src/compenents/select-attachment/index.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Row, Modal, Tabs } from "antd";
+import { Row, Modal, Tabs, Spin } from "antd";
 import styles from "./index.module.less";
 import { UploadCoursewareSub } from "../../compenents";
 import type { TabsProps } from "antd";
@@ -13,11 +13,13 @@ 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]);
 
@@ -26,7 +28,10 @@ export const SelectAttachment = (props: PropsInterface) => {
       key: "1",
       label: `课件`,
       children: (
-        <div className="float-left">
+        <div
+          className="float-left"
+          style={{ display: init ? "none" : "block" }}
+        >
           <UploadCoursewareSub
             label="课件"
             defaultCheckedList={props.defaultKeys}
@@ -35,6 +40,9 @@ export const SelectAttachment = (props: PropsInterface) => {
               setSelectKeys(arr);
               setSelectVideos(videos);
             }}
+            onSuccess={() => {
+              setInit(false);
+            }}
           />
         </div>
       ),
@@ -69,6 +77,11 @@ 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 } from "antd";
+import { Row, Modal, Tabs, Spin } from "antd";
 import styles from "./index.module.less";
 import { UploadVideoSub } from "../../compenents";
 import type { TabsProps } from "antd";
@@ -13,11 +13,13 @@ 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]);
 
@@ -26,7 +28,10 @@ export const SelectResource = (props: PropsInterface) => {
       key: "1",
       label: `视频`,
       children: (
-        <div className="float-left">
+        <div
+          className="float-left"
+          style={{ display: init ? "none" : "block" }}
+        >
           <UploadVideoSub
             label="视频"
             defaultCheckedList={props.defaultKeys}
@@ -35,6 +40,9 @@ export const SelectResource = (props: PropsInterface) => {
               setSelectKeys(arr);
               setSelectVideos(videos);
             }}
+            onSuccess={() => {
+              setInit(false);
+            }}
           />
         </div>
       ),
@@ -69,6 +77,11 @@ 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

@@ -34,6 +34,7 @@ interface PropsInterface {
   label: string;
   open: boolean;
   onSelected: (arr: any[], videos: []) => void;
+  onSuccess: () => void;
 }
 
 export const UploadCoursewareSub = (props: PropsInterface) => {
@@ -75,6 +76,7 @@ export const UploadCoursewareSub = (props: PropsInterface) => {
         setTotal(res.data.result.total);
         setExistingTypes(res.data.existing_types);
         setVideoList(res.data.result.data);
+        props.onSuccess();
       })
       .catch((err) => {
         console.log("错误,", err);

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

@@ -35,6 +35,7 @@ interface PropsInterface {
   label: string;
   open: boolean;
   onSelected: (arr: any[], videos: []) => void;
+  onSuccess: () => void;
 }
 
 export const UploadVideoSub = (props: PropsInterface) => {
@@ -68,6 +69,7 @@ export const UploadVideoSub = (props: PropsInterface) => {
         setTotal(res.data.result.total);
         setVideoExtra(res.data.videos_extra);
         setVideoList(res.data.result.data);
+        props.onSuccess();
       })
       .catch((err) => {
         console.log("错误,", err);

src/index.less

@@ -189,6 +189,10 @@ code {
   flex: 1;
 }
 
+.text-center {
+  text-align: center;
+}
+
 .c-admin {
   font-size: 14px;
   font-weight: 400;