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

import React,{ Component } from 'react';
import {
    Modal,
    Tooltip,
} from "antd";
import './index.less';
import TabelContent from "../../../../common/tabelContent";
import {
    getLiquidationStatus,
    getNewOrderStatus,
    getProjectName
} from "../../../../tools";

class DetailedList extends Component{
    constructor(props) {
        super(props);
        this.state= {
            columns: [
                {
                    title: "编号",
                    dataIndex: "key",
                    key: "key",
                    width: 120,
                },
                {
                    title: "催收部门",
                    dataIndex: "depName",
                    key: "depName",
                    width: 320,
                },
                {
                    title: "催款人",
                    dataIndex: "aName",
                    key: "aName",
                    width: 220,
                },
                {
                    title: "签单额（万元）",
                    dataIndex: "totalAmount",
                    key: "totalAmount",
                    className: 'projectTable',
                    width: 150,
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        this.setState({
                            visible1: true,
                            aid: record.aid
                        })
                    },
                },
                {
                    title: "应收款（万元）",
                    dataIndex: "money",
                    key: "money",
                    className: 'projectTable',
                    width: 150,
                    onCellClick: (record, event) => {
                        event.stopPropagation();
                        this.setState({
                            visible1: true,
                            aid: record.aid
                        })
                    },
                },
            ],
            columns1: [
                {
                    title: "序号",
                    dataIndex: "key",
                    key: "key"
                },
                {
                    title: "合同编号",
                    dataIndex: "contractNo",
                    key: "contractNo"
                },
                {
                    title: "订单编号",
                    dataIndex: "orderNo",
                    key: "orderNo"
                },
                {
                    title: "客户名称",
                    dataIndex: "userName",
                    key: "userName",
                    render: text => {
                        return (
                            <Tooltip title={text}>
                                <div style={{
                                    maxWidth:'150px',
                                    overflow:'hidden',
                                    textOverflow: "ellipsis",
                                    whiteSpace:'nowrap',
                                }}>{text}</div>
                            </Tooltip>
                        )
                    }
                },
                {
                    title: "订单负责人",
                    dataIndex: "salesmanName",
                    key: "salesmanName"
                },
                {
                    title: "订单部门",
                    dataIndex: "depName",
                    key: "depName"
                },
                {
                    title: "订单状态",
                    dataIndex: "orderStatus",
                    key: "orderStatus",
                    render: text => {
                        return getNewOrderStatus(text);
                    }
                },
                {
                    title: "项目状态",
                    dataIndex: "projectStatus",
                    key: "projectStatus",
                    render: text => {
                        return getProjectName(text);
                    }
                },
                {
                    title: "签单金额(万元)",
                    dataIndex: "totalAmount",
                    key: "totalAmount"
                },
                {
                    title: "已收款(万元)",
                    dataIndex: "settlementAmount",
                    key: "settlementAmount"
                },
                {
                    title: "未收款(万元)",
                    dataIndex: "uncollectedAmount",
                    key: "uncollectedAmount"
                },
                {
                    title: "结算状态",
                    dataIndex: "liquidationStatus",
                    key: "liquidationStatus",
                    render: text => {
                        return getLiquidationStatus(text);
                    }
                },
                {
                    title: "催收科目",
                    dataIndex: "dunSubject",
                    key: "dunSubject"
                },
                {
                    title: "应收款(万元)",
                    dataIndex: "accountsReceivable",
                    key: "accountsReceivable"
                },
                {
                    title: "催款状态",
                    dataIndex: "dunStatus",
                    key: "dunStatus"
                },
                {
                    title: "催款启动日期",
                    dataIndex: "startDate",
                    key: "startDate"
                },
                {
                    title: "签单时间",
                    dataIndex: "signDate",
                    key: "signDate"
                }
            ],
            searchList:[
            {
                type:'departmentSelect',
                dataKey:'depId',
                placeholder:'请选择部门'
            },
            {
                type:'autoComplete',
                dataKey:'aid',
                api:'/api/admin/customer/listAdminByName',
                search:'adminName',
                placeholder:'请输入催款人'
            },
            {
                type:'select',
                dataKey:'sort',
                placeholder:'请选择排序',
                selectList:[
                    {
                        value:'0',
                        label:'按总金额排序'
                    },
                    {
                        value:'1',
                        label:'按数量排序'
                    },
                ]
            },
            {
                type:'times',
                title:'催收时间',
                dataKey:['startDate','endDate'],
            },
        ],
            searchList1:[
                {
                    type:'text',
                    dataKey:'name',
                    placeholder:'请输入客户名称',
                },
                {
                    type:'text',
                    dataKey:'adminName',
                    placeholder:'请输入营销员名称'
                },
                {
                    type:'text',
                    dataKey:'orderNo',
                    placeholder:'请输入订单编号'
                },
                {
                    type:'text',
                    dataKey:'contractNo',
                    placeholder:'请输入合同编号'
                },
                {
                    type:'departmentSelect',
                    dataKey:'depId',
                    placeholder:'请选择订单部门'
                },
                {
                    type:'times',
                    title:'下单时间',
                    dataKey:['starTime','endTime'],
                },
            ],
            searchConfig:{},
        }
    }

    render() {
        return (
            <div>
                <Modal
                    maskClosable={false}
                    visible={this.props.visible}
                    onOk={this.props.onCancel}
                    onCancel={this.props.onCancel}
                    width='1200px'
                    title={<span>
                        {this.props.recordInfor.provinceName + '应收款详细'}
                        <span style={{fontSize:'10px',color:'#0f2be5',marginLeft:'10px'}}>应收款：达到收款节点未收到的款</span>
                    </span>}
                    footer=''
                    className="admin-desc-content">
                    <div className="user-content">
                        <TabelContent
                            scroll={{ x: 0, y: 500}}
                            searchList={this.state.searchList}
                            columns={this.state.columns}
                            searchConfig={this.props.searchConfig}
                            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/selectOrderDun'}
                            exportApi={'/api/admin/newOrderDun/selectOrderDunExprot'}
                            query={{
                                province:this.props.recordInfor.province,
                            }}
                            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;
                            }}
                        />
                    </div>
                    {this.state.visible1 && <Modal
                        maskClosable={false}
                        visible={this.state.visible1}
                        onOk={()=>{
                            this.setState({
                                visible1:false
                            })
                        }}
                        onCancel={()=>{
                            this.setState({
                                visible1:false
                            })
                        }}
                        width='1600px'
                        title='欠款催收列表'
                        footer=''
                        className="admin-desc-content">
                        <div className="user-content">
                            <TabelContent
                                searchList={this.state.searchList1}
                                columns={this.state.columns1}
                                tabelApi={'/api/admin/newOrder/dunOrderNewList'}
                                searchConfig={this.state.searchConfig}
                                query={{
                                    specially:1,
                                    newStatus:1,
                                    aid:this.state.aid
                                }}
                                dataProcessing={(data)=>{
                                    let theArr = [];
                                    for (let i = 0; i < data.data.list.length; i++) {
                                        let thisdata = data.data.list[i];
                                        thisdata.key=(data.data.pageNo - 1) * data.data.pageSize + i + 1;
                                        theArr.push(thisdata);
                                    }
                                    return theArr;
                                }}
                            />
                        </div>
                    </Modal>}
                </Modal>
            </div>
        )
    }
}

export default DetailedList;