fix(project): 修复主页主机没有分页的问题

Closes: #8
lixin59 · Aug 5, 2023 · 4046f7a · 4046f7a
1 parent bfdfb6e
commit 4046f7a
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 8 deletions.
diff --git a/src/components/HostInfoCard/HostInfoTable.tsx b/src/components/HostInfoCard/HostInfoTable.tsx
@@ -1,4 +1,4 @@
-import React, { Dispatch, SetStateAction, useEffect } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import OmsTable from '../OmsTable/index';
 import Card from '@material-ui/core/Card';
 import { GroupInfo, HostInfo, IState, PrivateKeyInfo, TagInfo } from '../../store/interface';
@@ -163,13 +163,15 @@ type tOP = {};
 type tSP = tOP & {
  hostList: HostInfo[];
  groupList: GroupInfo[];
+ hostTotal: number;
  tagList: TagInfo[];
  privateKeyList: PrivateKeyInfo[];
 };
 
 const mapStateToProps = (state: IState, props: tOP): tSP => ({
  ...props,
  hostList: state.hostList,
+ hostTotal: state.hostTotal,
  groupList: state.groupList,
  tagList: state.tagList,
  privateKeyList: state.privateKeyList
@@ -190,14 +192,24 @@ type tProps = tSP &
  };
 
 function HostInfoTable(props: tProps) {
- const { hostList, upHostList, tipDispatch, formDispatch, setHostId, setHostInfo, setTlc, tagList } = props;
+ const { hostList, hostTotal, upHostList, tipDispatch, formDispatch, setHostId, setHostInfo, setTlc, tagList } = props;
  const navigate = useNavigate();
  const { enqueueSnackbar } = useSnackbar();
 
+ const [pageSize, setPageSize] = useState(25);
+
  useEffect(() => {
- upHostList();
+ upHostList({ pageSize, pageNo: 1 });
  }, []);
 
+ const onPageSizeChange = (pageSize: number) => {
+ setPageSize(pageSize);
+ upHostList({ pageSize, pageNo: 1 });
+ };
+
+ const onPageChange = (pageNo: number) => {
+ upHostList({ pageSize, pageNo: pageNo + 1 }); // 组件库是以0开始的所以要加一
+ };
  const getHostList = (hostList: HostInfo[]) => {
  return hostList?.map((h) => {
  return {
@@ -232,7 +244,17 @@ function HostInfoTable(props: tProps) {
 
  return (
  <Card style={{ width: '98%', height: '80vh', margin: '0 auto', marginTop: '20px' }}>
- <OmsTable columns={columns} rows={getHostList(hostList)} />
+ <OmsTable
+ columns={columns}
+ rows={getHostList(hostList)}
+ rowCount={hostTotal}
+ pagination
+ pageSize={pageSize}
+ rowsPerPageOptions={[25, 50, 100]}
+ paginationMode={'server'}
+ onPageSizeChange={onPageSizeChange}
+ onPageChange={onPageChange}
+ />
  </Card>
  );
 }

diff --git a/src/components/OmsTable/index.tsx b/src/components/OmsTable/index.tsx
@@ -8,6 +8,7 @@ type tProps = DataGridProps & React.RefAttributes<HTMLDivElement>;
 
 export default function OmsTable(props: tProps) {
  const { columns, rows } = props;
+
  return (
  <Box sx={{ height: '100%', width: '100%' }}>
  {rows.length < 1 ? (
@@ -16,6 +17,7 @@ export default function OmsTable(props: tProps) {
  </div>
  ) : (
  <DataGrid
+ {...props}
  rows={rows}
  columns={columns}
  components={{

diff --git a/src/sagas/hostInfoSaga.ts b/src/sagas/hostInfoSaga.ts
@@ -11,10 +11,11 @@ export default function* hostInfoSaga() {
  init: take(actionType.WILL_INIT_HOST)
  });
  if (getList) {
- const res = yield call(getHostsApi);
+ const res = yield call(getHostsApi, getList?.value?.pageSize || 1000, getList?.value?.pageNo || 1);
  if (res.code !== '200') {
  return;
  }
+ yield put({ type: hostActions.UPDATE_HOST_TOTAL, value: res?.data?.total });
  yield put({ type: hostActions.INIT, value: res?.data?.data });
  }
  if (init) {

diff --git a/src/store/action-types.ts b/src/store/action-types.ts
@@ -37,7 +37,8 @@ export enum hostActions {
  INIT = 'INIT_HOST_INFO',
  DELETE_HOST_INFO = 'DELETE_HOST_INFO',
  ADD_HOST_INFO = 'ADD_HOST_INFO',
- EDIT_HOST_INFO = 'EDIT_HOST_INFO'
+ EDIT_HOST_INFO = 'EDIT_HOST_INFO',
+ UPDATE_HOST_TOTAL = 'UPDATE_HOST_TOTAL'
 }
 
 export enum groupActions {

diff --git a/src/store/action.ts b/src/store/action.ts
@@ -3,8 +3,8 @@ import { GroupInfo, HostInfo, JobInfo, PrivateKeyInfo, TagInfo, TunnelInfo } fro
 import { WILL_INIT_APP_VERSION, WILL_INIT_QUICK_COMMAND } from './action-types';
 
 const actions = {
- getHostList() {
- return { type: actionType.WILL_GET_HOST_LIST };
+ getHostList(value?: { pageSize: number; pageNo: number }) {
+ return { type: actionType.WILL_GET_HOST_LIST, value };
  },
  initHostInfo(value: HostInfo[]) {
  return { type: actionType.WILL_INIT_HOST, value };

diff --git a/src/store/interface.ts b/src/store/interface.ts
@@ -8,6 +8,7 @@ export interface HostAction {
 export interface IState {
  appVersion: string;
  hostList: HostInfo[];
+ hostTotal: number;
  groupList: GroupInfo[];
  tagList: TagInfo[];
  tunnelList: TunnelInfo[];

diff --git a/src/store/reducer.ts b/src/store/reducer.ts
@@ -157,6 +157,7 @@ import {
 const initialState: IState = {
  appVersion: 'v0.0',
  hostList: [],
+ hostTotal: 0,
  groupList: [],
  tagList: [],
  tunnelList: [],
@@ -179,6 +180,12 @@ const reducer = (state = initialState, action: HostAction) => {
  hostList: action.value
  };
  }
+ case hostActions.UPDATE_HOST_TOTAL: {
+ return {
+ ...state,
+ hostTotal: action.value
+ };
+ }
  case groupActions.INIT: {
  return {
  ...state,