mirror of
https://github.com/PlayEdu/backend
synced 2025-06-20 16:02:43 +08:00
线上课课时、课件编辑增加loading
This commit is contained in:
unknown
parent
425033f672
commit
7f1902d490
@ -1,5 +1,5 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { Button, Drawer, Form, Modal, message } from "antd";
|
import { Button, Drawer, Form, Modal, message, Spin } from "antd";
|
||||||
import styles from "./hour-update.module.less";
|
import styles from "./hour-update.module.less";
|
||||||
import { course, courseAttachment } from "../../../api/index";
|
import { course, courseAttachment } from "../../../api/index";
|
||||||
import { SelectAttachment } from "../../../compenents";
|
import { SelectAttachment } from "../../../compenents";
|
||||||
@ -20,11 +20,13 @@ export const CourseAttachmentUpdate: React.FC<PropInterface> = ({
|
|||||||
onCancel,
|
onCancel,
|
||||||
}) => {
|
}) => {
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
|
const [init, setInit] = useState(true);
|
||||||
const [attachmentVisible, setAttachmentVisible] = useState<boolean>(false);
|
const [attachmentVisible, setAttachmentVisible] = useState<boolean>(false);
|
||||||
const [attachmentData, setAttachmentData] = useState<any>([]);
|
const [attachmentData, setAttachmentData] = useState<any>([]);
|
||||||
const [attachments, setAttachments] = useState<any>([]);
|
const [attachments, setAttachments] = useState<any>([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
setInit(true);
|
||||||
if (id === 0) {
|
if (id === 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -43,6 +45,7 @@ export const CourseAttachmentUpdate: React.FC<PropInterface> = ({
|
|||||||
setAttachmentData(arr);
|
setAttachmentData(arr);
|
||||||
setAttachments(keys);
|
setAttachments(keys);
|
||||||
}
|
}
|
||||||
|
setInit(false);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -169,47 +172,57 @@ export const CourseAttachmentUpdate: React.FC<PropInterface> = ({
|
|||||||
selectAttachmentData(arr, videos);
|
selectAttachmentData(arr, videos);
|
||||||
}}
|
}}
|
||||||
></SelectAttachment>
|
></SelectAttachment>
|
||||||
<Form
|
{init && (
|
||||||
form={form}
|
<div className="float-left text-center mt-30">
|
||||||
name="attachment-update-basic"
|
<Spin></Spin>
|
||||||
labelCol={{ span: 5 }}
|
|
||||||
wrapperCol={{ span: 19 }}
|
|
||||||
initialValues={{ remember: true }}
|
|
||||||
onFinish={onFinish}
|
|
||||||
onFinishFailed={onFinishFailed}
|
|
||||||
autoComplete="off"
|
|
||||||
>
|
|
||||||
<div className="c-flex">
|
|
||||||
<Form.Item>
|
|
||||||
<div className="ml-42">
|
|
||||||
<Button
|
|
||||||
onClick={() => setAttachmentVisible(true)}
|
|
||||||
type="primary"
|
|
||||||
>
|
|
||||||
添加课件
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</Form.Item>
|
|
||||||
<div className={styles["hous-box"]}>
|
|
||||||
{attachmentData.length === 0 && (
|
|
||||||
<span className={styles["no-hours"]}>
|
|
||||||
请点击上方按钮添加课件
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{attachmentData.length > 0 && (
|
|
||||||
<TreeAttachments
|
|
||||||
data={attachmentData}
|
|
||||||
onRemoveItem={(id: number) => {
|
|
||||||
delAttachments(id);
|
|
||||||
}}
|
|
||||||
onUpdate={(arr: any[]) => {
|
|
||||||
transAttachments(arr);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
)}
|
||||||
|
<div
|
||||||
|
className="float-left"
|
||||||
|
style={{ display: init ? "none" : "block" }}
|
||||||
|
>
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
name="attachment-update-basic"
|
||||||
|
labelCol={{ span: 5 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
initialValues={{ remember: true }}
|
||||||
|
onFinish={onFinish}
|
||||||
|
onFinishFailed={onFinishFailed}
|
||||||
|
autoComplete="off"
|
||||||
|
>
|
||||||
|
<div className="c-flex">
|
||||||
|
<Form.Item>
|
||||||
|
<div className="ml-42">
|
||||||
|
<Button
|
||||||
|
onClick={() => setAttachmentVisible(true)}
|
||||||
|
type="primary"
|
||||||
|
>
|
||||||
|
添加课件
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Form.Item>
|
||||||
|
<div className={styles["hous-box"]}>
|
||||||
|
{attachmentData.length === 0 && (
|
||||||
|
<span className={styles["no-hours"]}>
|
||||||
|
请点击上方按钮添加课件
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{attachmentData.length > 0 && (
|
||||||
|
<TreeAttachments
|
||||||
|
data={attachmentData}
|
||||||
|
onRemoveItem={(id: number) => {
|
||||||
|
delAttachments(id);
|
||||||
|
}}
|
||||||
|
onUpdate={(arr: any[]) => {
|
||||||
|
transAttachments(arr);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
) : null}
|
) : null}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
import React, { useState, useEffect } from "react";
|
||||||
import { Button, Drawer, Form, Input, Modal, message } from "antd";
|
import { Button, Drawer, Form, Input, Modal, message, Spin } from "antd";
|
||||||
import styles from "./hour-update.module.less";
|
import styles from "./hour-update.module.less";
|
||||||
import { course, courseHour, courseChapter } from "../../../api/index";
|
import { course, courseHour, courseChapter } from "../../../api/index";
|
||||||
import { SelectResource } from "../../../compenents";
|
import { SelectResource } from "../../../compenents";
|
||||||
@ -20,6 +20,7 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
|
|||||||
onCancel,
|
onCancel,
|
||||||
}) => {
|
}) => {
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
|
const [init, setInit] = useState(true);
|
||||||
const [chapterType, setChapterType] = useState(0);
|
const [chapterType, setChapterType] = useState(0);
|
||||||
const [chapters, setChapters] = useState<any>([]);
|
const [chapters, setChapters] = useState<any>([]);
|
||||||
const [hours, setHours] = useState<any>([]);
|
const [hours, setHours] = useState<any>([]);
|
||||||
@ -29,6 +30,7 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
|
|||||||
const [addvideoCurrent, setAddvideoCurrent] = useState(0);
|
const [addvideoCurrent, setAddvideoCurrent] = useState(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
setInit(true);
|
||||||
if (id === 0) {
|
if (id === 0) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -77,6 +79,7 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
|
|||||||
setHours([]);
|
setHours([]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
setInit(false);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -373,117 +376,129 @@ export const CourseHourUpdate: React.FC<PropInterface> = ({
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Form
|
{init && (
|
||||||
form={form}
|
<div className="float-left text-center mt-30">
|
||||||
name="hour-update-basic"
|
<Spin></Spin>
|
||||||
labelCol={{ span: 5 }}
|
</div>
|
||||||
wrapperCol={{ span: 19 }}
|
)}
|
||||||
initialValues={{ remember: true }}
|
<div
|
||||||
onFinish={onFinish}
|
className="float-left"
|
||||||
onFinishFailed={onFinishFailed}
|
style={{ display: init ? "none" : "block" }}
|
||||||
autoComplete="off"
|
|
||||||
>
|
>
|
||||||
{chapterType === 0 && (
|
<Form
|
||||||
<div className="c-flex">
|
form={form}
|
||||||
<Form.Item>
|
name="hour-update-basic"
|
||||||
<div className="ml-42">
|
labelCol={{ span: 5 }}
|
||||||
<Button
|
wrapperCol={{ span: 19 }}
|
||||||
onClick={() => setVideoVisible(true)}
|
initialValues={{ remember: true }}
|
||||||
type="primary"
|
onFinish={onFinish}
|
||||||
>
|
onFinishFailed={onFinishFailed}
|
||||||
添加课时
|
autoComplete="off"
|
||||||
</Button>
|
>
|
||||||
</div>
|
{chapterType === 0 && (
|
||||||
</Form.Item>
|
<div className="c-flex">
|
||||||
<div className={styles["hous-box"]}>
|
<Form.Item>
|
||||||
{treeData.length === 0 && (
|
<div className="ml-42">
|
||||||
<span className={styles["no-hours"]}>
|
<Button
|
||||||
请点击上方按钮添加课时
|
onClick={() => setVideoVisible(true)}
|
||||||
</span>
|
type="primary"
|
||||||
)}
|
|
||||||
{treeData.length > 0 && (
|
|
||||||
<TreeHours
|
|
||||||
data={treeData}
|
|
||||||
onRemoveItem={(id: number) => {
|
|
||||||
delHour(id);
|
|
||||||
}}
|
|
||||||
onUpdate={(arr: any[]) => {
|
|
||||||
transHour(arr);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{chapterType === 1 && (
|
|
||||||
<div className="c-flex">
|
|
||||||
{chapters.length > 0 &&
|
|
||||||
chapters.map((item: any, index: number) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={item.hours.length + "章节" + index}
|
|
||||||
className={styles["chapter-item"]}
|
|
||||||
>
|
>
|
||||||
<div className="d-flex">
|
添加课时
|
||||||
<div className={styles["label"]}>
|
</Button>
|
||||||
章节{index + 1}：
|
</div>
|
||||||
</div>
|
</Form.Item>
|
||||||
<Input
|
<div className={styles["hous-box"]}>
|
||||||
value={item.name}
|
{treeData.length === 0 && (
|
||||||
className={styles["input"]}
|
<span className={styles["no-hours"]}>
|
||||||
onChange={(e) => {
|
请点击上方按钮添加课时
|
||||||
setChapterName(index, e.target.value);
|
</span>
|
||||||
}}
|
)}
|
||||||
onBlur={(e) => {
|
{treeData.length > 0 && (
|
||||||
saveChapterName(index, e.target.value);
|
<TreeHours
|
||||||
}}
|
data={treeData}
|
||||||
placeholder="请在此处输入章节名称"
|
onRemoveItem={(id: number) => {
|
||||||
allowClear
|
delHour(id);
|
||||||
/>
|
}}
|
||||||
<Button
|
onUpdate={(arr: any[]) => {
|
||||||
disabled={!item.name}
|
transHour(arr);
|
||||||
className="mr-16"
|
}}
|
||||||
type="primary"
|
/>
|
||||||
onClick={() => {
|
)}
|
||||||
setVideoVisible(true);
|
|
||||||
setAddvideoCurrent(index);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
添加课时
|
|
||||||
</Button>
|
|
||||||
<Button onClick={() => delChapter(index)}>
|
|
||||||
删除章节
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className={styles["chapter-hous-box"]}>
|
|
||||||
{item.hours.length === 0 && (
|
|
||||||
<span className={styles["no-hours"]}>
|
|
||||||
请点击上方按钮添加课时
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{item.hours.length > 0 && (
|
|
||||||
<TreeHours
|
|
||||||
data={item.hours}
|
|
||||||
onRemoveItem={(id: number) => {
|
|
||||||
delChapterHour(index, id);
|
|
||||||
}}
|
|
||||||
onUpdate={(arr: any[]) => {
|
|
||||||
transChapterHour(index, arr);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<Form.Item>
|
|
||||||
<div className="ml-42">
|
|
||||||
<Button onClick={() => addNewChapter()}>添加章节</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</Form.Item>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
{chapterType === 1 && (
|
||||||
</Form>
|
<div className="c-flex">
|
||||||
|
{chapters.length > 0 &&
|
||||||
|
chapters.map((item: any, index: number) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={item.hours.length + "章节" + index}
|
||||||
|
className={styles["chapter-item"]}
|
||||||
|
>
|
||||||
|
<div className="d-flex">
|
||||||
|
<div className={styles["label"]}>
|
||||||
|
章节{index + 1}：
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
value={item.name}
|
||||||
|
className={styles["input"]}
|
||||||
|
onChange={(e) => {
|
||||||
|
setChapterName(index, e.target.value);
|
||||||
|
}}
|
||||||
|
onBlur={(e) => {
|
||||||
|
saveChapterName(index, e.target.value);
|
||||||
|
}}
|
||||||
|
placeholder="请在此处输入章节名称"
|
||||||
|
allowClear
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
disabled={!item.name}
|
||||||
|
className="mr-16"
|
||||||
|
type="primary"
|
||||||
|
onClick={() => {
|
||||||
|
setVideoVisible(true);
|
||||||
|
setAddvideoCurrent(index);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
添加课时
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => delChapter(index)}>
|
||||||
|
删除章节
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className={styles["chapter-hous-box"]}>
|
||||||
|
{item.hours.length === 0 && (
|
||||||
|
<span className={styles["no-hours"]}>
|
||||||
|
请点击上方按钮添加课时
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{item.hours.length > 0 && (
|
||||||
|
<TreeHours
|
||||||
|
data={item.hours}
|
||||||
|
onRemoveItem={(id: number) => {
|
||||||
|
delChapterHour(index, id);
|
||||||
|
}}
|
||||||
|
onUpdate={(arr: any[]) => {
|
||||||
|
transChapterHour(index, arr);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<Form.Item>
|
||||||
|
<div className="ml-42">
|
||||||
|
<Button onClick={() => addNewChapter()}>
|
||||||
|
添加章节
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Form.Item>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Drawer>
|
</Drawer>
|
||||||
) : null}
|
) : null}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user