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

.eslintrc.cjs

@@ -2,17 +2,19 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
+    "eslint:recommended",
-    'plugin:@typescript-eslint/recommended',
+    "plugin:@typescript-eslint/recommended",
-    'plugin:react-hooks/recommended',
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
-  plugins: ['react-refresh'],
+  plugins: ["react-refresh"],
   rules: {
-    'react-refresh/only-export-components': [
+    "react-refresh/only-export-components": [
-      'warn',
+      "warn",
       { allowConstantExport: true },
     ],
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-explicit-any": "off",
   },
-}
+};

src/Login.tsx

@@ -1,60 +1,59 @@
 import { Button, Form, Input, Image, message } from "antd";
 import React, { useEffect, useState } from "react";
-import './assets/styles/login.scss'
+import "./assets/styles/login.scss";
 import { getCaptchaApi, loginApi } from "./api/login";
 import { useNavigate } from "react-router-dom";
 import { setToken } from "./utils/auth";
 
 type Login = {
-  uuid?: string,
+  uuid?: string;
-  username?: string,
+  username?: string;
-  password?: string,
+  password?: string;
-  code?: string
+  code?: string;
-}
+};
 
 export default function Login() {
-  const [messageApi, contextHolder] = message.useMessage()
+  const [messageApi, contextHolder] = message.useMessage();
-  const [uuid, setUuid] = useState<string>('')
+  const [uuid, setUuid] = useState<string>("");
-  const [captcha, setCaptcha] = useState<string>('')
+  const [captcha, setCaptcha] = useState<string>("");
-  const navigate = useNavigate()
+  const navigate = useNavigate();
 
   const getCaptcha = async () => {
     try {
-      const { code, data } = await getCaptchaApi()
+      const { code, data } = await getCaptchaApi();
       if (code === 1000) {
-        setUuid(data.uuid)
+        setUuid(data.uuid);
-        setCaptcha(data.img)
+        setCaptcha(data.img);
       }
-    } catch(err: any) {
+    } catch (err: any) {
-      messageApi.error(err)
+      messageApi.error(err);
     }
-  }
+  };
 
   const handleLogin = async (values: Login) => {
-    values.uuid = uuid
+    values.uuid = uuid;
     try {
-      const { code, data, msg } = await loginApi(values)
+      const { code, data, msg } = await loginApi(values);
       if (code === 1000) {
-        setToken(data)
+        setToken(data);
-        messageApi.success(msg)
+        messageApi.success(msg);
-        navigate('/')
+        navigate("/");
-        return
+        return;
       }
-      messageApi.error(msg)
+      messageApi.error(msg);
-      getCaptcha()
+      getCaptcha();
-    } catch(err: any) {
+    } catch (err: any) {
-      messageApi.error(err)
+      messageApi.error(err);
     }
-  }
+  };
 
   const handleLoginFailed = (errorInfo: any) => {
     console.log(errorInfo);
-
+  };
-  }
 
   useEffect(() => {
-    getCaptcha()
+    getCaptcha();
-  }, [])
+  }, []);
   return (
     <div id="login">
       {contextHolder}
@@ -69,35 +68,41 @@ export default function Login() {
           <h3>FateVerse</h3>
         </Form.Item>
         <Form.Item<Login>
-          label='用户名'
+          label="用户名"
-          name='username'
+          name="username"
-          rules={[{ required: true, message: '请输入用户名' }]}
+          rules={[{ required: true, message: "请输入用户名" }]}
-          initialValue='admin'
+          initialValue="admin"
         >
           <Input placeholder="请输入用户名" />
         </Form.Item>
         <Form.Item<Login>
-          label='密码'
+          label="密码"
-          name='password'
+          name="password"
-          rules={[{ required: true, message: '请输入密码' }]}
+          rules={[{ required: true, message: "请输入密码" }]}
-          initialValue='123456'
+          initialValue="123456"
         >
           <Input.Password placeholder="请输入密码" />
         </Form.Item>
         <Form.Item<Login>
-          label='验证码'
+          label="验证码"
-          name='code'
+          name="code"
-          rules={[{ required: true, message: '请输入验证码' }]}
+          rules={[{ required: true, message: "请输入验证码" }]}
         >
           <div className="code-box">
             <Input placeholder="请输入验证码" />
-            <Image src={'data:image/gif;base64,' + captcha} preview={false} onClick={getCaptcha} />
+            <Image
+              src={"data:image/gif;base64," + captcha}
+              preview={false}
+              onClick={getCaptcha}
+            />
           </div>
         </Form.Item>
         <Form.Item>
-          <Button type="primary" htmlType="submit">登录</Button>
+          <Button type="primary" htmlType="submit">
+            登录
+          </Button>
         </Form.Item>
       </Form>
     </div>
-  )
+  );
-}
+}

src/api/system/users.ts

@@ -0,0 +1,38 @@
+import request from "../../utils/request";
+
+interface userListParams {
+  userName?: string;
+  phoneNumber?: string;
+  state?: string;
+  startTime?: string;
+  endTime?: string;
+  pageNum?: number;
+  pageSize?: number;
+}
+
+export const getDeptTreeApi = () => {
+  return request({
+    url: "/admin/dept",
+    method: "get",
+  });
+};
+
+export const getUserListApi = (data?: userListParams) => {
+  const params = data
+    ? {
+        userName: data.userName,
+        phoneNumber: data.phoneNumber,
+        state: data.state,
+        startTime: data.startTime,
+        endTime: data.endTime,
+        pageNum: data.pageNum,
+        pageSize: 13,
+      }
+    : undefined;
+
+  return request({
+    url: "/admin/user",
+    method: "get",
+    params,
+  });
+};

src/api/user/userDept.ts

@@ -1,8 +0,0 @@
-import request from "../../utils/request";
-
-export const getDeptTree = () => {
-  return request({
-    url: "/admin/dept",
-    method: "get",
-  });
-};

src/main.tsx

@@ -1,21 +1,21 @@
-import React from 'react'
+import React from "react";
-import ReactDOM from 'react-dom/client'
+import ReactDOM from "react-dom/client";
-import App from './App.tsx'
+import App from "./App.tsx";
-import './index.css'
+import "./index.css";
-import { BrowserRouter } from 'react-router-dom'
+import { BrowserRouter } from "react-router-dom";
 
 // redux toolkit
-import { Provider } from 'react-redux'
+import { Provider } from "react-redux";
-import store, { persistor } from './stores/index.ts'
+import store, { persistor } from "./stores/index.ts";
-import { PersistGate } from 'redux-persist/integration/react'
+import { PersistGate } from "redux-persist/integration/react";
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor} >
+      <PersistGate loading={null} persistor={persistor}>
         <BrowserRouter>
           <App />
         </BrowserRouter>
       </PersistGate>
     </Provider>
-  </React.StrictMode>,
+  </React.StrictMode>
-)
+);

src/utils/formatData.ts

@@ -0,0 +1,13 @@
+export default function FormatData(DataStr: string) {
+  const dateStr = DataStr;
+  const date = new Date(dateStr);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
+
+  const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+  return formattedDate;
+}

src/view/system/user/comps/user-bottom-list/index.scss

@@ -0,0 +1,11 @@
+.tree-content {
+  margin: 12px 0 0 12px;
+
+  .ant-table-thead > tr > th {
+    color: #909399;
+    text-align: center;
+  }
+  .ant-table-tbody > tr > td {
+    text-align: center;
+  }
+}

src/view/system/user/comps/user-bottom-list/index.tsx

@@ -1,88 +1,74 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
-import { Table, Space } from "antd";
+import { Table, Space, Tag } from "antd";
 import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
-const UserBottomList: React.FC = () => {
+import "./index.scss";
-  const [data, setData] = useState([
+import { getUserListApi } from "../../../../../api/system/users";
-    {
+
-      key: 1,
+interface AddButtonClickType {
-      projectId: "1",
+  clickFromChild: (type: string) => void;
-      projectName: "http接口管理平台",
+  searchValues: any;
-      create_time: "2023/7/22",
+}
-      description: "一个用于统一管理",
+interface QueryParamsType {
-      interface_nums: 8,
+  userName?: string;
-      member: [
+  phoneNumber?: string;
-        {
+  state?: string;
-          id: 1,
+  startTime?: string;
-          name: "Jim",
+  endTime?: string;
-          role: "阅读",
+  pageNum?: number;
-        },
+  pageSize?: number;
-        {
+}
-          id: 2,
+
-          name: "Jack",
+const UserBottomList: React.FC<AddButtonClickType> = ({
-          role: "编辑",
+  clickFromChild,
-        },
+  searchValues,
-        {
+}) => {
-          id: 3,
+  const [currentPage, setCurrentPage] = useState<number>(1);
-          name: "Aurora",
+  const [queryParams, setQueryParams] = useState<QueryParamsType>({
-          role: "阅读",
+    userName: undefined,
-        },
+    phoneNumber: undefined,
-        {
+    state: undefined,
-          id: 4,
+    startTime: undefined,
-          name: "Tom",
+    endTime: undefined,
-          role: "编辑",
+    pageNum: undefined,
-        },
+    pageSize: undefined,
-      ],
+  });
-    },
+  const handlePageChange = (page: number) => {
-    {
+    setCurrentPage(page);
-      key: 2,
+    setQueryParams({
-      projectId: "2",
+      ...queryParams,
-      projectName: "低代码平台",
+      pageNum: page,
-      create_time: "2021/3/2",
+    });
-      description: "更高效的开发",
+  };
-      interface_nums: 12,
+
-      member: [
+  const handleAddClick = () => {
-        {
+    clickFromChild("FIX");
-          id: 1,
+  };
-          name: "qqq",
+
-          role: "阅读",
+  const getUserList = async () => {
-        },
+    try {
-        {
+      const { userName, phoneNumber, state, startTime, endTime } = searchValues;
-          id: 2,
+      setQueryParams({
-          name: "bbb",
+        ...queryParams,
-          role: "编辑",
+        userName,
-        },
+        phoneNumber,
-      ],
+        state,
-    },
+        startTime,
-    {
+        endTime,
-      key: 3,
+      });
-      projectId: "3",
+      const { code, data } = await getUserListApi(queryParams);
-      projectName: "ui组件库",
+      if (code === 1000) {
-      create_time: "2021/1/1",
+        setListData(data.rows);
-      description: "漂亮,简洁的ui组件",
+      }
-      interface_nums: 5,
+    } catch (err) {
-      member: [
+      console.error(err);
-        {
+    }
-          id: 1,
+  };
-          name: "111",
+
-          role: "阅读",
+  const [listData, setListData] = useState([]);
-        },
-        {
-          id: 2,
-          name: "2222",
-          role: "编辑",
-        },
-        {
-          id: 3,
-          name: "3333",
-          role: "阅读",
-        },
-      ],
-    },
-  ]);
   const columns = [
     {
       title: "序号",
-      dataIndex: "Id",
+      dataIndex: "userId",
       key: "Id",
       render: (text: string) => <>{text ? text : "null"}</>,
     },
@@ -94,14 +80,14 @@ const UserBottomList: React.FC = () => {
     },
     {
       title: "用户昵称",
-      dataIndex: "name",
+      dataIndex: "nickName",
-      key: "name",
+      key: "nikeName",
       render: (text: string) => <>{text ? text : "null"}</>,
     },
     {
       title: "部门",
-      key: "dept",
+      key: "deptName",
-      dataIndex: "dept",
+      dataIndex: "deptName",
       render: (text: string) => <>{text ? text : "null"}</>,
     },
     {
@@ -114,7 +100,15 @@ const UserBottomList: React.FC = () => {
       title: "状态",
       key: "state",
       dataIndex: "state",
-      render: (text: string) => <>{text ? text : "null"}</>,
+      render: (text: string) => (
+        <>
+          {text === "0" ? (
+            <Tag color="processing">停用</Tag>
+          ) : (
+            <Tag color="processing">正常</Tag>
+          )}
+        </>
+      ),
     },
     {
       title: "创建时间",
@@ -127,39 +121,43 @@ const UserBottomList: React.FC = () => {
       key: "operate",
       dataIndex: "operate",
       render: () => (
-        <>
+        <div style={{ color: "#58aaff" }}>
           <Space>
             <EditOutlined />
-            <a href="#">编辑</a>
+            <a
+              href="#"
+              onClick={() => handleAddClick()}
+              style={{ color: " #58aaff" }}
+            >
+              编辑
+            </a>
             <DeleteOutlined />
-            <a href="#">删除</a>
+            <a href="#" style={{ color: " #58aaff" }}>
+              删除
+            </a>
           </Space>
-        </>
+        </div>
       ),
     },
   ];
 
+  useEffect(() => {
+    getUserList();
+    console.log(searchValues);
+  }, [searchValues]);
+
   return (
-    <div>
+    <div className="tree-content">
       <Table
         columns={columns}
-        dataSource={data}
+        dataSource={listData}
         className="article-table"
-        // pagination={{
+        pagination={{
-        //   position: ["none"],
+          onChange: handlePageChange,
-        // }}
+          showQuickJumper: true,
-        // onRow={(record, index) => ({
+          showTotal: (total, range) =>
-        //   onClick: () => {
+            `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
-        //     // 在这里编写处理点击事件的代码
+        }}
-        //     serActiveRowIndex(record.key);
-        //     eventBus.emit("tableRowClick", record);
-        //   },
-        //   // 根据条件动态设置行样式
-        //   style:
-        //     activeRowIndex === record.key
-        //       ? { backgroundColor: "#e1eaff" }
-        //       : null,
-        // })}
       />
     </div>
   );

src/view/system/user/comps/user-dept-tree/index.tsx

@@ -1,19 +1,24 @@
 import React, { useMemo, useState, useEffect } from "react";
 import { Input, Tree } from "antd";
 import { SearchOutlined } from "@ant-design/icons";
+import { getDeptTreeApi } from "../../../../../api/system/users";
 import "./index.scss";
 
-interface treeDataType {
+const MyDeptTree: React.FC = () => {
-  myTreeData: any[];
-}
-
-const MyDeptTree: React.FC<treeDataType> = (props) => {
-  console.log("props:", props.myTreeData[0]);
-
   const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
   const [searchValue, setSearchValue] = useState("");
   const [autoExpandParent, setAutoExpandParent] = useState(true);
 
+  const [myData, setMyData] = useState<any[]>([]);
+  const getDeptTreeData = async () => {
+    try {
+      const res = await getDeptTreeApi();
+      setMyData(res.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   const onExpand = (newExpandedKeys: React.Key[]) => {
     setExpandedKeys(newExpandedKeys);
     setAutoExpandParent(false);
@@ -57,15 +62,16 @@ const MyDeptTree: React.FC<treeDataType> = (props) => {
         if (item.children) {
           return { title, key: item.deptId, children: loop(item.children) };
         }
-
         return {
           title,
           key: item.key,
         };
       });
-
+    return loop(myData);
-    return loop(props.myTreeData);
+  }, [myData]);
-  }, [searchValue]);
+  useEffect(() => {
+    getDeptTreeData();
+  }, []);
 
   return (
     <div className="dept-content">

src/view/system/user/comps/user-from-modal/index.scss

@@ -0,0 +1,3 @@
+.modal-form {
+  display: flex;
+}

src/view/system/user/comps/user-from-modal/index.tsx

@@ -0,0 +1,244 @@
+import {
+  Modal,
+  Button,
+  Form,
+  Input,
+  Row,
+  Col,
+  Select,
+  TreeSelect,
+  Radio,
+} from "antd";
+import type { RadioChangeEvent } from "antd";
+import React, { useEffect, useState } from "react";
+import { getDeptTreeApi } from "../../../../../api/system/users";
+
+interface ShowModal {
+  isShowModal: boolean;
+  clickFromChild: () => void;
+  modalTitle: string;
+}
+type FieldType = {
+  username?: string;
+  password?: string;
+  remember?: string;
+};
+
+const UserFromModal: React.FC<ShowModal> = (props) => {
+  const [deptList, setDeptList] = useState<any[]>();
+  const [value, setValue] = useState<string>();
+  const fieldNames = {
+    label: "deptName",
+    title: "deptName",
+    value: "deptName",
+    key: "deptName",
+  }; // 用于自定义TreeSelect内容
+
+  const getDeptTreeData = async () => {
+    try {
+      const res = await getDeptTreeApi();
+      setDeptList(res.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const onChange = (newValue: string) => {
+    setValue(newValue);
+  };
+
+  const handleOk = () => {
+    props.clickFromChild();
+  };
+
+  const handleCancel = () => {
+    props.clickFromChild();
+  };
+
+  const onFinish = (values: any) => {
+    console.log("Success:", values);
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+  const [radioValue, setRadioValue] = useState(1);
+
+  const onRadioChange = (e: RadioChangeEvent) => {
+    setRadioValue(e.target.value);
+  };
+
+  useEffect(() => {
+    getDeptTreeData();
+  }, []);
+
+  return (
+    <>
+      <Modal
+        title={props.modalTitle}
+        width={700}
+        open={props.isShowModal}
+        onOk={handleOk}
+        onCancel={handleCancel}
+      >
+        <Form
+          name="basic"
+          initialValues={{ remember: true }}
+          labelCol={{ span: 6 }}
+          onFinish={onFinish}
+          onFinishFailed={onFinishFailed}
+          autoComplete="off"
+          className="modal-form"
+        >
+          <Row>
+            <Col span={12}>
+              <Form.Item<FieldType>
+                label="用户名称"
+                name="用户名称"
+                rules={[{ required: true, message: "请输入用户名称" }]}
+              >
+                <Input placeholder="请输入用户名称" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item<FieldType>
+                label="用户昵称"
+                name="用户昵称"
+                rules={[{ required: true, message: "请输入用户昵称" }]}
+              >
+                <Input placeholder="请输入用户昵称" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item<FieldType>
+                label="用户性别"
+                name="用户性别"
+                rules={[{ required: false }]}
+              >
+                <Select
+                  options={[
+                    { value: "男", label: "男" },
+                    { value: "女", label: "女" },
+                    { value: "未知", label: "未知" },
+                  ]}
+                  placeholder="请选择用户性别"
+                />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item<FieldType>
+                label="用户密码"
+                name="用户密码"
+                rules={[{ required: true, message: "请输入用户密码" }]}
+              >
+                <Input.Password placeholder="请输入密码" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item<FieldType>
+                label="归属部门"
+                name="归属部门"
+                rules={[{ required: false }]}
+              >
+                <TreeSelect
+                  showSearch
+                  style={{ width: "100%" }}
+                  value={value}
+                  dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
+                  placeholder="请选择"
+                  allowClear
+                  fieldNames={fieldNames}
+                  treeDefaultExpandAll
+                  onChange={onChange}
+                  treeData={deptList}
+                />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item<FieldType>
+                label="手机号码"
+                name="手机号码"
+                rules={[{ required: false }]}
+              >
+                <Input placeholder="请输入手机号码" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item<FieldType>
+                label="邮箱"
+                name="邮箱"
+                rules={[{ required: false }]}
+              >
+                <Input placeholder="请输入邮箱" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item<FieldType>
+                label="状态"
+                name="状态"
+                rules={[
+                  { required: false, message: "Please input your password!" },
+                ]}
+              >
+                <Radio.Group onChange={onRadioChange} value={radioValue}>
+                  <Radio value={1}>正常</Radio>
+                  <Radio value={2}>停用</Radio>
+                </Radio.Group>
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item<FieldType>
+                label="岗位"
+                name="岗位"
+                rules={[
+                  { required: false, message: "Please input your password!" },
+                ]}
+              >
+                <Select
+                  options={[
+                    { value: "董事长", label: "董事长" },
+                    { value: "项目经理", label: "项目经理" },
+                    { value: "人力资源", label: "人力资源" },
+                    { value: "普通员工", label: "普通员工" },
+                  ]}
+                  placeholder="请选择岗位"
+                />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item<FieldType>
+                label="角色"
+                name="角色"
+                rules={[
+                  { required: false, message: "Please input your password!" },
+                ]}
+              >
+                <Select
+                  options={[
+                    { value: "超级管理员", label: "超级管理员" },
+                    { value: "普通角色", label: "普通角色" },
+                  ]}
+                  placeholder="请选择岗位"
+                />
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item<FieldType>
+                label="备注"
+                labelCol={{ span: 3 }}
+                name="备注"
+                rules={[
+                  { required: false, message: "Please input your password!" },
+                ]}
+              >
+                <Input.TextArea placeholder="请输入内容" />
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      </Modal>
+    </>
+  );
+};
+
+export default UserFromModal;

src/view/system/user/comps/user-mid-add-button/index.tsx

@@ -3,10 +3,18 @@ import { Button } from "antd";
 import { PlusOutlined } from "@ant-design/icons";
 import "./index.scss";
 
-const UserMidAddButton: React.FC = () => {
+interface AddButtonClick {
+  clickFromChild: (type: string) => void;
+}
+
+const UserMidAddButton: React.FC<AddButtonClick> = ({ clickFromChild }) => {
+  const handleAddClick = () => {
+    clickFromChild("ADD");
+  };
+
   return (
     <div className="add-content">
-      <Button type="primary">
+      <Button type="primary" onClick={handleAddClick}>
         <PlusOutlined />
         新增
       </Button>

src/view/system/user/comps/user-top-search/index.tsx

@@ -1,20 +1,85 @@
-import React from "react";
+import React, { useState, useEffect, Children } from "react";
 import "./index.scss";
 
-import { Input, Select, TimePicker, Button } from "antd";
+import { Input, Select, DatePicker, Button } from "antd";
 import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
+import FormatData from "../../../../../utils/formatData";
+
+interface SearchParamsType {
+  userName?: string;
+  phoneNumber?: number;
+  state?: string;
+  startTime?: string;
+  endTime?: string;
+}
+
+interface SearchClick {
+  clickFromChild: (searchValues: any) => void;
+}
+
+const UserTopSearch: React.FC<SearchClick> = ({ clickFromChild }) => {
+  const [searchValues, setSearchValues] = useState<SearchParamsType>({
+    userName: undefined,
+    phoneNumber: undefined,
+    state: undefined,
+    startTime: undefined,
+    endTime: undefined,
+  });
+
+  const handleTimePikerValue = (dates: any[]) => {
+    setSearchValues({
+      ...searchValues,
+      startTime: FormatData(dates[0].$d),
+      endTime: FormatData(dates[1].$d),
+    });
+  };
+
+  const handleInputValues = (e: any) => {
+    const { name, value } = e.target;
+    console.log(value);
+
+    setSearchValues({ ...searchValues, [name]: value });
+  };
+
+  const handleSearch = () => {
+    clickFromChild(searchValues);
+  };
+  const handleReset = () => {
+    clickFromChild(null);
+    setSearchValues({
+      ...searchValues,
+      userName: undefined,
+      phoneNumber: undefined,
+      state: undefined,
+      startTime: undefined,
+      endTime: undefined,
+    });
+  };
+
+  useEffect(() => {
+    console.log(searchValues);
+  }, [searchValues]);
 
-const UserTopSearch: React.FC = () => {
   return (
     <div className="search-content">
       <div className="content-top">
         <div className="input-item">
           <div>用户名称</div>
-          <Input placeholder="请输入用户名称" />
+          <Input
+            placeholder="请输入用户名称"
+            name="userName"
+            value={searchValues.userName}
+            onChange={handleInputValues}
+          />
         </div>
         <div className="input-item">
           <div>手机号码</div>
-          <Input placeholder="请输入手机号码" />
+          <Input
+            placeholder="请输入手机号码"
+            name="phoneNumber"
+            value={searchValues.phoneNumber}
+            onChange={handleInputValues}
+          />
         </div>
         <div className="input-item">
           <div>状态</div>
@@ -23,27 +88,37 @@ const UserTopSearch: React.FC = () => {
             placeholder="用户状态"
             allowClear
             options={[
-              { value: "正常1", label: "正常" },
+              { value: "1", label: "正常" },
-              { value: "停用1", label: "停用" },
+              { value: "0", label: "停用" },
             ]}
+            value={searchValues.state}
+            onChange={(value: any) =>
+              setSearchValues({
+                ...searchValues,
+                state: value,
+              })
+            }
           />
         </div>
       </div>
       <div className="content-bottom">
         <div className="time-selector">
           <div>创建时间</div>
-          <TimePicker.RangePicker
+          <DatePicker.RangePicker
             className="time-picker"
             placeholder={["开始时间", "结束时间"]}
+            onChange={(dates) => {
+              handleTimePikerValue(dates as any);
+            }}
           />
         </div>
         <div className="search-button">
-          <Button type="primary">
+          <Button type="primary" onClick={handleSearch}>
             <SearchOutlined />
             搜索
           </Button>
         </div>
-        <div className="reset-button">
+        <div className="reset-button" onClick={handleReset}>
           <Button>
             <RedoOutlined />
             重置

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/user-dept-tree";
-import MyDeptTree from "./comps/my-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 [isShowModal, setIsShowModal] = useState<boolean>(false);
-  const getDeptTreeData = async () => {
+  const [modalTitle, setModalTitle] = useState<string>("");
-    const data = await getDeptTree();
+  const [searchValues, setSearchValues] = useState<any>({});
-    setTreeData(data.data);
+
-    console.log("father:", data);
+  const handleSearch = (searchValues: any) => {
+    setSearchValues({
+      ...searchValues,
+    });
   };
 
-  useEffect(() => {
+  const handleAddClick = (type: string) => {
-    getDeptTreeData();
+    type === "ADD" ? setModalTitle("新增用户") : setModalTitle("修改用户");
-  }, []);
+    setIsShowModal(true);
+  };
+  const handleAddOff = () => {
+    setIsShowModal(false);
+  };
 
   return (
     <div id="content">
-      <MyDeptTree myTreeData={treeData} />
+      <MyDeptTree />
       <div className="right-user">
-        <UserTopSearch></UserTopSearch>
+        <UserTopSearch clickFromChild={handleSearch}></UserTopSearch>
-        <UserMidAddButton></UserMidAddButton>
+        <UserMidAddButton clickFromChild={handleAddClick}></UserMidAddButton>
-        <UserBottomList></UserBottomList>
+        <UserBottomList
+          clickFromChild={handleAddClick}
+          searchValues={searchValues}
+        ></UserBottomList>
+        <UserFromModal
+          isShowModal={isShowModal}
+          modalTitle={modalTitle}
+          clickFromChild={handleAddOff}
+        ></UserFromModal>
       </div>
     </div>
   );