| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310 | import React,{Component} from "react";import {Button, DatePicker, message, Select, Spin, Table, Tabs} from "antd";import moment from "moment";import {ChooseList} from "../../../order/orderNew/chooseList";import $ from "jquery/src/ajax";import {    ShowModal,} from "@/tools.js";import ShowModalDiv from "@/showModal.jsx";import StatisticalDetails from './statisticalDetails';import './channelStatistics.less';const {TabPane} = Tabs;const { RangePicker } = DatePicker;class ChannelStatistics extends Component{    constructor(props) {        super(props);        this.state={            columns: [                {                    title: "编号",                    dataIndex: "key",                    key: "key",                },                {                    title: "外联专员",                    dataIndex: "name",                    key: "name",                },                {                    title: "当前客户总数",                    dataIndex: "counts",                    key: "counts",                    className:'content',                    render: (text, record, index) => {                        return (                            <div className='item' onClick={()=>{                                this.tableRowClick(1,record);                            }}>                                {text}                            </div>                        )                    }                },                {                    title: "释放客数",                    dataIndex: "common",                    key: "common",                    className:'content',                    render: (text, record, index) => {                        return (                            <div className='item' onClick={()=>{                                this.tableRowClick(4,record);                            }}>                                {text}                            </div>                        )                    }                },                {                    title: "未分配数",                    dataIndex: "unallocated",                    key: "unallocated",                    className:'content',                    render: (text, record, index) => {                        return (                            <div className='item' onClick={()=>{                                this.tableRowClick(5,record);                            }}>                                {text}                            </div>                        )                    }                },                {                    title: "已分配数",                    dataIndex: "allocated",                    key: "allocated",                    className:'content',                    render: (text, record, index) => {                        return (                            <div className='item' onClick={()=>{                                this.tableRowClick(6,record);                            }}>                                {text}                            </div>                        )                    }                },                {                    title: "已签单数",                    dataIndex: "sign",                    key: "sign",                    className:'content',                    render: (text, record, index) => {                        return (                            <div className='item' onClick={()=>{                                this.tableRowClick(7,record);                            }}>                                {text}                            </div>                        )                    }                },            ],            changeList:[],            dataSource:[],            detailsType:'',// 0营销员 1外联专员 2营销总监 3营销经理 4释放 5未分配 6已分配 7已签单            pagination: {                defaultCurrent: 1,                defaultPageSize: 10,                showQuickJumper: true,                pageSize: 10,                onChange: function (page) {                    this.loadData(page);                }.bind(this),                showTotal: function (total) {                    return "共" + total + "条数据";                },            },            pageNo:1,            listLoading:false,            releaseDate:[],            visible: false,        }        this.tableRowClick = this.tableRowClick.bind(this);        this.loadData = this.loadData.bind(this);        this.search = this.search.bind(this);        this.reset = this.reset.bind(this);        this.changeList = this.changeList.bind(this);        this.onCancel = this.onCancel.bind(this);    }    componentDidMount() {        this.loadData();    }    loadData(pageNo = 1) {        this.setState({            listLoading: true,            selectedRows: [],            selectedRowKeys: [],        });        $.ajax({            method: "get",            dataType: "json",            crossDomain: false,            url: globalConfig.context + '/api/admin/customer/listChannelCounts',            data: {                pageNo: pageNo || 1,                pageSize: this.state.pagination.pageSize,                startTime: this.state.releaseDate[0],                endTime: this.state.releaseDate[1],            },            success: function (data) {                ShowModal(this);                let theArr = [];                if (data.error.length > 0) {                    message.warning(data.error[0].message);                } else {                    if(data.data.list.length === 0 && pageNo !== 1){                        this.loadData(pageNo - 1)                    }else{                        for (let i = 0; i < data.data.list.length; i++) {                            let thisdata = data.data.list[i];                            thisdata.key = (pageNo - 1) * 10 + i + 1;                            theArr.push(thisdata);                        }                        this.state.pagination.current = data.data.pageNo;                        this.state.pagination.total = data.data.totalCount;                        this.setState({                            pageNo: data.data.pageNo,                            dataSource: theArr,                            pagination: this.state.pagination,                        })                    }                }            }.bind(this),        }).always(            function () {                this.setState({                    listLoading: false,                });            }.bind(this)        );    }    search(){        this.loadData();    }    reset(){        this.setState({            releaseDate:[],        },()=>{            this.loadData();        })    }    onCancel(){        this.setState({            aid:'',            visible: false,            detailsType:'',        })    }    changeList(arr) {        const newArr = [];        this.state.columns.forEach(item => {            arr.forEach(val => {                if (val === item.title) {                    newArr.push(item);                }            });        });        this.setState({            changeList: newArr        });    }    tableRowClick(type,record) {        this.setState({            visible: true,            aid:record.aid,            detailsType:type,            aName:record.name,        })    }    render() {        return (            <div className="user-content">                <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />                <div className="content-title" style={{ marginBottom: 10 }}>                    <span style={{ fontWeight: 900, fontSize: 16 }}>外联客户统计</span>                </div>                <div className="user-search">                    <Tabs                        defaultActiveKey="1"                        className="test"                    >                        <TabPane tab="搜索" key="1" style={{paddingTop:'10px'}}>                            <RangePicker                                value={[                                    this.state.releaseDate[0]                                        ? moment(this.state.releaseDate[0])                                        : null,                                    this.state.releaseDate[1]                                        ? moment(this.state.releaseDate[1])                                        : null,                                ]}                                onChange={(data, dataString) => {                                    this.setState({ releaseDate: dataString });                                }}                            />                            <Button                                type="primary"                                style={{ marginLeft: "10px", marginRight: 10 }}                                onClick={this.search}                            >                                搜索                            </Button>                            <Button onClick={this.reset}>重置</Button>                        </TabPane>                        <TabPane tab="更改表格显示数据" key="3">                            <div style={{ marginLeft: 10 }}>                                <ChooseList                                    columns={this.state.columns}                                    changeFn={this.changeList}                                    changeList={this.state.changeList}                                    top={55}                                    margin={11}                                />                            </div>                        </TabPane>                    </Tabs>                </div>                <div className="patent-table">                    <Spin spinning={this.state.listLoading}>                        <Table                            size="middle"                            className={'intentionCustomerTable'}                            columns={                                this.state.changeList.length !== 0                                    ? this.state.changeList                                    : this.state.columns                            }                            dataSource={this.state.dataSource}                            pagination={this.state.pagination}                        />                    </Spin>                </div>                <StatisticalDetails                    visible={this.state.visible}                    onCancel={this.onCancel}                    aid={this.state.aid}                    type={this.state.detailsType}                    aName={this.state.aName}                />            </div>        )    }}export default ChannelStatistics;
 |