feat: 课程创建

This commit is contained in:
mozzie 2023-03-09 22:28:16 +08:00
parent 3f9ad4b2df
commit 12be9a9180
2 changed files with 74 additions and 51 deletions

View File

@ -0,0 +1,12 @@
.chapter-list {
li {
display: flex;
justify-content: space-between;
&.l1 {
margin-top: 20px;
&:first-of-type {
margin-top: 0;
}
}
}
}

View File

@ -1,69 +1,80 @@
import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons"; import { MinusCircleOutlined, PlusOutlined } from "@ant-design/icons";
import { Button, Col, Form, Input, Row, Space, Typography } from "antd"; import {
Button,
Checkbox,
Col,
Form,
Input,
Radio,
Row,
Space,
Typography,
} from "antd";
const { Text } = Typography; const { Text } = Typography;
import {} from "antd";
import { useEffect, useState } from "react";
import "./index.less";
interface IProps { interface IProps {
onChange?: Function; onChange?: Function;
styles?: React.CSSProperties; styles?: React.CSSProperties;
} }
interface IChapter {
level: string;
title: string;
fileId?: string;
}
const Chatpter = (props: IProps) => { const Chatpter = (props: IProps) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const [chapterList, setChapterList] = useState<IChapter[]>([]);
const onBlur = () => { const onTocChange = () => {
console.log(form.getFieldsValue().chapter); const { toc } = form.getFieldsValue();
const process = toc.split("\n").map((row: string) => {
const [level, title, fileId] = row.split("|");
return !fileId ? { level, title } : { level, title, fileId };
});
setChapterList(process);
}; };
useEffect(() => {
console.log(chapterList);
}, [chapterList]);
return ( return (
<div style={{ ...props.styles }}> <div style={{ ...props.styles }}>
<Form form={form} style={{ maxWidth: 600 }}> <Row gutter={24}>
<Form.List name="chapter"> <Col span={12}>
{(fields, { add, remove }, { errors }) => ( <Form form={form} onChange={onTocChange}>
<> <Form.Item name="toc">
{fields.map((field, index) => ( <Input.TextArea
<Form.Item required={false} key={field.key}> placeholder="级别|标题|FileId"
<Form.Item style={{ minHeight: 600, lineHeight: 2, fontSize: 16 }}
{...field} ></Input.TextArea>
validateTrigger={["onChange", "onBlur"]} </Form.Item>
rules={[{ required: true, message: "请输入章节名称" }]} </Form>
noStyle </Col>
> <Col span={12}>
<Input <ul className="chapter-list">
placeholder="请输入章节名称" {chapterList.map((chapter, index) => (
onBlur={onBlur} <li
style={{ width: "60%" }} key={index}
/> className={+chapter.level === 1 ? "l1" : ""}
<Text>{JSON.stringify(field)}</Text> style={{ paddingLeft: +chapter.level === 1 ? 0 : 20 }}
</Form.Item> >
{fields.length > 1 ? ( <Text style={{ fontSize: +chapter.level === 1 ? 18 : 16 }}>
<MinusCircleOutlined onClick={() => remove(field.name)} /> {chapter.title}
) : null} </Text>
</Form.Item> {chapter.fileId && (
))} <Text type="secondary">{chapter.fileId}</Text>
<Form.Item> )}
<Space> </li>
<Button ))}
type="dashed" </ul>
onClick={() => add("The head item", 0)} </Col>
block </Row>
icon={<PlusOutlined />}
>
1
</Button>
<Button
type="primary"
onClick={() => add("The head item", 0)}
block
icon={<PlusOutlined />}
>
2
</Button>
</Space>
</Form.Item>
</>
)}
</Form.List>
</Form>
</div> </div>
); );
}; };