react antdpro class 组件，分页，筛选2

报修list table

import React, { Component } from 'react';
import { connect } from 'dva';
import { getLocale } from '../../../utils/utils';
import { Row, Col, Form, Input, Select, Button, Table, Modal, message, Tooltip, LocaleProvider } from 'antd';
import styles from './repairs.less';
import { GetDropdownlist, GetPESRepairList, EditPESRepair, ExportPESRepairList } from "../../../services/repairs";
import { debounce } from 'lodash';
import { downLoadFile } from '../../../utils/utils';


import zh_CN from 'antd/lib/locale-provider/zh_CN';

@Form.create()

class Flow extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPage: 1,
      pageSize: 20,
      tableData: [],
      total: 0,
      modleVisible: false,
      ClassifiedList: [],
      modleType: '',
      selectedRowKeys: [], //全选 筛选
      RowId: '',
      pageSizeOptions: ['10', '20', '50', '100'],
      selectStatus: 1001
    };
  }

  componentDidMount() {
    this.getPESRepairList()
    this.getDropdownlist()
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  getDropdownlist = () => {
    let param = {
      Type: 3002
    }
    GetDropdownlist(param).then((res) => {
      this.setState({ ClassifiedList: res || [] });
    })
  }

  editPESRepair = (val) => {
    const { modleType, pageSize, selectStatus } = this.state;
    switch (modleType) {
      case 'Classified':
        let param = {
          Id: this.state.RowId,
          Status: 1002,
          RepairType: val
        }
        EditPESRepair(param).then(res => {
          if (res && res.ReturnCode == 1001) {
            this.getPESRepairList(1, pageSize, selectStatus)
            message.success('维修订单分类成功!')
          } else {
            message.error(res.MessageCN)
          }
        })
        break;
      case 'Processing':
        let paramProcessing = {
          Id: this.state.RowId,
          Status: 1003,
          RepairProgress: val
        }
        EditPESRepair(paramProcessing).then(res => {
          if (res && res.ReturnCode == 1001) {
            this.getPESRepairList(1, pageSize, selectStatus)
            message.success('维修订单处理成功!')
          } else {
            message.error(res.MessageCN)
          }
        })
        break;
      case 'Completed':
        let paramCompleted = {
          Id: this.state.RowId,
          Status: 1004,
          RepairTime: val
        }
        EditPESRepair(paramCompleted).then(res => {
          if (res && res.ReturnCode == 1001) {
            this.getPESRepairList(1, pageSize, selectStatus)
            message.success('维修订单关闭成功!')
          } else {
            message.error(res.MessageCN)
          }
        })
        break;
    }
  }

  showModal = (tepy) => {
    switch (tepy) {
      case 'Classified':
        this.setState({
          modleType: 'Classified',
        });
        break;
      case 'Processing':
        this.setState({
          modleType: 'Processing',
        });
        break;
      case 'Completed':
        this.setState({
          modleType: 'Completed',
        });
        break;
    }
    this.setState({
      modleVisible: true,
    });
  };

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

  handleOk = () => {
    const { form } = this.props;
    const { modleType } = this.state;
    form.validateFields((err, fieldsValue) => {
      if (err) {
        return;
      }
      switch (modleType) {
        case 'Classified':
          this.editPESRepair(fieldsValue.Classified)
          break;
        case 'Processing':
          this.editPESRepair(fieldsValue.Progress)
          break;
        case 'Completed':
          this.editPESRepair(fieldsValue.Time)
          break;
      }

      this.setState({
        modleVisible: false,
      });

      form.setFieldsValue({
        Classified: '',
        Progress: '',
        Time: '',
      });
    })

    //更新当前订单状态的列表
    // const { pageSize,selectStatus } = this.state;
    // this.getPESRepairList(1, pageSize, selectStatus);

    // this.setState({
    //   currentPage: 1
    // });

  };

  handleCancel = e => {
    this.setState({
      modleVisible: false,
    });
  };

  getPESRepairList = (currentPage = 1, pageSize = 20, selectStatus = 1001) => {
    let param = {
      Status: selectStatus,
      Page: currentPage,
      ItemsPerPage: pageSize
    }

    GetPESRepairList(param).then(res => {
      if (res.TotalCount > 0) {
        // TODO:
        this.setState({ tableData: res.Data });
        this.setState({
          total: res.TotalCount,
        });
      }
    })
  }

  SelectChange(value) {
    const { pageSize } = this.state;
    this.getPESRepairList(1, pageSize, value);
    this.setState({
      selectStatus: value,
      currentPage: 1
    });
  }

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

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const { tableData, total, pageSizeOptions, currentPage, pageSize, modleType, ClassifiedList } = this.state;

    const rules = {
      mustClassified: {
        rules: [
          {
            required: true,
            message: '请选择维修类别!',
          },
        ],
      },
      mustProcessing: {
        rules: [
          {
            required: true,
            message: '请填写维修进度!',
          },
        ],
      },
      mustTime: {
        rules: [
          {
            required: true,
            message: '请填写维修耗时!',
          },
        ],
      },
    }

    const showTotal = total => {
      let dom = null;
      if (getLocale() == 'en-US') {
        dom = `Total ${total} items`;
      } else {
        dom = `合计: ${total} 项`;
      }
      return dom;
    };

    const RenderBtn = (record) => {
      if (record.Status == 1001) {//已提交，默认状态
        return (
          <a
            onClick={e => {
              e.preventDefault();
              this.showModal('Classified')
              this.setState({ RowId: record.Id });
            }}
            href="jvascript:;"
          >
            分类
          </a>
        )
      }
      if (record.Status == 1002 || record.Status == 1003) {//已分类 和 已处理
        return (
          <div className={styles.oprateBox}>
            <a
              onClick={e => {
                e.preventDefault();
                this.showModal('Classified')
                this.setState({ RowId: record.Id });
              }}
              href="jvascript:;"
            >
              分类
            </a>
            <a
              onClick={e => {
                e.preventDefault();
                this.showModal('Processing')
                this.setState({ RowId: record.Id });
              }}
            >
              处理
            </a>
            <a
              onClick={e => {
                e.preventDefault();
                this.showModal('Completed')
                this.setState({ RowId: record.Id });
              }}
            >
              完成
            </a>
          </div>
        );
      }
      if (record.Status == 1004) {//已完成
        return (
          <div className={styles.oprateBox}>
            {/* //不显示所有按钮 */}
          </div>
        );
      }
    }

    const columns = [
      {
        title: '系统编号',
        dataIndex: 'Code',
        key: 'Code',
        align: 'left',
        width: 100
      },
      {
        title: '状态',
        dataIndex: 'StatusName',
        key: 'StatusName',
        align: 'left',
        width: 100,
      },
      {
        title: '员工号',
        dataIndex: 'StaffCode',
        key: 'StaffCode',
        align: 'left',
        width: 100
      },
      {
        title: '姓名',
        dataIndex: 'StaffName',
        key: 'StaffName',
        align: 'left',
        width: 100,
        render: (text, record) => (
          <Tooltip title={text} placement="topLeft">
            <div className={styles.items}>
              <span>{text}</span>
            </div>
          </Tooltip>
        )
      },
      {
        title: '楼层',
        dataIndex: 'Floor',
        key: 'Floor',
        align: 'left',
        width: 200
      },
      {
        title: '位置',
        dataIndex: 'LocationName',
        key: 'LocationName',
        align: 'left',
        width: 200
      },
      {
        title: '报修事项',
        dataIndex: 'RepairItem',
        key: 'RepairItem',
        align: 'left',
        width: 200,
        render: (text, record) => (
          <Tooltip title={text} placement="topLeft">
            <div className={styles.items}>
              <span>{text}</span>
            </div>
          </Tooltip>
        )
      },
      {
        title: '维修分类',
        dataIndex: 'RepairTypeName',
        key: 'RepairTypeName',
        align: 'left',
        width: 200
      },
      {
        title: '维修进度',
        dataIndex: 'RepairProgress',
        key: 'RepairProgress',
        align: 'left',
        width: 200,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement="topLeft">
              <div className={styles.items}>
                <span>{text}</span>
              </div>
            </Tooltip>
          )
        }
      },
      {
        title: '维修耗时',
        dataIndex: 'RepairTime',
        key: 'RepairTime',
        align: 'left',
        width: 200,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement="topLeft">
              <div className={styles.items}>
                <span>{text}</span>
              </div>
            </Tooltip>
          )
        }
      },
      {
        title: '联系方式',
        dataIndex: 'PhoneNumber',
        key: 'PhoneNumber',
        align: 'left',
        width: 100
      },
      {
        title: '备注',
        dataIndex: 'Remark',
        key: 'Remark',
        align: 'left',
        width: 300,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement="topLeft">
              <div className={styles.items}>
                <span>{text}</span>
              </div>
            </Tooltip>
          )
        }
      },
      {
        title: '创建时间',
        dataIndex: 'CreateDate',
        key: 'CreateDate',
        align: 'left',
        width: 200
      },
      {
        title: '操作',
        fixed: 'right',
        align: 'left',
        width: 160,
        render: (text, record) => {
          return RenderBtn(record)
        },
      },
    ];

    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        // console.log(selectedRowKeys)
        // console.log(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 => (
      //   // console.log(record);
      //   {
      //   disabled: record.name === 'Disabled User', // Column configuration not to be checked
      //   name: record.name,
      // }
      // ),
    };

    return (
      
      <div className={styles.repairsMain}>
        <Row justify="space-between" type="flex" >
          <Col className={styles.Row}>
            <span>状态：</span>
            <Select defaultValue={1001} style={{ width: 200 }} onChange={this.SelectChange.bind(this)}>
              {/* 传null  反全部 */}
              <Option value={null}>全部</Option>
              <Option value={1001}>已提交</Option>
              <Option value={1002}>已分类</Option>
              <Option value={1003}>处理中</Option>
              <Option value={1004}>已完成</Option>
            </Select>
          </Col>
          <Col className={styles.Row}>
            <Button onClick={this.exportPESRepairList} className={styles.bbtn} type="primary">
              导出
            </Button>
          </Col>
        </Row>

        <div className={styles.container}>
          <Row>
            <Col span={24}>
              <LocaleProvider locale={zh_CN}>
                <Table
                  // rowSelection={rowSelection}
                  locale={{ emptyText: '暂无数据' }}
                  columns={columns}
                  dataSource={tableData}
                  className={styles.surveyTableList}
                  pagination={{
                    showTotal: showTotal,
                    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}条数据`,
                  }}
                  rowKey={record => record.Id}
                  scroll={{ x: 'max-content' }}
                />
              </LocaleProvider>
            </Col>
          </Row>
        </div>

        <Modal
          title={`维修订单${modleType == 'Classified' ? '分类' : modleType == 'Processing' ? '处理' : '关闭'}`}
          visible={this.state.modleVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          cancelText={'取消'}
          okText={'提交'}
        >
          <Form destroyOnClose >
            {
              modleType == 'Classified' ?
                <Row type="flex" justify="left">
                  <Col span={18} style={{ marginBottom: '30px' }}>
                    <Form.Item label="维修类别" >
                      {getFieldDecorator('Classified', rules.mustClassified)(
                        <Select
                          size='large'
                          onChange={this.handleSelectChange}
                        >
                          {ClassifiedList.map((item, index) => {
                            return (
                              <Option value={item.Code}>{item.Value}</Option>

                            )
                          })}
                        </Select>
                      )}
                    </Form.Item>
                  </Col>
                </Row>
                : modleType == 'Processing' ?
                  <Row type="flex" justify="left">
                    <Col span={16} style={{ marginBottom: '30px' }}>
                      <Form.Item label="维修进度" >
                        {getFieldDecorator('Progress', rules.mustProcessing)(
                          <Input size="large" maxLength={100} />
                        )}
                      </Form.Item>
                    </Col>
                  </Row>
                  :
                  <Row type="flex" justify="left">
                    <Col span={16} style={{ marginBottom: '30px' }}>
                      <Form.Item label="维修耗时" >
                        {getFieldDecorator('Time', rules.mustTime)(
                          <Input size="large" maxLength={100} />
                        )}
                      </Form.Item>
                    </Col>
                  </Row>
            }
          </Form>
        </Modal>
      </div>
    );
  }
}
export default connect()(Flow)