perf: 树样式

src/pages/userCenter/UserManage.js

@@ -11,30 +11,22 @@ import {
   Tooltip,
   Row,
   Col,
-  Divider,
   Tabs,
-  Checkbox,
   Button,
   Spin,
 } from 'antd';
 import {
   UsergroupAddOutlined,
-  FolderAddTwoTone,
   EditTwoTone,
   DeleteTwoTone,
   ShareAltOutlined,
   UnlockOutlined,
   ApartmentOutlined,
-  SearchOutlined,
   StopOutlined,
-  FolderOpenOutlined,
-  FileOutlined,
   DoubleLeftOutlined,
   DoubleRightOutlined,
 } from '@ant-design/icons';
 import PageContainer from '@/components/BasePageContainer';
-// import classnames from 'classnames';
-// import { get } from '../../services';
 import voca from 'voca';
 import zhCN from 'antd/es/locale/zh_CN';
 import {
@@ -53,7 +45,6 @@ import {
   updateUserPassword,
   setUserRelation,
 } from '@/services/userCenter/userManage/api';
-import { string } from 'prop-types';
 import ListCardItem from '../orgnazation/listCardItem';
 import styles from './UserManage.less';
 
@@ -66,10 +57,9 @@ const UserManage = () => {
   const [expandedKeys, setExpandedKeys] = useState(['']);
   const [treeDataCopy, setTreeDataCopy] = useState([]); // 机构树数据备份，用于更改机构
   const [treeState, setTreeState] = useState(true); // 树第一次加载
+  // const [treeDispaly, setTreeDispaly] = useState(''); // 1
   const [treeVisible, setTreeVisible] = useState(true); // 树是否可见
   const [tableData, setTableData] = useState([]); // 用户表
-  const [pageSize, setPageSize] = useState(10); // 用户表-分页大小
-  const [pageNum, setPageNum] = useState(1); // 用户表-当前页码
   const [orgFilters, setOrgFilters] = useState([]); // 用户列筛选
   const [searchWord, setSearchWord] = useState(''); // 关键字
   const [currentSelectOrg, setCurrentSelectOrg] = useState([]); // 左侧机构数-选中组织
@@ -88,7 +78,7 @@ const UserManage = () => {
   const [deleteUserVisible, setDeleteUserVisible] = useState(false); // 删除用户
 
   const [orgTitle, setOrgTitle] = useState('机构'); // 弹框标题
-  const [tableTitle, setTableTitle] = useState(0); // 表格标题
+  const [tableLength, setTableLength] = useState(0); // 表格标题
   const [orgID, setOrgID] = useState(); // 机构ID
   const [newOrgID, setNewOrgID] = useState(); // 更改机构新选择的ID
   const [currentUser, setCurrentUser] = useState({}); // 当前用户
@@ -110,7 +100,6 @@ const UserManage = () => {
   // 获取搜索框的值
   const handleSearch = e => {
     setSearchWord(e.target.value);
-    console.log(e.target.value);
   };
 
   const getRoleValueCallback = useCallback((value, index) => {
@@ -330,7 +319,7 @@ const UserManage = () => {
           arr = arr.filter((value, index) => arr.indexOf(value) === index);
           setOrgFilters(arr.map(item => ({ text: item, value: item })));
           console.log(temp);
-          setTableTitle(temp.length);
+          setTableLength(temp.length);
           const table = temp.map((item, index) => {
             item.key = index;
             item.phone = item.phone || '-';
@@ -456,7 +445,7 @@ const UserManage = () => {
       .then(res => {
         if (res.success) {
           setTableData(res.root);
-          setTableTitle(res.root.length);
+          setTableLength(res.root.length);
         } else {
           notification.error({
             message: '提交失败',
@@ -772,20 +761,25 @@ const UserManage = () => {
         {/* 左侧机构树 */}
         <Spin spinning={treeLoading} tip="loading...">
           <div className={treeVisible ? styles.orgContainer : styles.hide}>
+            {/* <div className={styles.orgContainer} style={{ display: treeDispaly }}> */}
             <span style={{ margin: '10px' }}>机构列表</span>
             <Tooltip title="添加机构">
               <UsergroupAddOutlined
                 onClick={() => addOrg('根目录', '-1')}
-                style={{ float: 'right', color: '#1890FF', fontSize: '18px' }}
+                style={{
+                  float: 'right',
+                  color: '#1890FF',
+                  fontSize: '18px',
+                }}
               />
             </Tooltip>
             {treeData.length > 0 && (
               <Tree
-                // showLine="true"
                 showIcon="true"
                 showLine={{ showLeafIcon: false }}
-                defaultExpandAll="true"
-                // expandedKeys={[currentSelectOrg]}
+                // blockNode="true"
+                autoExpandParent="true"
+                expandedKeys={[currentSelectOrg]}
                 selectedKeys={[currentSelectOrg]}
                 onSelect={onSelect}
                 treeData={treeData.map(t => mapTree(t))}
@@ -797,14 +791,21 @@ const UserManage = () => {
           {treeVisible && (
             <Tooltip title="隐藏机构列表">
               <DoubleLeftOutlined
-                onClick={() => setTreeVisible(false)}
-                // style={{ background: 'white' }}
+                onClick={() => {
+                  setTreeVisible(false);
+                  // setTreeDispaly('none');
+                }}
               />
             </Tooltip>
           )}
           {!treeVisible && (
             <Tooltip title="显示机构列表">
-              <DoubleRightOutlined onClick={() => setTreeVisible(true)} />
+              <DoubleRightOutlined
+                onClick={() => {
+                  setTreeVisible(true);
+                  // setTreeDispaly('block');
+                }}
+              />
             </Tooltip>
           )}
         </div>
@@ -814,7 +815,7 @@ const UserManage = () => {
           <div style={{ height: '50px' }}>
             <p style={{ margin: '16px 0 10px 16px', display: 'inline-block' }}>
               用户数量（
-              <span className={styles.redText}>{tableTitle}</span>）
+              <span className={styles.redText}>{tableLength}</span>）
             </p>
             <span style={{ float: 'right', margin: '10px' }}>
               <Search
@@ -853,17 +854,10 @@ const UserManage = () => {
             loading={tableLoading}
             scroll={{ x: 'max-content' }}
             pagination={{
-              showTotal: () => `共${tableTitle}条`,
+              showTotal: () => `共${tableLength}条`,
               pageSizeOptions: [10, 20, 50, 100],
-              // pageSize: { pageSize },
-              // current: { pageNum },
               showQuickJumper: true,
               showSizeChanger: true,
-              // onShowSizeChange: (current, pagesize) => {
-              //   setPageSize(pagesize);
-              //   setPageNum(current);
-              // },
-              // onChange: current => setPageNum(current),
             }}
           />
         </div>

src/pages/userCenter/UserManage.less

 
-@media screen and (min-width:1300px){
-    .hide{
-        display:none; 
-    }
-}
+// @media screen and (max-width:1400px){
+//     .orgContainer{
+//         display:none; 
+//     }
+// }
 .redText{
     color: red;
     cursor: pointer;
@@ -44,17 +44,40 @@
             padding: 10px;
             min-width: 240px;
             background: white;
+            overflow: auto;
             .ant-tree{
                 padding-top: 6px;
                 .ant-tree-switcher{
                     line-height: 1;
                     color:#1890FF;
-                }
+                    .ant-tree-switcher-line-icon{
+                        margin-left: 5px;
+                    }
+                }                
+            }
+            &::-webkit-scrollbar {
+                height: 10px;//x轴滚动条粗细
+                width:6px;//y轴滚动条粗细
+                border-bottom: 2px solid white;
+            }
+            
+            //滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条）
+            &::-webkit-scrollbar-thumb {
+                border-radius: 10px;
+                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);       
+                background: rgba(74, 74, 75, 0.1);
+                margin-bottom: 10px;
+            }
+            //滚动条的轨道（里面装有thumb）滚动槽
+            &::-webkit-scrollbar-track {
+                box-shadow: 0;
+                border-radius: 0;
+                background: white;//滚动槽背景色
+                border-radius: 10px;//滚动条边框半径设置
             }
         }
         .hide{
             display: none;
-            transition: 1s;
         }
         .userContainer{
             height: calc(100vh - 168px) !important;
@@ -81,6 +104,7 @@
             .ant-table-thead tr th{
                 font-weight: 600;
                 color:rgba(0,0,0,0.85);
+                // background-color: #c9e1f5;
             }
             .ant-table-cell{
                 text-align:center;
@@ -95,14 +119,14 @@
                 //滚动条整体部分
                 &::-webkit-scrollbar {
                     height: 10px;//x轴滚动条粗细
-                    width:10px;//y轴滚动条粗细
+                    width:6px;//y轴滚动条粗细
                     border-bottom: 2px solid white;
                 }
                 
                 //滚动条里面的小方块，能上下左右移动（取决于是垂直滚动条还是水平滚动条）
                 &::-webkit-scrollbar-thumb {
                     border-radius: 10px;
-                    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);       
+                    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);       
                     background: rgba(74, 74, 75, 0.1);
                     margin-bottom: 10px;
                 }

src/pages/userCenter/roleManage/RoleManage.less

@@ -35,5 +35,8 @@
     display: flex;
     align-items: center;
     color:#1890FF;
+    .ant-tree-switcher-line-icon{
+      margin-left: 5px;
+  }
   }
 }
\ No newline at end of file