ttk-app-core/src/apps/app-demo/org-manage/admin-organization-page-departmentManager/components/Pagination.js

@ttk/recat enterprise develop framework

import React, { useCallback } from 'react'
import { Pagination } from '@ttk/component'
import { useData, useActions, useCommit } from '@ttk/app-loader'

export default function (props) {
  const actions = useActions(props)
  const commit = useCommit()
  const { pageIndex: currentPage, pageSize, recordCount: totalCount } = useData([props, 'pagination']).toJS()

  const onShowSizeChange = useCallback((current, pageSize) => {
    return async function () {
      // 使用commit直接更新reducer中的数据状态
      commit([props, 'tempState'], true)
      await actions.updateSearchForm({ pageSize })
      await actions.tableData()
      commit([props, 'tempState'], false)
    }()
  })

  const onChange = useCallback((page, pageSize) => {
    return async function () {
      // 使用commit直接更新reducer中的数据状态
      commit([props, 'tempState'], true)
      await actions.updateSearchForm({ currentPage: page })
      await actions.tableData()
      commit([props, 'tempState'], false)
    }()
  })

  return <div className="ttk-table-app-simplelist-footer">
    <Pagination
      pageSize={pageSize}
      total={totalCount}
      current={currentPage}
			showSizeChanger={true}
      pageSizeOptions={['20', '50', '100', '200', '300', '400']}
      onChange={onChange}
      onShowSizeChange={onShowSizeChange}
    />
  </div>
}