diff --git a/src/api/course-chapter.ts b/src/api/course-chapter.ts index 7585d8c..62f29cf 100644 --- a/src/api/course-chapter.ts +++ b/src/api/course-chapter.ts @@ -1,11 +1,11 @@ import client from "./internal/httpClient"; export function courseChapterList(courseId: number) { - return client.get(`/backend/v1/course/${courseId}/course-chapter/index`, {}); + return client.get(`/backend/v1/course/${courseId}/chapter/index`, {}); } export function createCourseChapter(courseId: number) { - return client.get(`/backend/v1/course/${courseId}/course-chapter/create`, {}); + return client.get(`/backend/v1/course/${courseId}/chapter/create`, {}); } export function storeCourseChapter( @@ -13,7 +13,7 @@ export function storeCourseChapter( name: string, sort: number ) { - return client.post(`/backend/v1/course/${courseId}/course-chapter/create`, { + return client.post(`/backend/v1/course/${courseId}/chapter/create`, { name: name, sort: sort, }); @@ -29,12 +29,18 @@ export function updateCourseChapter( name: string, sort: number ) { - return client.post(`/backend/v1/course/${courseId}/course-chapter/${id}`, { + return client.put(`/backend/v1/course/${courseId}/chapter/${id}`, { name: name, sort: sort, }); } export function destroyCourseChapter(courseId: number, id: number) { - return client.destroy(`/backend/v1/course/${courseId}/course-chapter/${id}`); + return client.destroy(`/backend/v1/course/${courseId}/chapter/${id}`); +} + +export function transCourseChapter(courseId: number, ids: number[]) { + return client.put(`/backend/v1/course/${courseId}/chapter/update/sort`, { + ids: ids, + }); } diff --git a/src/api/course-hour.ts b/src/api/course-hour.ts index 207e8f1..cfc53dd 100644 --- a/src/api/course-hour.ts +++ b/src/api/course-hour.ts @@ -1,11 +1,11 @@ import client from "./internal/httpClient"; export function courseHourList(courseId: number) { - return client.get(`/backend/v1/course/${courseId}/course-hour/index`, {}); + return client.get(`/backend/v1/course/${courseId}/hour/index`, {}); } export function createCourseHour(courseId: number) { - return client.get(`/backend/v1/course/${courseId}/course-hour/create`, {}); + return client.get(`/backend/v1/course/${courseId}/hour/create`, {}); } export function storeCourseHour( @@ -14,19 +14,26 @@ export function storeCourseHour( title: string, type: string, druation: number, - publishedAt: string + rid: number ) { - return client.post(`/backend/v1/course/${courseId}/course-hour/create`, { + return client.post(`/backend/v1/course/${courseId}/hour/create`, { chapter_id: chapterId, title, type, druation, - published_at: publishedAt, + sort: 0, + rid, + }); +} + +export function storeCourseHourMulti(courseId: number, hours: number[]) { + return client.post(`/backend/v1/course/${courseId}/hour/create-batch`, { + hours: hours, }); } export function courseHour(courseId: number, id: number) { - return client.get(`/backend/v1/course/${courseId}/course-hour/${id}`, {}); + return client.get(`/backend/v1/course/${courseId}/hour/${id}`, {}); } export function updateCourseHour( @@ -36,17 +43,24 @@ export function updateCourseHour( title: string, type: string, druation: number, - publishedAt: string + rid: number ) { - return client.post(`/backend/v1/course/${courseId}/course-hour/${id}`, { + return client.put(`/backend/v1/course/${courseId}/hour/${id}`, { chapter_id: chapterId, title, type, druation, - published_at: publishedAt, + sort: 0, + rid, }); } export function destroyCourseHour(courseId: number, id: number) { - return client.destroy(`/backend/v1/course/${courseId}/course-hour/${id}`); + return client.destroy(`/backend/v1/course/${courseId}/hour/${id}`); +} + +export function transCourseHour(courseId: number, ids: number[]) { + return client.put(`/backend/v1/course/${courseId}/hour/update/sort`, { + ids: ids, + }); } diff --git a/src/assets/iconfont/iconfont.css b/src/assets/iconfont/iconfont.css index d5191f7..bfbcd32 100644 --- a/src/assets/iconfont/iconfont.css +++ b/src/assets/iconfont/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 3943555 */ - src: url('iconfont.woff2?t=1679377698528') format('woff2'), - url('iconfont.woff?t=1679377698528') format('woff'), - url('iconfont.ttf?t=1679377698528') format('truetype'); + src: url('iconfont.woff2?t=1679383201256') format('woff2'), + url('iconfont.woff?t=1679383201256') format('woff'), + url('iconfont.ttf?t=1679383201256') format('truetype'); } .iconfont { @@ -13,6 +13,10 @@ -moz-osx-font-smoothing: grayscale; } +.icon-icon-tips:before { + content: "\e74a"; +} + .icon-icon-fold:before { content: "\e749"; } diff --git a/src/assets/iconfont/iconfont.ttf b/src/assets/iconfont/iconfont.ttf index 4da2d9b..ab333cf 100644 Binary files a/src/assets/iconfont/iconfont.ttf and b/src/assets/iconfont/iconfont.ttf differ diff --git a/src/assets/iconfont/iconfont.woff b/src/assets/iconfont/iconfont.woff index a7f521e..2830f65 100644 Binary files a/src/assets/iconfont/iconfont.woff and b/src/assets/iconfont/iconfont.woff differ diff --git a/src/assets/iconfont/iconfont.woff2 b/src/assets/iconfont/iconfont.woff2 index dc68f18..5dd256c 100644 Binary files a/src/assets/iconfont/iconfont.woff2 and b/src/assets/iconfont/iconfont.woff2 differ diff --git a/src/index.less b/src/index.less index a4b3a11..652d94e 100644 --- a/src/index.less +++ b/src/index.less @@ -213,14 +213,13 @@ code { height: 40px; border-radius: 6px; font-size: 14px; - font-weight: 500; color: rgba(0, 0, 0, 0.88); line-height: 40px; box-sizing: border-box; padding-left: 16px; cursor: pointer; &.active { - background: rgba(#ff4d4f, 0.1); + background-color: #fff2f0; } } diff --git a/src/pages/course/compenents/create.tsx b/src/pages/course/compenents/create.tsx index 486a1ee..9522e60 100644 --- a/src/pages/course/compenents/create.tsx +++ b/src/pages/course/compenents/create.tsx @@ -168,26 +168,31 @@ export const CourseCreate: React.FC = ({ open, onCancel }) => { }; const getChapterType = (e: any) => { - confirm({ - title: "操作确认", - icon: , - content: "切换列表选项会清空已添加课时，确认切换？", - centered: true, - okText: "确认", - cancelText: "取消", - onOk() { - setChapterType(e.target.value); - setChapters([]); - setHours([]); - setChapterHours([]); - setTreeData([]); - }, - onCancel() { - form.setFieldsValue({ - hasChapter: chapterType, - }); - }, - }); + const arr = [...chapters]; + if (arr.length > 0) { + confirm({ + title: "操作确认", + icon: , + content: "切换列表选项会清空已添加课时，确认切换？", + centered: true, + okText: "确认", + cancelText: "取消", + onOk() { + setChapterType(e.target.value); + setChapters([]); + setHours([]); + setChapterHours([]); + setTreeData([]); + }, + onCancel() { + form.setFieldsValue({ + hasChapter: chapterType, + }); + }, + }); + } else { + setChapterType(e.target.value); + } }; const delHour = (id: number) => { @@ -378,7 +383,9 @@ export const CourseCreate: React.FC = ({ open, onCancel }) => { rules={[{ required: true, message: "请选择课程类型!" }]} > - 公开课 + + 公开课 + 部门课 diff --git a/src/pages/course/compenents/hour-update.module.less b/src/pages/course/compenents/hour-update.module.less new file mode 100644 index 0000000..80e90f4 --- /dev/null +++ b/src/pages/course/compenents/hour-update.module.less @@ -0,0 +1,109 @@ +.top-content { + width: 502px; + height: 80px; + background: rgba(255, 77, 79, 0.1); + border-radius: 6px; + display: flex; + flex-direction: column; + justify-content: center; + box-sizing: border-box; + padding: 16px; + margin: 0 auto; + p { + font-size: 14px; + font-weight: 400; + color: #ff4d4f; + line-height: 24px; + margin: 0; + } +} + +.thumb-item { + width: 80px; + height: 60px; + cursor: pointer; + margin-right: 8px; + border-radius: 6px; + &:last-child { + margin-right: 0; + } +} + +.thumb-item-avtive { + width: 80px; + height: 60px; + border: 2px solid #ff4d4f; + cursor: pointer; + margin-right: 8px; + border-radius: 8px; + &:last-child { + 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 16px 16px 0; + margin-left: 42px; + .no-hours { + height: 24px; + font-size: 14px; + font-weight: 400; + color: rgba(0, 0, 0, 0.25); + line-height: 24px; + 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/hour-update.tsx b/src/pages/course/compenents/hour-update.tsx new file mode 100644 index 0000000..7602371 --- /dev/null +++ b/src/pages/course/compenents/hour-update.tsx @@ -0,0 +1,462 @@ +import React, { useState, useEffect } from "react"; +import { Space, Button, Drawer, Form, Input, Modal, message } from "antd"; +import styles from "./hour-update.module.less"; +import { course, courseHour, courseChapter } from "../../../api/index"; +import { SelectResource } from "../../../compenents"; +import { ExclamationCircleFilled } from "@ant-design/icons"; +import { TreeHours } from "./hours"; + +const { confirm } = Modal; + +interface PropInterface { + id: number; + open: boolean; + onCancel: () => void; +} + +interface Option { + value: string | number; + label: string; + children?: Option[]; +} + +export const CourseHourUpdate: React.FC = ({ + id, + open, + onCancel, +}) => { + const [form] = Form.useForm(); + 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(() => { + if (id === 0) { + return; + } + getDetail(); + }, [id]); + + const getDetail = () => { + course.course(id).then((res: any) => { + let chapterType = res.data.chapters.length > 0 ? 1 : 0; + setChapterType(chapterType); + if (chapterType === 1) { + setTreeData([]); + setHours([]); + let hours = res.data.hours; + let chapters = res.data.chapters; + const arr: any = []; + const keys: any = []; + for (let i = 0; i < chapters.length; i++) { + arr.push({ + id: chapters[i].id, + name: chapters[i].name, + hours: resetHours(hours[chapters[i].id]).arr, + }); + keys.push(resetHours(hours[chapters[i].id]).keys); + } + setChapters(arr); + setChapterHours(keys); + } else { + setChapters([]); + setChapterHours([]); + let hours = res.data.hours; + if (JSON.stringify(hours) !== "{}") { + const arr: any = resetHours(hours[0]).arr; + const keys: any = resetHours(hours[0]).keys; + setTreeData(arr); + setHours(keys); + } else { + setTreeData([]); + setHours([]); + } + } + }); + }; + + const resetHours = (data: any) => { + const arr: any = []; + const keys: any = []; + if (data) { + for (let i = 0; i < data.length; i++) { + arr.push({ + duration: data[i].duration, + type: data[i].type, + name: data[i].title, + rid: data[i].rid, + id: data[i].id, + }); + keys.push(data[i].rid); + } + } + return { arr, keys }; + }; + + const onFinish = (values: any) => {}; + + const onFinishFailed = (errorInfo: any) => { + console.log("Failed:", errorInfo); + }; + + const selectData = (arr: any, videos: any) => { + const hours: any = []; + for (let i = 0; i < videos.length; i++) { + hours.push({ + chapter_id: 0, + sort: i, + title: videos[i].name, + type: videos[i].type, + duration: videos[i].duration, + rid: videos[i].rid, + }); + } + courseHour + .storeCourseHourMulti(id, hours) + .then((res: any) => { + console.log("ok"); + setVideoVisible(false); + getDetail(); + }) + .catch((err) => { + message.error(err.message); + }); + }; + + const selectChapterData = (arr: any, videos: any) => { + const data = [...chapters]; + if (!data[addvideoCurrent].id) { + message.error("添加课时失败"); + return; + } + const hours: any = []; + for (let i = 0; i < videos.length; i++) { + hours.push({ + chapter_id: data[addvideoCurrent].id, + sort: i, + title: videos[i].name, + type: videos[i].type, + duration: videos[i].duration, + rid: videos[i].rid, + }); + } + courseHour + .storeCourseHourMulti(id, hours) + .then((res: any) => { + console.log("ok"); + setVideoVisible(false); + getDetail(); + }) + .catch((err) => { + message.error(err.message); + }); + }; + + const delHour = (hid: number) => { + const data = [...treeData]; + const index = data.findIndex((i: any) => i.rid === hid); + let delId = data[index].id; + if (index >= 0) { + data.splice(index, 1); + } + if (data.length > 0) { + setTreeData(data); + const keys = data.map((item: any) => item.rid); + setHours(keys); + } else { + setTreeData([]); + setHours([]); + } + if (delId) { + courseHour.destroyCourseHour(id, delId).then((res: any) => { + console.log("ok"); + }); + } + }; + + const transHour = (arr: any) => { + setHours(arr); + const data = [...treeData]; + const newArr: any = []; + const hourIds: any = []; + for (let i = 0; i < arr.length; i++) { + data.map((item: any) => { + if (item.rid === arr[i]) { + newArr.push(item); + hourIds.push(item.id); + } + }); + } + setTreeData(newArr); + courseHour.transCourseHour(id, hourIds).then((res: any) => { + console.log("ok"); + }); + }; + + 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 saveChapterName = (index: number, value: string) => { + const arr = [...chapters]; + if (arr[index].id) { + courseChapter + .updateCourseChapter(id, arr[index].id, value, arr.length) + .then((res: any) => { + console.log("ok"); + getDetail(); + }) + .catch((err) => { + message.error(err.message); + }); + } else { + courseChapter + .storeCourseChapter(id, value, arr.length) + .then((res: any) => { + console.log("ok"); + getDetail(); + }) + .catch((err) => { + message.error(err.message); + }); + } + }; + + const delChapter = (index: number) => { + const arr = [...chapters]; + const keys = [...chapterHours]; + confirm({ + title: "操作确认", + icon: , + content: "删除章节会清空已添加课时，确认删除？", + centered: true, + okText: "确认", + cancelText: "取消", + onOk() { + if (arr[index].id) { + courseChapter + .destroyCourseChapter(id, arr[index].id) + .then((res: any) => { + console.log("ok"); + getDetail(); + }) + .catch((err) => { + message.error(err.message); + }); + } + }, + onCancel() {}, + }); + }; + + const delChapterHour = (index: number, hid: number) => { + const keys = [...chapterHours]; + const data = [...chapters]; + const current = data[index].hours.findIndex((i: any) => i.rid === hid); + let delId = data[index].hours.map((item: any) => item.id); + 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); + } + + if (delId) { + courseHour.destroyCourseHour(id, delId).then((res: any) => { + console.log("ok"); + }); + } + }; + + const transChapterHour = (index: number, arr: any) => { + const keys = [...chapterHours]; + keys[index] = arr; + setChapterHours(keys); + + const data = [...chapters]; + const newArr: any = []; + const hourIds: any = []; + for (let i = 0; i < arr.length; i++) { + data[index].hours.map((item: any) => { + if (item.rid === arr[i]) { + newArr.push(item); + hourIds.push(item.id); + } + }); + } + data[index].hours = newArr; + setChapters(data); + courseHour.transCourseHour(id, hourIds).then((res: any) => { + console.log("ok"); + }); + }; + + return ( + <> + +
+

1.线上课课时调整及时生效，操作不可逆，请谨慎操作。

+

2.课时调整后，已有学习进度会在学员学习时重新计算。

+
+
+ { + setVideoVisible(false); + }} + onSelected={(arr: any, videos: any) => { + if (chapterType == 0) { + selectData(arr, videos); + } else { + selectChapterData(arr, videos); + } + }} + /> +
+ {chapterType === 0 && ( +
+ +
+ +
+ +
+ {treeData.length === 0 && ( + + 请点击上方按钮添加课时 + + )} + {treeData.length > 0 && ( + { + delHour(id); + }} + onUpdate={(arr: any[]) => { + transHour(arr); + }} + /> + )} +
+
+ )} + {chapterType === 1 && ( +
+ {chapters.length > 0 && + chapters.map((item: any, index: number) => { + return ( +
+
+
+ 章节{index + 1}： +
+ { + setChapterName(index, e.target.value); + }} + onBlur={(e) => { + saveChapterName(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/update.tsx b/src/pages/course/compenents/update.tsx index b29605d..1cb7235 100644 --- a/src/pages/course/compenents/update.tsx +++ b/src/pages/course/compenents/update.tsx @@ -13,10 +13,8 @@ import { } from "antd"; import styles from "./update.module.less"; import { course, department } from "../../../api/index"; -import { UploadImageButton, SelectResource } from "../../../compenents"; -import { ExclamationCircleFilled } from "@ant-design/icons"; +import { UploadImageButton } from "../../../compenents"; import { getHost } from "../../../utils/index"; -import { TreeHours } from "./hours"; const { confirm } = Modal; @@ -46,13 +44,6 @@ export const CourseUpdate: React.FC = ({ const [categories, setCategories] = useState([]); const [thumb, setThumb] = useState(""); const [type, setType] = useState("open"); - 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(() => { if (id === 0) { @@ -143,55 +134,9 @@ export const CourseUpdate: React.FC = ({ }); setType(type); setThumb(res.data.course.thumb); - setChapterType(chapterType); - if (chapterType === 1) { - setTreeData([]); - setHours([]); - let hours = res.data.hours; - let chapters = res.data.chapters; - const arr: any = []; - const keys: any = []; - for (let i = 0; i < chapters.length; i++) { - arr.push({ - name: chapters[i].name, - hours: resetHours(hours[chapters[i].id]).arr, - }); - keys.push(resetHours(hours[chapters[i].id]).keys); - } - setChapters(arr); - setChapterHours(keys); - } else { - setChapters([]); - setChapterHours([]); - let hours = res.data.hours; - if (JSON.stringify(hours) !== "{}") { - const arr: any = resetHours(hours[0]).arr; - const keys: any = resetHours(hours[0]).keys; - setTreeData(arr); - setHours(keys); - } else { - setTreeData([]); - setHours([]); - } - } }); }; - const resetHours = (data: any) => { - const arr: any = []; - const keys: any = []; - for (let i = 0; i < data.length; i++) { - arr.push({ - duration: data[i].duration, - type: data[i].type, - name: data[i].title, - rid: data[i].rid, - }); - keys.push(data[i].rid); - } - return { arr, keys }; - }; - const checkChild = (departments: any[], id: number) => { for (let key in departments) { for (let i = 0; i < departments[key].length; i++) { @@ -247,8 +192,8 @@ export const CourseUpdate: React.FC = ({ values.isRequired, dep_ids, category_ids, - chapters, - treeData + [], + [] ) .then((res: any) => { message.success("保存成功！"); @@ -264,150 +209,6 @@ export const CourseUpdate: React.FC = ({ setType(e.target.value); }; - const selectData = (arr: any, videos: any) => { - setHours(arr); - setTreeData(videos); - 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: "操作确认", - icon: , - content: "切换列表选项会清空已添加课时，确认切换？", - centered: true, - okText: "确认", - cancelText: "取消", - onOk() { - setChapterType(e.target.value); - setChapters([]); - setHours([]); - setChapterHours([]); - setTreeData([]); - }, - onCancel() { - form.setFieldsValue({ - hasChapter: chapterType, - }); - }, - }); - }; - - const delHour = (id: number) => { - const data = [...treeData]; - const index = data.findIndex((i: any) => i.rid === id); - if (index >= 0) { - data.splice(index, 1); - } - if (data.length > 0) { - setTreeData(data); - const keys = data.map((item: any) => item.rid); - setHours(keys); - } else { - setTreeData([]); - setHours([]); - } - }; - - const transHour = (arr: any) => { - setHours(arr); - const data = [...treeData]; - const newArr: any = []; - for (let i = 0; i < arr.length; i++) { - data.map((item: any) => { - if (item.rid === arr[i]) { - newArr.push(item); - } - }); - } - 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) => { - const keys = [...chapterHours]; - const data = [...chapters]; - const current = data[index].hours.findIndex((i: any) => i.rid === id); - 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 ( <> = ({ width={634} >
- { - setVideoVisible(false); - }} - onSelected={(arr: any, videos: any) => { - if (chapterType == 0) { - selectData(arr, videos); - } else { - selectChapterData(arr, videos); - } - }} - />
= ({ rules={[{ required: true, message: "请选择课程类型!" }]} > - 公开课 + + 公开课 + + 部门课 @@ -617,111 +405,6 @@ export const CourseUpdate: React.FC = ({ placeholder="请输入课程简介" /> - - - 无章节 - 有章节 - - - {chapterType === 0 && ( -
- -
- -
- -
- {treeData.length === 0 && ( - - 请点击上方按钮添加课时 - - )} - {treeData.length > 0 && ( - { - delHour(id); - }} - onUpdate={(arr: any[]) => { - transHour(arr); - }} - /> - )} -
-
- )} - {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/index.tsx b/src/pages/course/index.tsx index 5d65b87..5431178 100644 --- a/src/pages/course/index.tsx +++ b/src/pages/course/index.tsx @@ -10,7 +10,7 @@ import { Space, Tabs, } from "antd"; -import { course, department, resourceCategory } from "../../api"; +import { course } from "../../api"; import styles from "./index.module.less"; import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons"; import type { ColumnsType } from "antd/es/table"; @@ -20,6 +20,7 @@ import { TreeDepartment, TreeCategory, PerButton } from "../../compenents"; import type { TabsProps } from "antd"; import { CourseCreate } from "./compenents/create"; import { CourseUpdate } from "./compenents/update"; +import { CourseHourUpdate } from "./compenents/hour-update"; const { confirm } = Modal; @@ -50,6 +51,7 @@ export const CoursePage = () => { const [createVisible, setCreateVisible] = useState(false); const [updateVisible, setUpdateVisible] = useState(false); + const [updateHourVisible, setHourUpdateVisible] = useState(false); const [cid, setCid] = useState(0); const items: TabsProps["items"] = [ @@ -133,9 +135,35 @@ export const CoursePage = () => { title: "操作", key: "action", fixed: "right", - width: 100, + width: 210, render: (_, record: any) => ( + { + setCid(Number(record.id)); + console.log("学员" + record.id); + }} + disabled={null} + /> +
+ { + setCid(Number(record.id)); + setHourUpdateVisible(true); + }} + disabled={null} + /> +
{ setRefresh(!refresh); }} /> + { + setHourUpdateVisible(false); + setRefresh(!refresh); + }} + />