react ~4.组件table的使用及表格分页处理

antd里面表格数据分为三部分，columns:该对象数组用于设置表头数据，里面的dataIndex是对象数据里面对应的key， data:该对象数组用于设置每行的对应表头columns的数据， pagination:该对象用于设置分页

columns: [{
                title: '序号',
                dataIndex: 'indexs',
                className: 'first-column',
                 '80px'
            }, {
                title: '服务名称',
                dataIndex: 'asvServiceName',
                className: 'middle-column',
                 '180px'
            }, {
                title: 'api_name',
                dataIndex: 'asvServiceId',
                className: 'middle-column',
                 '220px'
            }, {
                title: '所属系统',
                dataIndex: 'asvCallPlateform',
                className: 'middle-column',
                 '150px',
                render: (text, record) => (
                    
                        {text == '01' ? '连接平台'
                            : text == '02' ? '中台'
                                : text == '03' ? '理财'
                                    : text == '04' ? '网贷'
                                        : text == '05' ? '核心'
                                            : text == '06' ? '风控'
                                                : text == '07' ? 'jarslink' : ''}
                    
                ),
            }, {
                title: '服务状态',
                dataIndex: 'asvStatus',
                 '100px',
                className: 'middle-column',
                render: (text, record) => (
                    {text == '0' ? '启用' : text == '1' ? '停用' : ''}
                ),
            }, {
                title: '版本号',
                dataIndex: 'apiVersion',
                 '100px',
                className: 'middle-column',
            }, {
                title: '注册时间',
                dataIndex: 'createDate',
                className: 'middle-column',
                 '170px'
            }, {
                title: '操作',
                 '220px',
                dataIndex: 'action',
                className: 'last-column',
                render: (text, record) => (
                    <Fragment>//用于包裹需要包裹的标签，但是不会生成标签
　　　　　　　　　　　　　　//之所以不用antd的Button组件，是因为在使用的时候会出现莫名样式，eg:圣诞节的时候出现的顶部白云块。对于要求严苛的设计页面是不允许出现这种情况的
                        <button className='table-button' style={{ marginRight: 10 }} onClick={() => this.queryHandle(record)}> 查看</button>
                        <button className='table-button' style={{ marginRight: 10 }} onClick={() => this.modifyHandle(record)}>修改</button>
                        {/* <button className='table-button' onClick={() => record.asvStatus == '0' ? this.deleteHandle(record, record.apiVersion) : this.openHandle(record.asvServiceId, record.apiVersion)}>{record.asvStatus == '0' ? '停用' : record.asvStatus == '1' ? '启用' : ''}</button> */}
                    </Fragment>
                ),
            }],
            data: [],
            paginationNo: {
                pageSize: 10,//每页的条数
                current: 1,//当前页
                total: 10,//总数据
                onChange: this.pagesNo.bind(this),//点击分页号时触发的方法
                hideOnSinglePage: true//为true则数据条数不满或刚好一页，则隐藏分页器
            },

  componentDidMount() {
        this.setState({
            loadhold: true,
        });
        this.pagesNo(1, 10);
    }

    toNew(item) {
        this.props.history.push('/service/atom/add');
    }

    queryHandle(item) {
        this.props.history.push({
            pathname: "/service/atom/query",
            state: {
                item: item
            }
        });
    }

    addHandle(record) {
        console.log(record.indexs);
    }

    modifyHandle(record) {
        this.props.history.push({
            pathname: "/service/atom/modify",
            state: {
                item: record
            }
        });
    }

    deleteHandle(record, val) {
        this.setState({
            hasVisible: true,
            asvServiceId: record.asvServiceId,
            apiVersion: val,
            apiId: record.apiId,
            itemData: {
                title: '服务停用',
                tbody: '服务停用后，产品将无法关联该服务。若需关联，需重新启用该服务'
            }
        });
    }

    openHandle(item, val) {
        let that = this;

        const data = {
            'serviceOperateType': 1,
            'asvServiceId': item,
            'apiVersion': val,
            'apiId': this.state.apiId
        };

        const apiUrl1 = MI.baseURI + `/ability/start-or-shutdown`;
        fetchPost(apiUrl1, data).then((response) => {
            if (response.success) {
                message.success('启用成功！！');
                that.setState({
                    loadhold: true,
                });
                this.pagesNo(1, 10);

            } else {

                this.setState({
                    loadhold: false,
                });
                message.error(response.msg);
            }
        });
    }

    changeStatus = (status, status_bool) => {
        let that = this;
        this.setState({
            hasVisible: status
        });
        if (status_bool) {

            const data = {
                'serviceOperateType': 0,
                'asvServiceId': this.state.asvServiceId,
                'apiVersion': this.state.apiVersion,
                'apiId': this.state.apiId
            };
            const apiUrl1 = MI.baseURI + `/ability/start-or-shutdown`;
            fetchPost(apiUrl1, data).then((response) => {
                if (response.success) {
                    message.success('停用成功！！');
                    that.setState({
                        loadhold: true,
                    });

                    this.pagesNo(1, 10);
                } else {

                    this.setState({
                        loadhold: false,
                    });
                    message.error(response.msg);
                }
            });
        }
    }
    pagesNo(page, pageSize) {
        this.setState({
            loadhold: true,
        });
        var jjs = (page - 1) * pageSize;
        const data = {
            "pageNum": page,
            "pageSize": '10',
            'asvCallPlateform': this.state.asvCallPlateform == '00' ? '' : this.state.asvCallPlateform,
            'asvServiceName': this.state.asvServiceName,
            'asvStatus': this.state.serviceOperateType == 'jack' ? '' : this.state.serviceOperateType
        };
        const apiUrl1 = MI.baseURI + `/ability/list`;
        fetchPost(apiUrl1, data).then((response) => {
            if (response.success) {
                for (var i = 0; i < response.data.list.length; i++) {
                    response.data.list[i].indexs = i + 1 + jjs;//设置序号
                }
                this.setState({
                    data: response.data.list,
                    loadhold: false,
                    paginationNo: {
                        pageSize: response.data.pageSize,
                        current: response.data.pageNum,
                        total: response.data.totalCount,
                        onChange: this.pagesNo.bind(this),
                        className: 'myPagination',
                        showTotal: showTotal//

　　　　　　　　　　　　　　　　showTotal方法　　function showTotal(total) {//用于分页器显示总条数的方法
    　　　　　　　　　　　　　　　　　　　　return `共${total}条记录`;
　　　　　　　　　　　　　　　　　　　　　　}

                    }
                });
            } else {
                this.setState({
                    loadhold: false,
                });
                message.error(response.msg);
            }
        });
    }


    //所属系统
    handleChangeS(val) {
        console.log(val);
        this.setState({
            asvCallPlateform: val
        });
    }
    //服务状态
    handleChangeM(val) {
        console.log(Number(val));
        this.setState({
            serviceOperateType: Number(val)
        });
    }
    //服务名称
    sm_servicename_query(e) {
        this.setState({
            asvServiceName: e.target.value
        });
    }
    sm_query() {//通过条件查询查询
        var that = this;
        this.setState({
            loadhold: true,
        });

        this.pagesNo(1, 10);
    }
    //重置
    sm_reset() {
        var that = this;
        this.setState({
            loadhold: true,
            asvCallPlateform: '00',
            asvServiceName: '',
            serviceOperateType: 'jack'

        });
        setTimeout(() => {
            this.pagesNo(1, 10);
        }, 1000);

    }