树形部门选择组件

src/compenents/treeDepartment/index.tsx

@@ -1,12 +1,14 @@
 import { Button, Input, message, Tree } from "antd";
 import { useState, useEffect } from "react";
 import { department } from "../../api/index";
+interface Option {
+  key: string | number;
+  title: string;
+  children?: Option[];
+}
 
 interface PropInterface {
-  defaultExpandedKeys: any;
-  defaultSelectedKeys: any;
-  defaultCheckedKeys: any;
-  onUpdate: () => void;
+  onUpdate: (keys: any) => void;
 }
 
 export const TreeDepartment = (props: PropInterface) => {
@@ -15,23 +17,38 @@ export const TreeDepartment = (props: PropInterface) => {
   useEffect(() => {
     setLoading(true);
     department.departmentList().then((res: any) => {
-      setTreeData(res.data);
+      const departments = res.data.departments;
+      const new_arr: Option[] = checkArr(departments, 0);
+      setTreeData(new_arr);
       setTimeout(() => {
         setLoading(false);
       }, 1000);
     });
   }, []);
-  const onSelect = () => {};
-  const onCheck = () => {};
-  return (
-    <Tree
-      checkable
-      defaultExpandedKeys={props.defaultExpandedKeys}
-      defaultSelectedKeys={props.defaultSelectedKeys}
-      defaultCheckedKeys={props.defaultCheckedKeys}
-      onSelect={onSelect}
-      onCheck={onCheck}
-      treeData={treeData}
-    />
-  );
+
+  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({
+          title: departments[id][i].name,
+          key: departments[id][i].id,
+        });
+      } else {
+        const new_arr: Option[] = checkArr(departments, departments[id][i].id);
+        arr.push({
+          title: departments[id][i].name,
+          key: departments[id][i].id,
+          children: new_arr,
+        });
+      }
+    }
+    return arr;
+  };
+
+  const onSelect = (selectedKeys: any, info: any) => {
+    props.onUpdate(selectedKeys);
+  };
+
+  return <Tree onSelect={onSelect} treeData={treeData} />;
 };

src/pages/member/index.tsx

@@ -17,6 +17,7 @@ import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
 import { user } from "../../api/index";
 import { dateFormat } from "../../utils/index";
 import { Link, useNavigate } from "react-router-dom";
+import { TreeDepartment } from "../../compenents";
 
 interface DataType {
   id: React.Key;
@@ -32,15 +33,16 @@ export const MemberPage: React.FC = () => {
   const navigate = useNavigate();
   const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
-  const [page, setPage] = useState<number>(1);
-  const [size, setSize] = useState<number>(10);
+  const [page, setPage] = useState(1);
+  const [size, setSize] = useState(10);
   const [list, setList] = useState<any>([]);
-  const [total, setTotal] = useState<number>(0);
+  const [total, setTotal] = useState(0);
   const [refresh, setRefresh] = useState(false);
 
   const [nickname, setNickname] = useState<string>("");
   const [email, setEmail] = useState<string>("");
   const [id_card, setIdCard] = useState<string>("");
+  const [dep_ids, setDepIds] = useState<any>([]);
 
   const columns: ColumnsType<DataType> = [
     {
@@ -104,7 +106,7 @@ export const MemberPage: React.FC = () => {
 
   useEffect(() => {
     getData();
-  }, [refresh, page, size]);
+  }, [refresh, page, size, dep_ids]);
 
   const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
     console.log("selectedRowKeys changed: ", newSelectedRowKeys);
@@ -112,12 +114,14 @@ export const MemberPage: React.FC = () => {
   };
 
   const getData = () => {
+    let depIds = dep_ids.join(",");
     setLoading(true);
     user
       .userList(page, size, {
         nickname: nickname,
         email: email,
         id_card: id_card,
+        dep_ids: depIds,
       })
       .then((res: any) => {
         setList(res.data.data);
@@ -171,7 +175,11 @@ export const MemberPage: React.FC = () => {
   return (
     <>
       <Row>
-        <Col span={4}></Col>
+        <Col span={4}>
+          <div className="playedu-main-body" style={{ marginLeft: -24 }}>
+            <TreeDepartment onUpdate={(keys: any) => setDepIds(keys)} />
+          </div>
+        </Col>
         <Col span={20}>
           <div className="playedu-main-body mb-24">
             <div className="float-left d-flex">