kede-client/js/component/manageCenter/customer/operationalData/receivablesStatistics/index.jsx

import React,{ Component } from 'react';
import './index.less';
import TabelContent from '../../../../common/tabelContent'

import DetailedList from './detailedList';

class ReceivablesStatistics extends Component{
    constructor(props) {
        super(props);
        this.state={
            columns: [
                {
                    title: "序号",
                    dataIndex: "key",
                    key: "key",
                    width: 120,
                },
                {
                    title: "催收省份",
                    dataIndex: "provinceName",
                    key: "provinceName",
                    width: 120,
                },
                {
                    title: "签单数/签单额（万元）",
                    dataIndex: "quantity",
                    key: "quantity",
                    width: 120,
                    className: 'projectTable',
                    render: (text, record) => {
                        return(
                            text + '/' + record.totalAmount
                        )
                    },
                    onCellClick :(record, event)=>{
                        event.stopPropagation();
                        this.setState({
                            visible:true,
                            recordInfor:record
                        })
                    }
                },
                {
                    title: "应收款（万元）",
                    dataIndex: "receivables",
                    key: "receivables",
                    className: 'projectTable',
                    width: 120,
                    onCellClick :(record, event)=>{
                        event.stopPropagation();
                        this.setState({
                            visible:true,
                            recordInfor:record
                        })
                    }
                },
            ],
            searchConfig:{}
        }
    }

    searchList(){
        let arr = [
            {
                type:'departmentSelect',
                dataKey:'depId',
                placeholder:'请选择部门'
            },
            {
                type:'times',
                title:'催收时间',
                dataKey:['startDate','endDate'],
            },
        ]
        return arr;
    }

    render() {
        return (
            <div className="user-content receivablesStatistics">
                <div className="content-title">
                    <span>
                        全国应收款表<span style={{fontSize:'10px',color:'#0f2be5',marginLeft:'10px'}}>应收款：达到收款节点未收到的款</span>
                    </span>
                </div>
                <TabelContent
                    scroll={{ x: 0, y: 200 }}
                    searchList={this.searchList()}
                    columns={this.state.columns}
                    searchOperation={(value)=>{
                        for(let i of Object.keys(value)){
                            if(i === 'sort' || i === 'pageNo' || i === 'pageSize'){
                                delete value[i]
                            }

                        }
                        this.setState({searchConfig:value})}
                    }
                    tabelApi={'/api/admin/newOrderDun/selectOrderDunAll'}
                    exportApi={'/api/admin/newOrderDun//selectOrderDunAllExprot'}
                    dataProcessing={(data)=>{
                        let theArr = [];
                        for (let i = 0; i < data.data.length; i++) {
                            let thisdata = data.data[i];
                            thisdata.key=i + 1;
                            theArr.push(thisdata);
                        }
                        return theArr;
                    }}
                />
                {this.state.visible ? <DetailedList
                    searchConfig={JSON.parse(JSON.stringify(this.state.searchConfig))}
                    visible={this.state.visible}
                    recordInfor={this.state.recordInfor}
                    onCancel={()=>{
                        this.setState({
                            visible:false,
                            recordInfor:{}
                        })
                    }}/> : null}
            </div>
        )
    }
}

export default ReceivablesStatistics;