ant design的table组件实现全选功能以及自定义分页(3)

import React, { PureComponent, Fragment } from 'react'; import { connect } from 'dva'; import { formatMessage } from 'umi-plugin-react/locale'; import { Card, Form, Icon, Tooltip } from 'antd'; import RefreshTable from '@/components/RefreshTable'; import PageHeaderWrapper from '@/components/PageHeaderWrapper'; import SearchSelect from '@/components/SearchSelect'; import { getAuthority } from '@/utils/authority'; import moment from 'moment'; @connect(({ stateless, allspace, loading }) => ({ stateless, allspace, loading: loading.models.stateless, stretchLoading: loading.effects['stateless/stretch'], })) @Form.create() class Stateless extends PureComponent { state = { pageSize: 10, pageNo: 1, filterParam: '', sortBy: '', sortFlag: 'desc', namespace: '', }; columns = [ { title: '名称', dataIndex: 'name', disabled: true, sorter: true, }, { title: '命名空间', dataIndex: 'namespace', width: 105, textWrap: 'ellipsis', }, { title: '更新次数', dataIndex: 'observedGeneration', sorter: true, width: 100, }, { title: '副本数', dataIndex: 'replicas', sorter: true, width: 90, }, { title: '更新副本数', dataIndex: 'updatedReplicas', sorter: true, width: 115, render: text => <span>{text ? text : 0}</span>, }, { title: '就绪副本', dataIndex: 'readyReplicas', sorter: true, width: 100, render: text => <span>{text ? text : 0}</span>, }, { title: '可用副本', dataIndex: 'availableReplicas', sorter: true, width: 100, render: text => <span>{text ? text : 0}</span>, }, { title: '创建时间', dataIndex: 'createTime', sorter: true, width: window.screen.width <= 1366 ? 95 : 155, render: val => <span>{moment(val).format('YYYY-MM-DD HH:mm:ss')}</span>, }, { title: '操作', dataIndex: 'operate', disabled: true, width: 150, }, ]; componentDidMount() { this.getStatelessList(); } getStatelessList = value => { const { dispatch } = this.props; let params = {}; if (!value) { const { pageSize, pageNo, filterParam, sortBy, sortFlag, namespace } = this.state; params = { pageSize, pageNo, keyword: filterParam.trim(), sortBy, sortFlag, namespace, }; } else { params = value; } dispatch({ type: 'stateless/fetch', payload: params, }); }; handleStandardTableChange = (pagination, filtersArg, sorter) => { const { filterParam, namespace } = this.state; const params = { pageNo: pagination.current, pageSize: pagination.pageSize, keyword: filterParam.trim(), namespace, }; this.setState({ pageNo: pagination.current, pageSize: pagination.pageSize, }); if (sorter.field) { params.sortBy = sorter.field; params.sortFlag = sorter.order.slice(0, -3); this.setState({ sortBy: sorter.field, sortFlag: sorter.order.slice(0, -3), }); } else { this.setState({ sortBy: '', sortFlag: '', }); } this.getStatelessList(params); }; handleRefresh = () => { const params = { keyword: '', pageSize: 10, pageNo: 1, namespace: '', }; this.setState({ filterParam: '', pageNo: 1, pageSize: 10, namespace: '', sortBy: '', sortFlag: '', }); this.getStatelessList(params); }; handleSearch = value => { const { pageSize, sortBy, sortFlag, namespace } = this.state; const params = { keyword: value.trim(), pageSize, pageNo: 1, sortBy, sortFlag, namespace, }; this.setState({ filterParam: value, pageNo: 1, }); this.getStatelessList(params); }; changeSearch = e => { this.setState({ filterParam: e.target.value, }); }; handleSpaceChange = value => { const { filterParam, sortBy, sortFlag, pageSize } = this.state; const params = { keyword: filterParam.trim(), pageSize, pageNo: 1, namespace: value === '' ? '' : value, sortBy, sortFlag, }; this.setState({ pageNo: 1, namespace: value === '' ? '' : value, }); this.getStatelessList(params); }; render() { const { stateless: { data }, loading, route, allspace, stretchLoading, } = this.props; const { filterParam, pageSize, pageNo, namespace, current = {} } = this.state; const tableParam = { pageNo, pageSize, filterParam, loading, }; const keyArr = []; if (data && data.data && data.data.resultList) { data.data.resultList .filter(item => item.message) .forEach(item => { keyArr.push(`${item.name}/${item.namespace}`); }); } return ( <PageHeaderWrapper content={`${formatMessage({ id: `statelessCaption` })}`}> <Card bordered={false}> <RefreshTable tableParam={tableParam} data={data && data.data ? data.data : {}} rowKey={record => `${record.name}/${record.namespace}`} pathName={route.name} columns={this.columns} changeSearch={this.changeSearch} onChange={this.handleStandardTableChange} handleSearch={this.handleSearch} handleRefresh={this.handleRefresh} expandIcon={record => CustomExpandIcon(record)} expandedRowKeys={keyArr} expandedRowRender={record => ( <Fragment> {record.message ? <span style={{ color: 'red' }}>{record.message}</span> : null} </Fragment> )} > <SearchSelect handleSpaceChange={ 'admin'.indexOf(getAuthority()) !== -1 ? this.handleSpaceChange : false } namespace={namespace} spaceData={allspace.namespace ? allspace.namespace.data.resultList : []} /> </RefreshTable> </Card> </PageHeaderWrapper> ); } } export default Stateless;