kede-client/js/component/manageCenter/customer/statistics/departmentStatistics/customerDetails.jsx

import React,{Component} from 'react';
import {message, Modal, Spin, Table, Tooltip,Tag} from "antd";
import PropTypes from 'prop-types';
import $ from "jquery/src/ajax";

class CustomerDetails extends Component{
    constructor(props) {
        super(props);
        this.state={
            loading:false,
            columns: [{
                title: '客户名称',
                dataIndex: 'name',
                key: 'name'
            }, {
                title: '来源',
                dataIndex: 'sourceName',
                key: 'sourceName',
                width:75,
            }, {
                title: '联系人(部门/职务)',
                dataIndex: 'contacts',
                key: 'contacts',
                width:155,
                render:(text,record)=>{
                    if(!text){return ''}
                    let str = text+'('+(record.contactsDep ? record.contactsDep : ' ')+'/'+ (record.contactsPosition ? record.contactsPosition : ' ')+')';
                    return (
                        <Tooltip title={str}>
                            <div style={{
                                maxWidth:'155px',
                                overflow:'hidden',
                                textOverflow: "ellipsis",
                                whiteSpace:'nowrap',
                            }}>{str}</div>
                        </Tooltip>
                    )
                }
            }, {
                title: '联系人电话',
                dataIndex: 'contactMobile',
                key: 'contactMobile'
            }, {
                title: '创建时间',
                dataIndex: 'createTime',
                key: 'createTime',
                width:145,
            }, {
                title: '跟进时间',
                dataIndex: 'followTime',
                key: 'followTime',
                width:145,
            },{
                title: '企业主营',
                dataIndex: 'businessScope',
                key: 'businessScope',
                width:200,
                render:(text)=>{
                    return (
                        <Tooltip title={text}>
                            <div style={{
                                maxWidth:'200px',
                                overflow:'hidden',
                                textOverflow: "ellipsis",
                                whiteSpace:'nowrap',
                            }}>{text}</div>
                        </Tooltip>
                    )
                }
            }, {
                title: '意向合作',
                dataIndex: 'intendedProject',
                key: 'intendedProject',
                width:200,
                render:(text)=>{
                    return (
                        <Tooltip title={text}>
                            <div style={{
                                maxWidth:'200px',
                                overflow:'hidden',
                                textOverflow: "ellipsis",
                                whiteSpace:'nowrap',
                            }}>{text}</div>
                        </Tooltip>
                    )
                }
            },],
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function(page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function(total) {
                    return '共' + total + '条数据';
                }
            }
        }
        this.loadData = this.loadData.bind(this);
    }

    componentDidMount() {
        this.loadData();
    }

    loadData(pageNo) {
        this.setState({
            loading:true
        })
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context +"/api/admin/customer/selectAdminCustomerList",
            data: {
                pageNo:pageNo || 1,
                pageSize:this.state.pagination.pageSize,
                aid:this.props.aid,
                type:this.props.type,                       //0 所有 1新增 2领取 3已签 4面谈
                startTime:this.props.startTime,
                endTime:this.props.endTime,
            },
            success: function(data) {
                let theArr = [];
                if(data.error.length || data.data.list == "") {
                    if(data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        thisdata.key = i;
                        theArr.push(thisdata);
                    };
                    this.state.pagination.current = pageNo;
                    this.state.pagination.total = data.data.totalCount;
                };
                if(!data.data.list.length) {
                    this.state.pagination.current = 0
                    this.state.pagination.total = 0
                }
                this.setState({
                    dataSource: theArr,
                    pagination: this.state.pagination,
                });
            }.bind(this),
        }).always(function() {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    render() {
        return (
            <div>
                <Modal
                    maskClosable={true}
                    visible={this.props.visible}
                    onOk={this.props.onCancel}
                    onCancel={this.props.onCancel}
                    width='1300px'
                    title={
                        <span>
                            <span style={{marginRight:'15px'}}>客户详情</span>
                            <Tag color="#f50">{this.props.aName}</Tag>
                            <Tag color="#108ee9">
                                {
                                    this.props.type === 0?
                                        '私有客户':
                                        this.props.type === 1?
                                            '渠道客户':
                                            this.props.type === 2?
                                                '签单客户':
                                                this.props.type === 3?
                                                    '私有新增客户':
                                                    this.props.type === 4?
                                                        '渠道新增客户':
                                                        this.props.type === 5?
                                                            '私有面谈客户':
                                                            this.props.type === 6?
                                                                '渠道面谈客户':
                                                                this.props.type === 7?
                                                                    '私有领取客户': ''
                                }
                            </Tag>
                        </span>
                    }
                    footer=''
                    className="admin-desc-content">
                    <div className="patent-table">
                        <Spin spinning={this.state.loading}>
                            <Table
                                columns={this.state.columns}
                                dataSource={this.state.dataSource}
                                pagination={this.state.pagination}
                            />
                        </Spin>
                    </div>
                </Modal>
            </div>
        );
    }
}

CustomerDetails.propTypes={
    visible: PropTypes.bool,
    onCancel: PropTypes.func,
    aid: PropTypes.number,      //员工ID
    type: PropTypes.number,     //列表类型 客户总数 成交客户总数 新增客户数等等
    startTime:PropTypes.string, //开始时间
    endTime:PropTypes.string,   //结束时间
}

CustomerDetails.defaultProps={
    visible: false,
    onCancel: ()=>{}
}

export default CustomerDetails;