mirror of
https://github.com/PlayEdu/backend
synced 2025-07-22 03:29:43 +08:00
课程新建组件haul初步
This commit is contained in:
parent
8770095727
commit
18634b9c71
0
src/pages/course/compenents/create.module.less
Normal file
0
src/pages/course/compenents/create.module.less
Normal file
201
src/pages/course/compenents/create.tsx
Normal file
201
src/pages/course/compenents/create.tsx
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
import {
|
||||||
|
Space,
|
||||||
|
Switch,
|
||||||
|
Button,
|
||||||
|
Drawer,
|
||||||
|
Form,
|
||||||
|
Cascader,
|
||||||
|
Input,
|
||||||
|
message,
|
||||||
|
} from "antd";
|
||||||
|
import styles from "./create.module.less";
|
||||||
|
import { course, department } from "../../../api/index";
|
||||||
|
import { UploadImageButton } from "../../../compenents";
|
||||||
|
|
||||||
|
interface PropInterface {
|
||||||
|
open: boolean;
|
||||||
|
onCancel: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Option {
|
||||||
|
value: string | number;
|
||||||
|
label: string;
|
||||||
|
children?: Option[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
|
||||||
|
const [form] = Form.useForm();
|
||||||
|
const [loading, setLoading] = useState<boolean>(true);
|
||||||
|
const [departments, setDepartments] = useState<any>([]);
|
||||||
|
const [categories, setCategories] = useState<any>([]);
|
||||||
|
const [thumb, setThumb] = useState<string>("");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getParams();
|
||||||
|
getCategory();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
form.setFieldsValue({
|
||||||
|
title: "",
|
||||||
|
thumb: "",
|
||||||
|
dep_ids: [],
|
||||||
|
category_ids: [],
|
||||||
|
});
|
||||||
|
setThumb("");
|
||||||
|
}, [form, open]);
|
||||||
|
|
||||||
|
const getParams = () => {
|
||||||
|
department.departmentList().then((res: any) => {
|
||||||
|
const departments = res.data.departments;
|
||||||
|
if (JSON.stringify(departments) !== "{}") {
|
||||||
|
const new_arr: Option[] = checkArr(departments, 0);
|
||||||
|
setDepartments(new_arr);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
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[] = [];
|
||||||
|
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)
|
||||||
|
.then((res: any) => {
|
||||||
|
message.success("保存成功!");
|
||||||
|
onCancel();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onFinishFailed = (errorInfo: any) => {
|
||||||
|
console.log("Failed:", errorInfo);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Drawer
|
||||||
|
title="新建课程"
|
||||||
|
onClose={onCancel}
|
||||||
|
maskClosable={false}
|
||||||
|
open={open}
|
||||||
|
bodyStyle={{ paddingBottom: 80 }}
|
||||||
|
footer={
|
||||||
|
<Space className="j-r-flex">
|
||||||
|
<Button onClick={() => onCancel()}>取 消</Button>
|
||||||
|
<Button onClick={() => form.submit()} type="primary">
|
||||||
|
确 认
|
||||||
|
</Button>
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
width={634}
|
||||||
|
>
|
||||||
|
<div className="float-left mt-24">
|
||||||
|
<Form
|
||||||
|
form={form}
|
||||||
|
name="basic"
|
||||||
|
labelCol={{ span: 5 }}
|
||||||
|
wrapperCol={{ span: 19 }}
|
||||||
|
initialValues={{ remember: true }}
|
||||||
|
onFinish={onFinish}
|
||||||
|
onFinishFailed={onFinishFailed}
|
||||||
|
autoComplete="off"
|
||||||
|
>
|
||||||
|
<Form.Item
|
||||||
|
label="*课程名称"
|
||||||
|
name="title"
|
||||||
|
rules={[{ required: true, message: "请在此处输入课程名称!" }]}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
style={{ width: 424 }}
|
||||||
|
placeholder="请在此处输入课程名称"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="课程分类"
|
||||||
|
name="category_ids"
|
||||||
|
rules={[{ required: true, message: "请选择课程分类!" }]}
|
||||||
|
>
|
||||||
|
<Cascader
|
||||||
|
style={{ width: 424 }}
|
||||||
|
options={categories}
|
||||||
|
multiple
|
||||||
|
maxTagCount="responsive"
|
||||||
|
placeholder="请选择课程分类"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="指派部门"
|
||||||
|
name="dep_ids"
|
||||||
|
rules={[{ required: true, message: "请选择课程指派部门!" }]}
|
||||||
|
>
|
||||||
|
<Cascader
|
||||||
|
style={{ width: 424 }}
|
||||||
|
options={departments}
|
||||||
|
multiple
|
||||||
|
maxTagCount="responsive"
|
||||||
|
placeholder="请选择课程指派部门"
|
||||||
|
/>
|
||||||
|
</Form.Item>
|
||||||
|
<Form.Item
|
||||||
|
label="课程封面"
|
||||||
|
name="thumb"
|
||||||
|
rules={[{ required: true, message: "请上传课程封面!" }]}
|
||||||
|
>
|
||||||
|
<div className="c-flex">
|
||||||
|
<div className="d-flex">
|
||||||
|
<UploadImageButton
|
||||||
|
onSelected={(url) => {
|
||||||
|
setThumb(url);
|
||||||
|
form.setFieldsValue({ thumb: url });
|
||||||
|
}}
|
||||||
|
></UploadImageButton>
|
||||||
|
</div>
|
||||||
|
{thumb && (
|
||||||
|
<img className="form-course-thumb mt-10" src={thumb} alt="" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</Form.Item>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</Drawer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
@ -18,6 +18,7 @@ import { dateFormat } from "../../utils/index";
|
|||||||
import { Link, useNavigate } from "react-router-dom";
|
import { Link, useNavigate } from "react-router-dom";
|
||||||
import { TreeDepartment, TreeCategory, PerButton } from "../../compenents";
|
import { TreeDepartment, TreeCategory, PerButton } from "../../compenents";
|
||||||
import type { TabsProps } from "antd";
|
import type { TabsProps } from "antd";
|
||||||
|
import { CourseCreate } from "./compenents/create";
|
||||||
|
|
||||||
const { confirm } = Modal;
|
const { confirm } = Modal;
|
||||||
|
|
||||||
@ -46,6 +47,10 @@ export const CoursePage = () => {
|
|||||||
const [tabKey, setTabKey] = useState(1);
|
const [tabKey, setTabKey] = useState(1);
|
||||||
const [pureTotal, setPureTotal] = useState(0);
|
const [pureTotal, setPureTotal] = useState(0);
|
||||||
|
|
||||||
|
const [createVisible, setCreateVisible] = useState<boolean>(false);
|
||||||
|
const [updateVisible, setUpdateVisible] = useState<boolean>(false);
|
||||||
|
const [cid, setCid] = useState<number>(0);
|
||||||
|
|
||||||
const items: TabsProps["items"] = [
|
const items: TabsProps["items"] = [
|
||||||
{
|
{
|
||||||
key: "1",
|
key: "1",
|
||||||
@ -234,17 +239,15 @@ export const CoursePage = () => {
|
|||||||
<div className="playedu-main-title float-left mb-24">{selLabel}</div>
|
<div className="playedu-main-title float-left mb-24">{selLabel}</div>
|
||||||
<div className="float-left j-b-flex mb-24">
|
<div className="float-left j-b-flex mb-24">
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<Link style={{ textDecoration: "none" }} to={`/course/create`}>
|
|
||||||
<PerButton
|
<PerButton
|
||||||
type="primary"
|
type="primary"
|
||||||
text="新建课程"
|
text="新建课程"
|
||||||
class="mr-16"
|
class="mr-16"
|
||||||
icon={<PlusOutlined />}
|
icon={<PlusOutlined />}
|
||||||
p="course"
|
p="course"
|
||||||
onClick={() => null}
|
onClick={() => setCreateVisible(true)}
|
||||||
disabled={null}
|
disabled={null}
|
||||||
/>
|
/>
|
||||||
</Link>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex">
|
<div className="d-flex">
|
||||||
<div className="d-flex mr-24">
|
<div className="d-flex mr-24">
|
||||||
@ -282,6 +285,13 @@ export const CoursePage = () => {
|
|||||||
pagination={paginationProps}
|
pagination={paginationProps}
|
||||||
rowKey={(record) => record.id}
|
rowKey={(record) => record.id}
|
||||||
/>
|
/>
|
||||||
|
<CourseCreate
|
||||||
|
open={createVisible}
|
||||||
|
onCancel={() => {
|
||||||
|
setCreateVisible(false);
|
||||||
|
setRefresh(!refresh);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user