fix: '机构管理搜索分页bug修复，修复hover图标多次调用接口问题'

src/pages/userCenter/userManage/UserManage.jsx

@@ -74,7 +74,6 @@ import {
 import { AddUserAuthSetting, GetUserAuthSet } from '@/services/database/api';
 import TreeComponents from '@/components/ExpendableTree';
 import classnames from 'classnames';
-import DraggleLayout from 'components/DraggleLayout';
 import AddUserModal from './AddUserModal';
 import AddSubOrgModal from './AddSubOrgModal';
 import EditOrgModal from './EditOrgModal';
@@ -82,10 +81,7 @@ import DeleteOrgModal from './DeleteOrgModal';
 import RelateRoleModal from './RelateRoleModal';
 import EditUserModal from './EditUserModal';
 import ChangePasswordModal from './ChangePasswordModal';
-import MapScopeEditModal from '@/components/MapScope';
-import AuthModal from './AuthModal';
 import styles from './UserManage.less';
-import { createGuid } from '@/utils/transformUtil';
 const TdCell = props => {
   // onMouseEnter, onMouseLeave在数据量多的时候，会严重阻塞表格单元格渲染，严重影响性能
   const { onMouseEnter, onMouseLeave, ...restProps } = props;
@@ -93,13 +89,8 @@ const TdCell = props => {
 };
 
 const UserManage = () => {
-  const { TreeNode } = Tree;
-
-  const [form] = Form.useForm();
-  const { Item } = Form;
   const [selectValue, setSelctValue] = useState(); // 用户鉴权
 
-  const [width, setWidth] = useState(50);
   const [treeLoading, setTreeLoading] = useState(false);
   const [tableLoading, setTableLoading] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -135,7 +126,6 @@ const UserManage = () => {
   const [authUserVisible, setAuthUserVisible] = useState(false); // 鉴权用户
 
   const [orgTitle, setOrgTitle] = useState('当前机构'); // 弹框标题
-  const [groupId, setGroupId] = useState();
   const [orgTitle1, setOrgTitle1] = useState('当前机构'); // 弹框标题
   const [description, setDescription] = useState(''); // 机构描述信息
   const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 已选用户数,机构改变时重置
@@ -170,7 +160,6 @@ const UserManage = () => {
   const [expendKey, setExpendKey] = useState(''); // 保存默认展开项
   const [expendKeyOrg, setExpendKeyOrg] = useState(''); // 保存默认展开项
   const [menuID, setMenuID] = useState(''); // 选中的树IDs
-  const [keepId, setKeepId] = useState('');
   const [flag, setFlag] = useState(1); // 刷新标志
   const userContainer = useRef();
   const flagRef = useRef(1);
@@ -196,22 +185,18 @@ const UserManage = () => {
       title: '登录名',
       dataIndex: 'loginName',
       key: 'loginName',
-      // width: 100,
-      // fixed: 'left',
       render: item => searchStyle(item),
     },
     {
       title: '用户姓名',
       dataIndex: 'userName',
       key: 'userName',
-      // width: 100,
       render: item => searchStyle(item),
     },
     {
       title: '所在机构',
       dataIndex: 'groupLevel',
       key: 'groupLevel',
-      // width: 150,
       ellipsis: true,
       render: (text, record) => {
         let arr = text?.split('/');
@@ -244,38 +229,6 @@ const UserManage = () => {
         return <span>未绑定</span>;
       },
     },
-    // {
-    //   title: '钉钉账户',
-    //   dataIndex: 'ddid',
-    //   key: 'ddid',
-    //   // width: 150,
-    //   render: record => {
-    //     if (record) {
-    //       return (
-    //         <Tooltip title={record}>
-    //           <span style={{ color: '#50aefc', cursor: 'pointer' }}>已绑定</span>
-    //         </Tooltip>
-    //       );
-    //     }
-    //     return <span>未绑定</span>;
-    //   },
-    // },
-    // {
-    //   title: '微信账户',
-    //   dataIndex: 'wxid',
-    //   key: 'wxid',
-    //   // width: 140,
-    //   render: record => {
-    //     if (record) {
-    //       return (
-    //         <Tooltip title={record}>
-    //           <span style={{ color: '#50aefc', cursor: 'pointer' }}>已绑定</span>
-    //         </Tooltip>
-    //       );
-    //     }
-    //     return <span>未绑定</span>;
-    //   },
-    // },
     {
       title: '站点权限',
       dataIndex: 'stationCount',
@@ -285,7 +238,6 @@ const UserManage = () => {
     {
       title: '权限设置',
       key: 'action',
-      // fixed: 'right',
       width: 150,
       align: 'center',
       render: record => (
@@ -315,8 +267,7 @@ const UserManage = () => {
               okText="确认"
               cancelText="取消"
               onConfirm={() => {
-                console.log(groupId, 'groupId');
-                SetGroupManager({ groupId, userId: record.userId }).then(res => {
+                SetGroupManager({ groupId: record.groupId, userId: record.userId }).then(res => {
                   if (res.code === 0) {
                     // eslint-disable-next-line no-unused-expressions
                     currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]);
@@ -378,55 +329,10 @@ const UserManage = () => {
     {
       title: '操作',
       key: 'action',
-      // fixed: 'right',
       width: 100,
       align: 'center',
       render: record => (
         <Space size="middle">
-          {/* <Tooltip title="关联权限">
-            <IdcardOutlined
-              onClick={() => relateRole(record)}
-              style={{ fontSize: '16px', color: '#1890FF' }}
-            />
-          </Tooltip>
-          <Tooltip title="更改机构">
-            <ApartmentOutlined
-              onClick={() => changeOrg(record)}
-              style={{ fontSize: '16px', color: '#1890FF' }}
-            />
-          </Tooltip>
-          <Tooltip title="设置为主管">
-            <Popconfirm
-              placement="bottomRight"
-              title={
-                <p>
-                  确定将用户
-                  <span className={styles.redText}>{voca.stripTags(record.loginName)}</span>
-                  设置为{orgTitle}主管吗？
-                </p>
-              }
-              okText="确认"
-              cancelText="取消"
-              onConfirm={() => {
-                console.log(groupId, 'groupId');
-                SetGroupManager({ groupId, userId: record.userId }).then(res => {
-                  if (res.code === 0) {
-                    // eslint-disable-next-line no-unused-expressions
-                    currentSelectOrg === '-1' ? submitSearchUser() : onSelect([currentSelectOrg]);
-                  } else {
-                    notification.error({
-                      message: '设置失败',
-                      description: res.msg,
-                    });
-                  }
-                });
-              }}
-            >
-              <UserOutlined
-                style={{ fontSize: '16px', color: record.isManager ? '#FAAD14' : '#1890FF' }}
-              />
-            </Popconfirm>
-          </Tooltip> */}
           <Tooltip title="修改密码">
             <UnlockOutlined
               onClick={() => changePassword(record)}
@@ -483,35 +389,6 @@ const UserManage = () => {
               </Tooltip>
             </>
           )}
-          {/* <Tooltip title="用户鉴权">
-            <Popconfirm
-              placement="bottomRight"
-              title={
-                <div style={{ width: '130px' }}>
-                  <Form form={form}>
-                    <Item>
-                      <Radio.Group value={selectValue} onChange={onTypeChange}>
-                        <Space direction="vertical">
-                          <Radio value={0}>访客</Radio>
-                          <Radio value={1}>普通用户</Radio>
-                          <Radio value={2}>管理员</Radio>
-                          <Radio value={3}>超级管理员</Radio>
-                        </Space>
-                      </Radio.Group>
-                    </Item>
-                  </Form>
-                </div>
-              }
-              okText="确认"
-              cancelText="取消"
-              onConfirm={() => authUser(record)}
-            >
-              <LockOutlined
-                onClick={() => jianquan(record)}
-                style={{ fontSize: '16px', color: '#1890ff' }}
-              />
-            </Popconfirm>
-          </Tooltip> */}
           {record.loginName == 'panda' || record.loginName == 'admin' ? (
             <DeleteOutlined style={{ fontSize: '16px', color: '#e86060' }} disabled />
           ) : (
@@ -538,8 +415,9 @@ const UserManage = () => {
   ];
 
   useEffect(() => {
-    setExpendKey(menuID);
-    console.log(expendKey);
+    if (!searchWord) {
+      setExpendKey(menuID);
+    }
   }, [menuID]);
   // 获取用户机构树
   useEffect(() => {
@@ -616,13 +494,11 @@ const UserManage = () => {
         if (newres.code === 0) {
           let res = newres.data.list;
           setTreeDataCopy(res);
-          console.log(res);
           let aa = [];
           res.map(i => {
             if (i.children.length > 0) {
               aa.push(i.id);
             }
-            console.log(i.id);
             aa = i.id;
           });
           setExpendKeyOrg(aa.toString());
@@ -643,8 +519,6 @@ const UserManage = () => {
   const rowSelection = {
     selectedRowKeys,
     onChange: (RowKeys, Rows) => {
-      console.log(RowKeys);
-      console.log(Rows);
       setSelectedRowKeys(RowKeys);
       getCheckList(RowKeys);
       setUserIDs(RowKeys.toString()); // 数组转字符串，逗号连接
@@ -724,7 +598,6 @@ const UserManage = () => {
                 onMouseEnter={e => {
                   setOrgID(org);
                   setOrgTitle1(org.text);
-                  getDescription(org.id);
                   // getMapSetByGroupID(org.id);
                   setCurrentSelectOrg1(org.id);
                   setId(org.text);
@@ -753,39 +626,13 @@ const UserManage = () => {
   // 重新渲染树
   const updateTrees = e => {
     setTreeLoading(true);
-    // getUserTree(-1, -1)
-    //   .then(res => {
-    //     if (res.length > 0) {
-    //       setTreeLoading(false);
-    //       setTreeData(res);
-    //       setTreeDataCopy(res);
-    //       // 第一次加载，默认选择第一个组织
-    //       if (treeState) {
-    //         onSelect([res[0].id], false);
-    //         setTreeState(false);
-    //       }
-    //     } else {
-    //       setTreeLoading(false);
-    //       notification.error({
-    //         message: '获取失败',
-    //         description: res.message,
-    //       });
-    //     }
-    //   })
-    //   .catch(err => {
-    //     setTreeLoading(false);
-    //     message.error(err);
-    //   });
     GetOUTreeNew({ groupId: -1, keyword: e })
       .then(newres => {
         setTreeLoading(false);
         if (newres.code === 0) {
           let res = newres.data.list;
           setTreeDataTotal(newres.data.count);
-          console.log(res);
-
           setTreeData(res);
-          // setTreeDataCopy(res);
           let aa = [];
           res.forEach(i => {
             aa.push(i.id);
@@ -813,7 +660,6 @@ const UserManage = () => {
   };
 
   const updateTrees1 = e => {
-    console.log(e);
     setTreeLoading(true);
     GetOUTreeNew({ groupId: -1 })
       .then(newres => {
@@ -829,7 +675,6 @@ const UserManage = () => {
             aa.push(i.id);
           });
           setKeepTree(aa);
-          console.log(e);
           setMenuID(e.toString());
           setExpendKey(e);
         } else {
@@ -868,7 +713,6 @@ const UserManage = () => {
       groupID: props[0],
     }).then(res => {
       if (res.code === 0) {
-        console.log(res);
         if (res.code.MapRange != null) {
           setCurrentOrgArea(res.data.MapRange);
           setCurrentOrgDistinct(res.data.AreeName);
@@ -878,11 +722,8 @@ const UserManage = () => {
     setOrgID(props[0] || currentSelectOrg);
     // 树节点变化（即props不为空）时才请求，避免重复请求
     if (props[0]) {
-      console.log(props[0]);
       setMenuID(props[0]);
       // eslint-disable-next-line no-console
-
-      setGroupId(props[0]);
       let sizedata = '';
       let currentData = '';
       if (currentSelectOrg !== props[0]) {
@@ -942,81 +783,6 @@ const UserManage = () => {
     }
   };
 
-  // // 添加用户刷新表数据
-  // const onSelect1 = () => {
-  //   console.log(orgID);
-  //   setTableLoading(true);
-  //   // eslint-disable-next-line no-console
-  //   getOneOUUserListNew(orgID.id || currentSelectOrg, pageSize, currentPage)
-  //     .then(res => {
-  //       setCurrentOrgOperate(false); // 重置禁用当前机构操作为false
-  //       setMultiOperate(true); // 重新禁止用户批量操作
-  //       setSelectedRowKeys([]); // 重置选中用户数
-  //       if (res.code === 0) {
-  //         setTableLoading(false);
-  //         setSearchWord(''); // 搜索框置空
-  //         setOrgTitle(res.data.GroupName);
-  //         // setDescription(res.data.Description);
-  //         // 返回用户表数据结构处理，扁平化
-  //         let temp = res.data.data;
-  //         // const temp = flatten(getUsers(res.data));
-  //         // 设置过滤字段
-  //         let arr = temp.map(item => item.groupName);
-  //         arr = arr.filter((value, index) => arr.indexOf(value) === index);
-  //         setOrgFilters(arr.map(item => ({ text: item, value: item })));
-  //         setTableLength(temp.length);
-  //         const table = temp.map((item, index) => {
-  //           item.key = index;
-  //           return item;
-  //         });
-  //         setShowSearchStyle(false);
-  //         setTableData(table);
-  //       } else {
-  //         setTableLoading(false);
-  //       }
-  //     })
-  //     .catch(err => {
-  //       setTableLoading(false);
-  //       message.error(err);
-  //     });
-  // };
-
-  const getDescription = e => {
-    getOneOUUserListNew(e, pageSize, currentPage).then(res => {
-      if (res.code === 0) {
-        setDescription(res.data.Description);
-      }
-    });
-  };
-
-  const getMapSetByGroupID = e => {
-    GetMapSetByGroupID({
-      groupID: e,
-    }).then(res => {
-      if (res.code === 0) {
-        console.log(res);
-        setCurrentOrgArea(res.data.MapRange);
-        setCurrentOrgDistinct(res.data.AreeName);
-      }
-    });
-  };
-  // 返回用户表数据结构处理，扁平化
-  // const getUsers = orgObj => {
-  //   let result = orgObj.Users;
-  //   result.map(item => {
-  //     item.OUID = orgObj.GroupId;
-  //     item.OUName = orgObj.GroupName;
-  //     return item;
-  //   });
-  //   if (orgObj.Childs.length > 0) result = [...result, ...orgObj.Childs.map(o => getUsers(o))];
-  //   return result;
-  // };
-  const flatten = arr => {
-    while (arr.some(item => Array.isArray(item))) {
-      arr = [].concat(...arr);
-    }
-    return arr;
-  };
   // 添加用户
   const addUser = e => {
     setUserVisible(true);
@@ -1037,25 +803,12 @@ const UserManage = () => {
   // 删除机构
   const deleteOrg = () => {
     setDeleteOrgVisible(true);
-    console.log(orgID);
-    console.log(keep1);
     if (orgID.id == keep1) {
       setTreeState(true);
     } else {
       setTreeState(false);
     }
   };
-  // 编辑机构范围
-  const EditOrgScope = () => {
-    setEditOrgExtentVisible(true);
-  };
-
-  // 在currentUser变化后获取角色列表
-  // useEffect(() => {
-  //   if (currentUser && currentUser.userId) {
-  //     getRoleList();
-  //   }
-  // }, [currentUser]);
 
   /** ***用户批量操作****** */
   // 关联角色
@@ -1082,7 +835,6 @@ const UserManage = () => {
   const relateRole = record => {
     // getEmptyRoleList(record.userId);
     setMult('No');
-    console.log(record);
     getRoleList(record);
     setRoleVisible(true);
     setCurrentUser(record);
@@ -1110,12 +862,10 @@ const UserManage = () => {
   };
   // 冻结用户
   const freezeUser = record => {
-    console.log(currentUser);
     // setFreezeUserVisible(true);
     setCurrentUser(record);
     setSelectColor(record);
     let state = '';
-    console.log(record);
     if (record.state === '0' || record.state === null) {
       state = '1';
     } else {
@@ -1145,7 +895,6 @@ const UserManage = () => {
   };
   // 删除用户
   const deleteUser = record => {
-    console.log(record.userName);
     setCurrentUser(record.userName);
     setSelectColor(record);
     DeleteUserNew({
@@ -1172,80 +921,60 @@ const UserManage = () => {
       });
   };
 
-  // 用户鉴权
-  //   useEffect(() => {
-  //     currentUser.userId
-  //     GetUserAuthSet({
-  //         UserId: currentUser.userId
-  //     }).then(
-  //         res => {
-  //             if(res.code == 0){
-  //                 setSelctValue(res.data)
-  //                 console.log(selectValue);
-  //                 console.log(res.data);
-  //             }
-  //         }
-  //     )
-  // }, [currentUser])
-  const jianquan = record => {
-    GetUserAuthSet({
-      UserId: record.userId,
-    }).then(res => {
-      if (res.code === 0) {
-        setSelctValue(res.data);
-        console.log(res.data);
-      }
-    });
-  };
-  const onTypeChange = value => {
-    setSelctValue(value.target.value);
-  };
-  const authUser = record => {
-    setCurrentUser(record);
-    console.log(selectValue);
-    AddUserAuthSetting({
-      userId: record.userId,
-      userLevel: selectValue,
-    }).then(res => {
-      if (res.code === 0) {
-        message.info('提交成功');
-      }
-    });
-  };
-
   // 查找用户
-  const submitSearchUser = () => {
-    setCurrentPage(1);
-    if (!searchWord || searchWord.trim(' ').length == 0) {
-      message.warning('请输入搜索内容');
-      return;
+  const submitSearchUser = (size, current) => {
+    setMenuID('');
+    if (!current) {
+      setCurrentPage(1);
     }
+
     setTableLoading(true);
-    let data = searchWord != '' ? { key: searchWord } : '';
-    GetUserByKeyNew(data)
+    let data = current ? current : 1;
+    let newSize = size ? size : 20;
+    if (!searchWord) {
+      setMenuID(treeDataCopy[0].id);
+    }
+    getOneOUUserListNew(0, newSize, data, searchWord)
       .then(res => {
         setSearchFlag(1);
         setTableLoading(false);
         if (res.code === 0) {
-          setTotalSearch(res.data.length);
+          setTotal(res.data.count);
           setSelectedRowKeys([]); // 重置选中用户数
           setCurrentOrgOperate(true); // 禁止当前机构操作
           setMultiOperate(true); // 禁用批量操作
           setOrgTitle('全部机构搜索结果'); // 设置表头
           setCurrentSelectOrg('-1'); // 清空选中机构
-          console.log(res.data);
           setShowSearchStyle(true);
-          setTableData(res.data);
-          setTableLength(res.data.length);
+
+          // 返回用户表数据结构处理，扁平化
+          let temp = res.data.data;
+          // 设置过滤字段
+          let arr = temp.map(item => item.groupName);
+          arr = arr.filter((value, index) => arr.indexOf(value) === index);
+          setOrgFilters(arr.map(item => ({ text: item, value: item })));
+          setTableLength(temp.length);
+          let datalist = [];
+          const table = temp.map((item, index) => {
+            if (item.loginName == 'panda' || item.loginName == 'admin') {
+              datalist.push(item.userId);
+            }
+            item.key = index;
+            return item;
+          });
+          setKeepDataList(datalist);
+
+          setTableData(table);
         } else {
+          setTableLoading(false);
           notification.error({
-            message: '提示',
-            duration: 3,
+            message: '获取失败',
             description: res.msg,
           });
         }
       })
       .catch(err => {
+        setTableLoading(false);
         message.error(err);
       });
   };
@@ -1256,16 +985,12 @@ const UserManage = () => {
     setLoading(true);
     GetUserRelationListNew({ userId: e.userId })
       .then(res => {
-        console.log(111);
-
         if (res.code === 0) {
           const { roleList, stationList } = res.data;
-          console.log(roleList);
           setRolelist(roleList);
           setStationlist(stationList);
           setLoading(false);
         } else {
-          console.log(res);
           setLoading(false);
         }
       })
@@ -1280,14 +1005,12 @@ const UserManage = () => {
     setLoading(true);
     GetUserRelationListNew({ userId: 0 })
       .then(res => {
-        console.log(222);
         if (res.code === 0) {
           const { roleList, stationList } = res.data;
           setRolelist(roleList);
           setStationlist(stationList);
           setLoading(false);
         } else {
-          console.log(res.msg);
           setLoading(false);
         }
       })
@@ -1299,7 +1022,6 @@ const UserManage = () => {
   };
 
   const getCheckList = e => {
-    console.log(e);
     let aa = [];
     let bb = [];
     loadAllUserRole(e).then(res => {
@@ -1316,8 +1038,6 @@ const UserManage = () => {
             bb.push(item1);
           });
         }
-        console.log(aa);
-        console.log(bb);
         setMultiRoleList(aa);
         setMultiStationList(bb);
       }
@@ -1346,7 +1066,6 @@ const UserManage = () => {
     // .catch(err => {
     //   message.error(err);
     // });
-    console.log(currentUser);
     JumpToAnotherOUNew({
       userId: currentUser.userId,
       oldOUID: currentUser.groupId,
@@ -1488,12 +1207,10 @@ const UserManage = () => {
     keepDataList.length > 0 &&
       keepDataList.map(i => {
         let aa = userIDs.split(',').indexOf(i);
-        console.log(aa);
         if (aa !== -1) {
           data.push(aa);
         }
       });
-    console.log(data);
     if (data.length > 0) {
       notification.error({
         message: '操作失败',
@@ -1557,10 +1274,6 @@ const UserManage = () => {
   // 更改机构范围
   const submitExtent = (extent, areaName, flags) => {
     setTreeLoading(true);
-    console.log(extent);
-    console.log(areaName);
-    console.log(flags);
-    console.log(currentSelectOrg1);
     if (flags === 0) {
       setTreeLoading(false);
       notification.warn({
@@ -1599,15 +1312,12 @@ const UserManage = () => {
   };
   // 树的拖拽
   const handleDrop = infos => {
-    console.log(infos);
     const dropKey = infos.node.key;
     const dragKey = infos.dragNode.key;
     const dropPos = infos.node.pos.split('-');
     const dropPosition = infos.dropPosition - Number(dropPos[dropPos.length - 1]);
 
     const datas = JSON.parse(JSON.stringify(treeData));
-    console.log(dropKey, 'dropKey');
-    console.log(dragKey, 'dragKey');
     // 找到拖拽的元素
     let dragObj;
     let dropObj;
@@ -1624,7 +1334,6 @@ const UserManage = () => {
     });
     // 将节点插入到正确的位置
     if (!infos.dropToGap) {
-      console.log('33333333333');
       dropObj.children = dropObj.children || [];
       // 在哪里插入,示例添加到头部，可以是随意位置
       dropObj.children.unshift(dragObj);
@@ -1723,7 +1432,11 @@ const UserManage = () => {
   const paginationChange = (page, pageSizes) => {
     setCurrentPage(page);
     setPageSize(pageSizes);
-    onSelect([currentSelectOrg], '', pageSizes, page);
+    if (searchWord) {
+      submitSearchUser(pageSizes, page);
+    } else {
+      onSelect([currentSelectOrg], '', pageSizes, page);
+    }
   };
 
   return (
@@ -1845,7 +1558,7 @@ const UserManage = () => {
               <Search
                 style={{ width: 260, marginRight: '15px' }}
                 placeholder="搜索登录名/用户姓名/手机号"
-                onSearch={submitSearchUser}
+                onSearch={e => submitSearchUser()}
                 onChange={e => handleSearch(e)}
                 enterButton
                 value={searchWord}
@@ -1898,21 +1611,19 @@ const UserManage = () => {
               marginRight: '5px',
             }}
           >
-            {searchFlag === 0 && (
-              <Pagination
-                total={total}
-                showTotal={(totals, range) => `第${range[0]}-${range[1]} 条/共 ${totals} 条`}
-                defaultPageSize={pageSize}
-                defaultCurrent={1}
-                showSizeChanger
-                pageSizeOptions={[10, 20, 50, 100]}
-                current={currentPage}
-                onChange={paginationChange}
-                style={{ marginBottom: '10px' }}
-                size="small"
-                showQuickJumper
-              />
-            )}
+            <Pagination
+              total={total}
+              showTotal={(totals, range) => `第${range[0]}-${range[1]} 条/共 ${totals} 条`}
+              defaultPageSize={pageSize}
+              defaultCurrent={1}
+              showSizeChanger
+              pageSizeOptions={[10, 20, 50, 100]}
+              current={currentPage}
+              onChange={paginationChange}
+              style={{ marginBottom: '10px' }}
+              size="small"
+              showQuickJumper
+            />
           </div>
         </div>