唐简：修复部门搜索功能异常

package.json

@@ -14,6 +14,7 @@
     "antd": "^5.7.3",
     "axios": "^1.4.0",
     "babel-plugin-import": "^1.13.8",
+    "dayjs": "^1.11.10",
     "echarts": "^5.4.3",
     "js-cookie": "^3.0.5",
     "nprogress": "^0.2.0",

src/view/system/user/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useMemo } from "react";
+import "./index.scss";
 import {
   Input,
   Tree,
@@ -16,10 +16,13 @@ import {
   TreeSelect,
   Radio,
 } from "antd";
-import type { RadioChangeEvent } from "antd";
-import "./index.scss";
-import FormatData from "../../../utils/formatData";
-import { SearchOutlined, RedoOutlined, PlusOutlined } from "@ant-design/icons";
+
+import {
+  EditOutlined,
+  DeleteOutlined,
+  ExclamationCircleFilled,
+} from "@ant-design/icons";
+
 import {
   getUserListApi,
   deleteUserApi,
@@ -30,117 +33,34 @@ import {
   editUserApi,
 } from "../../../api/system/users";
 
-import {
-  EditOutlined,
-  DeleteOutlined,
-  ExclamationCircleFilled,
-} from "@ant-design/icons";
+import FormatData from "../../../utils/formatData";
+import React, { useEffect, useState, useMemo, useRef } from "react";
+import { SearchOutlined, RedoOutlined, PlusOutlined } from "@ant-design/icons";
 
 export default function User() {
-  const [echoId, setEchoId] = useState<number>();
+  const [form] = Form.useForm();
+  const postIdList: number[] = [];
+  const [echoId, setEchoId] = useState<any>();
+  const [myTreeData, setMyTreeData] = useState<[]>([]);
+  const [listData, setListData] = useState([]);
+  const [radioValue, setRadioValue] = useState(1);
+  const [searchTreeValue, setSearchTreeValue] = useState("");
+  const [roleList, setRoleList] = useState<any[]>([]);
+  const [messageApi, contextHolder] = message.useMessage();
   const [modalTitle, setModalTitle] = useState<string>("");
   const [buttonType, setButtonType] = useState<string>("");
   const [isShowModal, setIsShowModal] = useState<boolean>(false);
-
-  const handleAddClick = () => {
-    setModalTitle("新增用户");
-    setButtonType("ADD");
-    setIsShowModal(true);
-  };
-
-  const handleAddOff = (value?: string) => {
-    if (value === "UPDATE")
-      setQueryParams({
-        ...queryParams,
-      });
-
-    setIsShowModal(false);
-  };
-
-  const [myData, setMyData] = useState<[]>([]);
-  const [searchValue, setSearchValue] = useState("");
   const [autoExpandParent, setAutoExpandParent] = useState(true);
-  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
-
-  const getDeptTreeData = async () => {
-    try {
-      const res = await getDeptTreeApi();
-      setMyData(res.data);
-    } catch (error) {
-      console.error(error);
-    }
+  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([
+    100, 102, 101, 104,
+  ]);
+  const [treeValue, setTreeValue] = useState<string>();
+  const fieldNames = {
+    label: "deptName",
+    title: "deptName",
+    value: "deptId",
+    key: "deptName",
   };
-
-  const onExpand = (newExpandedKeys: React.Key[]) => {
-    setExpandedKeys(newExpandedKeys);
-    setAutoExpandParent(false);
-  };
-
-  const treeData = useMemo(() => {
-    const loop = (data: any[]): any[] =>
-      data.map((item) => {
-        const strTitle = item.deptName as string;
-        const index = strTitle.indexOf(searchValue);
-        const beforeStr = strTitle.substring(0, index);
-        const afterStr = strTitle.slice(index + searchValue.length);
-        const title =
-          index > -1 ? (
-            <span>
-              {beforeStr}
-              <span className="site-tree-search-value">{searchValue}</span>
-              {afterStr}
-            </span>
-          ) : (
-            <span>{strTitle}</span>
-          );
-        if (item.children) {
-          return { title, key: item.deptId, children: loop(item.children) };
-        }
-        return {
-          title,
-          key: item.key,
-        };
-      });
-    return loop(myData);
-  }, [myData]);
-
-  const handleTimePikerValue = (dates: any[]) => {
-    setQueryParams({
-      ...queryParams,
-      startTime: FormatData(dates[0].$d),
-      endTime: FormatData(dates[1].$d),
-    });
-  };
-
-  const handleInputValues = (e: any) => {
-    const { name, value } = e.target;
-
-    setQueryParams({ ...queryParams, [name]: value });
-  };
-
-  const handleReset = async () => {
-    getUserList({});
-    setQueryParams({});
-  };
-
-  const handleSearch = () => {
-    getUserList(queryParams);
-  };
-
-  interface QueryParamsType {
-    userName?: string;
-    phoneNumber?: string;
-    state?: string;
-    startTime?: string;
-    endTime?: string;
-    pageNum?: number;
-    pageSize?: number;
-  }
-
-  const [listData, setListData] = useState([]);
-  const [update, setUpdate] = useState<any>("");
-  const [currentPage, setCurrentPage] = useState<number>(1);
-  const [messageApi, contextHolder] = message.useMessage();
   const [queryParams, setQueryParams] = useState<QueryParamsType>({
     userName: undefined,
     phoneNumber: undefined,
@@ -173,13 +93,13 @@ export default function User() {
       title: "部门",
       key: "deptId",
       dataIndex: "deptName",
-      render: (text: string) => <>{text ? text : "null"}</>,
+      render: (text: string) => <>{text ? text : "--"}</>,
     },
     {
       title: "手机号码",
       key: "phoneNumber",
       dataIndex: "phoneNumber",
-      render: (text: string) => <>{text ? text : "null"}</>,
+      render: (text: string) => <>{text ? text : "--"}</>,
     },
     {
       title: "状态",
@@ -211,7 +131,7 @@ export default function User() {
             <EditOutlined />
             <a
               href="#"
-              onClick={() => handleEditClick(record)}
+              onClick={() => handleEdit(record)}
               style={{ color: " #58aaff" }}
             >
               编辑
@@ -219,7 +139,7 @@ export default function User() {
             <DeleteOutlined />
             <a
               href="#"
-              onClick={() => handleDeleteClick(record)}
+              onClick={() => handleDel(record)}
               style={{ color: " #58aaff" }}
             >
               删除
@@ -230,74 +150,6 @@ export default function User() {
     },
   ];
 
-  const getUserList = async (newQueryParams: object) => {
-    try {
-      const { code, data } = await getUserListApi(newQueryParams);
-      if (code === 1000) {
-        setListData(data.rows);
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  };
-
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-    setQueryParams({
-      ...queryParams,
-      pageNum: page,
-    });
-  };
-
-  const handleEditClick = (echoData: any) => {
-    setEchoId(echoData.userId);
-    setIsShowModal(true);
-    setButtonType("EDIT");
-    setModalTitle("修改用户");
-  };
-
-  const handleDeleteClick = async (record: any) => {
-    Modal.confirm({
-      title: `确定删除Id为-${record.userId}-, 用户名为-${record.userName}-的用户吗?`,
-      icon: <ExclamationCircleFilled />,
-      async onOk() {
-        const { code } = await deleteUserApi(record.userId);
-        try {
-          if (code === 1000) {
-            messageApi.open({
-              type: "success",
-              content: "删除成功",
-            });
-            setUpdate({
-              ...update,
-            });
-          } else {
-            messageApi.open({
-              type: "error",
-              content: "删除失败",
-            });
-          }
-        } catch (err) {
-          console.log(err);
-        }
-      },
-      onCancel() {
-        messageApi.open({
-          type: "warning",
-          content: "取消成功",
-        });
-      },
-    });
-  };
-
-  useEffect(() => {
-    console.log(queryParams);
-  }, [queryParams, update, queryParams, echoId]);
-
-  useEffect(() => {
-    getUserList({});
-  }, []);
-
   interface AddUserType {
     deptId: number | null;
     email: string;
@@ -311,18 +163,16 @@ export default function User() {
     userName: string;
   }
 
-  const [form] = Form.useForm();
-  const [radioValue, setRadioValue] = useState(1);
-  const [roleList, setRoleList] = useState<any[]>([]);
-  const [treeValue, setTreeValue] = useState<string>();
-  // 用于自定义TreeSelect内容
-  const fieldNames = {
-    label: "deptName",
-    title: "deptName",
-    value: "deptId",
-    key: "deptName",
-  };
-  // 用于新增用户参数
+  interface QueryParamsType {
+    userName?: string;
+    phoneNumber?: string;
+    state?: string;
+    startTime?: string | null;
+    endTime?: string | null;
+    pageNum?: number;
+    pageSize?: number;
+  }
+
   let addUserParams: AddUserType = {
     deptId: null,
     email: "",
@@ -336,11 +186,35 @@ export default function User() {
     userName: "",
   };
 
+  const getDeptTreeData = async () => {
+    try {
+      const { code, data } = await getDeptTreeApi();
+      if (code === 1000) {
+        setMyTreeData(data);
+        handleLoopPostList(data);
+        setExpandedKeys(postIdList);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const getUserList = async (newQueryParams: object) => {
+    try {
+      const { code, data } = await getUserListApi(newQueryParams);
+      if (code === 1000) {
+        setListData(data.rows);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   const getUserInfo = async () => {
     try {
       const { code, data } = await getUserInfoApi(echoId);
       if (code === 1000) {
-        handleEchoForm(data);
+        handleEcho(data);
       }
     } catch (error) {
       console.error(error);
@@ -358,24 +232,20 @@ export default function User() {
     }
   };
 
-  const handleEchoForm = (data: any) => {
-    const { userName, nickName, sex, state, phoneNumber, deptId, email } =
-      data.user;
-    const { postIds, roleIds } = data;
-    form.setFieldsValue({
-      userName,
-      nickName,
-      state,
-      phoneNumber,
-      sex,
-      deptId,
-      email,
-      postIds,
-      roleIds,
-    });
+  const handleAdd = () => {
+    setModalTitle("新增用户");
+    setButtonType("ADD");
+    setIsShowModal(true);
   };
 
-  const handleAddConfirm = () => {
+  const handleEdit = (echoData: any) => {
+    setModalTitle("修改用户");
+    setButtonType("EDIT");
+    setIsShowModal(true);
+    setEchoId(echoData.userId);
+  };
+
+  const handleConfirm = () => {
     form.validateFields().then((values) => {
       Object.keys(values).forEach(
         (key) => values[key] === undefined && delete values[key]
@@ -406,7 +276,8 @@ export default function User() {
           type: "success",
           content: "创建成功",
         });
-        handleClearForm();
+        setQueryParams({});
+        handleClear();
       } else {
         messageApi.open({
           type: "error",
@@ -419,8 +290,6 @@ export default function User() {
   };
 
   const handleEditUser = async () => {
-    console.log(addUserParams);
-
     const { code } = await editUserApi(addUserParams);
     try {
       if (code === 1000) {
@@ -428,7 +297,8 @@ export default function User() {
           type: "success",
           content: "修改成功",
         });
-        handleClearForm();
+        setQueryParams({});
+        handleClear();
       } else {
         messageApi.open({
           type: "error",
@@ -440,41 +310,196 @@ export default function User() {
     }
   };
 
-  const handleCancel = () => {
-    handleClearForm();
-    setQueryParams;
+  const handleReset = async () => {
+    setQueryParams({
+      startTime: null,
+      endTime: null,
+    });
+    setQueryParams({});
+    getUserList({});
   };
 
-  const handleClearForm = () => {
+  const handleSearch = () => {
+    console.log(queryParams);
+    getUserList(queryParams);
+  };
+
+  const handleDel = async (record: any) => {
+    Modal.confirm({
+      title: `确定删除Id为-${record.userId}-, 用户名为-${record.userName}-的用户吗?`,
+      icon: <ExclamationCircleFilled />,
+      async onOk() {
+        const { code } = await deleteUserApi(record.userId);
+        try {
+          if (code === 1000) {
+            messageApi.open({
+              type: "success",
+              content: "删除成功",
+            });
+            setQueryParams({});
+          } else {
+            messageApi.open({
+              type: "error",
+              content: "删除失败",
+            });
+          }
+        } catch (err) {
+          console.log(err);
+        }
+      },
+      onCancel() {
+        messageApi.open({
+          type: "warning",
+          content: "取消成功",
+        });
+      },
+    });
+  };
+
+  const handleTimePikerValue = (dates: any[]) => {
+    setQueryParams({
+      ...queryParams,
+      startTime: FormatData(dates[0].$d),
+      endTime: FormatData(dates[1].$d),
+    });
+  };
+
+  const handleSearchValues = (e: any) => {
+    const { name, value } = e.target;
+    setQueryParams({ ...queryParams, [name]: value });
+  };
+
+  const handlePageChange = (page: number) => {
+    setQueryParams({
+      ...queryParams,
+      pageNum: page,
+    });
+  };
+
+  const handleEcho = (data: any) => {
+    const { userName, nickName, sex, state, phoneNumber, deptId, email } =
+      data.user;
+    const { postIds, roleIds } = data;
+    form.setFieldsValue({
+      userName,
+      nickName,
+      state,
+      phoneNumber,
+      sex,
+      deptId,
+      email,
+      postIds,
+      roleIds,
+    });
+  };
+
+  const handleCancel = () => {
+    handleClear();
+  };
+
+  const handleClear = () => {
     form.resetFields();
     setIsShowModal(false);
   };
 
-  const onRadioChange = (e: RadioChangeEvent) => {
+  const handleExpandKeys = (key: string, data: object[]) => {
+    const filterRes = new RegExp(key, "i");
+    data.forEach((item: any) => {
+      if (filterRes.test(item?.title?.props?.children)) {
+        postIdList.push(item.key);
+      }
+      item.children ? handleExpandKeys(key, item.children) : "";
+    });
+  };
+
+  const handleLoopPostList = (loopData: object[]) => {
+    loopData.forEach((item: any) => {
+      if (item?.deptId) {
+        const flag = postIdList.some((someItem) => {
+          someItem === item.deptId;
+        });
+        if (!flag) {
+          postIdList.push(item.deptId);
+        }
+      }
+      item.children ? handleLoopPostList(item.children) : "";
+    });
+  };
+
+  const onRadio = (e: any) => {
     setRadioValue(e.target.value);
   };
 
-  const onTreeSelectChange = (newValue: string) => {
+  const onTreeSelect = (newValue: string) => {
     setTreeValue(newValue);
   };
 
+  const onTreeSearch = (e?: any) => {
+    const { value } = e.target ? e.target : null;
+    setSearchTreeValue(value);
+    handleExpandKeys(value, treeData);
+    console.log("postIdList:", postIdList);
+    setExpandedKeys(postIdList);
+    setAutoExpandParent(true);
+  };
+
+  const onExpand = (newExpandedKeys: React.Key[]) => {
+    console.log(newExpandedKeys);
+    setExpandedKeys(newExpandedKeys);
+    setAutoExpandParent(true);
+  };
+
+  const treeData = useMemo(() => {
+    const loop = (data: any[]): any[] =>
+      data.map((item) => {
+        const strTitle = item.deptName as string;
+        const index = strTitle.indexOf(searchTreeValue);
+        const beforeStr = strTitle.substring(0, index);
+        const afterStr = strTitle.slice(index + searchTreeValue.length);
+        const title =
+          index > -1 ? (
+            <span>
+              {beforeStr}
+              <span className="site-tree-search-value">{searchTreeValue}</span>
+              {afterStr}
+            </span>
+          ) : (
+            <span>{strTitle}</span>
+          );
+        if (item.children) {
+          return { title, key: item.deptId, children: loop(item.children) };
+        }
+        return {
+          title,
+          key: item.deptId,
+        };
+      });
+    return loop(myTreeData);
+  }, [myTreeData]);
+
   useEffect(() => {
     getDeptTreeData();
     getRoleList();
     getUserInfo();
   }, [echoId]);
 
+  useEffect(() => {
+    getUserList({});
+  }, [queryParams]);
+
   return (
     <div id="content">
       <div className="dept-content">
         <Input
+          allowClear
           style={{ marginBottom: 8 }}
           prefix={<SearchOutlined />}
           placeholder="请输入部门名称"
-          // onChange={onChange}
+          onChange={onTreeSearch}
         />
         <Tree
           onExpand={onExpand}
+          defaultExpandAll={true}
           expandedKeys={expandedKeys}
           autoExpandParent={autoExpandParent}
           treeData={treeData}
@@ -492,7 +517,7 @@ export default function User() {
                     name="userName"
                     allowClear
                     value={queryParams.userName}
-                    onChange={handleInputValues}
+                    onChange={handleSearchValues}
                   />
                 </div>
                 <div className="input-item">
@@ -502,7 +527,7 @@ export default function User() {
                     name="phoneNumber"
                     allowClear
                     value={queryParams.phoneNumber}
-                    onChange={handleInputValues}
+                    onChange={handleSearchValues}
                   />
                 </div>
                 <div className="input-item">
@@ -554,7 +579,7 @@ export default function User() {
           </div>
           <div className="add-content">
             <>
-              <Button type="primary" onClick={handleAddClick}>
+              <Button type="primary" onClick={handleAdd}>
                 <PlusOutlined />
                 新增
               </Button>
@@ -576,18 +601,13 @@ export default function User() {
               />
             </>
           </div>
-
-          {/* <UserFromModal
-            clickFromChild={handleAddOff}
-          ></UserFromModal> */}
-
           <>
             {contextHolder}
             <Modal
               title={modalTitle}
               width={700}
               open={isShowModal}
-              onOk={handleAddConfirm}
+              onOk={handleConfirm}
               onCancel={handleCancel}
             >
               <Form
@@ -595,7 +615,7 @@ export default function User() {
                 name="basic"
                 initialValues={{ remember: true }}
                 labelCol={{ span: 6 }}
-                onFinish={handleAddConfirm}
+                onFinish={handleConfirm}
                 autoComplete="off"
                 className="modal-form"
               >
@@ -663,8 +683,8 @@ export default function User() {
                         allowClear
                         fieldNames={fieldNames}
                         treeDefaultExpandAll
-                        onChange={onTreeSelectChange}
-                        treeData={myData}
+                        onChange={onTreeSelect}
+                        treeData={myTreeData}
                       />
                     </Form.Item>
                   </Col>
@@ -697,7 +717,7 @@ export default function User() {
                         },
                       ]}
                     >
-                      <Radio.Group onChange={onRadioChange} value={radioValue}>
+                      <Radio.Group onChange={onRadio} value={radioValue}>
                         <Radio value="1">正常</Radio>
                         <Radio value="0">停用</Radio>
                       </Radio.Group>