mirror of
https://github.com/PlayEdu/backend
synced 2025-06-28 20:52:49 +08:00
选择课时、课件弹窗组件loading加载逻辑优化
This commit is contained in:
unknown
parent
7f1902d490
commit
3b2f7f222c
@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Row, Modal, Tabs, Spin } from "antd";
|
||||
import { Row, Modal, Tabs } from "antd";
|
||||
import styles from "./index.module.less";
|
||||
import { UploadCoursewareSub } from "../../compenents";
|
||||
import type { TabsProps } from "antd";
|
||||
@ -13,13 +13,12 @@ interface PropsInterface {
|
||||
|
||||
export const SelectAttachment = (props: PropsInterface) => {
|
||||
const [refresh, setRefresh] = useState(true);
|
||||
const [init, setInit] = useState(true);
|
||||
|
||||
const [tabKey, setTabKey] = useState(1);
|
||||
const [selectKeys, setSelectKeys] = useState<any>([]);
|
||||
const [selectVideos, setSelectVideos] = useState<any>([]);
|
||||
|
||||
useEffect(() => {
|
||||
setInit(true);
|
||||
setRefresh(!refresh);
|
||||
}, [props.open]);
|
||||
|
||||
@ -28,23 +27,15 @@ export const SelectAttachment = (props: PropsInterface) => {
|
||||
key: "1",
|
||||
label: `课件`,
|
||||
children: (
|
||||
<div
|
||||
className="float-left"
|
||||
style={{ display: init ? "none" : "block" }}
|
||||
>
|
||||
<UploadCoursewareSub
|
||||
label="课件"
|
||||
defaultCheckedList={props.defaultKeys}
|
||||
open={refresh}
|
||||
onSelected={(arr: any[], videos: any[]) => {
|
||||
setSelectKeys(arr);
|
||||
setSelectVideos(videos);
|
||||
}}
|
||||
onSuccess={() => {
|
||||
setInit(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<UploadCoursewareSub
|
||||
label="课件"
|
||||
defaultCheckedList={props.defaultKeys}
|
||||
open={refresh}
|
||||
onSelected={(arr: any[], videos: any[]) => {
|
||||
setSelectKeys(arr);
|
||||
setSelectVideos(videos);
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
@ -77,11 +68,6 @@ export const SelectAttachment = (props: PropsInterface) => {
|
||||
<Row>
|
||||
<Tabs defaultActiveKey="1" items={items} onChange={onChange} />
|
||||
</Row>
|
||||
{init && (
|
||||
<div className="float-left text-center mt-30">
|
||||
<Spin></Spin>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
) : null}
|
||||
</>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Row, Modal, Tabs, Spin } from "antd";
|
||||
import { Row, Modal, Tabs } from "antd";
|
||||
import styles from "./index.module.less";
|
||||
import { UploadVideoSub } from "../../compenents";
|
||||
import type { TabsProps } from "antd";
|
||||
@ -13,13 +13,11 @@ interface PropsInterface {
|
||||
|
||||
export const SelectResource = (props: PropsInterface) => {
|
||||
const [refresh, setRefresh] = useState(true);
|
||||
const [init, setInit] = useState(true);
|
||||
const [tabKey, setTabKey] = useState(1);
|
||||
const [selectKeys, setSelectKeys] = useState<any>([]);
|
||||
const [selectVideos, setSelectVideos] = useState<any>([]);
|
||||
|
||||
useEffect(() => {
|
||||
setInit(true);
|
||||
setRefresh(!refresh);
|
||||
}, [props.open]);
|
||||
|
||||
@ -28,10 +26,7 @@ export const SelectResource = (props: PropsInterface) => {
|
||||
key: "1",
|
||||
label: `视频`,
|
||||
children: (
|
||||
<div
|
||||
className="float-left"
|
||||
style={{ display: init ? "none" : "block" }}
|
||||
>
|
||||
<div className="float-left">
|
||||
<UploadVideoSub
|
||||
label="视频"
|
||||
defaultCheckedList={props.defaultKeys}
|
||||
@ -40,9 +35,6 @@ export const SelectResource = (props: PropsInterface) => {
|
||||
setSelectKeys(arr);
|
||||
setSelectVideos(videos);
|
||||
}}
|
||||
onSuccess={() => {
|
||||
setInit(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
@ -77,11 +69,6 @@ export const SelectResource = (props: PropsInterface) => {
|
||||
<Row>
|
||||
<Tabs defaultActiveKey="1" items={items} onChange={onChange} />
|
||||
</Row>
|
||||
{init && (
|
||||
<div className="float-left text-center mt-30">
|
||||
<Spin></Spin>
|
||||
</div>
|
||||
)}
|
||||
</Modal>
|
||||
) : null}
|
||||
</>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Row, Col, Empty, Table } from "antd";
|
||||
import { Row, Col, Empty, Table, Spin } from "antd";
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import { resource } from "../../api";
|
||||
import styles from "./index.module.less";
|
||||
@ -34,10 +34,10 @@ interface PropsInterface {
|
||||
label: string;
|
||||
open: boolean;
|
||||
onSelected: (arr: any[], videos: []) => void;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
export const UploadCoursewareSub = (props: PropsInterface) => {
|
||||
const [init, setInit] = useState(true);
|
||||
const [category_ids, setCategoryIds] = useState<any>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [videoList, setVideoList] = useState<VideoItem[]>([]);
|
||||
@ -50,6 +50,7 @@ export const UploadCoursewareSub = (props: PropsInterface) => {
|
||||
|
||||
// 加载列表
|
||||
useEffect(() => {
|
||||
setInit(true);
|
||||
getvideoList();
|
||||
}, [props.open, category_ids, refresh, page, size]);
|
||||
|
||||
@ -61,6 +62,7 @@ export const UploadCoursewareSub = (props: PropsInterface) => {
|
||||
|
||||
// 获取列表
|
||||
const getvideoList = () => {
|
||||
setLoading(true);
|
||||
let categoryIds = category_ids.join(",");
|
||||
resource
|
||||
.resourceList(
|
||||
@ -76,9 +78,12 @@ export const UploadCoursewareSub = (props: PropsInterface) => {
|
||||
setTotal(res.data.result.total);
|
||||
setExistingTypes(res.data.existing_types);
|
||||
setVideoList(res.data.result.data);
|
||||
props.onSuccess();
|
||||
setLoading(false);
|
||||
setInit(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false);
|
||||
setInit(false);
|
||||
console.log("错误,", err);
|
||||
});
|
||||
};
|
||||
@ -154,12 +159,22 @@ export const UploadCoursewareSub = (props: PropsInterface) => {
|
||||
<>
|
||||
<Row style={{ width: 752, minHeight: 520 }}>
|
||||
<Col span={7}>
|
||||
<TreeCategory
|
||||
selected={[]}
|
||||
type="no-cate"
|
||||
text={props.label}
|
||||
onUpdate={(keys: any) => setCategoryIds(keys)}
|
||||
/>
|
||||
{init && (
|
||||
<div className="float-left text-center mt-30">
|
||||
<Spin></Spin>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="float-left"
|
||||
style={{ display: init ? "none" : "block" }}
|
||||
>
|
||||
<TreeCategory
|
||||
selected={[]}
|
||||
type="no-cate"
|
||||
text={props.label}
|
||||
onUpdate={(keys: any) => setCategoryIds(keys)}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={17}>
|
||||
<Row style={{ marginBottom: 24, paddingLeft: 10 }}>
|
||||
@ -172,7 +187,15 @@ export const UploadCoursewareSub = (props: PropsInterface) => {
|
||||
></UploadCoursewareButton>
|
||||
</Col>
|
||||
</Row>
|
||||
<div className={styles["video-list"]}>
|
||||
{init && (
|
||||
<div className="float-left text-center mt-30">
|
||||
<Spin></Spin>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={styles["video-list"]}
|
||||
style={{ display: init ? "none" : "block" }}
|
||||
>
|
||||
{videoList.length === 0 && (
|
||||
<Col span={24} style={{ marginTop: 150 }}>
|
||||
<Empty description="暂无课件" />
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Row, Col, Empty, Table } from "antd";
|
||||
import { Row, Col, Empty, Table, Spin } from "antd";
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import { resource } from "../../api";
|
||||
import styles from "./index.module.less";
|
||||
@ -35,10 +35,10 @@ interface PropsInterface {
|
||||
label: string;
|
||||
open: boolean;
|
||||
onSelected: (arr: any[], videos: []) => void;
|
||||
onSuccess: () => void;
|
||||
}
|
||||
|
||||
export const UploadVideoSub = (props: PropsInterface) => {
|
||||
const [init, setInit] = useState(true);
|
||||
const [category_ids, setCategoryIds] = useState<any>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [videoList, setVideoList] = useState<VideoItem[]>([]);
|
||||
@ -51,6 +51,7 @@ export const UploadVideoSub = (props: PropsInterface) => {
|
||||
|
||||
// 加载列表
|
||||
useEffect(() => {
|
||||
setInit(true);
|
||||
getvideoList();
|
||||
}, [props.open, category_ids, refresh, page, size]);
|
||||
|
||||
@ -62,6 +63,7 @@ export const UploadVideoSub = (props: PropsInterface) => {
|
||||
|
||||
// 获取列表
|
||||
const getvideoList = () => {
|
||||
setLoading(true);
|
||||
let categoryIds = category_ids.join(",");
|
||||
resource
|
||||
.resourceList(page, size, "", "", "", "VIDEO", categoryIds)
|
||||
@ -69,9 +71,12 @@ export const UploadVideoSub = (props: PropsInterface) => {
|
||||
setTotal(res.data.result.total);
|
||||
setVideoExtra(res.data.videos_extra);
|
||||
setVideoList(res.data.result.data);
|
||||
props.onSuccess();
|
||||
setLoading(false);
|
||||
setInit(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false);
|
||||
setInit(false);
|
||||
console.log("错误,", err);
|
||||
});
|
||||
};
|
||||
@ -154,12 +159,22 @@ export const UploadVideoSub = (props: PropsInterface) => {
|
||||
<>
|
||||
<Row style={{ width: 752, minHeight: 520 }}>
|
||||
<Col span={7}>
|
||||
<TreeCategory
|
||||
selected={[]}
|
||||
type="no-cate"
|
||||
text={props.label}
|
||||
onUpdate={(keys: any) => setCategoryIds(keys)}
|
||||
/>
|
||||
{init && (
|
||||
<div className="float-left text-center mt-30">
|
||||
<Spin></Spin>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="float-left"
|
||||
style={{ display: init ? "none" : "block" }}
|
||||
>
|
||||
<TreeCategory
|
||||
selected={[]}
|
||||
type="no-cate"
|
||||
text={props.label}
|
||||
onUpdate={(keys: any) => setCategoryIds(keys)}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={17}>
|
||||
<Row style={{ marginBottom: 24, paddingLeft: 10 }}>
|
||||
@ -172,7 +187,15 @@ export const UploadVideoSub = (props: PropsInterface) => {
|
||||
></UploadVideoButton>
|
||||
</Col>
|
||||
</Row>
|
||||
<div className={styles["video-list"]}>
|
||||
{init && (
|
||||
<div className="float-left text-center mt-30">
|
||||
<Spin></Spin>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={styles["video-list"]}
|
||||
style={{ display: init ? "none" : "block" }}
|
||||
>
|
||||
{videoList.length === 0 && (
|
||||
<Col span={24} style={{ marginTop: 150 }}>
|
||||
<Empty description="暂无视频" />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user