kede-client/js/component/manageCenter/customer/report/personalReport.jsx

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;