树结构对应的员工列表

src/pages/Staff/Employee/index.jsx

@@ -3,29 +3,9 @@ import consts from '@/consts'
 import ProTable from '@ant-design/pro-table'
 import RoleMenu from '@/pages/Staff/RoleMenu'
 import { queryStaff } from '@/services/staff'
+import { useTableScroll } from '@/hooks/useAutoTable'
 
 const Employee = () => {
-  const [state, setState] = useState({
-    id: '',
-    params: {},
-    visible: false
-  })
-  // const [state, setState] = useState({
-  //   data: [],
-  //   total: 0,
-  //   id: ''
-  // })
-  // const initData = async payload => {
-  //   const { code = -1, data: { list = [], total = 0 } = { list: [], total: 0 } } = await queryStaff(
-  //     payload
-  //   )
-  //   if (code === consts.RET_CODE.SUCCESS) {
-  //     setState({ ...state, data: list, total })
-  //   }
-  // }
-  // useEffect(() => {
-  //   initData()
-  // }, [])
   const columns = [
     {
       title: '工号',
@@ -91,29 +71,39 @@ const Employee = () => {
       width: 50
     }
   ]
+  const [selectKeys, setSelectKeys] = useState([])
+  const [state, setState] = useState({
+    id: ''
+  })
+  const { getScrollRef } = useTableScroll(columns, selectKeys)
+  const onSelect = id => {
+    setState({ ...state, id })
+  }
   return (
     <div className="h-full w-full flex flex-row">
-      <RoleMenu />
+      <RoleMenu onSelect={onSelect} />
       <div className="w-max-3/4">
         <div className="ml-8 shadow-hex-3e2c5a">
-          <ProTable
-            bordered
-            rowKey={record => record.id}
-            columns={columns}
-            params={state.params}
-            request={async params => {
-              const {
-                code = -1,
-                data: { list = [], total = 0 } = { list: [], total: 0 }
-              } = await queryStaff({ ...params })
-              return {
-                data: list,
-                success: code === consts.RET_CODE.SUCCESS,
-                total
-              }
-            }}
-            search={{ filterType: 'light' }}
-          />
+          {state.id && (
+            <ProTable
+              bordered
+              rowKey={record => record.staffId}
+              columns={columns}
+              request={async params => {
+                const {
+                  code = -1,
+                  data: { list = [], total = 0 } = { list: [], total: 0 }
+                } = await queryStaff({ ...params })
+                return {
+                  data: list,
+                  success: code === consts.RET_CODE.SUCCESS,
+                  total
+                }
+              }}
+              scroll={getScrollRef}
+              search={{ filterType: 'light' }}
+            />
+          )}
         </div>
       </div>
     </div>

src/pages/Staff/RoleMenu/index.jsx

@@ -69,13 +69,22 @@ const RoleMenu = props => {
         </ModalForm>
       </div>
       <div className="p-4 bg-white" style={{ height: 'calc(100% - 1rem*2 - 20px)' }}>
-        <DirectoryTree
+        {departments.length && (
+          <DirectoryTree
+            multiple
+            defaultExpandAll
+            onSelect={onSelect}
+            onExpand={onExpand}
+            treeData={departments}
+          />
+        )}
+        {/* <DirectoryTree
           multiple
           defaultExpandAll
           onSelect={onSelect}
           onExpand={onExpand}
           treeData={departments}
-        />
+        /> */}
         {/* <ul className="p-0 m-0 list-none text-primary flex flex-col flex-1">
           {departments.map(item => (
             <li

src/services/staff.js

@@ -7,7 +7,7 @@ import request from '@/basic/utils/request'
  */
 export async function queryStaff(payload) {
   const data = await request.get('/staff/list', {
-    data: payload
+    params: { ...payload }
   })
   return data
 }