唐简：修复部门树点击无法搜索bug，修复点击重置按钮无法清空时间选择框bug

2023-10-31 23:09:34 +08:00
parent 6f9a8906eb
commit 9015599fcb
3 changed files with 104 additions and 93 deletions
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
    "dayjs": "^1.11.10",
    "echarts": "^5.4.3",
    "js-cookie": "^3.0.5",
+    "moment": "^2.29.4",
    "nprogress": "^0.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
--- a/src/api/system/users.ts
+++ b/src/api/system/users.ts
@@ -1,6 +1,7 @@
 import request from "../../utils/request";

 interface userListParams {
+  deptId?: string;
  userName?: string;
  phoneNumber?: string;
  state?: string;
@@ -40,6 +41,7 @@ export const getPostListApi = () => {

 export const getUserListApi = (data: userListParams) => {
  const {
+    deptId,
    userName,
    phoneNumber,
    state,
@@ -50,6 +52,7 @@ export const getUserListApi = (data: userListParams) => {
  } = data;
  const params = data
    ? {
+        deptId,
        userName,
        phoneNumber,
        state,
--- a/src/view/system/user/index.tsx
+++ b/src/view/system/user/index.tsx
@@ -32,15 +32,14 @@ import {
  getUserInfoApi,
  editUserApi,
 } from "../../../api/system/users";
-
-import FormatData from "../../../utils/formatData";
-import locale from "antd/es/date-picker/locale/zh_CN";
-import React, { useEffect, useState, useMemo, useRef } from "react";
-import { SearchOutlined, RedoOutlined, PlusOutlined } from "@ant-design/icons";
+import dataLocale from "antd/es/date-picker/locale/zh_CN";
+import React, { useEffect, useState, useMemo } from "react";
+import { SearchOutlined, PlusOutlined } from "@ant-design/icons";

 export default function User() {
-  const [form] = Form.useForm();
  const postIdList: number[] = [];
+  const [form] = Form.useForm();
+  const [searchForm] = Form.useForm();
  const [echoId, setEchoId] = useState<any>();
  const [myTreeData, setMyTreeData] = useState<[]>([]);
  const [listData, setListData] = useState([]);
@@ -63,6 +62,7 @@ export default function User() {
    key: "deptName",
  };
  const [queryParams, setQueryParams] = useState<QueryParamsType>({
+    deptId: undefined,
    userName: undefined,
    phoneNumber: undefined,
    state: undefined,
@@ -152,7 +152,6 @@ export default function User() {
  ];

  interface AddUserType {
-    deptId: number | null;
    email: string;
    nickName: string;
    password: string;
@@ -165,17 +164,17 @@ export default function User() {
  }

  interface QueryParamsType {
+    deptId?: number;
    userName?: string;
    phoneNumber?: string;
    state?: string;
-    startTime?: string | null;
-    endTime?: string | null;
+    startTime?: string | any;
+    endTime?: string | any;
    pageNum?: number;
    pageSize?: number;
  }

  let addUserParams: AddUserType = {
-    deptId: null,
    email: "",
    nickName: "",
    password: "",
@@ -202,8 +201,6 @@ export default function User() {

  const getUserList = async (newQueryParams: object) => {
    try {
-      console.log(newQueryParams);
-
      const { code, data } = await getUserListApi(newQueryParams);
      if (code === 1000) {
        setListData(data.rows);
@@ -314,16 +311,12 @@ export default function User() {
  };

  const handleReset = async () => {
-    setQueryParams({
-      startTime: null,
-      endTime: null,
-    });
+    searchForm.resetFields();
    setQueryParams({});
    getUserList({});
  };

  const handleSearch = () => {
-    console.log(queryParams);
    getUserList(queryParams);
  };

@@ -359,12 +352,13 @@ export default function User() {
    });
  };

-  const handleTimePikerValue = (dates: any[]) => {
+  const handleTimePikerValue = (_: any, dates: string[]) => {
    setQueryParams({
      ...queryParams,
-      startTime: FormatData(dates[0].$d),
-      endTime: FormatData(dates[1].$d),
+      startTime: dates[0],
+      endTime: dates[1],
    });
+    searchForm.setFieldsValue({ dataTime: [dates[0], dates[1]] });
  };

  const handleSearchValues = (e: any) => {
@@ -379,6 +373,14 @@ export default function User() {
    });
  };

+  const handleTreeSelect = (deptId: any) => {
+    console.log(queryParams);
+    getUserList({
+      ...queryParams,
+      deptId: deptId[0],
+    });
+  };
+
  const handleEcho = (data: any) => {
    const { userName, nickName, sex, state, phoneNumber, deptId, email } =
      data.user;
@@ -441,7 +443,6 @@ export default function User() {
    const { value } = e.target ? e.target : null;
    setSearchTreeValue(value);
    handleExpandKeys(value, treeData);
-    console.log("postIdList:", postIdList);
    setExpandedKeys(postIdList);
    setAutoExpandParent(true);
  };
@@ -488,7 +489,7 @@ export default function User() {

  useEffect(() => {
    getUserList({});
-  }, [queryParams]);
+  }, []);

  return (
    <div id="content">
@@ -506,81 +507,87 @@ export default function User() {
          expandedKeys={expandedKeys}
          autoExpandParent={autoExpandParent}
          treeData={treeData}
+          onSelect={handleTreeSelect}
        />
      </div>
      <>
        <div className="right-user">
-          <div className="search-content">
-            <>
-              <div className="content-top">
-                <div className="input-item">
-                  <div>用户名称</div>
-                  <Input
-                    placeholder="请输入用户名称"
-                    name="userName"
-                    allowClear
-                    value={queryParams.userName}
-                    onChange={handleSearchValues}
-                  />
-                </div>
-                <div className="input-item">
-                  <div>手机号码</div>
-                  <Input
-                    placeholder="请输入手机号码"
-                    name="phoneNumber"
-                    allowClear
-                    value={queryParams.phoneNumber}
-                    onChange={handleSearchValues}
-                  />
-                </div>
-                <div className="input-item">
-                  <div>状态</div>
-                  <Select
-                    style={{ width: 120 }}
-                    placeholder="用户状态"
-                    allowClear
-                    options={[
-                      { value: "1", label: "正常" },
-                      { value: "0", label: "停用" },
-                    ]}
-                    value={queryParams.state}
-                    onChange={(value: any) =>
-                      setQueryParams({
-                        ...queryParams,
-                        state: value,
-                      })
-                    }
-                  />
-                </div>
-              </div>
-              <div className="content-bottom">
-                <div className="time-selector">
-                  <div>创建时间</div>
-                  <DatePicker.RangePicker
-                    showTime
-                    locale={locale}
-                    className="time-picker"
-                    placeholder={["开始时间", "结束时间"]}
-                    onChange={(dates) => {
-                      handleTimePikerValue(dates as any);
-                    }}
-                  />
-                </div>
-                <div className="search-button">
-                  <Button type="primary" onClick={handleSearch}>
-                    <SearchOutlined />
-                    搜索
-                  </Button>
-                </div>
-                <div className="reset-button" onClick={handleReset}>
-                  <Button>
-                    <RedoOutlined />
-                    重置
-                  </Button>
-                </div>
-              </div>
-            </>
-          </div>
+          <Form
+            layout="inline"
+            form={searchForm}
+            onFinish={handleSearch}
+            style={{ fontWeight: "700", marginLeft: 12, marginTop: 23 }}
+          >
+            <Form.Item
+              label="用户名称"
+              name="userName"
+              style={{ width: 300 + "px", marginTop: "10px" }}
+            >
+              <Input
+                placeholder="请输入用户名称"
+                name="userName"
+                allowClear
+                value={queryParams.userName}
+                onChange={handleSearchValues}
+              />
+            </Form.Item>
+            <Form.Item
+              label="手机号码"
+              name="phoneNumber"
+              style={{ width: 300 + "px", marginTop: "10px" }}
+            >
+              <Input
+                placeholder="请输入手机号码"
+                name="phoneNumber"
+                allowClear
+                value={queryParams.phoneNumber}
+                onChange={handleSearchValues}
+              />
+            </Form.Item>
+            <Form.Item label="状态" name="state" style={{ marginTop: "10px" }}>
+              <Select
+                style={{ width: 250 }}
+                placeholder="用户状态"
+                allowClear
+                options={[
+                  { value: "1", label: "正常" },
+                  { value: "0", label: "停用" },
+                ]}
+                value={queryParams.state}
+                onChange={(value: any) =>
+                  setQueryParams({
+                    ...queryParams,
+                    state: value,
+                  })
+                }
+              />
+            </Form.Item>
+            <Form.Item
+              label="创建时间"
+              name="dateTime"
+              style={{ marginTop: "10px" }}
+            >
+              <DatePicker.RangePicker
+                locale={dataLocale}
+                showTime
+                format="YYYY-MM-DD HH:mm:ss"
+                onChange={handleTimePikerValue}
+              />
+            </Form.Item>
+            <Form.Item style={{ marginTop: "10px" }}>
+              <Button
+                type="primary"
+                htmlType="submit"
+                style={{ marginLeft: 20 + "px" }}
+              >
+                搜索
+              </Button>
+            </Form.Item>
+            <Form.Item style={{ marginTop: "10px" }}>
+              <Button onClick={handleReset}>重置</Button>
+            </Form.Item>
+          </Form>
+
          <div className="add-content">
            <>
              <Button type="primary" onClick={handleAdd}>