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;