react AntUI(table组件使用案例)

import React from ‘react‘;
import {connect} from "react-redux"
import {bindActionCreators} from ‘redux‘;
import request from ‘@src/util/util.js‘;
import {Table,DatePicker,Layout,Row,Col,Select,Button,Icon,Input} from ‘antd‘;
const { MonthPicker,RangePicker,WeekPicker } = DatePicker;
const {Header,Content} = Layout;
const {Option} = Select;

function createTableConfig () {
    const columns = [{
        title: ‘序号‘,dataIndex: ‘no‘,},{
        title: ‘ID‘,dataIndex: ‘uid‘,{
        title: ‘注册类型‘,dataIndex: ‘type‘,{
        title: ‘来源‘,dataIndex: ‘isMobile‘,{
        title: ‘审核状态‘,dataIndex: ‘status‘,{
        title: ‘昵称‘,dataIndex: ‘username‘,}];

    let table = {
        columns,bordered: true,pagination: {
            showSizeChanger: true
        }
    }
    return table;
}

class Welcome extends React.Component{
    constructor(props) {
        super(props);

        let searchParm = {
            page:1,limit:10,registerType:-1,filter:0,keyword:‘‘,verifyStatus:-1,startTime:‘‘,endTime:‘‘
        }

        let tableData = {
            dataList:{
                list:[],totalCount:0
            }
        }

        this.state = {
            ...searchParm,...tableData,dateTime:‘‘,}
    }

    handleChangeTimeMt(date,dateString) {
       this.setState({
           startTime:dateString[0],endTime:dateString[1],dateTime:date
       })
    }

    verifyStatusMt (option) {
        this.setState({
            verifyStatus:option
        })
    }

    changeInputValMt (el) {
        this.setState({
            keyword:el.target.value
        })
    }
    
    getTableDataMt (isInitPage) {
        if(!isInitPage){//搜索初始化分页参数
            this.setState({
                page:1,})
        }

        let resolve = () => {
            let parm = ‘/member/list‘;
            parm += ‘?page=‘+this.state.page,parm += ‘&limit=‘+this.state.limit,parm += ‘&verifyStatus=‘ +this.state.verifyStatus;
            parm += ‘&registerType=‘ +this.state.registerType;
            parm += ‘&filter=‘ +this.state.filter;
            parm += ‘&keyword=‘ +this.state.keyword;
            parm += ‘&startTime=‘ +this.state.startTime;
            parm += ‘&endTime=‘ +this.state.endTime;

            request.get(parm)
            .then(res => {
                this.setState({
                    dataList: {
                        list:res.data.list,totalCount:res.data.totalCount
                    }
                })
            })
        }

        setTimeout(resolve)
    }

    changeTableData (isShowSize,page,pageSize) {
        this.setState({
            page:page,limit:pageSize,})
        setTimeout(()=>{
            this.getTableDataMt(true)
        })
    }
    
    clearKeywordsMt () {
        this.setState({
            keyword:‘‘
        })
    }

    componentWillMount(){
        this.getTableDataMt()
    }

    render(){
        let welcomeStyle = {
            position:‘relative‘
        }
        let headStyle = {
            padding:‘0 20px‘,lineHeight:‘64px‘
        }
        let contStyle = {
            padding:‘20px‘
        }
        let headPointStyle = {
            marginLeft: ‘20px‘,marginRight: ‘10px‘
        }
        let headInputStyle = {
            display: ‘inline-block‘,width: ‘160px‘,marginRight: ‘10px‘
        }

        let tableConfig = createTableConfig.call(this);
            tableConfig.dataSource = this.state.dataList.list;
        let pagination = tableConfig.pagination;
        let {page,limit} = this.state;

        pagination.onChange = this.changeTableData.bind(this,false);
        pagination.onShowSizeChange = this.changeTableData.bind(this,true);
        pagination.total = this.state.dataList.totalCount;
        pagination.current = page;
        pagination.pageSize = limit;
        pagination.showTotal = (total,range) => ("筛选结果：" + total);

        return (
            <div className="welcome" style={welcomeStyle}>
                {/* 搜索区域 */}
                <Content style={headStyle}>
                    <RangePicker onChange={this.handleChangeTimeMt.bind(this)} value={this.state.dateTime}/>
                    <span style={headPointStyle}>审核状态</span>
                    <Select defaultValue={-1}
                        value={this.state.verifyStatus}
                        onSelect={this.verifyStatusMt.bind(this)}>
                        <Option value={-1}>全部</Option>
                        <Option value={1}>待审核</Option>
                        <Option value={2}>已通过</Option>
                        <Option value={3}>已拒绝</Option>
                    </Select>
                    <span style={headPointStyle}>&nbsp;</span>
                    <div style={headInputStyle}>
                        <Input
                            value={this.state.keyword}
                            onInput={this.changeInputValMt.bind(this)}
                            prefix={<Icon type=‘search‘/>}
                            suffix={<Icon type=‘close-circle‘ 
                            onClick={this.clearKeywordsMt.bind(this)}/>}/>
                    </div>
                    <Button onClick={this.getTableDataMt.bind(this,false)}
                            className=‘btnStyle‘ 
                            style={{marginRight: ‘10px‘}}>搜索</Button>
                </Content>
                {/* 列表区域 */}
                <Content style={contStyle}>
                    <Table {...tableConfig} rowKey={record => record.uid}/>
                </Content>
            </div>
        )
    }
}

export default (Welcome)