react+antd4之Table（版本一）

表格带有筛选、分页、操作（上下架、表单）等功能（初期版本）

接口server.js

export function listApi(params) {
    const reqBody = { pageNum : 1, pageSize: 10, ...params }
    return post('/users/page', reqBody);
}

页面.js

import React, { useEffect, useState } from 'react'
import { Card, Table, Button, Popconfirm, message, Form, Input, Row, Col, Modal, Select, DatePicker, ConfigProvider  } from 'antd'
// import { MinusCircleOutlined, PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import zhCN from 'antd/es/locale/zh_CN';
import { listApi, addWxGroup, isTestFlag, listApiWxGroup } from '../../../services/user/user'
const { Option } = Select;

function PromoterList(props) {
    console.log(props)
    // 定义局部状态
    const [dataSource, setDataSource] = useState([]);
    const [total, setTotal] = useState(0);
    const [currentPage, setCurrentPage] = useState(1);
    const [wxGroupSource, setWxGroupSource] = useState([]);
    const [visible, setVisible] = useState(false);
    const [keyId, setKeyId] = useState('');
    const [form] = Form.useForm();
    const { RangePicker } = DatePicker;

    // 初始化数据
    useEffect(() => {
        console.log(listApi)
        listApi().then(res => {
            setDataSource(res.ro.records);
            setTotal(res.ro.total);
            setCurrentPage(res.ro.current);
        })
        listApiWxGroup().then(res => {
            setWxGroupSource(res.ro.records);
        })
    }, [])

    // 筛选
    const onFinish = (fieldsValue) => {
        console.log('Received values of form: ', fieldsValue);
        const rangePickerValue = fieldsValue.rangePicker;
        var _min = '';
        var _max = '';
        if(rangePickerValue == null){
            _min = '';
            _max = '';
        } else {
            _min = rangePickerValue[0].format('YYYY-MM-DD');
            _max = rangePickerValue[1].format('YYYY-MM-DD');
        }
        let values =  {
            mobile:fieldsValue.mobile,
            nickname: fieldsValue.nickname,
            regTimeMin:_min,
            regTimeMax:_max
        };
        listApi(values).then(res => {
            setDataSource(res.ro.records);
            setTotal(res.ro.total);
            setCurrentPage(res.ro.current);
        })
    };
    const ran