| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566 | import React from 'react';import {Select, Spin, Input, Table, Button, message, DatePicker, Tabs} from 'antd';import ajax from 'jquery/src/ajax/xhr.js';import $ from 'jquery/src/ajax';import './report.less';import { post } from '../../../dataDic.js';import {SearchInput} from "../../order/orderNew/changeComponent/searchInput";import {ChooseList} from "../../order/orderNew/chooseList";const { TabPane } = Tabs;const PersonalReport = React.createClass({	loadData(totalArr,pageNo) {		if(this.state.selTime){			var newTime=this.state.selTime;			var timeArr=newTime.split('-');			var txtTime=timeArr[0]+'年'+timeArr[1]+'月'+timeArr[2]+'日';			this.setState({				timeState:true,				txtTime:txtTime,			})		}		let total=totalArr;		this.setState({			loading: true		});		$.ajax({			method: "get",			dataType: "json",			crossDomain: false,			url: globalConfig.context + "/api/admin/report/sales/personal",			data: {				pNo: pageNo || 1,                pSize: 10,				date:this.state.selTime?(this.state.selTime+' '+'00:00:00'):'',				depName:this.state.departmentSearch,				name:this.state.uesrNameSearch,			},			success: function(data) {				let thedata = data.data;				let theArr = [];				if(!data.data) {					if(data.error && data.error.length) {						message.warning(data.error[0].message);					};					thedata = {};				} else {					thedata.map(function(item, index) {						var yTime=new Date(item.enrollTime).toLocaleDateString();						let nub=index+1;						theArr.push({							key: index,							theNumber:false,							nub:nub,							id: item.id,							name:item.name, //姓名							departmentName:item.departmentName,//部门							position:item.position, //职务							enrollTime:yTime,// 入职时间							dailyOrderCount:item.values.daily.orderCount,//日签单业绩							dailyOrderAmount:item.values.daily.orderAmount,//日签单业绩							weeklyOrderCount:item.values.weekly.orderCount,//周签单业绩							weeklyOrderAmount:item.values.weekly.orderAmount,//周签单业绩							monthlyOrderCount:item.values.monthly.orderCount,//月签单业绩							monthlyOrderAmount:item.values.monthly.orderAmount,//月签单业绩							quarterlyOrderCount:item.values.quarterly.orderCount,//季签单业绩							quarterlyOrderAmount:item.values.quarterly.orderAmount,//季签单业绩							annuallyOrderCount:item.values.annually.orderCount,//年签单业绩							annuallyOrderAmount:item.values.annually.orderAmount,//年签单业绩						})					})					this.state.pagination.current =pageNo;					this.state.pagination.total=total.totalRecordCount+Math.floor(total.totalRecordCount/10);				};				if(!data.data.length){					this.state.pagination.total=0;				};				if(theArr.length){					theArr.push(							{								key:9999999,								theNumber:true,								nub:data.data.length+1,								name:'',								position:'', //职务								enrollTime:'',// 入职时间								departmentName:'合计',								dailyOrderCount:total.dailyTotalCount,//日签单业绩								dailyOrderAmount:total.dailyTotalAmount,//日签单业绩								weeklyOrderCount:total.weeklyTotalCount,//周签单业绩								weeklyOrderAmount:total.weeklyTotalAmount,//周签单业绩								monthlyOrderCount:total.monthlyTotalCount,//月签单业绩								monthlyOrderAmount:total.monthlyTotalAmount,//月签单业绩								quarterlyOrderCount:total.quarterlyTotalCount,//季签单业绩								quarterlyOrderAmount:total.quarterlyTotalAmount,//季签单业绩								annuallyOrderCount:total.annuallyTotalCount,//年签单业绩								annuallyOrderAmount:total.annuallyTotalAmount,//年签单业绩							}						)					}				this.setState({                    dataSource: theArr,                    pagination: this.state.pagination,				})			}.bind(this),		}).always(function() {			this.setState({				loading: false			});		}.bind(this));	},	totalData(page) {		this.setState({			loading: true		});		$.ajax({			method: "get",			dataType: "json",			crossDomain: false,			url: globalConfig.context + "/api/admin/report/sales/total",			data: {				date:this.state.selTime?(this.state.selTime+' '+'00:00:00'):'',				depName:this.state.departmentSearch,				name:this.state.uesrNameSearch,			},			success: function(data) {				let thedata = data.data;				let theArr = [];				if(!thedata) {					if(data.error && data.error.length) {						message.warning(data.error[0].message);					};					thedata = {};				} 				this.loadData(thedata,page)			}.bind(this),		}).always(function() {			this.setState({				loading: false			});		}.bind(this));	},	departmentList() {		this.setState({			loading: true		});		$.ajax({			method: "get",			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));	},	getInitialState() {		return {			selectedRowKeys: [],			selectedRows: [],			loading: false,			visible: false,			showDesc: false,			timeState:false,			pagination: {                defaultCurrent: 1,                defaultPageSize: 11,                showQuickJumper: true,                pageSize: 11,                onChange: function (page) {                    this.totalData(page);                }.bind(this),                showTotal: function (total) {                    return '共' + total + '条数据';                }            },			columns: [			{				title: '序号',				dataIndex: 'nub',				width:50,				fixed:true,				key: 'nub',				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:1      						},				     	}				     					     }				     				}			},			{				title: '姓名',				dataIndex: 'name',				width:100,				fixed:true,				key: 'name',				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:0      						},				     	}				     					     }				     				}			},{				title: '部门',				dataIndex: 'departmentName',				width:100,				fixed:true,				key: 'departmentName',				render:(text,record)=>{				     if(!record.theNumber){				     	return text&&text.length>6?<span title={text}>{text.substr(0,6)+'…'}</span>:text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:4      						},				     	}				     					     }				     				}			}, 			{				title: '职务',				dataIndex: 'position',				key: 'position',				fixed:true,				width:100,				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:0      						},				     	}				     					     }				     				}			},{				title: '入职时间',				width:100,				fixed:true,				dataIndex: 'enrollTime',				key: 'enrollTime',				render:(text,record)=>{				     if(!record.theNumber){				     	return text				     }else{				     	return {				     		children: text,      						props: {      							colSpan:0      						},				     	}				     					     }				     				}			},{				title: '当日营销客户数',				children: [					{						title: '总数',						dataIndex: 'num',						width:70,						key: 'num',						sorter: (a, b) => a.num - b.num,					},{						title: '新增',						dataIndex: 'age2',						width:70,						key: 'age2',						sorter: (a, b) => a.age - b.age,					},{						title: '回访',						width:70,						dataIndex: 'age3',						key: 'age3',						sorter: (a, b) => a.age - b.age,					},{						title: '有效',						width:70,						dataIndex: 'age4',						key: 'age4',						sorter: (a, b) => a.age - b.age,					},				],			}, {				title: '当日营销方式',				children: [					{						title: '总数',						width:70,						dataIndex: 'age11',						key: 'age11',						sorter: (a, b) => a.age - b.age,					},{						title: '电话',						width:70,						dataIndex: 'age22',						key: 'age22',						sorter: (a, b) => a.age - b.age,					},{						title: '外拜',						width:70,						dataIndex: 'age33',						key: 'age33',						sorter: (a, b) => a.age - b.age,					},{						title: '邮件',						width:70,						dataIndex: 'age44',						key: 'age44',						sorter: (a, b) => a.age - b.age,					},{						title: '微信',						width:70,						dataIndex: 'age55',						key: 'age55',						sorter: (a, b) => a.age - b.age,					}				],			},			{				title: '本日签单业绩',				children: [					{						title: '数量',						width:70,						dataIndex: 'dailyOrderCount',						key: 'dailyOrderCount',						sorter: (a, b) => a.dailyOrderCount - b.dailyOrderCount,					},{						title: '金额',						width:70,						dataIndex: 'dailyOrderAmount',						key: 'dailyOrderAmount',						sorter: (a, b) => a.dailyOrderAmount - b.dailyOrderAmount,					}				],			},{				title: '本周签单业绩',				children: [					{						title: '数量',						width:70,						dataIndex: 'weeklyOrderCount',						key: 'weeklyOrderCount',						sorter: (a, b) => a.weeklyOrderCount - b.weeklyOrderCount,					},{						title: '金额',						width:70,						dataIndex: 'weeklyOrderAmount',						key: 'weeklyOrderAmount',						sorter: (a, b) => a.weeklyOrderAmount - b.weeklyOrderAmount,					}				],			},{				title: '本月签单业绩',				children: [					{						title: '数量',						width:70,						dataIndex: 'monthlyOrderCount',						key: 'monthlyOrderCount',						sorter: (a, b) => a.monthlyOrderCount - b.monthlyOrderCount,					},{						title: '金额',						width:70,						dataIndex: 'monthlyOrderAmount',						key: 'monthlyOrderAmount',						sorter: (a, b) => a.monthlyOrderAmount - b.monthlyOrderAmount,					}				],			},{				title: '本季签单业绩',				children: [					{						title: '数量',						width:70,						dataIndex: 'quarterlyOrderCount',						key: 'quarterlyOrderCount',						sorter: (a, b) => a.quarterlyOrderCount - b.quarterlyOrderCount,					},{						title: '金额',						width:70,						dataIndex: 'quarterlyOrderAmount',						key: 'quarterlyOrderAmount',						sorter: (a, b) => a.quarterlyOrderAmount - b.quarterlyOrderAmount,					}				],			},{				title: '本年签单业绩',				children: [					{						title: '数量',						width:70,						dataIndex: 'annuallyOrderCount',						key: 'annuallyOrderCount',						sorter: (a, b) => a.annuallyOrderCount - b.annuallyOrderCount,					},{						title: '金额',						width:70,						dataIndex: 'annuallyOrderAmount',						key: 'annuallyOrderAmount',						sorter: (a, b) => a.annuallyOrderAmount - b.annuallyOrderAmount,					}				],			}			],			dataSource: [],		};	},	search() {		this.totalData()	},	reset() {		this.state.departmentSearch = undefined;		this.state.postSearch = undefined;		this.state.uesrNameSearch = '';		this.state.Dtime = undefined;		this.state.selTime='';		this.state.timeState=false;		this.totalData();	},	//时间选择    selTime(value,index){    	this.setState({    		Dtime:value,    		selTime:index    	})    },	componentWillMount() {		this.departmentList();		this.totalData();		let times=new Date();		let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';		this.setState({			Nowtime:nowTime		})	},	changeList(arr) {		const newArr = [];		this.state.columns.forEach(item => {			arr.forEach(val => {				if (val === item.title) {					newArr.push(item);				}			});		});		this.setState({			changeList: newArr		});	},	render() {		let departmentArr = this.state.departmentArr || [];		return(			<div className='set-content'>				<span style={{fontSize:'20px'}}>个人业绩统计报表</span>				<Tabs defaultActiveKey="1" className="test">					<TabPane tab="搜索" key="1">						<div className="clearfix">							<Select placeholder="部门机构"									style={{ width: 150 ,marginRight:'10px',marginTop:'10px',marginBottom:'10px'}}									value={this.state.departmentSearch}									onChange={(e) => { this.setState({ departmentSearch: e }) }}>								{									departmentArr.map(function (item) {										return <Select.Option key={item.name} >{item.name}</Select.Option>									})								}							</Select>							<Input  value={this.state.uesrNameSearch} placeholder="用户姓名" style={{width:'150px',marginRight:'5px'}}									onChange={(e)=>{this.setState({uesrNameSearch:e.target.value})}} />							<span style={{fontSize:'16px'}}>选择日期 : </span>							<DatePicker onChange={this.selTime} value={this.state.Dtime}/>							<Button type="primary" onClick={this.search} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</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="surfaceTitle">					<span className="nowtime">{this.state.timeState?this.state.txtTime:this.state.Nowtime}</span>					<span>个人营销业绩统计表</span>					<span>(每日17:00统计当天数据)</span>				</div>				<div className="patent-table">					<div className="scroll">	                    <Spin spinning={this.state.loading}>	                        <Table columns={								this.state.changeList									? this.state.changeList									: this.state.columns							}	                            dataSource={this.state.dataSource}	                            bordered	                            scroll={{x:1780}}	                            pagination={this.state.pagination}	                            />	                    </Spin>	                </div>	            </div>			</div>		)	}});export default PersonalReport;
 |