组件1：排号

import React, { Component, Fragment } from 'react';
import { injectIntl, formatMessage } from 'react-intl';
import { connect } from 'dva';
import { Table, Tabs, Row, Col, Button, message, Modal, Select,LocaleProvider } from 'antd';
import { CloseCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import styles from './waiting.less';
import zh_CN from 'antd/lib/locale-provider/zh_CN';
import { downLoadFile } from '../../../utils/utils';
import {
  GetSerialNumberList,
  ExportSerialNumberList,
  SerialNumberUpdate,
} from '../../../services/waiting';
import { debounce } from 'lodash';

const { TabPane } = Tabs;

// @Form.create()
//修饰器只能放在类的前面
@connect(({ waitingAdmin }) => {
  return {
    waitingAdmin,
  };
})
class WaitingAdmin extends Component {
  constructor(props) {
    super(props);
    const { intl } = props;
    this.state = {
      spinning: false,
      currentPage: 1,
      pageSize: 20,
      total: 0,
      pageSizeOptions: ['10', '20', '50', '100'],
      selectedRowKeys: [],
      listData: [],
      statusCode: 1001,
    };
  }

  getSerialNumberList = (page = 1, pageSize = 20, statusCode = 1001) => {
    GetSerialNumberList({
      OrderBy: '',
      Page: page,
      ItemsPerPage: pageSize,
      SerialNumberStatus: statusCode,
    }).then(res => {
      if (res && res.Details) {
        this.setState({ listData: res.Details || [] });
        this.setState({
          total: res.TotalCount,
        });
      }
    });
  };

  componentDidMount() {
    this.getSerialNumberList();
  }

  callback(key) {
    if (key == '2') {
      // 跳转
      location.href = '/pes/repairs';
    }
  }

  handleTableChange(page, pageSize) {
    const { statusCode } = this.state;
    this.getSerialNumberList(page, pageSize, statusCode);
    this.setState({
      currentPage: page,
      pageSize: pageSize,
    });
  }

  exportSerialNumberList = debounce(() => {
    ExportSerialNumberList({}).then(res => {
      if (res) {
        downLoadFile(res.FileContent, res.FileName);
      }
    });
  }, 300);

  /**
   * 
   * @param {*} item 
   * @param {*} status  Pending = 1001,     // 待处理
        Passed = 1002,      // 已过号
        Completed = 1003,   // 已完成
   */
  serialNumberUpdate = (item, status) => {
    const that = this;
    Modal.confirm({
      content: (
        <div className={styles.modalContent}>{`确认${status == 1003 ? '完成' : '过号'}吗?`}</div>
      ),
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        SerialNumberUpdate({
          Id: item.Id,
          Status: status,
        }).then(res => {
          if (res && res.ReturnCode == 1001) {
            that.getSerialNumberList();
            that.setState({
              currentPage: 1,
            });
            message.success('操作成功');
          } else {
            message.error(res.MessageCN);
          }
        });
      },
    });
  };

  render() {
    const {
      spinning,
      listData,
      pageSizeOptions,
      currentPage,
      pageSize,
      total,
      statusCode,
    } = this.state;
    const { intl } = this.props;

    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        let data = [];
        selectedRows.map(element => {
          data.push({
            OrderId: element.OrderId,
            PersonListId: element.PersonListId,
          });
        });
        selectedRowKeys.length > 0
          ? this.setState({ selectedRowKeys: selectedRowKeys })
          : this.setState({ selectedRowKeys: [] });
      },
      getCheckboxProps: record => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
      }),
    };

    const columns = [
      {
        title: '系统编号',
        dataIndex: 'SerialNumer',
      },
      {
        title: '状态',
        dataIndex: 'StatusStr',
      },
      {
        title: '员工号',
        dataIndex: 'StaffCode',
      },
      {
        title: '姓名',
        dataIndex: 'StaffName',
      },
      {
        title: '是否为德勤员工',
        dataIndex: 'DttUserStr',
      },
      {
        title: '待办事项',
        dataIndex: 'ScheduleType',
      },
      {
        title: '创建时间',
        dataIndex: 'CreateDate',
      },
      {
        title: '操作',
        dataIndex: 'Oprate',
        render: (text, record) => {
          return record.Status == 1001 ? (
            <div className={styles.oprateBox}>
              <a
                onClick={e => {
                  e.preventDefault();
                  this.serialNumberUpdate(record, 1003);
                }}
                href="javascript:;"
              >
                完成
              </a>
              <a
                onClick={e => {
                  e.preventDefault();
                  this.serialNumberUpdate(record, 1002);
                }}
                href="javascript:;"
              >
                过号
              </a>
            </div>
          ) : null;
        },
      },
    ];
    return (
      <div className={styles.pageContainer}>
        <Row justify="space-between" type="flex">
          <Col>
            <span>状态：</span>
            <Select
              showSearch
              style={{ width: '150px' }}
              optionFilterProp="children"
              getPopupContainer={triggerNode => triggerNode.parentNode}
              defaultValue={statusCode}
              onChange={value => {
                this.setState({
                  currentPage: 1,
                  statusCode: value,
                });
                this.getSerialNumberList(1, pageSize, value);
              }}
            >
              {[
                {
                  value: 1000,
                  key: '全部',
                },
                {
                  value: 1001,
                  key: '待处理',
                },
                {
                  value: 1002,
                  key: '已过号',
                },
                {
                  value: 1003,
                  key: '已完成',
                },
              ].map(item => {
                return (
                  <Select.Option key={item.value} value={item.value}>
                    {item.key}
                  </Select.Option>
                );
              })}
            </Select>
          </Col>
          <Col>
            <Button onClick={this.exportSerialNumberList} type="primary">
              导出
            </Button>
          </Col>
        </Row>
        <LocaleProvider locale={zh_CN}>
          <Table
            // rowSelection={rowSelection}
            loading={{ tip: 'Loading...', spinning: spinning }}
            locale={{ emptyText: '暂无数据' }}
            className={styles.table}
            dataSource={listData}
            pagination={{
              showSizeChanger: true,
              showQuickJumper: true,
              pageSizeOptions: pageSizeOptions,
              onChange: (page, pageSize) => {
                this.handleTableChange(page, pageSize);
              },
              onShowSizeChange: (page, pageSize) => {
                this.handleTableChange(page, pageSize);
              },
              current: currentPage,
              pageSize: pageSize,
              total: total,
              showTotal: total => `共${Math.ceil(total / pageSize)}页/${total}条数据`,
            }}
            columns={columns}
            rowKey="Id"
          />
        </LocaleProvider>
      </div>
    );
  }
}

export default connect()(injectIntl(WaitingAdmin));

组件