各编辑页面增加loading

src/pages/course/compenents/update.tsx

@@ -7,9 +7,9 @@ import {
   Form,
   TreeSelect,
   Input,
-  Modal,
   message,
   Image,
+  Spin,
 } from "antd";
 import styles from "./update.module.less";
 import { useSelector } from "react-redux";
@@ -28,6 +28,7 @@ export const CourseUpdate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const courseDefaultThumbs = useSelector(
     (state: any) => state.systemConfig.value.courseDefaultThumbs
   );
@@ -41,18 +42,16 @@ export const CourseUpdate: React.FC<PropInterface> = ({
   const [type, setType] = useState<string>("open");
 
   useEffect(() => {
-    if (open) {
+    setInit(true);
-      getParams();
-      getCategory();
-    }
-  }, [form, open]);
-
-  useEffect(() => {
     if (id === 0) {
       return;
     }
-    getDetail();
+    if (open) {
-  }, [id, open]);
+      getParams();
+      getCategory();
+      getDetail();
+    }
+  }, [form, id, open]);
 
   const getCategory = () => {
     course.createCourse().then((res: any) => {
@@ -91,6 +90,7 @@ export const CourseUpdate: React.FC<PropInterface> = ({
       });
       setType(type);
       setThumb(res.data.course.thumb);
+      setInit(false);
     });
   };
 
@@ -185,7 +185,15 @@ export const CourseUpdate: 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="update-basic"

src/pages/department/compenents/update.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useEffect } from "react";
-import { Modal, Form, Input, Cascader, message } from "antd";
+import { Modal, Form, Input, Cascader, message, Spin } from "antd";
 import styles from "./update.module.less";
 import { department } from "../../../api/index";
 
@@ -21,12 +21,14 @@ export const DepartmentUpdate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState<boolean>(true);
   const [departments, setDepartments] = useState<any>([]);
   const [parent_id, setParentId] = useState<number>(0);
   const [sort, setSort] = useState<number>(0);
 
   useEffect(() => {
+    setInit(true);
     if (open) {
       getParams();
     }
@@ -64,6 +66,7 @@ export const DepartmentUpdate: React.FC<PropInterface> = ({
       });
       setParentId(data.parent_id);
       setSort(data.sort);
+      setInit(false);
     });
   };
 
@@ -140,7 +143,15 @@ export const DepartmentUpdate: React.FC<PropInterface> = ({
           onCancel={() => onCancel()}
           maskClosable={false}
         >
-          <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/update.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 "./update.module.less";
 import { useSelector } from "react-redux";
 import { user, department } from "../../../api/index";
@@ -24,6 +24,7 @@ export const MemberUpdate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState<boolean>(true);
   const [departments, setDepartments] = useState<any>([]);
   const memberDefaultAvatar = useSelector(
@@ -32,20 +33,18 @@ export const MemberUpdate: React.FC<PropInterface> = ({
   const [avatar, setAvatar] = useState<string>(memberDefaultAvatar);
 
   useEffect(() => {
+    setInit(true);
     if (id == 0) {
       return;
     }
-    getDetail();
-  }, [id, open]);
-
-  useEffect(() => {
     if (open) {
       getParams();
       form.setFieldsValue({
         password: "",
       });
+      getDetail();
     }
-  }, [form, open]);
+  }, [form, id, open]);
 
   const getParams = () => {
     if (id === 0) {
@@ -71,6 +70,7 @@ export const MemberUpdate: React.FC<PropInterface> = ({
         idCard: user.id_card,
         dep_ids: res.data.dep_ids,
       });
+      setInit(false);
     });
   };
 
@@ -145,7 +145,15 @@ export const MemberUpdate: React.FC<PropInterface> = ({
           onCancel={() => onCancel()}
           maskClosable={false}
         >
-          <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="update-basic"

src/pages/resource/courseware/compenents/update-dialog/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Modal, Form, Input, message, TreeSelect } from "antd";
+import { Modal, Form, Input, message, TreeSelect, Spin } from "antd";
 import { resource, resourceCategory } from "../../../../../api/index";
 
 interface PropInterface {
@@ -17,9 +17,11 @@ export const CoursewareUpdateDialog: React.FC<PropInterface> = ({
 }) => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState<boolean>(true);
+  const [init, setInit] = useState(true);
   const [categories, setCategories] = useState<any>([]);
 
   useEffect(() => {
+    setInit(true);
     if (id === 0) {
       return;
     }
@@ -27,7 +29,7 @@ export const CoursewareUpdateDialog: React.FC<PropInterface> = ({
       getCategory();
       getDetail();
     }
-  }, [id, open]);
+  }, [form, id, open]);
 
   const getCategory = () => {
     resourceCategory.resourceCategoryList().then((res: any) => {
@@ -46,6 +48,7 @@ export const CoursewareUpdateDialog: React.FC<PropInterface> = ({
         name: data.name,
         category_id: res.data.category_ids,
       });
+      setInit(false);
     });
   };
 
@@ -107,7 +110,15 @@ export const CoursewareUpdateDialog: React.FC<PropInterface> = ({
           onCancel={() => onCancel()}
           maskClosable={false}
         >
-          <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="videos-update"

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

@@ -1,5 +1,5 @@
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useEffect } from "react";
-import { Modal, Form, Input, Cascader, message } from "antd";
+import { Modal, Form, Input, Cascader, message, Spin } from "antd";
 import styles from "./update.module.less";
 import { resourceCategory } from "../../../../api/index";
 
@@ -21,12 +21,14 @@ export const ResourceCategoryUpdate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState<boolean>(true);
   const [categories, setCategories] = useState<any>([]);
   const [parent_id, setParentId] = useState<number>(0);
   const [sort, setSort] = useState<number>(0);
 
   useEffect(() => {
+    setInit(true);
     if (open) {
       getParams();
     }
@@ -64,6 +66,7 @@ export const ResourceCategoryUpdate: React.FC<PropInterface> = ({
       });
       setParentId(data.parent_id);
       setSort(data.sort);
+      setInit(false);
     });
   };
 
@@ -138,7 +141,15 @@ export const ResourceCategoryUpdate: React.FC<PropInterface> = ({
           onCancel={() => onCancel()}
           maskClosable={false}
         >
-          <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/resource/videos/compenents/update-dialog/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Modal, Form, Input, message, TreeSelect } from "antd";
+import { Modal, Form, Input, message, TreeSelect, Spin } from "antd";
 import { resource, resourceCategory } from "../../../../../api/index";
 
 interface PropInterface {
@@ -17,9 +17,11 @@ export const VideosUpdateDialog: React.FC<PropInterface> = ({
 }) => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState<boolean>(true);
+  const [init, setInit] = useState(true);
   const [categories, setCategories] = useState<any>([]);
 
   useEffect(() => {
+    setInit(true);
     if (id === 0) {
       return;
     }
@@ -27,7 +29,7 @@ export const VideosUpdateDialog: React.FC<PropInterface> = ({
       getCategory();
       getDetail();
     }
-  }, [id, open]);
+  }, [form, id, open]);
 
   const getCategory = () => {
     resourceCategory.resourceCategoryList().then((res: any) => {
@@ -46,6 +48,7 @@ export const VideosUpdateDialog: React.FC<PropInterface> = ({
         name: data.name,
         category_id: res.data.category_ids,
       });
+      setInit(false);
     });
   };
 
@@ -100,7 +103,15 @@ export const VideosUpdateDialog: React.FC<PropInterface> = ({
           onCancel={() => onCancel()}
           maskClosable={false}
         >
-          <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="videos-update"

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Modal, Form, Input, Select, Switch, message } from "antd";
+import { Modal, Form, Input, Select, Switch, message, Spin } from "antd";
 import styles from "./update.module.less";
 import { adminUser } from "../../../../api/index";
 
@@ -17,6 +17,7 @@ export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState<boolean>(true);
   const [roles, setRoles] = useState<any>([]);
 
@@ -27,6 +28,7 @@ export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
   }, [refresh, open]);
 
   useEffect(() => {
+    setInit(true);
     if (id === 0) {
       return;
     }
@@ -58,6 +60,7 @@ export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
         is_ban_login: user.is_ban_login,
         roleIds: res.data.role_ids,
       });
+      setInit(false);
     });
   };
 
@@ -104,7 +107,15 @@ export const SystemAdministratorUpdate: React.FC<PropInterface> = ({
           onCancel={() => onCancel()}
           maskClosable={false}
         >
-          <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/update.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 "./update.module.less";
 import { adminRole } from "../../../../api/index";
 
@@ -21,6 +30,7 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
   onCancel,
 }) => {
   const [form] = Form.useForm();
+  const [init, setInit] = useState(true);
   const [loading, setLoading] = useState<boolean>(true);
   const [permissions, setPermissions] = useState<any>([]);
   const [actions, setActions] = useState<any>([]);
@@ -32,6 +42,7 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
   }, [open]);
 
   useEffect(() => {
+    setInit(true);
     if (id === undefined) {
       return;
     }
@@ -136,6 +147,7 @@ export const SystemAdminrolesUpdate: React.FC<PropInterface> = ({
         permission_ids: res.data.perm_data,
         action_ids: res.data.perm_action,
       });
+      setInit(false);
     });
   };
 
@@ -181,7 +193,15 @@ export const SystemAdminrolesUpdate: 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-update"