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);

    }