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

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

columns: [{
                title: \'序号\',
                dataIndex: \'indexs\',
                className: \'first-column\',
                width: \'80px\'
            }, {
                title: \'服务名称\',
                dataIndex: \'asvServiceName\',
                className: \'middle-column\',
                width: \'180px\'
            }, {
                title: \'api_name\',
                dataIndex: \'asvServiceId\',
                className: \'middle-column\',
                width: \'220px\'
            }, {
                title: \'所属系统\',
                dataIndex: \'asvCallPlateform\',
                className: \'middle-column\',
                width: \'150px\',
                render: (text, record) => (
                    
                        {text == \'01\' ? \'连接平台\'
                            : text == \'02\' ? \'中台\'
                                : text == \'03\' ? \'理财\'
                                    : text == \'04\' ? \'网贷\'
                                        : text == \'05\' ? \'核心\'
                                            : text == \'06\' ? \'风控\'
                                                : text == \'07\' ? \'jarslink\' : \'\'}
                    
                ),
            }, {
                title: \'服务状态\',
                dataIndex: \'asvStatus\',
                width: \'100px\',
                className: \'middle-column\',
                render: (text, record) => (
                    {text == \'0\' ? \'启用\' : text == \'1\' ? \'停用\' : \'\'}
                ),
            }, {
                title: \'版本号\',
                dataIndex: \'apiVersion\',
                width: \'100px\',
                className: \'middle-column\',
            }, {
                title: \'注册时间\',
                dataIndex: \'createDate\',
                className: \'middle-column\',
                width: \'170px\'
            }, {
                title: \'操作\',
                width: \'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);

    }