部门新建

src/pages/department/create.tsx

@@ -0,0 +1,142 @@
+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;
+      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, values.sort)
+      .then((res: any) => {
+        message.success("保存成功！");
+        navigate(-1);
+      });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  const handleChange = (value: any) => {
+    let it = value[value.length - 1];
+    setParentId(it);
+  };
+
+  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>
+    </>
+  );
+};

src/pages/department/index.tsx

@@ -12,12 +12,14 @@ interface Option {
   name: string;
   created_at: string;
   children?: Option[];
+  sort: number;
 }
 
 interface DataType {
   id: React.Key;
   name: string;
   created_at: string;
+  sort: number;
 }
 
 export const DepartmentPage: React.FC = () => {
@@ -37,6 +39,11 @@ export const DepartmentPage: React.FC = () => {
       key: "id",
       dataIndex: "id",
     },
+    {
+      title: "Sort",
+      key: "sort",
+      dataIndex: "sort",
+    },
     {
       title: "时间",
       dataIndex: "created_at",
@@ -96,6 +103,7 @@ export const DepartmentPage: React.FC = () => {
         arr.push({
           name: departments[id][i].name,
           id: departments[id][i].id,
+          sort: departments[id][i].sort,
           created_at: departments[id][i].created_at,
         });
       } else {
@@ -104,6 +112,7 @@ export const DepartmentPage: React.FC = () => {
           name: departments[id][i].name,
           id: departments[id][i].id,
           created_at: departments[id][i].created_at,
+          sort: departments[id][i].sort,
           children: new_arr,
         });
       }
@@ -130,10 +139,7 @@ export const DepartmentPage: React.FC = () => {
       <div className="playedu-main-body">
         <div className="float-left j-b-flex mb-24">
           <div className="d-flex">
-            <Link
-              style={{ textDecoration: "none" }}
-              to={`/system/adminroles/create`}
-            >
+            <Link style={{ textDecoration: "none" }} to={`/department/create`}>
               <Button icon={<PlusOutlined />} className="mr-16" type="primary">
                 新建
               </Button>

src/pages/index.ts

@@ -14,3 +14,4 @@ export * from "./system/adminroles/index";
 export * from "./system/adminroles/create";
 export * from "./system/adminroles/update";
 export * from "./department";
+export * from "./department/create";

src/pages/member/create.tsx

@@ -78,7 +78,7 @@ export const MemberCreatePage: React.FC = () => {
       <Row className="playedu-main-body">
         <Col>
           <div className="float-left mb-24">
-            <BackBartment title="添加学员" />
+            <BackBartment title="新建学员" />
           </div>
           <div className="float-left">
             <Form

src/pages/system/administrator/create.tsx

@@ -64,7 +64,7 @@ export const AdministratorCreatePage: React.FC = () => {
       <Row className="playedu-main-body">
         <Col>
           <div className="float-left mb-24">
-            <BackBartment title="添加管理员" />
+            <BackBartment title="新建管理员" />
           </div>
           <div className="float-left">
             <Form

src/pages/system/adminroles/create.tsx

@@ -49,7 +49,7 @@ export const AdminrolesCreatePage: React.FC = () => {
       <Row className="playedu-main-body">
         <Col>
           <div className="float-left mb-24">
-            <BackBartment title="添加管理员角色" />
+            <BackBartment title="新建管理员角色" />
           </div>
           <div className="float-left">
             <Form
@@ -64,7 +64,7 @@ export const AdminrolesCreatePage: React.FC = () => {
               autoComplete="off"
             >
               <Form.Item
-                label="姓名"
+                label="角色名"
                 name="name"
                 rules={[{ required: true, message: "请输入角色名!" }]}
               >

src/pages/system/adminroles/update.tsx

@@ -79,7 +79,7 @@ export const AdminrolesUpdatePage: React.FC = () => {
               autoComplete="off"
             >
               <Form.Item
-                label="姓名"
+                label="角色名"
                 name="name"
                 rules={[{ required: true, message: "请输入角色名!" }]}
               >

src/router/routes.tsx

@@ -16,6 +16,7 @@ import {
   AdminrolesCreatePage,
   AdminrolesUpdatePage,
   DepartmentPage,
+  DepartmentCreatePage,
 } from "../pages";
 
 const routes: RouteObject[] = [
@@ -71,6 +72,10 @@ const routes: RouteObject[] = [
         path: "/department",
         element: <DepartmentPage />,
       },
+      {
+        path: "/department/create",
+        element: <DepartmentCreatePage />,
+      },
     ],
   },
   {