react AntUI(table组件使用案例)

Posted 2020-11-19 zhujiasheng

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,
                limit:10,
            })
        }

        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)