各编辑页面增加loading

This commit is contained in:
unknown
2023-08-03 11:53:30 +08:00
parent dbe3671901
commit e35700684d
8 changed files with 125 additions and 34 deletions

View File

@@ -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"

View File

@@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect } from "react";
import { Modal, Form, Input, Cascader, message } from "antd";
import React, { useState, useEffect } from "react";
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"

View File

@@ -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"