几个页面添加组件增加loading

2025-06-22 14:46:50 +08:00 · 2024-01-22 10:25:48 +08:00 · 2024-01-22 10:25:48 +08:00 · 123c19126a
commit 123c19126a
parent 40e1dd03ad
7 changed files with 149 additions and 72 deletions
--- a/src/pages/course/compenents/create.tsx
+++ b/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();
-      getCategory();
+      initData();
    }
  }, [open, cateIds, depIds]);

@ -96,43 +98,48 @@ export const CourseCreate: React.FC<PropInterface> = ({
    setShowDrop(false);
  }, [form, open]);

-  const getParams = () => {
-    department.departmentList().then((res: any) => {
-      const departments = res.data.departments;
-      const departCount: DepIdsModel = res.data.dep_user_count;
-      if (JSON.stringify(departments) !== "{}") {
-        const new_arr: any = checkArr(departments, 0, departCount);
-        setDepartments(new_arr);
-      }
-      let type = "open";
-      if (depIds.length !== 0 && depIds[0] !== 0) {
-        type = "elective";
-        let item = checkChild(res.data.departments, depIds[0]);
-        let arr: any[] = [];
-        if (item === undefined) {
-          arr.push(depIds[0]);
-        } else if (item.parent_chain === "") {
-          arr.push(depIds[0]);
-        } else {
-          let new_arr = item.parent_chain.split(",");
-          new_arr.map((num: any) => {
-            arr.push(Number(num));
-          });
-          arr.push(depIds[0]);
-        }
-        form.setFieldsValue({
-          dep_ids: arr,
-        });
+  const initData = async () => {
+    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) !== "{}") {
+      const new_arr: any = checkArr(departments, 0, departCount);
+      setDepartments(new_arr);
+    }
+    let type = "open";
+    if (depIds.length !== 0 && depIds[0] !== 0) {
+      type = "elective";
+      let item = checkChild(res.data.departments, depIds[0]);
+      let arr: any[] = [];
+      if (item === undefined) {
+        arr.push(depIds[0]);
+      } else if (item.parent_chain === "") {
+        arr.push(depIds[0]);
      } else {
-        form.setFieldsValue({
-          dep_ids: depIds,
+        let new_arr = item.parent_chain.split(",");
+        new_arr.map((num: any) => {
+          arr.push(Number(num));
        });
+        arr.push(depIds[0]);
      }
      form.setFieldsValue({
-        type: type,
+        dep_ids: arr,
      });
-      setType(type);
+    } else {
+      form.setFieldsValue({
+        dep_ids: depIds,
+      });
+    }
+    form.setFieldsValue({
+      type: type,
    });
+    setType(type);
  };

  const checkChild = (departments: any[], id: number) => {
@ -145,37 +152,36 @@ export const CourseCreate: React.FC<PropInterface> = ({
    }
  };

-  const getCategory = () => {
-    course.createCourse().then((res: any) => {
-      const categories = res.data.categories;
-      if (JSON.stringify(categories) !== "{}") {
-        const new_arr: any = checkArr(categories, 0, null);
-        setCategories(new_arr);
-      }
+  const getCategory = async () => {
+    let res: any = await course.createCourse();
+    const categories = res.data.categories;
+    if (JSON.stringify(categories) !== "{}") {
+      const new_arr: any = checkArr(categories, 0, null);
+      setCategories(new_arr);
+    }

-      if (cateIds.length !== 0 && cateIds[0] !== 0) {
-        let item = checkChild(res.data.categories, cateIds[0]);
-        let arr: any[] = [];
-        if (item === undefined) {
-          arr.push(cateIds[0]);
-        } else if (item.parent_chain === "") {
-          arr.push(cateIds[0]);
-        } else {
-          let new_arr = item.parent_chain.split(",");
-          new_arr.map((num: any) => {
-            arr.push(Number(num));
-          });
-          arr.push(cateIds[0]);
-        }
-        form.setFieldsValue({
-          category_ids: arr,
-        });
+    if (cateIds.length !== 0 && cateIds[0] !== 0) {
+      let item = checkChild(res.data.categories, cateIds[0]);
+      let arr: any[] = [];
+      if (item === undefined) {
+        arr.push(cateIds[0]);
+      } else if (item.parent_chain === "") {
+        arr.push(cateIds[0]);
      } else {
-        form.setFieldsValue({
-          category_ids: cateIds,
+        let new_arr = item.parent_chain.split(",");
+        new_arr.map((num: any) => {
+          arr.push(Number(num));
        });
+        arr.push(cateIds[0]);
      }
-    });
+      form.setFieldsValue({
+        category_ids: arr,
+      });
+    } else {
+      form.setFieldsValue({
+        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)
--- a/src/pages/course/compenents/update.tsx
+++ b/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"));
    });
  };

--- a/src/pages/department/compenents/create.tsx
+++ b/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"
--- a/src/pages/member/compenents/create.tsx
+++ b/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"
--- a/src/pages/resource/resource-category/compenents/create.tsx
+++ b/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"
--- a/src/pages/system/administrator/compenents/create.tsx
+++ b/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"
--- a/src/pages/system/adminroles/compenents/create.tsx
+++ b/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"