perf: 用户管理表头固定和滚动条样式

src/pages/userCenter/UserManage.js

@@ -16,7 +16,6 @@ import {
   Dropdown,
   Menu,
 } from 'antd';
-// import Tree from '@/components/ExpendableTree';
 import {
   UserAddOutlined,
   UsergroupAddOutlined,
@@ -61,11 +60,11 @@ const UserManage = () => {
   const [treeLoading, setTreeLoading] = useState(false);
   const [tableLoading, setTableLoading] = useState(false);
   const [loading, setLoading] = useState(true);
+  const [currentOrgOperate, setCurrentOrgOperate] = useState(false); // 是否禁用当前机构操作
   const [multiOperate, setMultiOperate] = useState(true); // 是否禁用用户批量操作
   const [multiOperateButtonType, setMultiOperateButtonType] = useState(''); // 更改批量操作按钮样式
 
   const [treeData, setTreeData] = useState([]); // 用户机构树
-  // const [expandedKeys, setExpandedKeys] = useState(['']);
   const [treeDataCopy, setTreeDataCopy] = useState([]); // 机构树数据备份，用于更改机构
   const [treeState, setTreeState] = useState(true); // 树第一次加载
   const [treeVisible, setTreeVisible] = useState(true); // 树是否可见
@@ -88,7 +87,8 @@ const UserManage = () => {
   const [deleteUserVisible, setDeleteUserVisible] = useState(false); // 删除用户
 
   const [orgTitle, setOrgTitle] = useState('当前机构'); // 弹框标题
-  const [tableLength, setTableLength] = useState(0); // 表格标题
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 已选用户数,机构改变时重置
+  const [tableLength, setTableLength] = useState(0); // 当前机构用户总数
   const [orgID, setOrgID] = useState(); // 机构ID
   const [newOrgID, setNewOrgID] = useState(); // 更改机构新选择的ID
   const [currentUser, setCurrentUser] = useState({}); // 当前用户
@@ -142,7 +142,6 @@ const UserManage = () => {
       dataIndex: 'loginName',
       key: 'loginName',
       fixed: 'left',
-      // width: 100,
       render: item => (
         <div
           ref={r => {
@@ -157,7 +156,6 @@ const UserManage = () => {
       title: '用户姓名',
       dataIndex: 'userName',
       key: 'userName',
-      // width: 100,
       render: item => (
         <div
           ref={r => {
@@ -173,6 +171,7 @@ const UserManage = () => {
       dataIndex: 'OUName',
       key: 'OUName',
       width: 230,
+      ellipsis: true,
       filters: orgFilters,
       onFilter: (value, record) => record.OUName === value,
     },
@@ -182,6 +181,12 @@ const UserManage = () => {
       key: 'phone',
       width: 150,
       ellipsis: true,
+      render: record => {
+        if (record) {
+          return record;
+        }
+        return <span>-</span>;
+      },
     },
     {
       title: '钉钉账户',
@@ -267,7 +272,7 @@ const UserManage = () => {
               <Tooltip title="解冻用户">
                 <StopOutlined
                   onClick={() => freezeUser(record)}
-                  style={{ fontSize: '16px', color: '#1890FF' }}
+                  style={{ fontSize: '16px', color: '#535353' }}
                 />
               </Tooltip>
             </>
@@ -282,13 +287,15 @@ const UserManage = () => {
       ),
     },
   ];
-  const [selectionType] = useState('checkbox');
+
   const rowSelection = {
-    onChange: (selectedRowKeys, selectedRows) => {
-      setUserIDs(selectedRowKeys.toString()); // 数组转字符串，逗号连接
-      setOrgIDs(selectedRows.map(item => item.OUID).toString());
+    selectedRowKeys,
+    onChange: (RowKeys, Rows) => {
+      setSelectedRowKeys(RowKeys);
+      setUserIDs(RowKeys.toString()); // 数组转字符串，逗号连接
+      setOrgIDs(Rows.map(item => item.OUID).toString());
       // 选中行数大于0时设置批量操作可行
-      if (selectedRows.length > 0) {
+      if (RowKeys.length > 0) {
         setMultiOperate(false);
         setMultiOperateButtonType('primary');
       } else {
@@ -296,9 +303,6 @@ const UserManage = () => {
         setMultiOperateButtonType('default');
       }
     },
-    getCheckboxProps: record => ({
-      name: record.name,
-    }),
   };
 
   // 渲染机构树
@@ -307,7 +311,6 @@ const UserManage = () => {
     return {
       title: org.text,
       key: org.id,
-      // icon: org.leaf ? <FileOutlined /> : <FolderOpenOutlined />,
       // 判断它是否存在子集，若果存在就进行再次进行遍历操作，知道不存在子集便对其他的元素进行操作
       children: haveChildren ? org.children.map(i => mapTree(i)) : [],
     };
@@ -347,7 +350,6 @@ const UserManage = () => {
 
   // 点击树节点，获取当前机构下所有用户
   const onSelect = (props, e) => {
-    // console.log(props);
     setTableLoading(true);
     if (e) {
       setOrgTitle(e.node.title);
@@ -362,6 +364,8 @@ const UserManage = () => {
     if (props[0]) {
       getOneOUUserListNew(props[0] || currentSelectOrg)
         .then(res => {
+          setCurrentOrgOperate(false); // 重置禁用当前机构操作为false
+          setSelectedRowKeys([]); // 重置选中用户数
           if (res.code === 0) {
             setTableLoading(false);
             setSearchWord(''); // 搜索框置空
@@ -372,12 +376,9 @@ const UserManage = () => {
             let arr = temp.map(item => item.OUName);
             arr = arr.filter((value, index) => arr.indexOf(value) === index);
             setOrgFilters(arr.map(item => ({ text: item, value: item })));
-            console.log(temp);
             setTableLength(temp.length);
             const table = temp.map((item, index) => {
               item.key = index;
-              item.phoneCopy = item.phone;
-              item.phone = item.phone || '-';
               return item;
             });
             setTableData(table);
@@ -509,12 +510,11 @@ const UserManage = () => {
   };
   // 编辑用户
   const editUser = record => {
-    // console.log(record);
     setEditUserVisible(true);
     editUserForm.setFieldsValue({
       loginName: voca.stripTags(record.loginName),
       userName: voca.stripTags(record.userName),
-      phone: record.phoneCopy || '',
+      phone: record.phone || '',
       email: record.email || '',
     });
     setCurrentUser(record);
@@ -535,7 +535,8 @@ const UserManage = () => {
     getUserByKey(searchWord)
       .then(res => {
         if (res.success) {
-          setOrgTitle('搜索结果'); // 设置表头
+          setCurrentOrgOperate(true); // 禁止当前机构操作
+          setOrgTitle('全部机构搜索结果'); // 设置表头
           setCurrentSelectOrg([]); // 清空机构时选中机构
           setTableData(res.root);
           setTableLength(res.root.length);
@@ -854,7 +855,6 @@ const UserManage = () => {
           const temp = orgIDs.split(',');
           // 批量更改机构成功后设置老的orgIDs为全部是newOrgID的数组，并转字符串
           setOrgIDs(temp.map(() => newOrgID).toString());
-          // console.log(temp.map(() => newOrgID).toString());
           onSelect([newOrgID]);
           notification.success({
             message: '提交成功',
@@ -1166,19 +1166,24 @@ const UserManage = () => {
           })}
         >
           <div style={{ height: '50px' }}>
-            <p style={{ margin: '16px 0 10px 16px', display: 'inline-block' }}>
-              {orgTitle}（共{tableLength}人）
+            <p
+              className={styles.title}
+              title={`${orgTitle}（已选${
+                selectedRowKeys.length
+              }/共${tableLength}人）`}
+            >
+              {orgTitle}（已选{selectedRowKeys.length}/共{tableLength}人）
             </p>
             <span style={{ float: 'right', margin: '10px' }}>
               <Search
-                style={{ width: 300 }}
-                placeholder="请输入登录名称/用户名称/手机号"
+                style={{ width: 260 }}
+                placeholder="搜索登录名/用户姓名/手机号"
                 onSearch={submitSearchUser}
                 onChange={e => handleSearch(e)}
                 enterButton
                 value={searchWord}
               />
-              <Dropdown overlay={orgButtonMenu}>
+              <Dropdown overlay={orgButtonMenu} disabled={currentOrgOperate}>
                 <Button type="primary">
                   当前机构操作 <DownOutlined />
                 </Button>
@@ -1192,7 +1197,7 @@ const UserManage = () => {
           </div>
           <Table
             rowSelection={{
-              type: selectionType,
+              type: 'checkbox',
               ...rowSelection,
             }}
             size="small"
@@ -1202,7 +1207,8 @@ const UserManage = () => {
             columns={columns}
             dataSource={tableData}
             loading={tableLoading}
-            scroll={{ x: 'max-content' }}
+            scroll={{ x: 'max-content', y: 'calc(100vh - 210px)' }}
+            // scroll={{ x: 'max-content' }}
             pagination={{
               showTotal: (total, range) =>
                 `第${range[0]}-${range[1]} 条/共 ${total} 条`,

src/pages/userCenter/UserManage.less

 
 :global{
     ::-webkit-scrollbar {
-        height: 10px;//x轴滚动条粗细
+        height: 6px;//x轴滚动条粗细
         width:6px;//y轴滚动条粗细
         border-bottom: 2px solid white;
     }
@@ -146,11 +146,20 @@
             width: 100%;
             position: relative;
             transition: width 0.5s;
+            .title{
+                margin: 16px 0 10px 16px;
+                display: inline-block;
+                width: 270px;
+                cursor: pointer;
+                overflow: hidden;
+                text-overflow:ellipsis;
+                white-space: nowrap;
+            }
             .ant-table-pagination{
                 padding-right: 12px;
                 background: white;
                 margin: 1px 0;
-                padding:8px;
+                padding: 8px;
                 padding-right: 20px;
             }
             .ant-btn{
@@ -172,8 +181,8 @@
                 text-overflow:ellipsis;
                 white-space: nowrap;
             }
-            .ant-table-content{
-                height:calc(100vh - 168px);
+            .ant-table-body{
+                height:calc(100vh - 210px);
                 border-right: white;
                 overflow: auto !important;
             }