add
This commit is contained in:
ditiqi
parent
eb9eec00d9
commit
548187169f
|
|
@ -5,8 +5,17 @@ import {
|
|||
CaretRightOutlined,
|
||||
SaveOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { Form, Alert, Button, Input, Select, Space, Collapse, message } from "antd";
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Form,
|
||||
Alert,
|
||||
Button,
|
||||
Input,
|
||||
Select,
|
||||
Space,
|
||||
Collapse,
|
||||
message,
|
||||
} from "antd";
|
||||
import React, { useCallback, useEffect, useState } from "react";
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
|
|
@ -14,8 +23,9 @@ import {
|
|||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
DragEndEvent,
|
||||
} from "@dnd-kit/core";
|
||||
import { usePost } from "@nice/client";
|
||||
import { api, emitDataChange } from "@nice/client";
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
|
|
@ -26,9 +36,27 @@ import {
|
|||
import { CSS } from "@dnd-kit/utilities";
|
||||
import QuillEditor from "../../../../common/editor/quill/QuillEditor";
|
||||
import { TusUploader } from "../../../../common/uploader/TusUploader";
|
||||
import { LectureType } from "@nice/common";
|
||||
import { Lecture, LectureType, PostType } from "@nice/common";
|
||||
import { useCourseEditor } from "../context/CourseEditorContext";
|
||||
import { usePost } from "@nice/client";
|
||||
import toast from "react-hot-toast";
|
||||
interface SectionData {
|
||||
id: string;
|
||||
title: string;
|
||||
content?: string;
|
||||
courseId?: string;
|
||||
}
|
||||
|
||||
interface LectureData {
|
||||
id: string;
|
||||
title: string;
|
||||
meta?: {
|
||||
type?: LectureType;
|
||||
fieldIds?: [];
|
||||
};
|
||||
content?: string;
|
||||
sectionId?: string;
|
||||
}
|
||||
const CourseContentFormHeader = () => (
|
||||
<Alert
|
||||
type="info"
|
||||
|
|
@ -57,236 +85,356 @@ const CourseSectionEmpty = () => (
|
|||
</div>
|
||||
);
|
||||
|
||||
const SortableSection = ({ id, field, remove, children }: any) => {
|
||||
const { attributes, listeners, setNodeRef, transform, transition } =
|
||||
useSortable({ id });
|
||||
const [form] = Form.useForm();
|
||||
const { update, create } = usePost();
|
||||
const [loading, setLoading] = useState(false);
|
||||
interface SortableSectionProps {
|
||||
courseId?: string;
|
||||
field: SectionData;
|
||||
remove: () => void;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
const SortableSection: React.FC<SortableSectionProps> = ({
|
||||
field,
|
||||
remove,
|
||||
courseId,
|
||||
children,
|
||||
}) => {
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
};
|
||||
isDragging,
|
||||
} = useSortable({ id: field?.id });
|
||||
|
||||
const [form] = Form.useForm();
|
||||
const [editing, setEditing] = useState(field.id ? false : true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const { create, update } = usePost();
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!courseId) {
|
||||
toast.error("课程未创建，请先填写课程基本信息完成创建");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const values = await form.validateFields();
|
||||
setLoading(true);
|
||||
|
||||
if (values.id) {
|
||||
// await update({ ...values, type: 'section' });
|
||||
message.success('章节更新成功');
|
||||
} else {
|
||||
// await create({ ...values, type: 'section' });
|
||||
message.success('章节创建成功');
|
||||
const values = await form.validateFields();
|
||||
let result;
|
||||
try {
|
||||
if (!field?.id) {
|
||||
result = await create.mutateAsync({
|
||||
data: {
|
||||
title: values?.title,
|
||||
type: PostType.SECTION,
|
||||
parentId: courseId,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
result = await update.mutateAsync({
|
||||
data: {
|
||||
title: values?.title,
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
} catch (error: any) {
|
||||
message.error(error.message || '保存失败');
|
||||
|
||||
field.id = result.id;
|
||||
setEditing(false);
|
||||
message.success("保存成功");
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
message.error("保存失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const items = [
|
||||
{
|
||||
key: field.name,
|
||||
label: (
|
||||
<Form
|
||||
form={form}
|
||||
initialValues={field.value}>
|
||||
<div className="flex items-center justify-between flex-1">
|
||||
<Form.Item
|
||||
name="title"
|
||||
rules={[{ required: true, message: "请输入章节标题" }]}
|
||||
className="mb-0 flex-1 mr-4">
|
||||
<Input placeholder="输入章节标题" />
|
||||
</Form.Item>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<SaveOutlined />}
|
||||
loading={loading}
|
||||
onClick={handleSave}>
|
||||
保存
|
||||
</Button>
|
||||
<span
|
||||
{...listeners}
|
||||
{...attributes}
|
||||
className="cursor-move">
|
||||
<DragOutlined className="text-gray-400 hover:text-gray-600" />
|
||||
</span>
|
||||
<DeleteOutlined
|
||||
onClick={() => remove(field.name)}
|
||||
className="text-red-500 cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
),
|
||||
children: <div className="mt-4">{children}</div>,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div ref={setNodeRef} style={style} className="mb-4">
|
||||
<Collapse
|
||||
items={items}
|
||||
defaultActiveKey={[field.name]}
|
||||
expandIcon={({ isActive }) => (
|
||||
<CaretRightOutlined rotate={isActive ? 90 : 0} />
|
||||
)}
|
||||
className="bg-gray-50"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SortableLecture = ({ id, field, remove, sectionId }: any) => {
|
||||
const { attributes, listeners, setNodeRef, transform, transition } =
|
||||
useSortable({ id });
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
backgroundColor: isDragging ? "#f5f5f5" : undefined,
|
||||
};
|
||||
|
||||
const { form, taxonomies } = useCourseEditor();
|
||||
const lectureType =
|
||||
Form.useWatch(
|
||||
["sections", sectionId, "lectures", field.name, "type"],
|
||||
form
|
||||
) || LectureType.VIDEO;
|
||||
|
||||
const renderLabel = () => (
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<Form.Item
|
||||
{...field}
|
||||
name={[field.name, "title"]}
|
||||
rules={[{ required: true, message: "请输入课时标题" }]}
|
||||
className="mb-0 flex-1 mr-4">
|
||||
<Input placeholder="输入课时标题" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...field}
|
||||
name={[field.name, "type"]}
|
||||
rules={[{ required: true }]}
|
||||
initialValue={LectureType.VIDEO}
|
||||
className="mb-0 w-32">
|
||||
<Select
|
||||
options={[
|
||||
{ label: "视频", value: LectureType.VIDEO },
|
||||
{ label: "文章", value: LectureType.ARTICLE },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<div className="flex items-center">
|
||||
<DeleteOutlined
|
||||
onClick={() => remove(field.name)}
|
||||
className="text-red-500 cursor-pointer mx-2"
|
||||
/>
|
||||
<span {...listeners} {...attributes} className="cursor-move">
|
||||
<DragOutlined className="text-gray-400 hover:text-gray-600" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderContent = () => (
|
||||
<div className="mt-4">
|
||||
{lectureType === LectureType.ARTICLE && (
|
||||
<Form.Item
|
||||
{...field}
|
||||
name={[field.name, "content"]}
|
||||
rules={[{ required: true, message: "请输入文章内容" }]}>
|
||||
<QuillEditor />
|
||||
</Form.Item>
|
||||
)}
|
||||
|
||||
{lectureType === LectureType.VIDEO && (
|
||||
<Form.Item
|
||||
{...field}
|
||||
name={[field.name, "resourceIds"]}
|
||||
rules={[{ required: true, message: "请上传视频" }]}>
|
||||
<TusUploader />
|
||||
</Form.Item>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div ref={setNodeRef} style={style} className="mb-4">
|
||||
<Collapse
|
||||
defaultActiveKey={[field.key]}
|
||||
expandIcon={({ isActive }) => (
|
||||
<CaretRightOutlined rotate={isActive ? 90 : 0} />
|
||||
)}
|
||||
className="bg-white shadow-sm border">
|
||||
<Collapse.Panel key={field.key} header={renderLabel()}>
|
||||
{renderContent()}
|
||||
<Collapse>
|
||||
<Collapse.Panel
|
||||
header={
|
||||
editing ? (
|
||||
<Form
|
||||
form={form}
|
||||
className="flex items-center gap-4">
|
||||
<Form.Item
|
||||
name="title"
|
||||
className="mb-0 flex-1"
|
||||
initialValue={field?.title}>
|
||||
<Input placeholder="章节标题" />
|
||||
</Form.Item>
|
||||
<Space>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
loading={loading}
|
||||
icon={<SaveOutlined />}
|
||||
type="primary">
|
||||
保存
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setEditing(false);
|
||||
if (!field?.id) {
|
||||
remove();
|
||||
}
|
||||
}}>
|
||||
取消
|
||||
</Button>
|
||||
</Space>
|
||||
</Form>
|
||||
) : (
|
||||
<div className="flex items-center justify-between">
|
||||
<Space>
|
||||
<DragOutlined
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="cursor-move"
|
||||
/>
|
||||
<span>{field.title || "未命名章节"}</span>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => setEditing(true)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button type="link" danger onClick={remove}>
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
key={field.id || "new"}>
|
||||
{children}
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const LectureList = ({ field }: any) => {
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
})
|
||||
);
|
||||
interface SortableLectureProps {
|
||||
field: LectureData;
|
||||
remove: () => void;
|
||||
sectionFieldKey: string;
|
||||
}
|
||||
|
||||
const SortableLecture: React.FC<SortableLectureProps> = ({
|
||||
field,
|
||||
remove,
|
||||
sectionFieldKey,
|
||||
}) => {
|
||||
const {
|
||||
attributes,
|
||||
listeners,
|
||||
setNodeRef,
|
||||
transform,
|
||||
transition,
|
||||
isDragging,
|
||||
} = useSortable({ id: field?.id });
|
||||
const { create, update } = usePost();
|
||||
const [form] = Form.useForm();
|
||||
const [editing, setEditing] = useState(field?.id ? false : true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const lectureType =
|
||||
Form.useWatch(["meta", "type"], form) || LectureType.ARTICLE;
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const values = await form.validateFields();
|
||||
let result;
|
||||
try {
|
||||
if (!field.id) {
|
||||
result = await create.mutateAsync({
|
||||
data: {
|
||||
parentId: sectionFieldKey,
|
||||
type: PostType.LECTURE,
|
||||
title: values?.title,
|
||||
meta: {
|
||||
type: values?.meta?.type,
|
||||
fileIds: values?.meta?.fileIds,
|
||||
},
|
||||
resources: {
|
||||
connect: (values?.meta?.fileIds || []).map(
|
||||
(fileId) => ({
|
||||
fileId,
|
||||
})
|
||||
),
|
||||
},
|
||||
content: values?.content,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
result = await update.mutateAsync({
|
||||
where: {
|
||||
id: field?.id,
|
||||
},
|
||||
data: {
|
||||
title: values?.title,
|
||||
meta: {
|
||||
type: values?.meta?.type,
|
||||
fieldIds: values?.meta?.fileIds,
|
||||
},
|
||||
resources: {
|
||||
connect: (values?.meta?.fileIds || []).map(
|
||||
(fileId) => ({
|
||||
fileId,
|
||||
})
|
||||
),
|
||||
},
|
||||
content: values?.content,
|
||||
},
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
field.id = result.id;
|
||||
setEditing(false);
|
||||
message.success("保存成功");
|
||||
} catch (error) {
|
||||
message.error("保存失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
borderBottom: "1px solid #f0f0f0",
|
||||
backgroundColor: isDragging ? "#f5f5f5" : undefined,
|
||||
};
|
||||
|
||||
return (
|
||||
<Form.List name={[field.name, "lectures"]}>
|
||||
{(fields, { add, remove, move }) => (
|
||||
<>
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={({ active, over }) => {
|
||||
if (over && active.id !== over.id) {
|
||||
const oldIndex = fields.findIndex(
|
||||
(field) => field.key === active.id
|
||||
);
|
||||
const newIndex = fields.findIndex(
|
||||
(field) => field.key === over.id
|
||||
);
|
||||
if (oldIndex !== -1 && newIndex !== -1) {
|
||||
move(oldIndex, newIndex);
|
||||
<div ref={setNodeRef} style={style} className="p-4">
|
||||
{editing ? (
|
||||
<Form form={form} initialValues={field}>
|
||||
<div className="flex gap-4">
|
||||
<Form.Item
|
||||
name="title"
|
||||
initialValue={field?.title}
|
||||
className="mb-0 flex-1"
|
||||
rules={[{ required: true }]}>
|
||||
<Input placeholder="课时标题" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={["meta", "type"]}
|
||||
className="mb-0 w-32"
|
||||
rules={[{ required: true }]}>
|
||||
<Select
|
||||
placeholder="选择类型"
|
||||
options={[
|
||||
{ label: "视频", value: LectureType.VIDEO },
|
||||
{
|
||||
label: "文章",
|
||||
value: LectureType.ARTICLE,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
</div>
|
||||
<div className="mt-4 flex flex-1 ">
|
||||
{lectureType === LectureType.VIDEO ? (
|
||||
<Form.Item
|
||||
name={["meta", "fileIds"]}
|
||||
className="mb-0 flex-1"
|
||||
rules={[{ required: true }]}>
|
||||
<TusUploader multiple={false} />
|
||||
</Form.Item>
|
||||
) : (
|
||||
<Form.Item
|
||||
name="content"
|
||||
className="mb-0 flex-1"
|
||||
rules={[{ required: true }]}>
|
||||
<QuillEditor />
|
||||
</Form.Item>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-end gap-2">
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
loading={loading}
|
||||
type="primary"
|
||||
icon={<SaveOutlined />}>
|
||||
保存
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setEditing(false);
|
||||
if (!field?.id) {
|
||||
remove();
|
||||
}
|
||||
}
|
||||
}}>
|
||||
<SortableContext
|
||||
items={fields.map((f) => f.key)}
|
||||
strategy={verticalListSortingStrategy}>
|
||||
{fields.map((lectureField) => (
|
||||
<SortableLecture
|
||||
key={lectureField.key}
|
||||
id={lectureField.key}
|
||||
field={lectureField}
|
||||
sectionId={field.name}
|
||||
remove={remove}
|
||||
/>
|
||||
))}
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => add({ type: LectureType.VIDEO })}
|
||||
block
|
||||
icon={<PlusOutlined />}>
|
||||
添加课时
|
||||
</Button>
|
||||
</>
|
||||
}}>
|
||||
取消
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
) : (
|
||||
<div className="flex items-center justify-between">
|
||||
<Space>
|
||||
<DragOutlined
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="cursor-move"
|
||||
/>
|
||||
<CaretRightOutlined />
|
||||
<span>{field?.title || "未命名课时"}</span>
|
||||
</Space>
|
||||
<Space>
|
||||
<Button type="link" onClick={() => setEditing(true)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button type="link" danger onClick={remove}>
|
||||
删除
|
||||
</Button>
|
||||
</Space>
|
||||
</div>
|
||||
)}
|
||||
</Form.List>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function CourseContentForm() {
|
||||
const { form, taxonomies } = useCourseEditor();
|
||||
interface LectureListProps {
|
||||
field: SectionData;
|
||||
sectionId: string;
|
||||
}
|
||||
|
||||
const LectureList: React.FC<LectureListProps> = ({ field, sectionId }) => {
|
||||
const { softDeleteByIds } = usePost();
|
||||
const { data: lectures = [], isLoading } = (
|
||||
api.post.findMany as any
|
||||
).useQuery(
|
||||
{
|
||||
where: {
|
||||
parentId: sectionId,
|
||||
type: PostType.LECTURE,
|
||||
deletedAt: null,
|
||||
},
|
||||
},
|
||||
{
|
||||
enabled: !!sectionId,
|
||||
}
|
||||
);
|
||||
useEffect(() => {
|
||||
if (lectures && !isLoading) {
|
||||
setItems(lectures);
|
||||
}
|
||||
}, [lectures, isLoading]);
|
||||
const [items, setItems] = useState<LectureData[]>(lectures);
|
||||
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor),
|
||||
useSensor(KeyboardSensor, {
|
||||
|
|
@ -294,58 +442,163 @@ export default function CourseContentForm() {
|
|||
})
|
||||
);
|
||||
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
|
||||
setItems((items) => {
|
||||
const oldIndex = items.findIndex((item) => item.id === active.id);
|
||||
const newIndex = items.findIndex((item) => item.id === over.id);
|
||||
return arrayMove(items, oldIndex, newIndex);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="pl-8">
|
||||
<div
|
||||
onClick={() => {
|
||||
console.log(lectures);
|
||||
}}>
|
||||
123
|
||||
</div>
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}>
|
||||
<SortableContext
|
||||
items={items}
|
||||
strategy={verticalListSortingStrategy}>
|
||||
{items.map((lecture) => (
|
||||
<SortableLecture
|
||||
key={lecture.id}
|
||||
field={lecture}
|
||||
remove={async () => {
|
||||
if (lecture?.id) {
|
||||
await softDeleteByIds.mutateAsync({
|
||||
ids: [lecture.id],
|
||||
});
|
||||
}
|
||||
setItems(lectures);
|
||||
}}
|
||||
sectionFieldKey={sectionId}
|
||||
/>
|
||||
))}
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
<Button
|
||||
type="dashed"
|
||||
block
|
||||
icon={<PlusOutlined />}
|
||||
className="mt-4"
|
||||
onClick={() => {
|
||||
setItems([
|
||||
...items.filter((item) => !!item.id),
|
||||
{
|
||||
id: null,
|
||||
title: "",
|
||||
meta: {
|
||||
type: LectureType.ARTICLE,
|
||||
},
|
||||
},
|
||||
]);
|
||||
}}>
|
||||
添加课时
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const CourseContentForm: React.FC = () => {
|
||||
const { editId } = useCourseEditor();
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
})
|
||||
);
|
||||
const { softDeleteByIds } = usePost();
|
||||
const { data: sections = [], isLoading } = api.post.findMany.useQuery(
|
||||
{
|
||||
where: {
|
||||
parentId: editId,
|
||||
type: PostType.SECTION,
|
||||
deletedAt: null,
|
||||
},
|
||||
},
|
||||
{
|
||||
enabled: !!editId,
|
||||
}
|
||||
);
|
||||
|
||||
const [items, setItems] = useState<any[]>(sections);
|
||||
useEffect(() => {
|
||||
if (sections && !isLoading) {
|
||||
setItems(sections);
|
||||
}
|
||||
}, [sections]);
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
|
||||
setItems((items) => {
|
||||
const oldIndex = items.findIndex((item) => item.id === active.id);
|
||||
const newIndex = items.findIndex((item) => item.id === over.id);
|
||||
return arrayMove(items, oldIndex, newIndex);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-6">
|
||||
<CourseContentFormHeader />
|
||||
|
||||
<Form.List name="sections">
|
||||
{(fields, { add, remove, move }) => (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={({ active, over }) => {
|
||||
if (over && active.id !== over.id) {
|
||||
const oldIndex = fields.findIndex(
|
||||
(field) => field.key === active.id
|
||||
);
|
||||
const newIndex = fields.findIndex(
|
||||
(field) => field.key === over.id
|
||||
);
|
||||
if (oldIndex !== -1 && newIndex !== -1) {
|
||||
move(oldIndex, newIndex);
|
||||
}
|
||||
}
|
||||
}}>
|
||||
<SortableContext
|
||||
items={fields.map((f) => f.key)}
|
||||
strategy={verticalListSortingStrategy}>
|
||||
{fields.length === 0 && <CourseSectionEmpty />}
|
||||
{fields.map((field) => (
|
||||
<SortableSection
|
||||
key={field.key}
|
||||
id={field.key}
|
||||
field={field}
|
||||
remove={remove}>
|
||||
<LectureList field={field} />
|
||||
</SortableSection>
|
||||
))}
|
||||
</SortableContext>
|
||||
<Form.Item>
|
||||
<Button
|
||||
block
|
||||
size="large"
|
||||
onClick={() =>
|
||||
add({ title: "新章节", lectures: [] })
|
||||
}
|
||||
icon={<PlusOutlined />}
|
||||
type="primary"
|
||||
className="mt-4">
|
||||
添加新章节
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</DndContext>
|
||||
)}
|
||||
</Form.List>
|
||||
{items.length === 0 ? (
|
||||
<CourseSectionEmpty />
|
||||
) : (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}>
|
||||
<SortableContext
|
||||
items={items}
|
||||
strategy={verticalListSortingStrategy}>
|
||||
{items?.map((section, index) => (
|
||||
<SortableSection
|
||||
courseId={editId}
|
||||
key={section.id}
|
||||
field={section}
|
||||
remove={async () => {
|
||||
if (section?.id) {
|
||||
await softDeleteByIds.mutateAsync({
|
||||
ids: [section.id],
|
||||
});
|
||||
}
|
||||
setItems(sections);
|
||||
}}>
|
||||
<LectureList
|
||||
field={section}
|
||||
sectionId={section.id}
|
||||
/>
|
||||
</SortableSection>
|
||||
))}
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
|
||||
<Button
|
||||
type="dashed"
|
||||
block
|
||||
icon={<PlusOutlined />}
|
||||
className="mt-4"
|
||||
onClick={() => {
|
||||
setItems([
|
||||
...items.filter((item) => !!item.id),
|
||||
{ id: null, title: "" },
|
||||
]);
|
||||
}}>
|
||||
添加章节
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default CourseContentForm;
|
||||
|
|
|
|||
Loading…
Reference in New Issue