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

import React,{Component} from 'react';
import {
    Button, DatePicker,
    Input,
    message,
    Select,
    Spin,
    Table, Tabs,
} from "antd";
import './index.less';
import $ from "jquery/src/ajax";
import CustomerDetails from './customerDetails';
import moment from "moment";
import {ChooseList} from "../../../order/orderNew/chooseList";

const { RangePicker } = DatePicker;
const { TabPane } = Tabs;

class DepartmentStatistics extends Component{
    constructor(props) {
        super(props);
        this.state={
            superId:undefined,
            nameSearch: '',
            releaseDate: [],

            columns: [
                {
                    title: "部门",
                    dataIndex: "name",
                    key: "name",
                    width: '25%',
                },
                {
                    title: "私有数",
                    dataIndex: "userCount",
                    key: "userCount",
                    className: 'tableRowStyle',
                    width: 120,
                    render: (text, record) => {
                        return (
                            <div
                                className={record.aid ? 'receiveCount' : ''}
                                onClick={(e)=>{
                                    if(record.aid){
                                        e.stopPropagation();
                                        this.setState({
                                            customerVisible: true,
                                            aid: record.aid,
                                            aName: record.aName,
                                            type: 0,
                                        })
                                    }
                                }}>
                                {text}
                            </div>
                        );
                    },
                },
                {
                    title: "渠道数",
                    dataIndex: "channelCount",
                    key: "channelCount",
                    className: 'tableRowStyle',
                    width: 120,
                    render: (text, record) => {
                        return (
                            <div
                                className={record.aid ? 'receiveCount' : ''}
                                onClick={(e)=>{
                                    if(record.aid){
                                        e.stopPropagation();
                                        this.setState({
                                            customerVisible: true,
                                            aid: record.aid,
                                            aName: record.aName,
                                            type: 1,
                                        })
                                    }
                                }}>
                                {text}
                            </div>
                        );
                    },
                },
                {
                    title: "签单数",
                    dataIndex: "signCount",
                    key: "signCount",
                    className: 'tableRowStyle',
                    width: 120,
                    render: (text, record) => {
                        return (
                            <div
                                className={record.aid ? 'receiveCount' : ''}
                                onClick={(e)=>{
                                    if(record.aid){
                                        e.stopPropagation();
                                        this.setState({
                                            customerVisible: true,
                                            aName: record.aName,
                                            aid: record.aid,
                                            type: 2,
                                        })
                                    }
                                }}>
                                {text}
                            </div>
                        );
                    },
                },
                {
                    title: "私有新增数",
                    dataIndex: "newCount",
                    key: "newCount",
                    className: 'tableRowStyle',
                    width: 120,
                    render: (text, record) => {
                        return (
                            <div
                                className={record.aid ? 'receiveCount' : ''}
                                onClick={(e)=>{
                                    if(record.aid){
                                        e.stopPropagation();
                                        this.setState({
                                            customerVisible: true,
                                            aName: record.aName,
                                            aid: record.aid,
                                            type: 3,
                                        })
                                    }
                                }}>
                                {text}
                            </div>
                        );
                    },
                },
                {
                    title: "渠道新增数",
                    dataIndex: "channelNewCount",
                    key: "channelNewCount",
                    className: 'tableRowStyle',
                    width: 120,
                    render: (text, record) => {
                        return (
                            <div
                                className={record.aid ? 'receiveCount' : ''}
                                onClick={(e)=>{
                                    if(record.aid){
                                        e.stopPropagation();
                                        this.setState({
                                            customerVisible: true,
                                            aName: record.aName,
                                            aid: record.aid,
                                            type: 4,
                                        })
                                    }
                                }}>
                                {text}
                            </div>
                        );
                    },
                },
                {
                    title: "私有面谈数",
                    dataIndex: "completeCount",
                    key: "completeCount",
                    className: 'tableRowStyle',
                    width: 120,
                    render: (text, record) => {
                        return (
                            <div
                                className={record.aid ? 'receiveCount' : ''}
                                onClick={(e)=>{
                                    if(record.aid){
                                        e.stopPropagation();
                                        this.setState({
                                            customerVisible: true,
                                            aName: record.aName,
                                            aid: record.aid,
                                            type: 5,
                                        })
                                    }
                                }}>
                                {text}
                            </div>
                        );
                    },
                },
                {
                    title: "渠道面谈数",
                    dataIndex: "channelCompleteCount",
                    key: "channelCompleteCount",
                    className: 'tableRowStyle',
                    width: 120,
                    render: (text, record) => {
                        return (
                            <div
                                className={record.aid ? 'receiveCount' : ''}
                                onClick={(e)=>{
                                    if(record.aid){
                                        e.stopPropagation();
                                        this.setState({
                                            customerVisible: true,
                                            aName: record.aName,
                                            aid: record.aid,
                                            type: 6,
                                        })
                                    }
                                }}>
                                {text}
                            </div>
                        );
                    },
                },
                {
                    title: "私有领取数",
                    dataIndex: "receiveCount",
                    key: "receiveCount",
                    className: 'tableRowStyle',
                    width: 120,
                    render: (text, record) => {
                        return (
                            <div
                                className={record.aid ? 'receiveCount' : ''}
                                onClick={(e)=>{
                                    if(record.aid){
                                        e.stopPropagation();
                                        this.setState({
                                            customerVisible: true,
                                            aName: record.aName,
                                            aid: record.aid,
                                            type: 7,
                                        })
                                    }
                                }}>
                                {text}
                            </div>
                        );
                    },
                },
            ],
            contactsOption:null,
            loading: false,
            ispage: 1,

            aid:'',
            type:'',
            visible:false,
        };
        this.loadData = this.loadData.bind(this);
        this.reset = this.reset.bind(this);
        this.selectSuperId = this.selectSuperId.bind(this);
        this.changeList = this.changeList.bind(this);
    }

    componentDidMount() {
        this.selectSuperId();
    }

    loadData() {
        if(!this.state.superId){
            message.warning('请选择部门后再搜索')
            return;
        }
        this.setState({
            loading: true,
        });
        let api = '/api/admin/customer/selectAllUser';
        let data = {};
        if(this.state.superId){
            data.depId = this.state.superId;
        }
        if(this.state.nameSearch){
            data.aName = this.state.nameSearch;
        }
        if(this.state.releaseDate[0]){
            data.startTime = this.state.releaseDate[0]
        }
        if(this.state.releaseDate[1]){
            data.endTime = this.state.releaseDate[1]
        }
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + api,
            data: data,
            success: function (data) {
                let theArr = [];
                if (data.error.length !== 0) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                } else {
                    data.data.children = data.data.list;
                    data.data.children = data.data.children.concat(data.data.aList);
                    theArr.push(data.data);
                    theArr = this.handleTabsInfor(theArr);
                    this.setState({
                        ispage: data.data.pageNo,
                        dataSource: theArr,
                    });
                }
            }.bind(this),
        }).always(
            function () {
                this.setState({
                    loading: false,
                });
            }.bind(this)
        );
    };

    //表格数据处理
    handleTabsInfor(infor){
        for(let i=0;i<infor.length;i++){
            if(!infor[i].key){
                infor[i].key = infor[i].id ? infor[i].id : (infor[i].aid ? infor[i].aid : i)
            }
            if(infor[i].children){
                for(let c=0;c<infor[i].children.length;c++){
                    infor[i].children[c].key = infor[i].children[c].id;
                    infor[i].children[c].children = infor[i].children[c].list;
                    if(infor[i].children[c].aName){infor[i].children[c].name = infor[i].children[c].aName}
                    if(infor[i].children[c].aList && Array.isArray(infor[i].children[c].aList) && infor[i].children[c].aList.length){
                        if(infor[i].children[c].children && Array.isArray(infor[i].children[c].children)){
                            for(let t of infor[i].children[c].aList){
                                t.key = t.aid;
                                t.name = t.aName;
                            }
                            infor[i].children[c].children = infor[i].children[c].children.concat(infor[i].children[c].aList);
                        }
                    }
                    this.handleTabsInfor(infor[i].children);
                }
            }
        }
        return infor;
    }

    reset(){
        this.setState({
            nameSearch: '',
            releaseDate: [],
        },()=>{
            this.loadData();
        });
    };

    //获取上级组织
    selectSuperId() {
        this.state.data = []
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/organization/selectSuperId",
            data:{},
            success: function (data) {
                let theArr = [];
                let theId=[];//用于保存上级组织的ID和名称
                let thedata=data.data;
                if (!thedata) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                    thedata = {};
                };
                for(var i=0;i<data.data.length;i++){
                    let theData = data.data[i];
                    theArr.push(
                        <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
                    );
                    theId.push(
                        [theData.id,theData.name]
                    );
                };
                this.setState({
                    SuperArr:thedata,
                    contactsOption: theArr,
                    theId: theId,
                    orderStatusOptions:data.data,
                });
                if(!this.state.superId){
                    this.setState({
                        superId:data.data[0].id
                    },()=>{
                        this.loadData();
                    })
                }

            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    }

    changeList(arr) {
        const newArr = [];
        this.state.columns.forEach(item => {
            arr.forEach(val => {
                if (val === item.title) {
                    newArr.push(item);
                }
            });
        });
        this.setState({
            changeList: newArr
        });
    }

    render() {
        return(
            <div className="user-content">
                <div className="content-title">
                    <span>部门统计</span>
                </div>
                <Tabs
                    defaultActiveKey="1"
                    className="test">
                    <TabPane tab="搜索" key="1">
                        <div className="user-search" style={{display:'flex',alignItems:'center'}}>
                            <div>
                                <Select
                                    placeholder="请选择部门"
                                    style={{ width:200,marginLeft:10}}
                                    value={this.state.superId}
                                    onChange={(e) => { this.setState({ superId: e }) }}
                                    notFoundContent="未获取到上级组织列表">
                                    {this.state.contactsOption}
                                </Select>
                            </div>
                            <Input
                                placeholder="客户名称"
                                value={this.state.nameSearch}
                                style={{ width: 150, marginRight: 10, marginLeft: 10 }}
                                onChange={(e) => {
                                    this.setState({ nameSearch: e.target.value });
                                }}
                            />
                            <div style={{
                                marginTop: '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 });
                                    }}
                                />
                            </div>
                            <Button
                                type="primary"
                                style={{ marginLeft: "10px", marginRight: 10 }}
                                onClick={()=>{
                                    this.loadData();
                                }}
                            >
                                搜索
                            </Button>
                            <Button onClick={this.reset}>重置</Button>
                        </div>
                    </TabPane>
                    <TabPane tab="更改表格显示数据" key="2">
                        <div style={{ marginLeft: 10 }}>
                            <ChooseList
                                columns={this.state.columns}
                                changeFn={this.changeList}
                                changeList={this.state.changeList}
                                top={55}
                                margin={11}
                            />
                        </div>
                    </TabPane>
                </Tabs>
                <div className="patent-table">
                    <Spin spinning={this.state.loading}>
                        <Table
                            size="middle"
                            scroll={{ y: 550 }}
                            columns={
                                this.state.changeList
                                    ? this.state.changeList
                                    : this.state.columns
                            }
                            dataSource={this.state.dataSource}
                            pagination={false}
                        />
                    </Spin>
                </div>
                {this.state.customerVisible ? <CustomerDetails
                    aid={this.state.aid}
                    type={this.state.type}
                    aName={this.state.aName}
                    startTime={this.state.releaseDate[0]}
                    endTime={this.state.releaseDate[1]}
                    visible={this.state.customerVisible}
                    onCancel={()=>{
                        this.setState({
                            customerVisible: false,
                            aid: '',
                            type: '',
                        })
                    }}
                /> : <div/>}
            </div>
        )
    }
}

export default DepartmentStatistics;