diff --git a/src/compenents/tree-category/index.tsx b/src/compenents/tree-category/index.tsx index d92a09b..d912b37 100644 --- a/src/compenents/tree-category/index.tsx +++ b/src/compenents/tree-category/index.tsx @@ -9,9 +9,11 @@ interface Option { } interface PropInterface { + type: string; text: string; categoryCount: any; resourceTotal: number; + onUpdate: (keys: any, title: any) => void; } @@ -25,15 +27,20 @@ export const TreeCategory = (props: PropInterface) => { const categories = res.data.categories; if (JSON.stringify(categories) !== "{}") { const new_arr: Option[] = checkArr(categories, 0); - new_arr.unshift({ - key: 0, - title: ( -
- 未分类 - ({props.categoryCount[0] || 0}) -
- ), - }); + if (props.type === "no-cate") { + new_arr.unshift({ + key: 0, + title: ( +
+ 未分类 + + ({props.categoryCount[0] || 0}) + +
+ ), + }); + } + setTreeData(new_arr); } }); diff --git a/src/compenents/upload-image-button/index.tsx b/src/compenents/upload-image-button/index.tsx index ad6a883..2967e9a 100644 --- a/src/compenents/upload-image-button/index.tsx +++ b/src/compenents/upload-image-button/index.tsx @@ -98,6 +98,7 @@ export const UploadImageButton = (props: PropsInterface) => { { = ({ open, 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); } diff --git a/src/pages/course/compenents/hours.tsx b/src/pages/course/compenents/hours.tsx index 79e6eaf..c8e7c34 100644 --- a/src/pages/course/compenents/hours.tsx +++ b/src/pages/course/compenents/hours.tsx @@ -38,9 +38,7 @@ export const TreeHours = (props: PropInterface) => { color: "rgba(0,0,0,0.3)", }} /> -
- {hours[i].name} {hours[i].rid} -
+
{hours[i].name}
void; +} + +interface Option { + value: string | number; + label: string; + children?: Option[]; +} + +export const CourseUpdate: React.FC = ({ + id, + open, + onCancel, +}) => { + const [form] = Form.useForm(); + const defaultThumb1 = getHost() + "thumb/thumb1.png"; + const defaultThumb2 = getHost() + "thumb/thumb2.png"; + const defaultThumb3 = getHost() + "thumb/thumb3.png"; + const [loading, setLoading] = useState(true); + const [departments, setDepartments] = useState([]); + 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) { + return; + } + getCategory(); + }, [id]); + + const getCategory = () => { + course.createCourse().then((res: any) => { + const categories = res.data.categories; + if (JSON.stringify(categories) !== "{}") { + const new_arr: Option[] = checkArr(categories, 0); + setCategories(new_arr); + } + + getParams(categories); + }); + }; + const getParams = (cats: any) => { + department.departmentList().then((res: any) => { + const departments = res.data.departments; + if (JSON.stringify(departments) !== "{}") { + const new_arr: Option[] = checkArr(departments, 0); + setDepartments(new_arr); + } + getDetail(departments, cats); + }); + }; + + const getDetail = (deps: any, cats: any) => { + course.course(id).then((res: any) => { + let box = res.data.dep_ids; + let depIds: any[] = []; + if (box.length > 1) { + for (let i = 0; i < box.length; i++) { + let item = checkChild(deps, box[i]); + let arr: any[] = []; + if (item === undefined) { + arr.push(box[i]); + } else if (item.parent_chain === "") { + arr.push(box[i]); + } else { + let new_arr = item.parent_chain.split(","); + new_arr.map((num: any) => { + arr.push(Number(num)); + }); + arr.push(box[i]); + } + depIds.push(arr); + } + } else { + depIds = res.data.dep_ids; + } + let box2 = res.data.category_ids; + let categoryIds: any[] = []; + if (box2.length > 1) { + for (let i = 0; i < box2.length; i++) { + let item = checkChild(cats, box2[i]); + let arr: any[] = []; + if (item === undefined) { + arr.push(box2[i]); + } else if (item.parent_chain === "") { + arr.push(box2[i]); + } else { + let new_arr = item.parent_chain.split(","); + new_arr.map((num: any) => { + arr.push(Number(num)); + }); + arr.push(box2[i]); + } + categoryIds.push(arr); + } + } else { + categoryIds = res.data.category_ids; + } + let chapterType = res.data.chapters.length > 0 ? 1 : 0; + form.setFieldsValue({ + title: res.data.course.title, + thumb: res.data.course.thumb, + dep_ids: depIds, + category_ids: categoryIds, + type: "open", + desc: "", + hasChapter: chapterType, + }); + 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; + const arr: any = resetHours(hours[0]).arr; + const keys: any = resetHours(hours[0]).keys; + setTreeData(arr); + setHours(keys); + } + }); + }; + + 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++) { + if (departments[key][i].id === id) { + return departments[key][i]; + } + } + } + }; + + const checkArr = (departments: any[], id: number) => { + const arr = []; + for (let i = 0; i < departments[id].length; i++) { + if (!departments[departments[id][i].id]) { + arr.push({ + label: departments[id][i].name, + value: departments[id][i].id, + }); + } else { + const new_arr: Option[] = checkArr(departments, departments[id][i].id); + arr.push({ + label: departments[id][i].name, + value: departments[id][i].id, + children: new_arr, + }); + } + } + return arr; + }; + + const onFinish = (values: any) => { + let dep_ids: any[] = []; + if (type === "elective") { + for (let i = 0; i < values.dep_ids.length; i++) { + dep_ids.push(values.dep_ids[i][values.dep_ids[i].length - 1]); + } + } + let category_ids: any[] = []; + for (let j = 0; j < values.category_ids.length; j++) { + category_ids.push( + values.category_ids[j][values.category_ids[j].length - 1] + ); + } + course + .storeCourse( + values.title, + values.thumb, + 1, + dep_ids, + category_ids, + chapters, + treeData + ) + .then((res: any) => { + message.success("保存成功！"); + onCancel(); + }); + }; + + const onFinishFailed = (errorInfo: any) => { + console.log("Failed:", errorInfo); + }; + + const getType = (e: any) => { + 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); + } + }} + /> +
+ + + + + + + + + 公开课 + 部门课 + + + + {type === "elective" && ( + + + + )} + + +
+ +
+
+
{ + setThumb(defaultThumb1); + form.setFieldsValue({ + thumb: defaultThumb1, + }); + }} + > + +
+
{ + setThumb(defaultThumb2); + form.setFieldsValue({ + thumb: defaultThumb2, + }); + }} + > + +
+
{ + setThumb(defaultThumb3); + form.setFieldsValue({ + thumb: defaultThumb3, + }); + }} + > + +
+
+
+ { + setThumb(url); + form.setFieldsValue({ thumb: url }); + }} + > + + （推荐尺寸:400x300px） + +
+
+
+ + + + + + + 无章节 + 有章节 + + + {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 381f147..83c7480 100644 --- a/src/pages/course/index.tsx +++ b/src/pages/course/index.tsx @@ -19,6 +19,7 @@ import { Link, useNavigate } from "react-router-dom"; import { TreeDepartment, TreeCategory, PerButton } from "../../compenents"; import type { TabsProps } from "antd"; import { CourseCreate } from "./compenents/create"; +import { CourseUpdate } from "./compenents/update"; const { confirm } = Modal; @@ -58,6 +59,7 @@ export const CoursePage = () => { children: (
{ class="b-link c-red" icon={null} p="course" - onClick={() => navigate(`/course/update/${record.id}`)} + onClick={() => { + setCid(Number(record.id)); + setUpdateVisible(true); + }} disabled={null} />
@@ -292,6 +297,14 @@ export const CoursePage = () => { setRefresh(!refresh); }} /> + { + setUpdateVisible(false); + setRefresh(!refresh); + }} + />
diff --git a/src/pages/resource/images/index.tsx b/src/pages/resource/images/index.tsx index 47b5668..ae97a05 100644 --- a/src/pages/resource/images/index.tsx +++ b/src/pages/resource/images/index.tsx @@ -154,6 +154,7 @@ export const ResourceImagesPage = () => {
{