部门新建、编辑弹窗组件化

This commit is contained in:
禺狨 2023-03-14 14:27:54 +08:00
parent 99db5c6c87
commit 3707e31eb8
12 changed files with 378 additions and 382 deletions

View File

@ -0,0 +1,147 @@
import React, { useState, useRef, useEffect } from "react";
import { Modal, Form, Input, Cascader, message } from "antd";
import styles from "./create.module.less";
import { department } from "../../../api/index";
interface PropInterface {
open: boolean;
onCancel: () => void;
}
interface Option {
value: string | number;
label: string;
children?: Option[];
}
export const DepartmentCreate: React.FC<PropInterface> = ({
open,
onCancel,
}) => {
const [form] = Form.useForm();
const [loading, setLoading] = useState<boolean>(true);
const [departments, setDepartments] = useState<any>([]);
const [parent_id, setParentId] = useState<number>(0);
useEffect(() => {
getParams();
}, []);
useEffect(() => {
form.setFieldsValue({
name: "",
parent_id: [0],
});
}, [form, open]);
const getParams = () => {
department.createDepartment().then((res: any) => {
const departments = res.data.departments;
if (JSON.stringify(departments) !== "{}") {
const new_arr: Option[] = checkArr(departments, 0);
new_arr.unshift({
label: "无",
value: 0,
});
setDepartments(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) => {
department
.storeDepartment(values.name, parent_id || 0, 0)
.then((res: any) => {
message.success("保存成功!");
onCancel();
});
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const handleChange = (value: any) => {
if (value !== undefined) {
let it = value[value.length - 1];
setParentId(it);
} else {
setParentId(0);
}
};
const displayRender = (label: any, selectedOptions: any) => {
return label[label.length - 1];
};
return (
<>
<Modal
title="新建部门"
centered
forceRender
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="所属上级"
name="parent_id"
rules={[{ required: true, message: "请选择所属上级!" }]}
>
<Cascader
style={{ width: 200 }}
allowClear
placeholder="请选择所属上级"
onChange={handleChange}
options={departments}
changeOnSelect
expand-trigger="hover"
displayRender={displayRender}
/>
</Form.Item>
<Form.Item
label="部门名称"
name="name"
rules={[{ required: true, message: "请输入部门名称!" }]}
>
<Input style={{ width: 200 }} placeholder="请输入部门名称" />
</Form.Item>
</Form>
</div>
</Modal>
</>
);
};

View File

@ -0,0 +1,179 @@
import React, { useState, useRef, useEffect } from "react";
import { Modal, Form, Input, Cascader, message } from "antd";
import styles from "./update.module.less";
import { department } from "../../../api/index";
interface PropInterface {
id: number;
open: boolean;
onCancel: () => void;
}
interface Option {
value: string | number;
label: string;
children?: Option[];
}
export const DepartmentUpdate: React.FC<PropInterface> = ({
id,
open,
onCancel,
}) => {
const [form] = Form.useForm();
const [loading, setLoading] = useState<boolean>(true);
const [departments, setDepartments] = useState<any>([]);
const [parent_id, setParentId] = useState<number>(0);
useEffect(() => {
getParams();
}, []);
useEffect(() => {
if (id === 0) {
return;
}
getDetail();
}, [id]);
const getParams = () => {
department.createDepartment().then((res: any) => {
const departments = res.data.departments;
if (JSON.stringify(departments) !== "{}") {
const new_arr: Option[] = checkArr(departments, 0);
new_arr.unshift({
label: "无",
value: 0,
});
setDepartments(new_arr);
}
});
};
const getDetail = () => {
department.department(id).then((res: any) => {
let data = res.data;
let arr = data.parent_chain.split(",");
let new_arr: any[] = [];
arr.map((num: any) => {
new_arr.push(Number(num));
});
form.setFieldsValue({
name: data.name,
parent_id: new_arr,
});
setParentId(data.parent_id);
});
};
const checkArr = (departments: any[], id: number) => {
const arr = [];
for (let i = 0; i < departments[id].length; i++) {
if (departments[id][i].id === id) {
console.log("截断");
} else 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) => {
department
.updateDepartment(id, values.name, parent_id || 0, 0)
.then((res: any) => {
message.success("保存成功!");
onCancel();
});
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const handleChange = (value: any) => {
if (value !== undefined) {
let it = value[value.length - 1];
if (it === id) {
setParentId(0);
} else {
setParentId(it);
}
} else {
setParentId(0);
}
};
const displayRender = (label: any, selectedOptions: any) => {
if (selectedOptions && selectedOptions[0]) {
let current = selectedOptions[selectedOptions.length - 1].value;
if (current === id) {
message.error("不能选择自己作为父类");
return "无";
}
}
return label[label.length - 1];
};
return (
<>
<Modal
title="编辑部门"
centered
forceRender
open={open}
width={416}
onOk={() => form.submit()}
onCancel={() => onCancel()}
>
<div className="float-left mt-24">
<Form
form={form}
name="basic"
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="所属上级"
name="parent_id"
rules={[{ required: true, message: "请选择所属上级!" }]}
>
<Cascader
style={{ width: 200 }}
allowClear
placeholder="请选择所属上级"
onChange={handleChange}
options={departments}
changeOnSelect
expand-trigger="hover"
displayRender={displayRender}
/>
</Form.Item>
<Form.Item
label="部门名称"
name="name"
rules={[{ required: true, message: "请输入部门名称!" }]}
>
<Input style={{ width: 200 }} placeholder="请输入部门名称" />
</Form.Item>
</Form>
</div>
</Modal>
</>
);
};

View File

@ -1,148 +0,0 @@
import React, { useState, useEffect } from "react";
import { Row, Col, Form, Input, Cascader, Button, message } from "antd";
import styles from "./create.module.less";
import { department } from "../../api/index";
import { useNavigate } from "react-router-dom";
import { BackBartment } from "../../compenents";
interface Option {
value: string | number;
label: string;
children?: Option[];
}
export const DepartmentCreatePage: React.FC = () => {
const navigate = useNavigate();
const [form] = Form.useForm();
const [loading, setLoading] = useState<boolean>(true);
const [categories, setCategories] = useState<any>([]);
const [parent_id, setParentId] = useState<number>(0);
useEffect(() => {
getParams();
}, []);
const getParams = () => {
department.createDepartment().then((res: any) => {
const departments = res.data.departments;
if (JSON.stringify(departments) !== "{}") {
const new_arr: Option[] = checkArr(departments, 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) => {
department
.storeDepartment(values.name, parent_id || 0, values.sort)
.then((res: any) => {
message.success("保存成功!");
navigate(-1);
});
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const handleChange = (value: any) => {
if (value !== undefined) {
let it = value[value.length - 1];
setParentId(it);
} else {
setParentId(0);
}
};
const displayRender = (label: any, selectedOptions: any) => {
return label[label.length - 1];
};
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="parent_id">
<Cascader
style={{ width: 300 }}
allowClear
placeholder="请选择部门"
onChange={handleChange}
options={categories}
changeOnSelect
expand-trigger="hover"
displayRender={displayRender}
/>
</Form.Item>
<Form.Item
label="部门名"
name="name"
rules={[{ required: true, message: "请输入部门名!" }]}
>
<Input style={{ width: 300 }} placeholder="请输入部门名" />
</Form.Item>
<Form.Item
label="Sort"
name="sort"
rules={[{ required: true, message: "请输入Sort!" }]}
>
<Input
type="number"
style={{ width: 300 }}
placeholder="请输入Sort"
/>
</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

@ -1,12 +1,13 @@
import React, { useState, useEffect } from "react";
import { Button, Space, Tree, Modal, message } from "antd";
import type { ColumnsType } from "antd/es/table";
import styles from "./index.module.less";
import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
import { department } from "../../api/index";
import { Link, useNavigate } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { PerButton } from "../../compenents";
import type { DataNode, TreeProps } from "antd/es/tree";
import { DepartmentCreate } from "./compenents/create";
import { DepartmentUpdate } from "./compenents/update";
const { confirm } = Modal;
@ -30,6 +31,10 @@ export const DepartmentPage: React.FC = () => {
const [treeData, setTreeData] = useState<any>([]);
const [selectKey, setSelectKey] = useState<any>([]);
const [createVisible, setCreateVisible] = useState<boolean>(false);
const [updateVisible, setUpdateVisible] = useState<boolean>(false);
const [did, setDid] = useState<number>(0);
const onSelect = (selectedKeys: any, info: any) => {
setSelectKey(selectedKeys);
console.log(selectedKeys);
@ -67,9 +72,10 @@ export const DepartmentPage: React.FC = () => {
class="b-link c-red"
icon={null}
p="department-cud"
onClick={() =>
navigate(`/department/update/${departments[id][i].id}`)
}
onClick={() => {
setDid(departments[id][i].id);
setUpdateVisible(true);
}}
disabled={null}
/>
<div className="form-column"></div>
@ -100,9 +106,10 @@ export const DepartmentPage: React.FC = () => {
class="b-link c-red"
icon={null}
p="department-cud"
onClick={() =>
navigate(`/department/update/${departments[id][i].id}`)
}
onClick={() => {
setDid(departments[id][i].id);
setUpdateVisible(true);
}}
disabled={null}
/>
<div className="form-column"></div>
@ -231,17 +238,15 @@ export const DepartmentPage: React.FC = () => {
<>
<div className="playedu-main-top mb-24">
<div className="d-flex">
<Link style={{ textDecoration: "none" }} to={`/department/create`}>
<PerButton
type="primary"
text="新建"
class="mr-16"
icon={<PlusOutlined />}
p="department-cud"
onClick={() => null}
disabled={null}
/>
</Link>
<PerButton
type="primary"
text="新建部门"
class="mr-16"
icon={<PlusOutlined />}
p="department-cud"
onClick={() => setCreateVisible(true)}
disabled={null}
/>
</div>
</div>
<div className="playedu-main-body">
@ -253,6 +258,21 @@ export const DepartmentPage: React.FC = () => {
onDragEnter={onDragEnter}
onDrop={onDrop}
/>
<DepartmentCreate
open={createVisible}
onCancel={() => {
setCreateVisible(false);
setRefresh(!refresh);
}}
/>
<DepartmentUpdate
id={did}
open={updateVisible}
onCancel={() => {
setUpdateVisible(false);
setRefresh(!refresh);
}}
/>
</div>
</>
);

View File

@ -1,187 +0,0 @@
import React, { useState, useEffect } from "react";
import { Row, Col, Form, Input, Cascader, Button, message } from "antd";
import styles from "./create.module.less";
import { department } from "../../api/index";
import { useParams, useNavigate } from "react-router-dom";
import { BackBartment } from "../../compenents";
interface Option {
value: string | number;
label: string;
children?: Option[];
}
export const DepartmentUpdatePage: React.FC = () => {
const params = useParams();
const navigate = useNavigate();
const [form] = Form.useForm();
const [loading, setLoading] = useState<boolean>(true);
const [categories, setCategories] = useState<any>([]);
const [parent_id, setParentId] = useState<number>(0);
useEffect(() => {
getParams();
}, []);
useEffect(() => {
getDetail();
}, [params.depId]);
const getParams = () => {
department.createDepartment().then((res: any) => {
const departments = res.data.departments;
if (JSON.stringify(departments) !== "{}") {
const new_arr: Option[] = checkArr(departments, 0);
setCategories(new_arr);
}
});
};
const getDetail = () => {
department.department(Number(params.depId)).then((res: any) => {
let data = res.data;
let arr = data.parent_chain.split(",");
let new_arr: any[] = [];
arr.map((num: any) => {
new_arr.push(Number(num));
});
form.setFieldsValue({
name: data.name,
sort: data.sort,
parent_id: new_arr,
});
setParentId(data.parent_id);
});
};
const checkArr = (departments: any[], id: number) => {
const arr = [];
for (let i = 0; i < departments[id].length; i++) {
if (departments[id][i].id === Number(params.depId)) {
console.log("截断");
} else 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 id = Number(params.depId);
department
.updateDepartment(id, values.name, parent_id || 0, values.sort)
.then((res: any) => {
message.success("保存成功!");
navigate(-1);
});
};
const onFinishFailed = (errorInfo: any) => {
console.log("Failed:", errorInfo);
};
const handleChange = (value: any) => {
let id = Number(params.depId);
if (value !== undefined) {
let it = value[value.length - 1];
if (it === id) {
setParentId(0);
} else {
setParentId(it);
}
} else {
setParentId(0);
}
};
const displayRender = (label: any, selectedOptions: any) => {
let id = Number(params.depId);
if (selectedOptions && selectedOptions[0]) {
let current = selectedOptions[selectedOptions.length - 1].value;
if (current === id) {
message.error("不能选择自己作为父类");
return 0;
}
}
return label[label.length - 1];
};
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="parent_id">
<Cascader
style={{ width: 300 }}
allowClear
placeholder="请选择部门"
onChange={handleChange}
options={categories}
changeOnSelect
expand-trigger="hover"
displayRender={displayRender}
/>
</Form.Item>
<Form.Item
label="部门名"
name="name"
rules={[{ required: true, message: "请输入部门名!" }]}
>
<Input style={{ width: 300 }} placeholder="请输入部门名" />
</Form.Item>
<Form.Item
label="Sort"
name="sort"
rules={[{ required: true, message: "请输入Sort!" }]}
>
<Input
type="number"
style={{ width: 300 }}
placeholder="请输入Sort"
/>
</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

@ -18,8 +18,6 @@ export * from "./system/adminroles/index";
export * from "./system/adminroles/create";
export * from "./system/adminroles/update";
export * from "./department";
export * from "./department/create";
export * from "./department/update";
export * from "./change-password";
export * from "./resource/images";
export * from "./resource/resource-category/index";

View File

@ -2,7 +2,6 @@ import React, { useState, useRef, useEffect } from "react";
import { Modal, Form, Input, Cascader, message } from "antd";
import styles from "./create.module.less";
import { resourceCategory } from "../../../../api/index";
import type { FormInstance } from "antd/es/form";
interface PropInterface {
open: boolean;

View File

@ -1,8 +1,7 @@
import React, { useState, useRef, useEffect } from "react";
import { Modal, Form, Input, Cascader, message } from "antd";
import styles from "./create.module.less";
import styles from "./update.module.less";
import { resourceCategory } from "../../../../api/index";
import type { FormInstance } from "antd/es/form";
interface PropInterface {
id: number;
@ -37,13 +36,6 @@ export const ResourceCategoryUpdate: React.FC<PropInterface> = ({
getDetail();
}, [id]);
useEffect(() => {
form.setFieldsValue({
name: "",
parent_id: [0],
});
}, [form, open]);
const getParams = () => {
resourceCategory.createResourceCategory().then((res: any) => {
const categories = res.data.categories;
@ -68,7 +60,6 @@ export const ResourceCategoryUpdate: React.FC<PropInterface> = ({
});
form.setFieldsValue({
name: data.name,
sort: data.sort,
parent_id: new_arr,
});
setParentId(data.parent_id);
@ -97,7 +88,7 @@ export const ResourceCategoryUpdate: React.FC<PropInterface> = ({
const onFinish = (values: any) => {
resourceCategory
.updateResourceCategory(id, values.name, parent_id || 0, values.sort)
.updateResourceCategory(id, values.name, parent_id || 0, 0)
.then((res: any) => {
message.success("保存成功!");
onCancel();
@ -122,13 +113,21 @@ export const ResourceCategoryUpdate: React.FC<PropInterface> = ({
};
const displayRender = (label: any, selectedOptions: any) => {
if (selectedOptions && selectedOptions[0]) {
let current = selectedOptions[selectedOptions.length - 1].value;
if (current === id) {
message.error("不能选择自己作为父类");
return "无";
}
}
return label[label.length - 1];
};
return (
<>
<Modal
title="新建分类"
title="编辑分类"
centered
forceRender
open={open}

View File

@ -1,10 +1,9 @@
import React, { useState, useEffect } from "react";
import { Button, Space, Tree, Modal, message } from "antd";
import type { ColumnsType } from "antd/es/table";
import styles from "./index.module.less";
import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
import { resourceCategory } from "../../../api/index";
import { Link, useNavigate } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { PerButton } from "../../../compenents";
import type { DataNode, TreeProps } from "antd/es/tree";
import { ResourceCategoryCreate } from "./compenents/create";

View File

@ -19,13 +19,11 @@ import {
AdminrolesCreatePage,
AdminrolesUpdatePage,
DepartmentPage,
DepartmentCreatePage,
DepartmentUpdatePage,
ChangePasswordPage,
ResourceImagesPage,
ResourceCategoryPage,
ResourceVideosPage,
SystemIndexPage
SystemIndexPage,
} from "../pages";
const routes: RouteObject[] = [
@ -114,14 +112,6 @@ const routes: RouteObject[] = [
path: "/department",
element: <DepartmentPage />,
},
{
path: "/department/create",
element: <DepartmentCreatePage />,
},
{
path: "/department/update/:depId",
element: <DepartmentUpdatePage />,
},
],
},
{