yexuejc007/PlayEdu-backend
1
0
Fork 0
mirror of https://github.com/PlayEdu/backend synced 2025-06-23 07:22:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

几个页面添加组件增加loading

Browse Source
This commit is contained in:
unknown 2024-01-22 10:25:48 +08:00
parent 40e1dd03ad
commit 123c19126a
7 changed files with 149 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/pages/course/compenents/create.tsx
View File

@ -10,6 +10,7 @@ import {
message, message,
Image, Image,
TreeSelect, TreeSelect,
Spin,
} from "antd"; } from "antd";
import styles from "./create.module.less"; import styles from "./create.module.less";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
@ -52,6 +53,7 @@ export const CourseCreate: React.FC<PropInterface> = ({
const defaultThumb2 = courseDefaultThumbs[1]; const defaultThumb2 = courseDefaultThumbs[1];
const defaultThumb3 = courseDefaultThumbs[2]; const defaultThumb3 = courseDefaultThumbs[2];
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [init, setInit] = useState(true);
const [departments, setDepartments] = useState<Option[]>([]); const [departments, setDepartments] = useState<Option[]>([]);
const [categories, setCategories] = useState<Option[]>([]); const [categories, setCategories] = useState<Option[]>([]);
const [thumb, setThumb] = useState(""); const [thumb, setThumb] = useState("");
@ -71,9 +73,9 @@ export const CourseCreate: React.FC<PropInterface> = ({
const [attachments, setAttachments] = useState<number[]>([]); const [attachments, setAttachments] = useState<number[]>([]);
useEffect(() => { useEffect(() => {
setInit(true);
if (open) { if (open) {
getParams(); initData();
getCategory();
} }
}, [open, cateIds, depIds]); }, [open, cateIds, depIds]);
@ -96,43 +98,48 @@ export const CourseCreate: React.FC<PropInterface> = ({
setShowDrop(false); setShowDrop(false);
}, [form, open]); }, [form, open]);
const getParams = () => { const initData = async () => {
department.departmentList().then((res: any) => { await getParams();
const departments = res.data.departments; await getCategory();
const departCount: DepIdsModel = res.data.dep_user_count; setInit(false);
if (JSON.stringify(departments) !== "{}") { };
const new_arr: any = checkArr(departments, 0, departCount);
setDepartments(new_arr); const getParams = async () => {
} let res: any = await department.departmentList();
let type = "open"; const departments = res.data.departments;
if (depIds.length !== 0 && depIds[0] !== 0) { const departCount: DepIdsModel = res.data.dep_user_count;
type = "elective"; if (JSON.stringify(departments) !== "{}") {
let item = checkChild(res.data.departments, depIds[0]); const new_arr: any = checkArr(departments, 0, departCount);
let arr: any[] = []; setDepartments(new_arr);
if (item === undefined) { }
arr.push(depIds[0]); let type = "open";
} else if (item.parent_chain === "") { if (depIds.length !== 0 && depIds[0] !== 0) {
arr.push(depIds[0]); type = "elective";
} else { let item = checkChild(res.data.departments, depIds[0]);
let new_arr = item.parent_chain.split(","); let arr: any[] = [];
new_arr.map((num: any) => { if (item === undefined) {
arr.push(Number(num)); arr.push(depIds[0]);
}); } else if (item.parent_chain === "") {
arr.push(depIds[0]); arr.push(depIds[0]);
}
form.setFieldsValue({
dep_ids: arr,
});
} else { } else {
form.setFieldsValue({ let new_arr = item.parent_chain.split(",");
dep_ids: depIds, new_arr.map((num: any) => {
arr.push(Number(num));
}); });
arr.push(depIds[0]);
} }
form.setFieldsValue({ 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) => { const checkChild = (departments: any[], id: number) => {
@ -145,37 +152,36 @@ 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; const categories = res.data.categories;
if (JSON.stringify(categories) !== "{}") { if (JSON.stringify(categories) !== "{}") {
const new_arr: any = checkArr(categories, 0, null); const new_arr: any = checkArr(categories, 0, null);
setCategories(new_arr); setCategories(new_arr);
} }
if (cateIds.length !== 0 && cateIds[0] !== 0) { if (cateIds.length !== 0 && cateIds[0] !== 0) {
let item = checkChild(res.data.categories, cateIds[0]); let item = checkChild(res.data.categories, cateIds[0]);
let arr: any[] = []; let arr: any[] = [];
if (item === undefined) { if (item === undefined) {
arr.push(cateIds[0]); arr.push(cateIds[0]);
} else if (item.parent_chain === "") { } else if (item.parent_chain === "") {
arr.push(cateIds[0]); 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,
});
} else { } else {
form.setFieldsValue({ let new_arr = item.parent_chain.split(",");
category_ids: cateIds, 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) => { const getNewTitle = (title: any, id: number, counts: any) => {
@ -503,7 +509,15 @@ export const CourseCreate: React.FC<PropInterface> = ({
} }
width={634} 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 <SelectResource
defaultKeys={ defaultKeys={
chapterType == 0 ? hours : changeChapterHours(chapterHours) chapterType == 0 ? hours : changeChapterHours(chapterHours)

1
src/pages/course/compenents/update.tsx
View File

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

15
src/pages/department/compenents/create.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from "react"; 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 styles from "./create.module.less";
import { department } from "../../../api/index"; import { department } from "../../../api/index";
@ -19,11 +19,13 @@ export const DepartmentCreate: React.FC<PropInterface> = ({
onCancel, onCancel,
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [init, setInit] = useState(true);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [departments, setDepartments] = useState<any>([]); const [departments, setDepartments] = useState<any>([]);
const [parent_id, setParentId] = useState<number>(0); const [parent_id, setParentId] = useState<number>(0);
useEffect(() => { useEffect(() => {
setInit(true);
if (open) { if (open) {
getParams(); getParams();
} }
@ -54,6 +56,7 @@ export const DepartmentCreate: React.FC<PropInterface> = ({
}); });
setDepartments(new_arr); setDepartments(new_arr);
} }
setInit(false);
}); });
}; };
@ -125,7 +128,15 @@ export const DepartmentCreate: React.FC<PropInterface> = ({
maskClosable={false} maskClosable={false}
okButtonProps={{ loading: loading }} 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={form} form={form}
name="basic" name="basic"

15
src/pages/member/compenents/create.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react"; 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 styles from "./create.module.less";
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { user, department } from "../../../api/index"; import { user, department } from "../../../api/index";
@ -24,6 +24,7 @@ export const MemberCreate: React.FC<PropInterface> = ({
onCancel, onCancel,
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [init, setInit] = useState(true);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [departments, setDepartments] = useState<any>([]); const [departments, setDepartments] = useState<any>([]);
const memberDefaultAvatar = useSelector( const memberDefaultAvatar = useSelector(
@ -32,6 +33,7 @@ export const MemberCreate: React.FC<PropInterface> = ({
const [avatar, setAvatar] = useState<string>(memberDefaultAvatar); const [avatar, setAvatar] = useState<string>(memberDefaultAvatar);
useEffect(() => { useEffect(() => {
setInit(true);
if (open) { if (open) {
getParams(); getParams();
} }
@ -56,6 +58,7 @@ export const MemberCreate: React.FC<PropInterface> = ({
const new_arr: Option[] = checkArr(departments, 0); const new_arr: Option[] = checkArr(departments, 0);
setDepartments(new_arr); setDepartments(new_arr);
} }
setInit(false);
}); });
}; };
@ -125,7 +128,15 @@ export const MemberCreate: React.FC<PropInterface> = ({
maskClosable={false} maskClosable={false}
okButtonProps={{ loading: loading }} 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={form} form={form}
name="create-basic" name="create-basic"

15
src/pages/resource/resource-category/compenents/create.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from "react"; 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 styles from "./create.module.less";
import { resourceCategory } from "../../../../api/index"; import { resourceCategory } from "../../../../api/index";
@ -19,11 +19,13 @@ export const ResourceCategoryCreate: React.FC<PropInterface> = ({
onCancel, onCancel,
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [init, setInit] = useState(true);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [categories, setCategories] = useState<any>([]); const [categories, setCategories] = useState<any>([]);
const [parent_id, setParentId] = useState<number>(0); const [parent_id, setParentId] = useState<number>(0);
useEffect(() => { useEffect(() => {
setInit(true);
if (open) { if (open) {
getParams(); getParams();
} }
@ -54,6 +56,7 @@ export const ResourceCategoryCreate: React.FC<PropInterface> = ({
}); });
setCategories(new_arr); setCategories(new_arr);
} }
setInit(false);
}); });
}; };
@ -125,7 +128,15 @@ export const ResourceCategoryCreate: React.FC<PropInterface> = ({
onCancel={() => onCancel()} onCancel={() => onCancel()}
okButtonProps={{ loading: loading }} 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={form} form={form}
name="basic" name="basic"

15
src/pages/system/administrator/compenents/create.tsx
View File

@ -1,5 +1,5 @@
import React, { useState, useEffect } from "react"; 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 styles from "./create.module.less";
import { adminUser } from "../../../../api/index"; import { adminUser } from "../../../../api/index";
@ -22,10 +22,12 @@ export const SystemAdministratorCreate: React.FC<PropInterface> = ({
onCancel, onCancel,
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [init, setInit] = useState(true);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [roles, setRoles] = useState<selRoleModel[]>([]); const [roles, setRoles] = useState<selRoleModel[]>([]);
useEffect(() => { useEffect(() => {
setInit(true);
if (open) { if (open) {
getParams(); getParams();
} }
@ -56,6 +58,7 @@ export const SystemAdministratorCreate: React.FC<PropInterface> = ({
}); });
} }
setRoles(arr); setRoles(arr);
setInit(false);
}); });
}; };
@ -110,7 +113,15 @@ export const SystemAdministratorCreate: React.FC<PropInterface> = ({
maskClosable={false} maskClosable={false}
okButtonProps={{ loading: loading }} 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={form} form={form}
name="basic" name="basic"

24
src/pages/system/adminroles/compenents/create.tsx
View File

@ -1,5 +1,14 @@
import React, { useState, useEffect } from "react"; 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 styles from "./create.module.less";
import { adminRole } from "../../../../api/index"; import { adminRole } from "../../../../api/index";
@ -19,11 +28,13 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
onCancel, onCancel,
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [init, setInit] = useState(true);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [permissions, setPermissions] = useState<Option[]>([]); const [permissions, setPermissions] = useState<Option[]>([]);
const [actions, setActions] = useState<Option[]>([]); const [actions, setActions] = useState<Option[]>([]);
useEffect(() => { useEffect(() => {
setInit(true);
if (open) { if (open) {
getParams(); getParams();
} }
@ -89,6 +100,7 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
} }
setPermissions(arr); setPermissions(arr);
setActions(arr2); setActions(arr2);
setInit(false);
}); });
}; };
@ -148,7 +160,15 @@ export const SystemAdminrolesCreate: React.FC<PropInterface> = ({
} }
width={634} 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={form} form={form}
name="adminroles-create" name="adminroles-create"