From c0994dc29bb13198e9befd43ae68e52143ef18d5 Mon Sep 17 00:00:00 2001 From: unknown <18119604035@163.com> Date: Sat, 29 Jul 2023 15:33:14 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BA=E8=AF=BE=E7=A8=8B=E8=AF=BE?= =?UTF-8?q?=E4=BB=B6=E7=BC=96=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/course-attachment.ts | 22 +- src/api/internal/httpClient.ts | 2 +- .../compenents/attachment-update.module.scss | 43 ++++ .../course/compenents/attachment-update.tsx | 219 ++++++++++++++++++ src/pages/course/compenents/create.tsx | 6 - src/pages/course/compenents/hour-update.tsx | 8 +- src/pages/course/compenents/update.tsx | 8 - src/pages/course/index.tsx | 28 +++ 8 files changed, 302 insertions(+), 34 deletions(-) create mode 100644 src/pages/course/compenents/attachment-update.module.scss create mode 100644 src/pages/course/compenents/attachment-update.tsx diff --git a/src/api/course-attachment.ts b/src/api/course-attachment.ts index dae980a..8629805 100644 --- a/src/api/course-attachment.ts +++ b/src/api/course-attachment.ts @@ -1,22 +1,20 @@ import client from "./internal/httpClient"; -export function updateCourseAttachment( +export function storeCourseAttachmentMulti( courseId: number, - id: number, - chapterId: number, - name: string, - type: string, - rid: number + attachments: number[] ) { - return client.put(`/backend/v1/course/${courseId}/attachment/create-batch`, { - chapter_id: chapterId, - name, - type, - sort: 0, - rid, + return client.post(`/backend/v1/course/${courseId}/attachment/create-batch`, { + attachments: attachments, }); } export function destroyAttachment(courseId: number, id: number) { return client.destroy(`/backend/v1/course/${courseId}/attachment/${id}`); } + +export function transCourseAttachment(courseId: number, ids: number[]) { + return client.put(`/backend/v1/course/${courseId}/attachment/update/sort`, { + ids: ids, + }); +} diff --git a/src/api/internal/httpClient.ts b/src/api/internal/httpClient.ts index 8c75dee..a029412 100644 --- a/src/api/internal/httpClient.ts +++ b/src/api/internal/httpClient.ts @@ -8,7 +8,7 @@ const GoLogin = () => { }; const GoError = () => { - window.location.href = "/error"; + // window.location.href = "/error"; }; export class HttpClient { diff --git a/src/pages/course/compenents/attachment-update.module.scss b/src/pages/course/compenents/attachment-update.module.scss new file mode 100644 index 0000000..cc25058 --- /dev/null +++ b/src/pages/course/compenents/attachment-update.module.scss @@ -0,0 +1,43 @@ +.hous-box { + width: 500.53px; + 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: 8px 8px 0px 8px; + margin-left: 42px; + display: flex; + flex-direction: column; + .no-hours { + height: 24px; + font-size: 14px; + font-weight: 400; + color: rgba(0, 0, 0, 0.25); + line-height: 24px; + margin-top: 8px; + } +} +.top-content { + width: 502px; + height: auto; + background: rgba(255, 77, 79, 0.1); + border-radius: 6px; + display: flex; + flex-direction: column; + justify-content: center; + box-sizing: border-box; + padding: 8px 16px; + margin: 0 auto; + p { + font-size: 14px; + font-weight: 400; + color: #ff4d4f; + line-height: 24px; + margin: 0; + } +} diff --git a/src/pages/course/compenents/attachment-update.tsx b/src/pages/course/compenents/attachment-update.tsx new file mode 100644 index 0000000..a21cde4 --- /dev/null +++ b/src/pages/course/compenents/attachment-update.tsx @@ -0,0 +1,219 @@ +import React, { useState, useEffect } from "react"; +import { Button, Drawer, Form, Modal, message } from "antd"; +import styles from "./hour-update.module.less"; +import { course, courseAttachment } from "../../../api/index"; +import { SelectAttachment } from "../../../compenents"; +import { ExclamationCircleFilled } from "@ant-design/icons"; +import { TreeAttachments } from "./attachments"; + +const { confirm } = Modal; + +interface PropInterface { + id: number; + open: boolean; + onCancel: () => void; +} + +export const CourseAttachmentUpdate: React.FC = ({ + id, + open, + onCancel, +}) => { + const [form] = Form.useForm(); + const [attachmentVisible, setAttachmentVisible] = useState(false); + const [attachmentData, setAttachmentData] = useState([]); + const [attachments, setAttachments] = useState([]); + + useEffect(() => { + if (id === 0) { + return; + } + getDetail(); + }, [id, open]); + + const getDetail = () => { + course.course(id).then((res: any) => { + let treeData = res.data.attachments; + if (treeData.length > 0) { + const arr: any = resetAttachments(treeData).arr; + const keys: any = resetAttachments(treeData).keys; + setAttachmentData(arr); + setAttachments(keys); + } + }); + }; + + const resetAttachments = (data: any) => { + const arr: any = []; + const keys: any = []; + if (data) { + for (let i = 0; i < data.length; i++) { + arr.push({ + 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 selectAttachmentData = (arr: any, videos: any) => { + const hours: any = []; + for (let i = 0; i < videos.length; i++) { + if (videos[i].disabled === false) { + hours.push({ + sort: attachmentData.length + i, + title: videos[i].name, + type: videos[i].type, + rid: videos[i].rid, + }); + } + } + if (hours.length === 0) { + message.error("请选择视频"); + return; + } + courseAttachment + .storeCourseAttachmentMulti(id, hours) + .then((res: any) => { + console.log("ok"); + setAttachmentVisible(false); + getDetail(); + }) + .catch((err) => { + message.error(err.message); + }); + }; + + const delAttachments = (hid: number) => { + const data = [...attachmentData]; + confirm({ + title: "操作确认", + icon: , + content: "确认删除此课件？", + centered: true, + okText: "确认", + cancelText: "取消", + onOk() { + 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) { + setAttachmentData(data); + const keys = data.map((item: any) => item.rid); + setAttachments(keys); + } else { + setAttachmentData([]); + setAttachments([]); + } + if (delId) { + courseAttachment.destroyAttachment(id, delId).then((res: any) => { + console.log("ok"); + }); + } + }, + onCancel() { + console.log("Cancel"); + }, + }); + }; + + const transAttachments = (arr: any) => { + setAttachments(arr); + const data = [...attachmentData]; + 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); + } + }); + } + setAttachmentData(newArr); + courseAttachment.transCourseAttachment(id, hourIds).then((res: any) => { + console.log("ok"); + }); + }; + + return ( + <> + +
+

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

+
+
+ { + setAttachmentVisible(false); + }} + onSelected={(arr: any, videos: any) => { + selectAttachmentData(arr, videos); + }} + > +
+
+ +
+ +
+ +
+ {attachmentData.length === 0 && ( + + 请点击上方按钮添加课件 + + )} + {attachmentData.length > 0 && ( + { + delAttachments(id); + }} + onUpdate={(arr: any[]) => { + transAttachments(arr); + }} + /> + )} +
+
+
+
+ + + ); +}; diff --git a/src/pages/course/compenents/create.tsx b/src/pages/course/compenents/create.tsx index 79989cd..c67d186 100644 --- a/src/pages/course/compenents/create.tsx +++ b/src/pages/course/compenents/create.tsx @@ -32,12 +32,6 @@ interface PropInterface { onCancel: () => void; } -interface Option { - value: string | number; - title: string; - children?: Option[]; -} - export const CourseCreate: React.FC = ({ cateIds, depIds, diff --git a/src/pages/course/compenents/hour-update.tsx b/src/pages/course/compenents/hour-update.tsx index 14d5f33..2c91660 100644 --- a/src/pages/course/compenents/hour-update.tsx +++ b/src/pages/course/compenents/hour-update.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { Space, Button, Drawer, Form, Input, Modal, message } from "antd"; +import { 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"; @@ -14,12 +14,6 @@ interface PropInterface { onCancel: () => void; } -interface Option { - value: string | number; - label: string; - children?: Option[]; -} - export const CourseHourUpdate: React.FC = ({ id, open, diff --git a/src/pages/course/compenents/update.tsx b/src/pages/course/compenents/update.tsx index 41d6cb4..c36b3ae 100644 --- a/src/pages/course/compenents/update.tsx +++ b/src/pages/course/compenents/update.tsx @@ -16,20 +16,12 @@ import { useSelector } from "react-redux"; import { course, department } from "../../../api/index"; import { UploadImageButton } from "../../../compenents"; -const { confirm } = Modal; - interface PropInterface { id: number; open: boolean; onCancel: () => void; } -interface Option { - value: string | number; - title: string; - children?: Option[]; -} - export const CourseUpdate: React.FC = ({ id, open, diff --git a/src/pages/course/index.tsx b/src/pages/course/index.tsx index a4643c1..5374f6b 100644 --- a/src/pages/course/index.tsx +++ b/src/pages/course/index.tsx @@ -27,6 +27,7 @@ import type { TabsProps } from "antd"; import { CourseCreate } from "./compenents/create"; import { CourseUpdate } from "./compenents/update"; import { CourseHourUpdate } from "./compenents/hour-update"; +import { CourseAttachmentUpdate } from "./compenents/attachment-update"; const { confirm } = Modal; @@ -66,6 +67,8 @@ const CoursePage = () => { const [createVisible, setCreateVisible] = useState(false); const [updateVisible, setUpdateVisible] = useState(false); const [updateHourVisible, setHourUpdateVisible] = useState(false); + const [updateAttachmentVisible, setUpdateAttachmentVisible] = + useState(false); const [cid, setCid] = useState(0); const [cateId, setCateId] = useState(Number(result.get("cid"))); const [did, setDid] = useState(Number(result.get("did"))); @@ -241,6 +244,23 @@ const CoursePage = () => { }, { key: "3", + label: ( + + ), + }, + { + key: "4", label: (