perf: style

src/pages/userCenter/UserManage.js

@@ -60,14 +60,17 @@ const UserManage = () => {
   const [loading, setLoading] = useState(true);
 
   const [treeData, setTreeData] = useState([]); // 用户机构树
+  const [treeDataCopy, setTreeDataCopy] = useState([]); // 机构树数据备份，用于更改机构
   const [treeState, setTreeState] = useState(true); // 树第一次加载
   const [treeVisible, setTreeVisible] = useState(true); // 树是否可见
   const [tableData, setTableData] = useState([]); // 用户表
   const [orgFilters, setOrgFilters] = useState([]); // 用户列筛选
   // const [selectedRowKeys, setSelectedRowKeys] = useState([]); // 用户表
   const [searchData, setSearchData] = useState([]); // 查找用户的结果表
+  const [searchWord, setSearchWord] = useState(''); // 关键字
+  const [userName, setUserName] = useState(''); // 查找用户的结果表
   const [currentSelectOrg, setCurrentSelectOrg] = useState([]); // 左侧机构数-选中组织
-  const [currentSelectOldOrg, setCurrentSelectOldOrg] = useState([]); // 更改机构时的树-选中组织
+  const [currentSelectOldOrg, setCurrentSelectOldOrg] = useState([]); // 更改机构时的树-原先选中组织
 
   /** ***Modal弹框,是否可视**** */
   const [userVisible, setUserVisible] = useState(false); // 添加用户
@@ -101,6 +104,13 @@ const UserManage = () => {
   const [editUserForm] = Form.useForm(); // 编辑用户
   const [passwordForm] = Form.useForm(); // 修改密码
   const { TabPane } = Tabs;
+  const { Search } = Input;
+
+  // 获取搜索框的值
+  const handleSearch = e => {
+    setSearchWord(e.target.value);
+    console.log(e.target.value);
+  };
 
   const getRoleValueCallback = useCallback((value, index) => {
     roleValueList[index] = value;
@@ -120,12 +130,30 @@ const UserManage = () => {
       key: 'loginName',
       fixed: 'left',
       width: 100,
+      render: item => (
+        <div
+          ref={r => {
+            if (r) {
+              r.innerHTML = item;
+            }
+          }}
+        />
+      ),
     },
     {
       title: '用户姓名',
       dataIndex: 'userName',
       key: 'userName',
       width: 100,
+      render: item => (
+        <div
+          ref={r => {
+            if (r) {
+              r.innerHTML = item;
+            }
+          }}
+        />
+      ),
     },
     {
       title: '所在机构',
@@ -133,7 +161,13 @@ const UserManage = () => {
       key: 'OUName',
       width: 150,
       filters: orgFilters,
-      onFilter: (value, record) => record.OUName === value,
+      onFilter: (value, record) =>
+        // let count = 0;
+        // if (record.OUName === value) {
+        //   count += 1;
+        // }
+        // setTableTitle(count);
+        record.OUName === value,
     },
     {
       title: '手机号码',
@@ -227,7 +261,7 @@ const UserManage = () => {
       );
     },
     getCheckboxProps: record => ({
-      disabled: record.name === 'Disabled User', // Column configuration not to be checked
+      // defaultChecked: selectedRowKeys.includes(`${record.id}`),
       name: record.name,
     }),
   };
@@ -292,8 +326,8 @@ const UserManage = () => {
       .then(res => {
         if (res.length > 0) {
           setTreeLoading(false);
-          // setTreeData1(res);
           setTreeData(res);
+          setTreeDataCopy(res);
           // 第一次加载，默认选择第一个组织
           if (treeState) {
             onSelect([res[0].id], false);
@@ -318,7 +352,7 @@ const UserManage = () => {
     updateTrees();
   }, []);
 
-  // 获取当前机构下所有用户
+  // 点击树节点，获取当前机构下所有用户
   const onSelect = (props, e) => {
     console.log(e);
     setTableLoading(true);
@@ -335,6 +369,7 @@ const UserManage = () => {
       .then(res => {
         if (res.code === 0) {
           setTableLoading(false);
+          setSearchWord(''); // 搜索框置空
           setOrgTitle(res.data.GroupName);
           // 返回用户表数据结构处理，扁平化
           const temp = flatten(getUsers(res.data));
@@ -365,6 +400,7 @@ const UserManage = () => {
         message.error(err);
       });
   };
+
   // 返回用户表数据结构处理，扁平化
   const getUsers = orgObj => {
     let result = orgObj.Users;
@@ -435,6 +471,7 @@ const UserManage = () => {
     // setTreeData2(treeData1);
     setCurrentUser(record);
     setCurrentSelectOldOrg(record.OUID);
+    // onSelect1([record.OUID]);
   };
   // 修改密码
   const changePassword = record => {
@@ -469,11 +506,13 @@ const UserManage = () => {
 
   // 查找用户
   const submitSearchUser = () => {
-    getUserByKey(searchUserForm.getFieldValue('key'))
+    getUserByKey(searchWord)
       .then(res => {
         if (res.success) {
           // setSearchUserVisible(false);
-          setSearchData(res.root);
+          // setSearchData(res.root);
+          setTableData(res.root);
+          setTableTitle(res.root.length);
         } else {
           notification.error({
             message: '提交失败',
@@ -779,6 +818,7 @@ const UserManage = () => {
   return (
     <PageContainer className={styles.userManageContainer}>
       <div className={styles.contentContainer}>
+        {/* 左侧机构树 */}
         <Spin spinning={treeLoading} tip="loading...">
           <div className={treeVisible ? styles.orgContainer : styles.hide}>
             <span style={{ margin: '10px' }}>机构列表</span>
@@ -816,6 +856,8 @@ const UserManage = () => {
             </Tooltip>
           )}
         </div>
+
+        {/* 右侧用户表 */}
         <div className={styles.userContainer}>
           <div style={{ height: '50px' }}>
             <p style={{ margin: '16px 0 10px 16px', display: 'inline-block' }}>
@@ -823,9 +865,19 @@ const UserManage = () => {
               <span className={styles.redText}>{tableTitle}</span>）
             </p>
             <span style={{ float: 'right', margin: '10px' }}>
-              <Button type="primary" onClick={searchUser}>
+              {/* <Button type="primary" onClick={searchUser}>
                 查找用户
-              </Button>
+              </Button> */}
+
+              <Search
+                style={{ width: 300 }}
+                placeholder="请输入登录名称/用户名称/手机号"
+                onSearch={submitSearchUser}
+                onChange={e => handleSearch(e)}
+                enterButton
+                value={searchWord}
+              />
+
               <Button type="primary" onClick={addUser}>
                 添加用户
               </Button>
@@ -845,14 +897,19 @@ const UserManage = () => {
               type: selectionType,
               ...rowSelection,
             }}
+            rowKey={record => record.userID}
             locale={{ filterConfirm: '确定', filterReset: '重置' }}
             bordered
             columns={columns}
             dataSource={tableData}
             loading={tableLoading}
             scroll={{ x: 'max-content' }}
+            pagination={{ showTotal: () => `共${tableTitle}条`, pageSize: 10 }}
           />
         </div>
+
+        {/* Modal弹框 */}
+
         {/* 查找用户 */}
         <Modal
           title="查找用户"
@@ -874,19 +931,18 @@ const UserManage = () => {
               label="关键字搜索"
               rules={[{ required: true, message: '不能为空' }]}
             >
-              <Input
-                placeholder="请输入登录名称/用户名称/手机号 ，回车键查找"
-                onPressEnter={submitSearchUser}
-              />
+              <Input placeholder="" onPressEnter={submitSearchUser} />
             </Form.Item>
           </Form>
           <Table
             bordered
+            rowKey={record => record.userID}
             columns={searchColumns}
             dataSource={searchData}
             onRow={record => ({
               onClick: () => {
                 onSelect([record.OUID]);
+                // setSelectedRowKeys([record.userID]);
                 setSearchUserVisible(false);
               },
             })}
@@ -1035,16 +1091,19 @@ const UserManage = () => {
           width="330px"
         >
           <span>请选择要更改的目标机构：</span>
-          {changeOrgVisible && treeData.length > 0 && (
+          {changeOrgVisible && treeDataCopy.length > 0 && (
             <Tree
               showIcon="true"
               showLine={{ showLeafIcon: false }}
               defaultExpandAll="true"
-              defaultSelectedKeys={[currentSelectOldOrg]}
-              onSelect={props => {
-                setNewOrgID(props[0]);
+              // 未切换时原先的节点，注意要转字符串
+              selectedKeys={[`${currentSelectOldOrg}`]}
+              onSelect={value => {
+                setNewOrgID(value[0]);
+                // 切换后选中的节点
+                setCurrentSelectOldOrg(value[0]);
               }}
-              treeData={treeData.map(t => mapTree(t))}
+              treeData={treeDataCopy.map(t => mapTree(t))}
             />
           )}
         </Modal>

src/pages/userCenter/UserManage.less

@@ -26,10 +26,10 @@
         }
     }
     .contentContainer{
-        min-height: calc(100vh - 48px);
+        min-height: calc(100vh - 78px);
         display: flex;
         .orgContainer{
-            min-height: calc(100vh - 48px);
+            min-height: calc(100vh - 78px);
             float: left;
             padding: 10px;
             min-width: 240px;
@@ -50,15 +50,19 @@
         .userContainer{
             margin-left: 10px;
             flex: 1;
-            height: calc(100vh - 48px);
+            height: calc(100vh - 78px);
+            min-width: 880px;
             background: white;
             .ant-table-pagination-right{
                 padding-right: 12px;
             }
             .ant-btn-primary{
-                margin-left: 30px;
+                margin-left: 20px;
                 background: #50aefc;
             }
+            .ant-input-search-button{
+                margin-left: 0px !important;
+            }
             .ant-table-thead tr th{
                 font-weight: 600;
                 color:rgba(0,0,0,0.85);