import React from 'react'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import "./statistics.less" import { Button, Select, Table, Spin, message, Tabs, DatePicker } from 'antd'; const TabPane = Tabs.TabPane; import moment from 'moment'; import { intentionalService } from '../../../dataDic.js'; const StatusStatistics = React.createClass({ loadData(pageNo, nub) { this.state.data = []; this.setState({ loading: true }); let urls = ''; switch(nub) { case "1": urls = ""; break; //日 case "2": urls = "daySpan"; break; //日 case "3": urls = "weekSpan"; break; //周 case "4": urls = "monthSpan"; break; //月 case "5": urls = "quarterSpan"; break; //季 case "6": urls = "yearSpan"; break; //年 default: urls =''; } $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/customerStatistics", data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, startDate: this.state.releaseDate[0], endDate: this.state.releaseDate[1], timeSpan:this.state.releaseDate[0]?'':urls, businessGlossoryId:this.state.intentionalSearch, depId:this.state.depId, depNo:this.state.departmentt }, success: function(data) { let theArr = []; if(!data.data || !data.data.list) { if(data.error && data.error.length) { message.warning(data.error[0].message); }; } else { for(let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; theArr.push({ key: i, id: thisdata.id, adminName: thisdata.adminName, departmentName: thisdata.departmentName, newNo: thisdata.newNo, intentionNo: thisdata.intentionNo, pointNo: thisdata.pointNo, interviewNo: thisdata.interviewNo, signNo: thisdata.signNo, refuseNo: thisdata.refuseNo, stopNo: thisdata.stopNo, }); }; this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; }; if(!data.data.list.length){ this.state.pagination.current=0; this.state.pagination.total=0; } this.setState({ dataSource: theArr, pagination: this.state.pagination }); }.bind(this), }).always(function() { this.setState({ loading: false }); }.bind(this)); }, getInitialState() { return { releaseDate: [], loading: false, callnub:'1', pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function(page) { this.call(page) }.bind(this), showTotal: function(total) { return '共' + total + '条数据'; } }, columns: [{ title: '营销员', dataIndex: 'adminName', key: 'adminName', }, { title: '部门', dataIndex: 'departmentName', key: 'departmentName', }, { title: '新客户数', dataIndex: 'newNo', key: 'newNo', }, { title: '意向客户数', dataIndex: 'intentionNo', key: 'intentionNo', }, { title: '重点客户数', dataIndex: 'pointNo', key: 'pointNo', }, { title: '面谈客户数', dataIndex: 'interviewNo', key: 'interviewNo', }, { title: '签单客户数', dataIndex: 'stopNo', key: 'stopNo', }, { title: '被拒绝客户数', dataIndex: 'refuseNo', key: 'refuseNo', }] } }, //部门 departmentList() { this.setState({ loading: true }); $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/organization/selectSuperId", data: { }, success: function(data) { let thedata = data.data; let theArr=[]; if(!thedata) { if(data.error && data.error.length) { message.warning(data.error[0].message); }; thedata = {}; }else{ thedata.map(function(item,index){ theArr.push({ key:index, name:item.name, id:item.id, depNo:item.depNo }) }) } this.setState({ departmentArr:theArr, }) }.bind(this), }).always(function() { this.setState({ loading: false }); }.bind(this)); }, callback(e) { this.setState({ callnub: e, releaseDate:[] }) this.loadData(1, e) }, call(a){ this.loadData(a, this.state.callnub) }, search() { if(this.state.releaseDate[0]){ this.setState({ callnub:'1' }) }else{ this.state.releaseDate=[] } this.loadData(1, this.state.callnub) }, reset() { this.state.departmentt=undefined; this.state.releaseDate = []; this.state.intentionalSearch = undefined; this.loadData(1, this.state.callnub); }, componentWillMount() { this.loadData(); this.departmentList() }, render() { const { RangePicker } = DatePicker; let departmentArr = this.state.departmentArr || []; return <div className="visitContant"> <div className="visitTitle"> <span className="titleTime">起止时间</span> <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 }); }} /> <span style={{marginRight:'15px',marginLeft:'15px'}}>业务类型:</span> <Select placeholder="业务品种" value={this.state.intentionalSearch} onChange={(e) => { this.setState({intentionalSearch:e})}} style={{width:'150px'}}> { intentionalService.map(function (item) { return <Select.Option key={item.value} >{item.key}</Select.Option> }) } </Select> <span style={{marginRight:'15px',marginLeft:'15px'}}>部门:</span> <Select placeholder="选择部门" style={{width:'150px'}} value={this.state.departmentt} onChange={(e) => { this.setState({ departmentt: e }) }}> { departmentArr.map(function (item) { return <Select.Option key={item.depNo} >{item.name}</Select.Option> }) } </Select> <Button onClick={this.search} className="blue" style={{background:'red',color:'#ffffff',border:'none'}}>统计</Button> <Button onClick={this.reset} className="green" style={{background:'green',color:'#ffffff',border:'none'}}>重置</Button> <div className="clearfix" style={{marginTop:'30px',marginLeft:'20px'}}> <Tabs onChange={this.callback} type="card" activeKey={this.state.callnub}> <TabPane tab="所有业务客户状态" key="1"></TabPane> <TabPane tab="本日业务客户状态" key="2"></TabPane> <TabPane tab="本周业务客户状态" key="3"></TabPane> <TabPane tab="本月业务客户状态" key="4"></TabPane> <TabPane tab="本季业务客户状态" key="5"></TabPane> <TabPane tab="本年业务客户状态" key="6"></TabPane> </Tabs> </div> <div className="clearfix"> <div className="maintitle">业务客户状态情况统计表</div> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table columns={this.state.columns} dataSource={this.state.dataSource} pagination={this.state.pagination} onRowClick={this.tableRowClick} /> </Spin> </div> </div> </div> </div> } }); export default StatusStatistics;