diff --git a/src/compenents/index.ts b/src/compenents/index.ts index 14e38c4..a46c738 100644 --- a/src/compenents/index.ts +++ b/src/compenents/index.ts @@ -6,4 +6,6 @@ export * from "./tree-department"; export * from "./back-bar"; export * from "./permission-button"; export * from "./tree-category"; -export * from "./duration-text"; \ No newline at end of file +export * from "./duration-text"; +export * from "./upload-video-sub"; +export * from "./select-resource"; \ No newline at end of file diff --git a/src/compenents/select-resource/index.module.less b/src/compenents/select-resource/index.module.less new file mode 100644 index 0000000..e69de29 diff --git a/src/compenents/select-resource/index.tsx b/src/compenents/select-resource/index.tsx new file mode 100644 index 0000000..75cc814 --- /dev/null +++ b/src/compenents/select-resource/index.tsx @@ -0,0 +1,71 @@ +import { useEffect, useState } from "react"; +import { Button, Row, Col, Modal, message, Tabs } from "antd"; +import styles from "./index.module.less"; +import { UploadVideoSub } from "../../compenents"; +import type { TabsProps } from "antd"; + +interface VideoItem { + id: number; + category_id: number; + name: string; + duration: number; +} + +interface PropsInterface { + open: boolean; + onSelected: (arr: any[], label: any[]) => void; + onCancel: () => void; +} + +export const SelectResource = (props: PropsInterface) => { + const [refresh, setRefresh] = useState(true); + const [tabKey, setTabKey] = useState(1); + const [selectKeys, setSelectKeys] = useState([]); + const [selectLabel, setSelectLabel] = useState([]); + + const items: TabsProps["items"] = [ + { + key: "1", + label: `视频`, + children: ( +
+ { + setSelectKeys(arr); + setSelectLabel(label); + }} + /> +
+ ), + }, + ]; + + const onChange = (key: string) => { + setTabKey(Number(key)); + }; + + return ( + <> + { + setSelectKeys([]); + props.onCancel(); + }} + open={props.open} + width={800} + maskClosable={false} + onOk={() => props.onSelected(selectKeys, selectLabel)} + > + + + + + + ); +}; diff --git a/src/compenents/upload-video-sub/index.module.less b/src/compenents/upload-video-sub/index.module.less new file mode 100644 index 0000000..5aa7a24 --- /dev/null +++ b/src/compenents/upload-video-sub/index.module.less @@ -0,0 +1,8 @@ +.video-list { + width: calc(100% -100px); + height: auto; + display: flex; + flex-direction: column; + margin-left: 10px; + min-height: 380px; +} diff --git a/src/compenents/upload-video-sub/index.tsx b/src/compenents/upload-video-sub/index.tsx new file mode 100644 index 0000000..3ae4a13 --- /dev/null +++ b/src/compenents/upload-video-sub/index.tsx @@ -0,0 +1,203 @@ +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 { UploadVideoButton } from "../upload-video-button"; +import { DurationText, TreeCategory } 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; + duration: number; +} + +interface PropsInterface { + defaultCheckedList: any[]; + label: string; + open: boolean; + onSelected: (arr: any[], label: any) => void; +} + +export const UploadVideoSub = (props: PropsInterface) => { + const [category_ids, setCategoryIds] = useState([]); + + const [videoList, setVideoList] = useState([]); + const [videosExtra, setVideoExtra] = useState([]); + const [refresh, setRefresh] = useState(false); + const [page, setPage] = useState(1); + const [size, setSize] = useState(10); + const [total, setTotal] = useState(0); + const [pureTotal, setPureTotal] = useState(0); + const [categoryCount, setCategoryCount] = useState({}); + + const [plainOptions, setPlainOptions] = useState([]); + const [checkedList, setCheckedList] = useState( + props.defaultCheckedList + ); + const [indeterminate, setIndeterminate] = useState(true); + const [checkAll, setCheckAll] = useState(false); + + // 获取列表 + const getvideoList = () => { + let categoryIds = category_ids.join(","); + resource + .resourceList(page, size, "", "", "", "VIDEO", categoryIds) + .then((res: any) => { + setTotal(res.data.result.total); + setVideoExtra(res.data.videos_extra); + setCategoryCount(res.data.category_count); + setPureTotal(res.data.pure_total); + setVideoList(res.data.result.data); + let data = res.data.result.data; + const arr = []; + for (let i = 0; i < data.length; i++) { + arr.push({ + label: ( +
+ +
{data[i].name}
+
+ +
+
+ ), + value: data[i].id, + }); + } + setPlainOptions(arr); + }) + .catch((err) => { + console.log("错误,", err); + }); + }; + // 重置列表 + const resetVideoList = () => { + setPage(1); + setVideoList([]); + setRefresh(!refresh); + }; + + // 加载列表 + useEffect(() => { + getvideoList(); + }, [props.open, category_ids, refresh, page, size]); + + const onChange = (list: CheckboxValueType[]) => { + setCheckedList(list); + setIndeterminate(!!list.length && list.length < plainOptions.length); + setCheckAll(list.length === plainOptions.length); + let arrLabel: any = []; + for (let i = 0; i < list.length; i++) { + videoList.map((item: any) => { + if (item.id === list[i]) { + arrLabel.push(item.name); + } + }); + } + + props.onSelected(list, arrLabel); + }; + + const onCheckAllChange = (e: CheckboxChangeEvent) => { + const arr = plainOptions.map((item: any) => item.value); + const arrLabel = videoList.map((item: any) => item.name); + setCheckedList(e.target.checked ? arr : []); + setIndeterminate(false); + setCheckAll(e.target.checked); + if (e.target.checked) { + props.onSelected(arr, arrLabel); + } else { + props.onSelected([], []); + } + }; + + return ( + <> + + + setCategoryIds(keys)} + /> + + + + + { + resetVideoList(); + }} + > + + +
+ {videoList.length === 0 && ( + + + + )} + {videoList.length > 0 && ( +
+ + 全选 + + +
+ )} + {/* {videoList.map((item) => ( +
+ {item.name} +
+ ))} */} +
+ + {videoList.length > 0 && ( + + { + setPage(currentPage); + setSize(currentSize); + }} + defaultCurrent={page} + total={total} + /> + + )} + + + + + ); +}; diff --git a/src/index.less b/src/index.less index c15ba5e..6999e33 100644 --- a/src/index.less +++ b/src/index.less @@ -148,6 +148,12 @@ code { flex-direction: column; } +.c-a-flex { + display: flex; + flex-direction: column; + align-items: center; +} + .flex-1 { flex: 1; } @@ -501,3 +507,22 @@ textarea.ant-input { height: 3px !important; } } + +.list-select-column-box { + .ant-checkbox-wrapper { + margin-inline-start: 0px; + height: 38px; + } + + .video-title { + width: 390px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .video-time { + width: 80px; + display: flex; + flex-direction: row-reverse; + } +} diff --git a/src/pages/course/compenents/create.module.less b/src/pages/course/compenents/create.module.less index b44cb43..cc71a68 100644 --- a/src/pages/course/compenents/create.module.less +++ b/src/pages/course/compenents/create.module.less @@ -20,3 +20,25 @@ margin-right: 0; } } + +.hous-box { + width: 502px; + min-height: 56px; + background: #ffffff; + border-radius: 6px; + border: 1px solid rgba(0, 0, 0, 0.15); + box-sizing: border-box; + -moz-box-sizing: border-box; + /* Firefox */ + -webkit-box-sizing: border-box; + /* Safari */ + padding: 16px; + margin-left: 42px; + .no-hours { + height: 24px; + font-size: 14px; + font-weight: 400; + color: rgba(0, 0, 0, 0.25); + line-height: 24px; + } +} diff --git a/src/pages/course/compenents/create.tsx b/src/pages/course/compenents/create.tsx index a7a82a7..77c8477 100644 --- a/src/pages/course/compenents/create.tsx +++ b/src/pages/course/compenents/create.tsx @@ -13,7 +13,7 @@ import { } from "antd"; import styles from "./create.module.less"; import { course, department } from "../../../api/index"; -import { UploadImageButton } from "../../../compenents"; +import { UploadImageButton, SelectResource } from "../../../compenents"; import { ExclamationCircleFilled } from "@ant-design/icons"; import { getHost } from "../../../utils/index"; @@ -41,6 +41,9 @@ export const CourseCreate: React.FC = ({ open, onCancel }) => { const [thumb, setThumb] = useState(""); const [type, setType] = useState("open"); const [chapterType, setChapterType] = useState(0); + const [chapters, setChapters] = useState([]); + const [hours, setHours] = useState([]); + const [videoVisible, setVideoVisible] = useState(false); useEffect(() => { getParams(); @@ -58,6 +61,8 @@ export const CourseCreate: React.FC = ({ open, onCancel }) => { hasChapter: 0, }); setThumb(defaultThumb1); + setChapters([]); + setHours([]); }, [form, open]); const getParams = () => { @@ -137,6 +142,8 @@ export const CourseCreate: React.FC = ({ open, onCancel }) => { cancelText: "取消", onOk() { setChapterType(e.target.value); + setChapters([]); + setHours([]); }, onCancel() { form.setFieldsValue({ @@ -164,6 +171,16 @@ export const CourseCreate: React.FC = ({ open, onCancel }) => { width={634} >
+ { + setVideoVisible(false); + }} + onSelected={(arr: any, label: any) => { + console.log("sel", arr, label); + setVideoVisible(false); + }} + />
= ({ open, onCancel }) => { {chapterType === 0 && ( - -
- +
+ +
+ +
+ +
+ {hours.length === 0 && ( + 请添加课时内容 + )} + {hours.length > 0 && 13}
- +
)}
diff --git a/src/pages/course/compenents/hours.tsx b/src/pages/course/compenents/hours.tsx new file mode 100644 index 0000000..656656b --- /dev/null +++ b/src/pages/course/compenents/hours.tsx @@ -0,0 +1,37 @@ +import { message, Tree } from "antd"; +import { useState, useEffect } from "react"; + +interface Option { + id: string | number; + name: string; +} + +interface PropInterface { + data: Option[]; + onUpdate: () => void; +} + +export const TreeHours = (props: PropInterface) => { + const [treeData, setTreeData] = useState([]); + const [loading, setLoading] = useState(true); + useEffect(() => { + const hours = props.data; + if (hours.length === 0) { + return; + } + const arr = []; + for (let i = 0; i < hours.length; i++) { + arr.push({ + title: hours[i].name, + key: hours[i].id, + }); + } + setTreeData(arr); + }, [props.data]); + + return ( +
+ +
+ ); +};