| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524 | 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: [moment(Date.now() - 777600000).format('YYYY-MM-DD'), moment(Date.now()).format('YYYY-MM-DD')],            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: [moment(Date.now() - 777600000).format('YYYY-MM-DD'), moment(Date.now()).format('YYYY-MM-DD')],        }, () => {            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                                    allowClear={window.adminData.shiroList.indexOf("11") == -1}                                    disabledDate={(current) => {//“运营管理”角色只能查看部分时间段(暂时10天)的数据                                        let iskeep = window.adminData.shiroList.indexOf("11") != -1                                        return iskeep && current && current.valueOf() < Date.now() - 864000000;                                    }}                                    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;
 |