线上课新建、编辑部门、分类选择器

This commit is contained in:
禺狨 2023-03-28 16:08:56 +08:00
parent 5f389e7337
commit 12b1c0ff3d
2 changed files with 33 additions and 58 deletions

View File

@ -5,12 +5,12 @@ import {
Button, Button,
Drawer, Drawer,
Form, Form,
Cascader,
Input, Input,
Modal, Modal,
message, message,
Image, Image,
Tooltip, Tooltip,
TreeSelect,
} from "antd"; } from "antd";
import styles from "./create.module.less"; import styles from "./create.module.less";
import { course, department } from "../../../api/index"; import { course, department } from "../../../api/index";
@ -30,7 +30,7 @@ interface PropInterface {
interface Option { interface Option {
value: string | number; value: string | number;
label: string; title: string;
children?: Option[]; children?: Option[];
} }
@ -163,13 +163,13 @@ export const CourseCreate: React.FC<PropInterface> = ({
for (let i = 0; i < departments[id].length; i++) { for (let i = 0; i < departments[id].length; i++) {
if (!departments[departments[id][i].id]) { if (!departments[departments[id][i].id]) {
arr.push({ arr.push({
label: departments[id][i].name, title: departments[id][i].name,
value: departments[id][i].id, value: departments[id][i].id,
}); });
} else { } else {
const new_arr: Option[] = checkArr(departments, departments[id][i].id); const new_arr: Option[] = checkArr(departments, departments[id][i].id);
arr.push({ arr.push({
label: departments[id][i].name, title: departments[id][i].name,
value: departments[id][i].id, value: departments[id][i].id,
children: new_arr, children: new_arr,
}); });
@ -181,9 +181,7 @@ export const CourseCreate: React.FC<PropInterface> = ({
const onFinish = (values: any) => { const onFinish = (values: any) => {
let dep_ids: any[] = []; let dep_ids: any[] = [];
if (type === "elective") { if (type === "elective") {
for (let i = 0; i < values.dep_ids.length; i++) { dep_ids = values.dep_ids;
dep_ids.push(values.dep_ids[i][values.dep_ids[i].length - 1]);
}
} }
course course
.storeCourse( .storeCourse(
@ -409,11 +407,11 @@ export const CourseCreate: React.FC<PropInterface> = ({
name="category_ids" name="category_ids"
rules={[{ required: true, message: "请选择课程分类!" }]} rules={[{ required: true, message: "请选择课程分类!" }]}
> >
<Cascader <TreeSelect
expandTrigger="hover" allowClear
multiple
style={{ width: 424 }} style={{ width: 424 }}
options={categories} treeData={categories}
changeOnSelect
placeholder="请选择课程分类" placeholder="请选择课程分类"
/> />
</Form.Item> </Form.Item>
@ -469,11 +467,11 @@ export const CourseCreate: React.FC<PropInterface> = ({
}, },
]} ]}
> >
<Cascader <TreeSelect
style={{ width: 424 }} style={{ width: 424 }}
options={departments} treeData={departments}
multiple multiple
maxTagCount="responsive" allowClear
placeholder="请选择课程指派部门" placeholder="请选择课程指派部门"
/> />
</Form.Item> </Form.Item>

View File

@ -5,7 +5,7 @@ import {
Button, Button,
Drawer, Drawer,
Form, Form,
Cascader, TreeSelect,
Input, Input,
Modal, Modal,
message, message,
@ -27,7 +27,7 @@ interface PropInterface {
interface Option { interface Option {
value: string | number; value: string | number;
label: string; title: string;
children?: Option[]; children?: Option[];
} }
@ -46,11 +46,16 @@ export const CourseUpdate: React.FC<PropInterface> = ({
const [thumb, setThumb] = useState<string>(""); const [thumb, setThumb] = useState<string>("");
const [type, setType] = useState<string>("open"); const [type, setType] = useState<string>("open");
useEffect(() => {
getCategory();
getParams();
}, [form, open]);
useEffect(() => { useEffect(() => {
if (id === 0) { if (id === 0) {
return; return;
} }
getCategory(); getDetail();
}, [id, open]); }, [id, open]);
const getCategory = () => { const getCategory = () => {
@ -60,52 +65,27 @@ export const CourseUpdate: React.FC<PropInterface> = ({
const new_arr: Option[] = checkArr(categories, 0); const new_arr: Option[] = checkArr(categories, 0);
setCategories(new_arr); setCategories(new_arr);
} }
getParams(categories);
}); });
}; };
const getParams = (cats: any) => { const getParams = () => {
department.departmentList().then((res: any) => { department.departmentList().then((res: any) => {
const departments = res.data.departments; const departments = res.data.departments;
if (JSON.stringify(departments) !== "{}") { if (JSON.stringify(departments) !== "{}") {
const new_arr: Option[] = checkArr(departments, 0); const new_arr: Option[] = checkArr(departments, 0);
setDepartments(new_arr); setDepartments(new_arr);
} }
getDetail(departments, cats);
}); });
}; };
const getDetail = (deps: any, cats: any) => { const getDetail = () => {
course.course(id).then((res: any) => { course.course(id).then((res: any) => {
let box = res.data.dep_ids;
let depIds: any[] = [];
let type = res.data.dep_ids.length > 0 ? "elective" : "open"; let type = res.data.dep_ids.length > 0 ? "elective" : "open";
if (box.length > 0) {
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 chapterType = res.data.chapters.length > 0 ? 1 : 0; let chapterType = res.data.chapters.length > 0 ? 1 : 0;
form.setFieldsValue({ form.setFieldsValue({
title: res.data.course.title, title: res.data.course.title,
thumb: res.data.course.thumb, thumb: res.data.course.thumb,
dep_ids: depIds, dep_ids: res.data.dep_ids,
category_ids: res.data.category_ids, category_ids: res.data.category_ids,
isRequired: res.data.course.is_required, isRequired: res.data.course.is_required,
type: type, type: type,
@ -132,13 +112,13 @@ export const CourseUpdate: React.FC<PropInterface> = ({
for (let i = 0; i < departments[id].length; i++) { for (let i = 0; i < departments[id].length; i++) {
if (!departments[departments[id][i].id]) { if (!departments[departments[id][i].id]) {
arr.push({ arr.push({
label: departments[id][i].name, title: departments[id][i].name,
value: departments[id][i].id, value: departments[id][i].id,
}); });
} else { } else {
const new_arr: Option[] = checkArr(departments, departments[id][i].id); const new_arr: Option[] = checkArr(departments, departments[id][i].id);
arr.push({ arr.push({
label: departments[id][i].name, title: departments[id][i].name,
value: departments[id][i].id, value: departments[id][i].id,
children: new_arr, children: new_arr,
}); });
@ -150,11 +130,8 @@ export const CourseUpdate: React.FC<PropInterface> = ({
const onFinish = (values: any) => { const onFinish = (values: any) => {
let dep_ids: any[] = []; let dep_ids: any[] = [];
if (type === "elective") { if (type === "elective") {
for (let i = 0; i < values.dep_ids.length; i++) { dep_ids = values.dep_ids;
dep_ids.push(values.dep_ids[i][values.dep_ids[i].length - 1]);
}
} }
course course
.updateCourse( .updateCourse(
id, id,
@ -215,11 +192,11 @@ export const CourseUpdate: React.FC<PropInterface> = ({
name="category_ids" name="category_ids"
rules={[{ required: true, message: "请选择课程分类!" }]} rules={[{ required: true, message: "请选择课程分类!" }]}
> >
<Cascader <TreeSelect
expandTrigger="hover" allowClear
multiple
style={{ width: 424 }} style={{ width: 424 }}
options={categories} treeData={categories}
changeOnSelect
placeholder="请选择课程分类" placeholder="请选择课程分类"
/> />
</Form.Item> </Form.Item>
@ -275,11 +252,11 @@ export const CourseUpdate: React.FC<PropInterface> = ({
}, },
]} ]}
> >
<Cascader <TreeSelect
style={{ width: 424 }} style={{ width: 424 }}
options={departments} treeData={departments}
multiple multiple
maxTagCount="responsive" allowClear
placeholder="请选择课程指派部门" placeholder="请选择课程指派部门"
/> />
</Form.Item> </Form.Item>