mirror of
https://github.com/PlayEdu/backend
synced 2025-12-23 03:39:34 +08:00
创建课程加入课件
This commit is contained in:
unknown
@@ -11,3 +11,5 @@ export * from "./duration-text";
|
||||
export * from "./upload-video-sub";
|
||||
export * from "./select-resource";
|
||||
export * from "./upload-courseware-button";
|
||||
export * from "./upload-courseware-sub";
|
||||
export * from "./select-attachment";
|
||||
|
||||
77
src/compenents/select-attachment/index.tsx
Normal file
77
src/compenents/select-attachment/index.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Button, Row, Modal, message, Tabs } from "antd";
|
||||
import styles from "./index.module.less";
|
||||
import { UploadCoursewareSub } from "../../compenents";
|
||||
import type { TabsProps } from "antd";
|
||||
|
||||
interface VideoItem {
|
||||
id: number;
|
||||
category_id: number;
|
||||
name: string;
|
||||
duration: number;
|
||||
}
|
||||
|
||||
interface PropsInterface {
|
||||
defaultKeys: any[];
|
||||
open: boolean;
|
||||
onSelected: (arr: any[], videos: any[]) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
export const SelectAttachment = (props: PropsInterface) => {
|
||||
const [refresh, setRefresh] = useState(true);
|
||||
const [tabKey, setTabKey] = useState(1);
|
||||
const [selectKeys, setSelectKeys] = useState<any>([]);
|
||||
const [selectVideos, setSelectVideos] = useState<any>([]);
|
||||
|
||||
const items: TabsProps["items"] = [
|
||||
{
|
||||
key: "1",
|
||||
label: `课件`,
|
||||
children: (
|
||||
<div className="float-left">
|
||||
<UploadCoursewareSub
|
||||
label="课件"
|
||||
defaultCheckedList={props.defaultKeys}
|
||||
open={refresh}
|
||||
onSelected={(arr: any[], videos: any[]) => {
|
||||
setSelectKeys(arr);
|
||||
setSelectVideos(videos);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const onChange = (key: string) => {
|
||||
setTabKey(Number(key));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Modal
|
||||
title="资源素材库"
|
||||
centered
|
||||
closable={false}
|
||||
onCancel={() => {
|
||||
setSelectKeys([]);
|
||||
setSelectVideos([]);
|
||||
props.onCancel();
|
||||
}}
|
||||
open={props.open}
|
||||
width={800}
|
||||
maskClosable={false}
|
||||
onOk={() => {
|
||||
props.onSelected(selectKeys, selectVideos);
|
||||
setSelectKeys([]);
|
||||
setSelectVideos([]);
|
||||
}}
|
||||
>
|
||||
<Row>
|
||||
<Tabs defaultActiveKey="1" items={items} onChange={onChange} />
|
||||
</Row>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
242
src/compenents/upload-courseware-sub/index.tsx
Normal file
242
src/compenents/upload-courseware-sub/index.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Checkbox, Row, Col, Empty, message, Pagination } from "antd";
|
||||
import { resource } from "../../api";
|
||||
import styles from "./index.module.less";
|
||||
import { TreeCategory, UploadCoursewareButton } from "../../compenents";
|
||||
import type { CheckboxChangeEvent } from "antd/es/checkbox";
|
||||
import type { CheckboxValueType } from "antd/es/checkbox/Group";
|
||||
|
||||
const CheckboxGroup = Checkbox.Group;
|
||||
|
||||
interface VideoItem {
|
||||
id: number;
|
||||
category_id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface PropsInterface {
|
||||
defaultCheckedList: any[];
|
||||
label: string;
|
||||
open: boolean;
|
||||
onSelected: (arr: any[], videos: []) => void;
|
||||
}
|
||||
|
||||
export const UploadCoursewareSub = (props: PropsInterface) => {
|
||||
const [category_ids, setCategoryIds] = useState<any>([]);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [videoList, setVideoList] = useState<VideoItem[]>([]);
|
||||
const [existingTypes, setExistingTypes] = useState<any>([]);
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const [page, setPage] = useState(1);
|
||||
const [size, setSize] = useState(10);
|
||||
const [total, setTotal] = useState(0);
|
||||
|
||||
const [plainOptions, setPlainOptions] = useState<any>([]);
|
||||
const [checkedList, setCheckedList] = useState<CheckboxValueType[]>([]);
|
||||
const [indeterminate, setIndeterminate] = useState(false);
|
||||
const [checkAll, setCheckAll] = useState(false);
|
||||
|
||||
// 获取列表
|
||||
const getvideoList = (defaultKeys: any[]) => {
|
||||
let categoryIds = category_ids.join(",");
|
||||
resource
|
||||
.resourceList(
|
||||
page,
|
||||
size,
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"WORD,EXCEL,PPT,PDF,TXT,RAR,ZIP",
|
||||
categoryIds
|
||||
)
|
||||
.then((res: any) => {
|
||||
setTotal(res.data.result.total);
|
||||
setExistingTypes(res.data.existing_types);
|
||||
setVideoList(res.data.result.data);
|
||||
let data = res.data.result.data;
|
||||
const arr = [];
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
arr.push({
|
||||
label: (
|
||||
<div className="d-flex">
|
||||
<i
|
||||
className="iconfont icon-icon-file"
|
||||
style={{
|
||||
fontSize: 16,
|
||||
color: "rgba(0,0,0,0.3)",
|
||||
}}
|
||||
/>
|
||||
<div className="video-title ml-8">{data[i].name}</div>
|
||||
<div className="video-time">{data[i].type}</div>
|
||||
</div>
|
||||
),
|
||||
value: data[i].id,
|
||||
disabled: false,
|
||||
});
|
||||
}
|
||||
if (defaultKeys.length > 0 && arr.length > 0) {
|
||||
for (let i = 0; i < defaultKeys.length; i++) {
|
||||
for (let j = 0; j < arr.length; j++) {
|
||||
if (arr[j].value === defaultKeys[i]) {
|
||||
arr[j].disabled = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
setPlainOptions(arr);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("错误,", err);
|
||||
});
|
||||
};
|
||||
// 重置列表
|
||||
const resetVideoList = () => {
|
||||
setPage(1);
|
||||
setVideoList([]);
|
||||
setRefresh(!refresh);
|
||||
};
|
||||
|
||||
// 加载列表
|
||||
useEffect(() => {
|
||||
const arr = [...props.defaultCheckedList];
|
||||
setCheckedList(arr);
|
||||
if (arr.length === 0) {
|
||||
setIndeterminate(false);
|
||||
setCheckAll(false);
|
||||
}
|
||||
getvideoList(arr);
|
||||
}, [props.open, props.defaultCheckedList, category_ids, refresh, page, size]);
|
||||
|
||||
const onChange = (list: CheckboxValueType[]) => {
|
||||
setCheckedList(list);
|
||||
setIndeterminate(!!list.length && list.length < plainOptions.length);
|
||||
setCheckAll(list.length === plainOptions.length);
|
||||
const defalut = [...props.defaultCheckedList];
|
||||
let localKeys: any = [];
|
||||
list.map((item: any) => {
|
||||
if (defalut.indexOf(item) === -1) {
|
||||
localKeys.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
let arrVideos: any = [];
|
||||
|
||||
for (let i = 0; i < localKeys.length; i++) {
|
||||
videoList.map((item: any, index: number) => {
|
||||
if (item.id === localKeys[i]) {
|
||||
arrVideos.push({
|
||||
name: item.name,
|
||||
type: item.type,
|
||||
rid: item.id,
|
||||
disabled: plainOptions[index].disabled,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
props.onSelected(localKeys, arrVideos);
|
||||
};
|
||||
|
||||
const onCheckAllChange = (e: CheckboxChangeEvent) => {
|
||||
const arr = plainOptions.map((item: any) => item.value);
|
||||
setCheckedList(e.target.checked ? arr : []);
|
||||
setIndeterminate(false);
|
||||
setCheckAll(e.target.checked);
|
||||
const defalut = [...props.defaultCheckedList];
|
||||
let localKeys: any = [];
|
||||
arr.map((item: any) => {
|
||||
if (defalut.indexOf(item) === -1) {
|
||||
localKeys.push(item);
|
||||
}
|
||||
});
|
||||
let arrVideos: any = [];
|
||||
for (let i = 0; i < localKeys.length; i++) {
|
||||
videoList.map((item: any, index: number) => {
|
||||
if (item.id === localKeys[i]) {
|
||||
arrVideos.push({
|
||||
name: item.name,
|
||||
type: item.type,
|
||||
rid: item.id,
|
||||
disabled: plainOptions[index].disabled,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
if (e.target.checked) {
|
||||
props.onSelected(localKeys, arrVideos);
|
||||
} else {
|
||||
props.onSelected([], []);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row style={{ width: 752, minHeight: 520 }}>
|
||||
<Col span={7}>
|
||||
<TreeCategory
|
||||
selected={[]}
|
||||
type="no-cate"
|
||||
text={props.label}
|
||||
onUpdate={(keys: any) => setCategoryIds(keys)}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={17}>
|
||||
<Row style={{ marginBottom: 24, paddingLeft: 10 }}>
|
||||
<Col span={24}>
|
||||
<UploadCoursewareButton
|
||||
categoryIds={category_ids}
|
||||
onUpdate={() => {
|
||||
resetVideoList();
|
||||
}}
|
||||
></UploadCoursewareButton>
|
||||
</Col>
|
||||
</Row>
|
||||
<div className={styles["video-list"]}>
|
||||
{videoList.length === 0 && (
|
||||
<Col span={24} style={{ marginTop: 150 }}>
|
||||
<Empty description="暂无课件" />
|
||||
</Col>
|
||||
)}
|
||||
{videoList.length > 0 && (
|
||||
<div className="list-select-column-box c-flex">
|
||||
<Checkbox
|
||||
indeterminate={indeterminate}
|
||||
onChange={onCheckAllChange}
|
||||
checked={checkAll}
|
||||
>
|
||||
全选
|
||||
</Checkbox>
|
||||
<CheckboxGroup
|
||||
className="c-flex"
|
||||
options={plainOptions}
|
||||
value={checkedList}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Row
|
||||
style={{
|
||||
paddingLeft: 10,
|
||||
}}
|
||||
>
|
||||
{videoList.length > 0 && total > 10 && (
|
||||
<Col
|
||||
span={24}
|
||||
style={{ display: "flex", flexDirection: "row-reverse" }}
|
||||
>
|
||||
<Pagination
|
||||
onChange={(currentPage, currentSize) => {
|
||||
setPage(currentPage);
|
||||
setSize(currentSize);
|
||||
}}
|
||||
defaultCurrent={page}
|
||||
total={total}
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user