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: "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> ); }, }, { 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: "transferCount", key: "transferCount", 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: 8, }) } }}> {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: "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: <div style={{ color: 'red' }}> <div>重点客户</div> <div>(一个月内预签)</div> </div>, dataIndex: "keynoteCount", key: "keynoteCount", className: 'tableRowStyle', width: 120, }, { title: <div style={{ color: 'orange' }}> <div>意向客户</div> <div>(半年内预签)</div> </div>, dataIndex: "intentionCount", key: "intentionCount", className: 'tableRowStyle', width: 120, }, { title: <div style={{ color: 'green' }}> <div>一般客户</div> <div>(一年以上预签)</div> </div>, dataIndex: "generalCount", key: "generalCount", className: 'tableRowStyle', width: 120, }, ], contactsOption: null, loading: false, ispage: 1, aid: '', type: '', visible: false, exportPendingLoading: 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); this.exportExec = this.exportExec.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) ); }; exportExec() { message.config({ duration: 20, }); let loading = message.loading("下载中..."); this.setState({ exportPendingLoading: true, }); let data = { depId: this.state.superId, aName: this.state.nameSearch, startTime: this.state.releaseDate[0], endTime: this.state.releaseDate[1], } $.ajax({ method: "get", dataType: "json", crossDomain: false, url: '/api/admin/customer/selectAllUser/export', data, success: function (data) { if (data.error.length === 0) { this.download(data.data); } else { message.warning(data.error[0].message); } }.bind(this), }).always( function () { loading(); this.setState({ exportPendingLoading: false, }); }.bind(this) ); } download(fileName) { window.location.href = globalConfig.context + "/open/download?fileName=" + fileName; } //表格数据处理 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 showSearch optionFilterProp="children" 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> <TabPane tab="导出" key="3"> <div style={{ float: "left" }}> <Button type='primary' loading={this.state.exportPendingLoading} onClick={this.exportExec} style={{ margin: 10 }} > 导出excel </Button> </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;