线上课加入选修必修字段

This commit is contained in:
禺狨 2023-03-20 16:02:23 +08:00
parent 6baafcb579
commit 5e187d248f
10 changed files with 44 additions and 478 deletions

View File

@ -30,6 +30,7 @@ export function storeCourse(
title: string,
thumb: string,
isShow: number,
isRequired: number,
depIds: number[],
categoryIds: number[],
chapters: number[],
@ -39,6 +40,7 @@ export function storeCourse(
title: title,
thumb: thumb,
is_show: isShow,
is_required: isRequired,
dep_ids: depIds,
category_ids: categoryIds,
chapters: chapters,
@ -55,6 +57,7 @@ export function updateCourse(
title: string,
thumb: string,
isShow: number,
isRequired: number,
depIds: number[],
categoryIds: number[],
chapters: number[],
@ -64,6 +67,7 @@ export function updateCourse(
title: title,
thumb: thumb,
is_show: isShow,
is_required: isRequired,
dep_ids: depIds,
category_ids: categoryIds,
chapters: chapters,

View File

@ -61,6 +61,7 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
dep_ids: [],
category_ids: [],
type: "open",
isRequired: 1,
desc: "",
hasChapter: 0,
});
@ -129,6 +130,7 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
values.title,
values.thumb,
1,
values.isRequired,
dep_ids,
category_ids,
chapters,
@ -359,6 +361,16 @@ export const CourseCreate: React.FC<PropInterface> = ({ open, onCancel }) => {
placeholder="请选择课程分类"
/>
</Form.Item>
<Form.Item
label="必修选修"
name="isRequired"
rules={[{ required: true, message: "请选择必修选修!" }]}
>
<Radio.Group>
<Radio value={1}></Radio>
<Radio value={0}></Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label="课程类型"
name="type"

View File

@ -17,7 +17,6 @@ import { UploadImageButton, SelectResource } from "../../../compenents";
import { ExclamationCircleFilled } from "@ant-design/icons";
import { getHost } from "../../../utils/index";
import { TreeHours } from "./hours";
import { duration } from "moment";
const { confirm } = Modal;
@ -137,6 +136,7 @@ export const CourseUpdate: React.FC<PropInterface> = ({
thumb: res.data.course.thumb,
dep_ids: depIds,
category_ids: categoryIds,
isRequired: res.data.course.isRequired,
type: type,
desc: "",
hasChapter: chapterType,
@ -164,10 +164,15 @@ export const CourseUpdate: React.FC<PropInterface> = ({
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);
if (JSON.stringify(hours) !== "{}") {
const arr: any = resetHours(hours[0]).arr;
const keys: any = resetHours(hours[0]).keys;
setTreeData(arr);
setHours(keys);
} else {
setTreeData([]);
setHours([]);
}
}
});
};
@ -238,6 +243,7 @@ export const CourseUpdate: React.FC<PropInterface> = ({
values.title,
values.thumb,
1,
values.isRequired,
dep_ids,
category_ids,
chapters,
@ -468,6 +474,16 @@ export const CourseUpdate: React.FC<PropInterface> = ({
placeholder="请选择课程分类"
/>
</Form.Item>
<Form.Item
label="必修选修"
name="isRequired"
rules={[{ required: true, message: "请选择必修选修!" }]}
>
<Radio.Group>
<Radio value={1}></Radio>
<Radio value={0}></Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label="课程类型"
name="type"

View File

@ -1,193 +0,0 @@
import React, { useState, useEffect } from "react";
import { Row, Col, Form, Input, Cascader, Switch, Button, message } from "antd";
import styles from "./create.module.less";
import { course, department } from "../../api/index";
import { useNavigate } from "react-router-dom";
import { UploadImageButton, BackBartment } from "../../compenents";
interface Option {
value: string | number;
label: string;
children?: Option[];
}
export const CourseCreatePage: React.FC = () => {
const navigate = useNavigate();
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();
}, []);
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);
}
form.setFieldsValue({ isShow: 1 });
});
};
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) => {
console.log("Success:", values);
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,
values.isShow,
dep_ids,
category_ids,
[],
[]
)
.then((res: any) => {
message.success("保存成功!");
navigate(-1);
});
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const onChange = (checked: boolean) => {
if (checked) {
form.setFieldsValue({ isShow: 1 });
} else {
form.setFieldsValue({ isShow: 0 });
}
};
return (
<>
<Row className="playedu-main-body">
<Col>
<div className="float-left mb-24">
<BackBartment title="新建课程" />
</div>
<div className="float-left">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ width: 600 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="课程标题"
name="title"
rules={[{ required: true, message: "请输入课程标题!" }]}
>
<Input 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.Item label="显示课程" name="isShow" valuePropName="checked">
<Switch onChange={onChange} />
</Form.Item>
<Form.Item label="学员部门" name="dep_ids">
<Cascader
options={departments}
multiple
maxTagCount="responsive"
placeholder="请选择学员部门"
/>
</Form.Item>
<Form.Item label="资源分类" name="category_ids">
<Cascader
options={categories}
multiple
maxTagCount="responsive"
placeholder="请选择资源分类"
/>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
>
</Button>
</Form.Item>
</Form>
</div>
</Col>
</Row>
</>
);
};

View File

@ -107,6 +107,13 @@ export const CoursePage = () => {
</div>
),
},
{
title: "类别",
dataIndex: "isRequired",
render: (isRequired: number) => (
<span>{isRequired === 1 ? "必修课" : "选修课"}</span>
),
},
{
title: "是否显示",
dataIndex: "is_show",

View File

@ -1,267 +0,0 @@
import React, { useState, useEffect } from "react";
import { Row, Col, Form, Input, Cascader, Switch, Button, message } from "antd";
import styles from "./create.module.less";
import { course, department } from "../../api/index";
import { useParams, useNavigate } from "react-router-dom";
import { UploadImageButton, BackBartment } from "../../compenents";
interface Option {
value: string | number;
label: string;
children?: Option[];
}
export const CourseUpdatePage: React.FC = () => {
const navigate = useNavigate();
const params = useParams();
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(() => {
getCategory();
}, [params.cid]);
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);
}
form.setFieldsValue({ isShow: 1 });
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(Number(params.cid)).then((res: any) => {
let data = res.data.course;
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;
}
form.setFieldsValue({
title: data.title,
thumb: data.thumb,
isShow: data.is_show,
dep_ids: depIds,
category_ids: categoryIds,
});
setThumb(data.thumb);
});
};
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) => {
console.log("Success:", values);
let id = Number(params.cid);
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
.updateCourse(
id,
values.title,
values.thumb,
values.isShow,
dep_ids,
category_ids,
[],
[]
)
.then((res: any) => {
message.success("保存成功!");
navigate(-1);
});
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const onChange = (checked: boolean) => {
if (checked) {
form.setFieldsValue({ isShow: 1 });
} else {
form.setFieldsValue({ isShow: 0 });
}
};
return (
<>
<Row className="playedu-main-body">
<Col>
<div className="float-left mb-24">
<BackBartment title="编辑课程" />
</div>
<div className="float-left">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ width: 600 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="课程标题"
name="title"
rules={[{ required: true, message: "请输入课程标题!" }]}
>
<Input 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.Item label="显示课程" name="isShow" valuePropName="checked">
<Switch onChange={onChange} />
</Form.Item>
<Form.Item label="学员部门" name="dep_ids">
<Cascader
options={departments}
multiple
maxTagCount="responsive"
placeholder="请选择学员部门"
/>
</Form.Item>
<Form.Item label="资源分类" name="category_ids">
<Cascader
options={categories}
multiple
maxTagCount="responsive"
placeholder="请选择资源分类"
/>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">
</Button>
<Button
className="ml-15"
htmlType="button"
onClick={() => navigate(-1)}
>
</Button>
</Form.Item>
</Form>
</div>
</Col>
</Row>
</>
);
};

View File

@ -4,8 +4,6 @@ export * from "./dashboard";
export * from "./error";
export * from "./test";
export * from "./course/index";
export * from "./course/create";
export * from "./course/update";
export * from "./member/index";
export * from "./member/import";
export * from "./system/index";

View File

@ -5,8 +5,6 @@ import {
Dashboard,
ErrorPage,
CoursePage,
CourseCreatePage,
CourseUpdatePage,
TestPage,
MemberPage,
MemberImportPage,
@ -49,15 +47,6 @@ const routes: RouteObject[] = [
path: "/course",
element: <CoursePage />,
},
{
path: "/course/create",
element: <CourseCreatePage />,
},
{
path: "/course/update/:cid",
element: <CourseUpdatePage />,
},
{
path: "/member",
element: <MemberPage />,