唐简: 用户列表展示，查询，分页功能完成

src/view/system/user/index.tsx

@@ -1,31 +1,46 @@
 import React, { useEffect, useState } from "react";
 
 import "./index.scss";
-import { getDeptTree } from "../../../api/user/userDept";
-import MyDeptTree from "./comps/my-dept-tree";
+import MyDeptTree from "./comps/user-dept-tree";
 import UserTopSearch from "./comps/user-top-search";
 import UserMidAddButton from "./comps/user-mid-add-button";
 import UserBottomList from "./comps/user-bottom-list";
+import UserFromModal from "./comps/user-from-modal";
 
 export default function User() {
-  const [treeData, setTreeData] = useState<any[]>([]);
-  const getDeptTreeData = async () => {
-    const data = await getDeptTree();
-    setTreeData(data.data);
-    console.log("father:", data);
+  const [isShowModal, setIsShowModal] = useState<boolean>(false);
+  const [modalTitle, setModalTitle] = useState<string>("");
+  const [searchValues, setSearchValues] = useState<any>({});
+
+  const handleSearch = (searchValues: any) => {
+    setSearchValues({
+      ...searchValues,
+    });
   };
 
-  useEffect(() => {
-    getDeptTreeData();
-  }, []);
+  const handleAddClick = (type: string) => {
+    type === "ADD" ? setModalTitle("新增用户") : setModalTitle("修改用户");
+    setIsShowModal(true);
+  };
+  const handleAddOff = () => {
+    setIsShowModal(false);
+  };
 
   return (
     <div id="content">
-      <MyDeptTree myTreeData={treeData} />
+      <MyDeptTree />
       <div className="right-user">
-        <UserTopSearch></UserTopSearch>
-        <UserMidAddButton></UserMidAddButton>
-        <UserBottomList></UserBottomList>
+        <UserTopSearch clickFromChild={handleSearch}></UserTopSearch>
+        <UserMidAddButton clickFromChild={handleAddClick}></UserMidAddButton>
+        <UserBottomList
+          clickFromChild={handleAddClick}
+          searchValues={searchValues}
+        ></UserBottomList>
+        <UserFromModal
+          isShowModal={isShowModal}
+          modalTitle={modalTitle}
+          clickFromChild={handleAddOff}
+        ></UserFromModal>
       </div>
     </div>
   );