几个页面添加组件增加loading

src/pages/course/compenents/create.tsx

@@ -10,6 +10,7 @@ import {
   message,
   Image,
   TreeSelect,
+  Spin,
 } from "antd";
 import styles from "./create.module.less";
 import { useSelector } from "react-redux";
@@ -52,6 +53,7 @@ export const CourseCreate: React.FC<PropInterface> = ({
   const defaultThumb2 = courseDefaultThumbs[1];
   const defaultThumb3 = courseDefaultThumbs[2];
   const [loading, setLoading] = useState(false);
+  const [init, setInit] = useState(true);
   const [departments, setDepartments] = useState<Option[]>([]);
   const [categories, setCategories] = useState<Option[]>([]);
   const [thumb, setThumb] = useState("");
@@ -71,9 +73,9 @@ export const CourseCreate: React.FC<PropInterface> = ({
   const [attachments, setAttachments] = useState<number[]>([]);
 
   useEffect(() => {
+    setInit(true);
     if (open) {
-      getParams();
+      initData();
-      getCategory();
     }
   }, [open, cateIds, depIds]);
 
@@ -96,8 +98,14 @@ export const CourseCreate: React.FC<PropInterface> = ({
     setShowDrop(false);
   }, [form, open]);
 
-  const getParams = () => {
+  const initData = async () => {
-    department.departmentList().then((res: any) => {
+    await getParams();
+    await getCategory();
+    setInit(false);
+  };
+
+  const getParams = async () => {
+    let res: any = await department.departmentList();
     const departments = res.data.departments;
     const departCount: DepIdsModel = res.data.dep_user_count;
     if (JSON.stringify(departments) !== "{}") {
@@ -132,7 +140,6 @@ export const CourseCreate: React.FC<PropInterface> = ({
       type: type,
     });
     setType(type);
-    });
   };
 
   const checkChild = (departments: any[], id: number) => {
@@ -145,8 +152,8 @@ export const CourseCreate: React.FC<PropInterface> = ({
     }
   };
 
-  const getCategory = () => {
+  const getCategory = async () => {
-    course.createCourse().then((res: any) => {
+    let res: any = await course.createCourse();
     const categories = res.data.categories;
     if (JSON.stringify(categories) !== "{}") {
       const new_arr: any = checkArr(categories, 0, null);
@@ -175,7 +182,6 @@ export const CourseCreate: React.FC<PropInterface> = ({
         category_ids: cateIds,
       });
     }
-    });
   };
 
   const getNewTitle = (title: any, id: number, counts: any) => {
@@ -503,7 +509,15 @@ export const CourseCreate: React.FC<PropInterface> = ({
           }
           width={634}
         >
-          <div className="float-left mt-24">
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left mt-24"
+            style={{ display: init ? "none" : "block" }}
+          >
             <SelectResource
               defaultKeys={
                 chapterType == 0 ? hours : changeChapterHours(chapterHours)

src/pages/course/compenents/update.tsx

@@ -103,7 +103,6 @@ export const CourseUpdate: React.FC<PropInterface> = ({
       setType(type);
       setThumb(res.data.course.thumb);
       setInit(false);
-      console.log(dayjs(res.data.course.published_at, "YYYY-MM-DD HH:mm:ss"));
     });
   };
 

src/pages/department/compenents/create.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import { Modal, Form, Input, Cascader, message } from "antd";
+import { Modal, Form, Input, Cascader, message, Spin } from "antd";
 import styles from "./create.module.less";
 import { department } from "../../../api/index";
 
@@ -19,11 +19,13 @@ export const DepartmentCreate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState(false);
   const [departments, setDepartments] = useState<any>([]);
   const [parent_id, setParentId] = useState<number>(0);
 
   useEffect(() => {
+    setInit(true);
     if (open) {
       getParams();
     }
@@ -54,6 +56,7 @@ export const DepartmentCreate: React.FC<PropInterface> = ({
         });
         setDepartments(new_arr);
       }
+      setInit(false);
     });
   };
 
@@ -125,7 +128,15 @@ export const DepartmentCreate: React.FC<PropInterface> = ({
           maskClosable={false}
           okButtonProps={{ loading: loading }}
         >
-          <div className="float-left mt-24">
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left mt-24"
+            style={{ display: init ? "none" : "block" }}
+          >
             <Form
               form={form}
               name="basic"

src/pages/member/compenents/create.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Modal, Form, TreeSelect, Input, message } from "antd";
+import { Modal, Form, TreeSelect, Input, message, Spin } from "antd";
 import styles from "./create.module.less";
 import { useSelector } from "react-redux";
 import { user, department } from "../../../api/index";
@@ -24,6 +24,7 @@ export const MemberCreate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState(false);
   const [departments, setDepartments] = useState<any>([]);
   const memberDefaultAvatar = useSelector(
@@ -32,6 +33,7 @@ export const MemberCreate: React.FC<PropInterface> = ({
   const [avatar, setAvatar] = useState<string>(memberDefaultAvatar);
 
   useEffect(() => {
+    setInit(true);
     if (open) {
       getParams();
     }
@@ -56,6 +58,7 @@ export const MemberCreate: React.FC<PropInterface> = ({
         const new_arr: Option[] = checkArr(departments, 0);
         setDepartments(new_arr);
       }
+      setInit(false);
     });
   };
 
@@ -125,7 +128,15 @@ export const MemberCreate: React.FC<PropInterface> = ({
           maskClosable={false}
           okButtonProps={{ loading: loading }}
         >
-          <div className="member-form float-left mt-24">
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left mt-24"
+            style={{ display: init ? "none" : "block" }}
+          >
             <Form
               form={form}
               name="create-basic"

src/pages/resource/resource-category/compenents/create.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
-import { Modal, Form, Input, Cascader, message } from "antd";
+import { Modal, Form, Input, Cascader, message, Spin } from "antd";
 import styles from "./create.module.less";
 import { resourceCategory } from "../../../../api/index";
 
@@ -19,11 +19,13 @@ export const ResourceCategoryCreate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState(false);
   const [categories, setCategories] = useState<any>([]);
   const [parent_id, setParentId] = useState<number>(0);
 
   useEffect(() => {
+    setInit(true);
     if (open) {
       getParams();
     }
@@ -54,6 +56,7 @@ export const ResourceCategoryCreate: React.FC<PropInterface> = ({
         });
         setCategories(new_arr);
       }
+      setInit(false);
     });
   };
 
@@ -125,7 +128,15 @@ export const ResourceCategoryCreate: React.FC<PropInterface> = ({
           onCancel={() => onCancel()}
           okButtonProps={{ loading: loading }}
         >
-          <div className="float-left mt-24">
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left mt-24"
+            style={{ display: init ? "none" : "block" }}
+          >
             <Form
               form={form}
               name="basic"

src/pages/system/administrator/compenents/create.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Modal, Select, Switch, Form, Input, message } from "antd";
+import { Modal, Select, Switch, Form, Input, message, Spin } from "antd";
 import styles from "./create.module.less";
 import { adminUser } from "../../../../api/index";
 
@@ -22,10 +22,12 @@ export const SystemAdministratorCreate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState(false);
   const [roles, setRoles] = useState<selRoleModel[]>([]);
 
   useEffect(() => {
+    setInit(true);
     if (open) {
       getParams();
     }
@@ -56,6 +58,7 @@ export const SystemAdministratorCreate: React.FC<PropInterface> = ({
         });
       }
       setRoles(arr);
+      setInit(false);
     });
   };
 
@@ -110,7 +113,15 @@ export const SystemAdministratorCreate: React.FC<PropInterface> = ({
           maskClosable={false}
           okButtonProps={{ loading: loading }}
         >
-          <div className="float-left mt-24">
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left mt-24"
+            style={{ display: init ? "none" : "block" }}
+          >
             <Form
               form={form}
               name="basic"

src/pages/system/adminroles/compenents/create.tsx

@@ -1,5 +1,14 @@
 import React, { useState, useEffect } from "react";
-import { Drawer, TreeSelect, Space, Button, Form, Input, message } from "antd";
+import {
+  Drawer,
+  TreeSelect,
+  Space,
+  Button,
+  Form,
+  Input,
+  message,
+  Spin,
+} from "antd";
 import styles from "./create.module.less";
 import { adminRole } from "../../../../api/index";
 
@@ -19,11 +28,13 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState(false);
   const [permissions, setPermissions] = useState<Option[]>([]);
   const [actions, setActions] = useState<Option[]>([]);
 
   useEffect(() => {
+    setInit(true);
     if (open) {
       getParams();
     }
@@ -89,6 +100,7 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
       }
       setPermissions(arr);
       setActions(arr2);
+      setInit(false);
     });
   };
 
@@ -148,7 +160,15 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
           }
           width={634}
         >
-          <div className="float-left mt-24">
+          {init && (
+            <div className="float-left text-center mt-30">
+              <Spin></Spin>
+            </div>
+          )}
+          <div
+            className="float-left mt-24"
+            style={{ display: init ? "none" : "block" }}
+          >
             <Form
               form={form}
               name="adminroles-create"