diff --git a/src/pages/course/compenents/create.module.less b/src/pages/course/compenents/create.module.less index b60bf60..779eb4e 100644 --- a/src/pages/course/compenents/create.module.less +++ b/src/pages/course/compenents/create.module.less @@ -43,3 +43,47 @@ margin-left: 16px; } } + +.chapter-item { + width: 502px; + height: auto; + display: flex; + flex-direction: column; + margin-left: 42px; + margin-bottom: 16px; + .label { + width: 78px; + height: 32px; + font-size: 14px; + font-weight: 400; + color: rgba(0, 0, 0, 0.85); + line-height: 32px; + } + .input { + width: 208px; + height: 32px; + margin-right: 24px; + } + .chapter-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 16px 16px 0; + margin-top: 16px; + .no-hours { + height: 24px; + font-size: 14px; + font-weight: 400; + color: rgba(0, 0, 0, 0.25); + line-height: 24px; + margin-left: 16px; + } + } +} diff --git a/src/pages/course/compenents/create.tsx b/src/pages/course/compenents/create.tsx index d9994c7..e503c93 100644 --- a/src/pages/course/compenents/create.tsx +++ b/src/pages/course/compenents/create.tsx @@ -44,8 +44,10 @@ export const CourseCreate: React.FC = ({ open, onCancel }) => { const [chapterType, setChapterType] = useState(0); const [chapters, setChapters] = useState([]); const [hours, setHours] = useState([]); + const [chapterHours, setChapterHours] = useState([]); const [videoVisible, setVideoVisible] = useState(false); const [treeData, setTreeData] = useState([]); + const [addvideoCurrent, setAddvideoCurrent] = useState(0); useEffect(() => { getParams(); @@ -152,6 +154,16 @@ export const CourseCreate: React.FC = ({ open, onCancel }) => { setVideoVisible(false); }; + const selectChapterData = (arr: any, videos: any) => { + const data = [...chapters]; + const keys = [...chapterHours]; + keys[addvideoCurrent] = arr; + data[addvideoCurrent].hours = videos; + setChapters(data); + setChapterHours(keys); + setVideoVisible(false); + }; + const getChapterType = (e: any) => { confirm({ title: "操作确认", @@ -164,6 +176,7 @@ export const CourseCreate: React.FC = ({ open, onCancel }) => { setChapterType(e.target.value); setChapters([]); setHours([]); + setChapterHours([]); setTreeData([]); }, onCancel() { @@ -176,7 +189,7 @@ export const CourseCreate: React.FC = ({ open, onCancel }) => { const delHour = (id: number) => { const data = [...treeData]; - const index = data.findIndex((i: any) => i.id === id); + const index = data.findIndex((i: any) => i.rid === id); if (index >= 0) { data.splice(index, 1); } @@ -204,6 +217,84 @@ export const CourseCreate: React.FC = ({ open, onCancel }) => { setTreeData(newArr); }; + const addNewChapter = () => { + const arr = [...chapters]; + const keys = [...chapterHours]; + arr.push({ + name: "", + hours: [], + }); + keys.push([]); + setChapters(arr); + setChapterHours(keys); + }; + + const setChapterName = (index: number, value: string) => { + const arr = [...chapters]; + arr[index].name = value; + setChapters(arr); + }; + + const delChapter = (index: number) => { + const arr = [...chapters]; + const keys = [...chapterHours]; + confirm({ + title: "操作确认", + icon: , + content: "删除章节会清空已添加课时,确认删除?", + centered: true, + okText: "确认", + cancelText: "取消", + onOk() { + arr.splice(index, 1); + keys.splice(index, 1); + setChapters(arr); + setChapterHours(keys); + }, + onCancel() {}, + }); + }; + + const delChapterHour = (index: number, id: number) => { + console.log(index, id); + const keys = [...chapterHours]; + const data = [...chapters]; + const current = data[index].hours.findIndex((i: any) => i.rid === id); + console.log(current); + + if (current >= 0) { + data[index].hours.splice(current, 1); + } + if (data[index].hours.length > 0) { + setChapters(data); + keys[index] = data[index].hours.map((item: any) => item.rid); + setChapterHours(keys); + } else { + keys[index] = []; + data[index].hours = []; + setChapters(data); + setChapterHours(keys); + } + }; + + const transChapterHour = (index: number, arr: any) => { + const keys = [...chapterHours]; + keys[index] = arr; + setChapterHours(keys); + + const data = [...chapters]; + const newArr: any = []; + for (let i = 0; i < arr.length; i++) { + data[index].hours.map((item: any) => { + if (item.rid === arr[i]) { + newArr.push(item); + } + }); + } + data[index].hours = newArr; + setChapters(data); + }; + return ( <> = ({ open, onCancel }) => { >
{ setVideoVisible(false); }} onSelected={(arr: any, videos: any) => { - selectData(arr, videos); + if (chapterType == 0) { + selectData(arr, videos); + } else { + selectChapterData(arr, videos); + } }} />
= ({ open, onCancel }) => {
)} + {chapterType === 1 && ( +
+ {chapters.length > 0 && + chapters.map((item: any, index: number) => { + return ( +
+
+
+ 章节{index + 1}: +
+ { + setChapterName(index, e.target.value); + }} + placeholder="请在此处输入章节名称" + /> + + +
+
+ {item.hours.length === 0 && ( + + 请添加课时内容 + + )} + {item.hours.length > 0 && ( + { + delChapterHour(index, id); + }} + onUpdate={(arr: any[]) => { + transChapterHour(index, arr); + }} + /> + )} +
+
+ ); + })} + +
+ +
+
+
+ )}
diff --git a/src/pages/course/compenents/hours.tsx b/src/pages/course/compenents/hours.tsx index c8e7c34..79e6eaf 100644 --- a/src/pages/course/compenents/hours.tsx +++ b/src/pages/course/compenents/hours.tsx @@ -38,7 +38,9 @@ export const TreeHours = (props: PropInterface) => { color: "rgba(0,0,0,0.3)", }} /> -
{hours[i].name}
+
+ {hours[i].name} {hours[i].rid} +