diff --git a/src/pages/index.ts b/src/pages/index.ts index 98d884a..86bcafe 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -7,8 +7,6 @@ export * from "./course/index"; export * from "./course/create"; export * from "./course/update"; export * from "./member/index"; -export * from "./member/create"; -export * from "./member/update"; export * from "./member/import"; export * from "./system/index"; export * from "./system/administrator/index"; diff --git a/src/pages/member/create.module.less b/src/pages/member/compenents/create.module.less similarity index 100% rename from src/pages/member/create.module.less rename to src/pages/member/compenents/create.module.less diff --git a/src/pages/member/compenents/create.tsx b/src/pages/member/compenents/create.tsx new file mode 100644 index 0000000..bba42a8 --- /dev/null +++ b/src/pages/member/compenents/create.tsx @@ -0,0 +1,184 @@ +import React, { useState, useEffect } from "react"; +import { Modal, Form, Cascader, Input, message } from "antd"; +import styles from "./create.module.less"; +import { user, 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 MemberCreate: React.FC = ({ open, onCancel }) => { + const [form] = Form.useForm(); + const [loading, setLoading] = useState(true); + const [departments, setDepartments] = useState([]); + const [avatar, setAvatar] = useState(""); + + useEffect(() => { + getParams(); + }, []); + + useEffect(() => { + form.setFieldsValue({ + email: "", + name: "", + password: "", + avatar: "", + idCard: "", + dep_ids: [], + }); + setAvatar(""); + }, [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 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) => { + const arr = []; + for (let i = 0; i < values.dep_ids.length; i++) { + arr.push(values.dep_ids[i][values.dep_ids[i].length - 1]); + } + user + .storeUser( + values.email, + values.name, + values.avatar, + values.password, + values.idCard, + arr + ) + .then((res: any) => { + message.success("保存成功!"); + onCancel(); + }); + }; + + const onFinishFailed = (errorInfo: any) => { + console.log("Failed:", errorInfo); + }; + + const onChange = (value: any) => {}; + + return ( + <> + form.submit()} + onCancel={() => onCancel()} + maskClosable={false} + > +
+
+ + + + +
+
+ { + setAvatar(url); + form.setFieldsValue({ avatar: url }); + }} + > +
+ {avatar && ( + + )} +
+
+ + + + + + + + + + + + +
+
+
+ + ); +}; diff --git a/src/pages/member/update.module.less b/src/pages/member/compenents/update.module.less similarity index 100% rename from src/pages/member/update.module.less rename to src/pages/member/compenents/update.module.less diff --git a/src/pages/member/compenents/update.tsx b/src/pages/member/compenents/update.tsx new file mode 100644 index 0000000..a2db4b5 --- /dev/null +++ b/src/pages/member/compenents/update.tsx @@ -0,0 +1,240 @@ +import React, { useState, useEffect } from "react"; +import { Modal, Form, Cascader, Input, message } from "antd"; +import styles from "./create.module.less"; +import { user, department } from "../../../api/index"; +import { UploadImageButton } from "../../../compenents"; + +interface PropInterface { + id: number; + open: boolean; + onCancel: () => void; +} + +interface Option { + value: string | number; + label: string; + children?: Option[]; +} + +export const MemberUpdate: React.FC = ({ + id, + open, + onCancel, +}) => { + const [form] = Form.useForm(); + const [loading, setLoading] = useState(true); + const [departments, setDepartments] = useState([]); + const [avatar, setAvatar] = useState(""); + + useEffect(() => { + getParams(); + }, [id]); + + useEffect(() => { + form.setFieldsValue({ + password: "", + }); + }, [form, open]); + + const getParams = () => { + if (id === 0) { + return; + } + 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); + }); + }; + + const getDetail = (deps: any) => { + user.user(id).then((res: any) => { + let user = res.data.user; + setAvatar(user.avatar); + 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; + } + form.setFieldsValue({ + email: user.email, + name: user.name, + nickname: user.nickname, + avatar: user.avatar, + idCard: user.id_card, + dep_ids: depIds, + }); + }); + }; + + 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) => { + const arr = []; + for (let i = 0; i < values.dep_ids.length; i++) { + if (Array.isArray(values.dep_ids[i])) { + arr.push(values.dep_ids[i][values.dep_ids[i].length - 1]); + } else { + arr.push(values.dep_ids[i]); + } + } + user + .updateUser( + id, + values.email, + values.name, + values.nickname, + values.avatar, + values.password || "", + values.idCard, + arr + ) + .then((res: any) => { + message.success("保存成功!"); + onCancel(); + }); + }; + + const onFinishFailed = (errorInfo: any) => { + console.log("Failed:", errorInfo); + }; + + const onChange = (value: any) => {}; + + return ( + <> + form.submit()} + onCancel={() => onCancel()} + maskClosable={false} + > +
+
+ + + + +
+
+ { + setAvatar(url); + form.setFieldsValue({ avatar: url }); + }} + > +
+ {avatar && ( + + )} +
+
+ + + + + + + + + + + + +
+
+
+ + ); +}; diff --git a/src/pages/member/create.tsx b/src/pages/member/create.tsx deleted file mode 100644 index 9ccd010..0000000 --- a/src/pages/member/create.tsx +++ /dev/null @@ -1,175 +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 { user, 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 MemberCreatePage: React.FC = () => { - const navigate = useNavigate(); - const [form] = Form.useForm(); - const [loading, setLoading] = useState(true); - const [departments, setDepartments] = useState([]); - const [avatar, setAvatar] = useState(""); - - useEffect(() => { - getParams(); - }, []); - - 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 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); - const arr = []; - for (let i = 0; i < values.dep_ids.length; i++) { - arr.push(values.dep_ids[i][values.dep_ids[i].length - 1]); - } - user - .storeUser( - values.email, - values.name, - values.avatar, - values.password, - values.idCard, - arr - ) - .then((res: any) => { - message.success("保存成功!"); - navigate(-1); - }); - }; - - const onFinishFailed = (errorInfo: any) => { - console.log("Failed:", errorInfo); - }; - - const onChange = (value: any) => {}; - - return ( - <> - - -
- -
-
-
- - - - -
-
- { - setAvatar(url); - form.setFieldsValue({ avatar: url }); - }} - > -
- {avatar && ( - - )} -
-
- - - - - - - - - - - - - - - - -
-
- -
- - ); -}; diff --git a/src/pages/member/index.tsx b/src/pages/member/index.tsx index b4a248b..94f6cb6 100644 --- a/src/pages/member/index.tsx +++ b/src/pages/member/index.tsx @@ -7,6 +7,8 @@ import { user } from "../../api/index"; import { dateFormat } from "../../utils/index"; import { Link, useNavigate } from "react-router-dom"; import { TreeDepartment, PerButton } from "../../compenents"; +import { MemberCreate } from "./compenents/create"; +import { MemberUpdate } from "./compenents/update"; const { confirm } = Modal; interface DataType { @@ -35,6 +37,9 @@ export const MemberPage: React.FC = () => { const [id_card, setIdCard] = useState(""); const [dep_ids, setDepIds] = useState([]); const [selLabel, setLabel] = useState("全部部门"); + const [createVisible, setCreateVisible] = useState(false); + const [updateVisible, setUpdateVisible] = useState(false); + const [mid, setMid] = useState(0); const columns: ColumnsType = [ { @@ -78,7 +83,10 @@ export const MemberPage: React.FC = () => { class="b-link c-red" icon={null} p="user-update" - onClick={() => navigate(`/member/update/${record.id}`)} + onClick={() => { + setMid(Number(record.id)); + setUpdateVisible(true); + }} disabled={null} />
@@ -192,17 +200,15 @@ export const MemberPage: React.FC = () => {
{selLabel}
- - } - p="user-store" - onClick={() => null} - disabled={null} - /> - + } + p="user-store" + onClick={() => setCreateVisible(true)} + disabled={null} + /> { pagination={paginationProps} rowKey={(record) => record.id} /> + { + setCreateVisible(false); + setRefresh(!refresh); + }} + /> + { + setUpdateVisible(false); + setRefresh(!refresh); + }} + />
diff --git a/src/pages/member/update.tsx b/src/pages/member/update.tsx deleted file mode 100644 index 0a4b890..0000000 --- a/src/pages/member/update.tsx +++ /dev/null @@ -1,234 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { Row, Col, Form, Input, Cascader, Button, message } from "antd"; -import styles from "./update.module.less"; -import { user, 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 MemberUpdatePage: React.FC = () => { - const params = useParams(); - const navigate = useNavigate(); - const [form] = Form.useForm(); - const [loading, setLoading] = useState(true); - const [departments, setDepartments] = useState([]); - const [avatar, setAvatar] = useState(""); - - useEffect(() => { - getParams(); - }, [params.memberId]); - - 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); - } - getDetail(departments); - }); - }; - - const getDetail = (deps: any) => { - user.user(Number(params.memberId)).then((res: any) => { - let user = res.data.user; - setAvatar(user.avatar); - 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; - } - form.setFieldsValue({ - email: user.email, - name: user.name, - nickname: user.nickname, - avatar: user.avatar, - idCard: user.id_card, - dep_ids: depIds, - }); - }); - }; - - 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.memberId); - const arr = []; - for (let i = 0; i < values.dep_ids.length; i++) { - if (Array.isArray(values.dep_ids[i])) { - arr.push(values.dep_ids[i][values.dep_ids[i].length - 1]); - } else { - arr.push(values.dep_ids[i]); - } - } - user - .updateUser( - id, - values.email, - values.name, - values.nickname, - values.avatar, - values.password || "", - values.idCard, - arr - ) - .then((res: any) => { - message.success("保存成功!"); - navigate(-1); - }); - }; - - const onFinishFailed = (errorInfo: any) => { - console.log("Failed:", errorInfo); - }; - - const onChange = (value: any) => {}; - - return ( - <> - - -
- -
-
-
- - - - - - - -
-
- { - setAvatar(url); - form.setFieldsValue({ avatar: url }); - }} - > -
- {avatar && ( - - )} -
-
- - - - - - - - - - - - - - - - -
-
- -
- - ); -}; diff --git a/src/router/routes.tsx b/src/router/routes.tsx index 3e460b7..9323dcb 100644 --- a/src/router/routes.tsx +++ b/src/router/routes.tsx @@ -9,8 +9,6 @@ import { CourseUpdatePage, TestPage, MemberPage, - MemberCreatePage, - MemberUpdatePage, MemberImportPage, SystemAdministratorPage, SystemAdminrolesPage, @@ -64,14 +62,6 @@ const routes: RouteObject[] = [ path: "/member", element: , }, - { - path: "/member/create", - element: , - }, - { - path: "/member/update/:memberId", - element: , - }, { path: "/member/import", element: ,