部门编辑

src/pages/department/index.tsx

@@ -60,7 +60,7 @@ export const DepartmentPage: React.FC = () => {
             type="link"
             danger
             className="c-red"
-            onClick={() => navigate(`/system/adminroles/update/${record.id}`)}
+            onClick={() => navigate(`/department/update/${record.id}`)}
           >
             详情
           </Button>

src/pages/department/update.tsx

@@ -0,0 +1,165 @@
+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;
+      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[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, 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/index.ts

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

src/pages/system/adminroles/update.tsx

@@ -15,6 +15,7 @@ export const AdminrolesUpdatePage: React.FC = () => {
   useEffect(() => {
     getParams();
   }, []);
+  
   useEffect(() => {
     getDetail();
   }, [params.roleId]);

src/router/routes.tsx

@@ -17,6 +17,7 @@ import {
   AdminrolesUpdatePage,
   DepartmentPage,
   DepartmentCreatePage,
+  DepartmentUpdatePage
 } from "../pages";
 
 const routes: RouteObject[] = [
@@ -76,6 +77,11 @@ const routes: RouteObject[] = [
         path: "/department/create",
         element: <DepartmentCreatePage />,
       },
+      {
+        path: "/department/update/:depId",
+        element: <DepartmentUpdatePage />,
+      },
+      
     ],
   },
   {