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

import React from 'react';
import {Select, Spin, Input, Table, Button, 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 {ChooseList} from "../../order/orderNew/chooseList";

const { TabPane } = Tabs;

const PersonalReport = React.createClass({
	loadData(totalArr) {
		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/department",
			data: {
				date:this.state.selTime?(this.state.selTime+' '+'00:00:00'):'',
			},
			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) {
						let nub=index+1;
						theArr.push({
							key: index,
							theNumber:false,
							nub:nub,
							id: item.id,
							departmentName:item.departmentName,//部门
							managerName:item.managerName,//负责人
							memberCount:item.memberCount, //部门人数
							enrollTime:item.enrollTime,// 入职时间
							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,//年签单业绩
						})
					})
				}
				if(theArr.length){
					theArr.push(
						{
							key:9999999,
							theNumber:true,
							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,
				})
			}.bind(this),
		}).always(function() {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	totalData() {
		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'):'',
			},
			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)
			}.bind(this),
		}).always(function() {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	//时间选择
    selTime(value,index){
    	this.setState({
    		Dtime:value,
    		selTime:index
    	})
    },
	getInitialState() {
		return {
			selectedRowKeys: [],
			selectedRows: [],
			loading: false,
			visible: false,
			showDesc: false,
			timeState:false,
			Dtime:undefined,
			selTime:'',
			columns: [
			{
				title: '序号',
				dataIndex: 'nub',
				width:50,
				key: 'nub',
				fixed:true,
				render:(text,record)=>{
				     if(!record.theNumber){
				     	return text
				     }else{
				     	return {
				     		children: text,
      						props: {
      							colSpan:0
      						},
				     	}
				     	
				     }
				     
				}
			},
			{
				title: '部门',
				dataIndex: 'departmentName',
				key: 'departmentName',
				width:100,
				fixed:true,
				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: '负责人',
				width:100,
				fixed:true,
				dataIndex: 'managerName',
				key: 'managerName',
				render:(text,record)=>{
				     if(!record.theNumber){
				     	return text
				     }else{
				     	return {
				     		children: text,
      						props: {
      							colSpan:0
      						},
				     	}
				     	
				     }
				     
				}
			}, 
			{
				title: '部门人数',
				width:100,
				fixed:true,
				dataIndex: 'memberCount',
				key: 'memberCount',
				render:(text,record)=>{
				     if(!record.theNumber){
				     	return text
				     }else{
				     	return {
				     		children: text,
      						props: {
      							colSpan:0
      						},
				     	}
				     	
				     }
				     
				}
			},{
				title: '当日业绩',
				children: [
					{
						title: '单量',
						dataIndex: 'dailyOrderCount',
						width:70,
						key: 'dailyOrderCount',
						sorter: (a, b) => a.dailyOrderCount - b.dailyOrderCount,
					},{
						title: '金额',
						dataIndex: 'dailyOrderAmount',
						width:70,
						key: 'dailyOrderAmount',
						sorter: (a, b) => a.dailyOrderAmount - b.dailyOrderAmount,
					}
				],
			},
			{
				title: '当日人均业绩',
				children: [
					{
						title: '人均有效',
						dataIndex: 'num6611',
						key: 'num6611',
						width:100,
						sorter: (a, b) => a.num66 - b.num66,
					},{
						title: '人均单量',
						dataIndex: 'age262',
						key: 'age262',
						width:100,
						sorter: (a, b) => a.age - b.age,
					},{
						title: '人均金额',
						dataIndex: 'age26',
						width:100,
						key: 'age26',
						sorter: (a, b) => a.age - b.age,
					}
				],
			},
			{
				title: '当日客户营销',
				children: [
					{
						title: '客户总量',
						dataIndex: 'anum66',
						key: 'anum66',
						width:100,
						sorter: (a, b) => a.num66 - b.num66,
					},{
						title: '新增营销',
						dataIndex: 'aage266',
						key: 'aage266',
						width:100,
						sorter: (a, b) => a.age - b.age,
					},
					{
						title: '营销回访',
						dataIndex: 'age266p',
						key: 'age266p',
						width:100,
						sorter: (a, b) => a.age - b.age,
					}
				],
			},
			{
				title: '当日客户有效',
				children: [
					{
						title: '有效总量',
						width:100,
						dataIndex: 'num',
						key: 'num',
						sorter: (a, b) => a.num - b.num,
					},{
						title: '新增有效',
						width:100,
						dataIndex: 'age2',
						key: 'age2',
						sorter: (a, b) => a.age - b.age,
					},{
						title: '有效回访',
						width:100,
						dataIndex: 'age3',
						key: 'age3',
						sorter: (a, b) => a.age - b.age,
					}
				],
			}, {
				title: '当日客户拜访',
				children: [
					{
						title: '拜访总量',
						width:100,
						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: '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,
					}
				],
			},
			{
				title: '本周人均',
				children: [
					{
						title: '有效',
						width:70,
						dataIndex: 'annuallyOrderCounty',
						key: 'annuallyOrderCounty',
						sorter: (a, b) => a.annuallyOrderCount1 - b.annuallyOrderCount1,
					},{
						title: '单量',
						width:70,
						dataIndex: 'annuallyOrderAmountt',
						key: 'annuallyOrderAmountt',
						sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
					},
					{
						title: '金额',
						width:70,
						dataIndex: 'annuallyOrderAmount1',
						key: 'annuallyOrderAmount1',
						sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
					}
				],
			},{
				title: '本月人均',
				children: [
					{
						title: '有效',
						width:70,
						dataIndex: 'annuallyOrderCountv',
						key: 'annuallyOrderCountv',
						sorter: (a, b) => a.annuallyOrderCount1 - b.annuallyOrderCount1,
					},{
						title: '单量',
						width:70,
						dataIndex: 'annuallyOrderAmountv',
						key: 'annuallyOrderAmountv',
						sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
					},
					{
						title: '金额',
						width:70,
						dataIndex: 'annuallyOrderAmount1v',
						key: 'annuallyOrderAmount1v',
						sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
					}
				],
			},{
				title: '本季人均',
				children: [
					{
						title: '有效',
						width:70,
						dataIndex: 'annuallyOrderCountc',
						key: 'annuallyOrderCountc',
						sorter: (a, b) => a.annuallyOrderCount1 - b.annuallyOrderCount1,
					},{
						title: '单量',
						width:70,
						dataIndex: 'annuallyOrderAmountb',
						key: 'annuallyOrderAmountb',
						sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
					},
					{
						title: '金额',
						width:70,
						dataIndex: 'annuallyOrderAmounta',
						key: 'annuallyOrderAmounta',
						sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
					}
				],
			},{
				title: '本年人均',
				children: [
					{
						title: '有效',
						width:70,
						dataIndex: 'annuallyOrderCount2',
						key: 'annuallyOrderCount2',
						sorter: (a, b) => a.annuallyOrderCount1 - b.annuallyOrderCount1,
					},{
						title: '单量',
						width:70,
						dataIndex: 'annuallyOrderAmount3',
						key: 'annuallyOrderAmount3',
						sorter: (a, b) => a.annuallyOrderAmoun1t - b.annuallyOrderAmoun1t,
					},
					{
						title: '金额',
						width:70,
						dataIndex: 'annuallyOrderAmount4',
						key: 'annuallyOrderAmount4',
						sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
					}
				],
			}
			],
			dataSource: [],
		};
	},
	search() {
		this.totalData()
	},
	reset() {
		this.state.Dtime = undefined;
		this.state.selTime='';
		this.state.timeState=false;
		this.totalData()
	},
	changeList(arr) {
		const newArr = [];
		this.state.columns.forEach(item => {
			arr.forEach(val => {
				if (val === item.title) {
					newArr.push(item);
				}
			});
		});
		this.setState({
			changeList: newArr
		});
	},
	componentWillMount() {
		this.totalData();
		let times=new Date();
		let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';
		this.setState({
			Nowtime:nowTime
		})
	},
	render() {
		let departmentArr = this.state.departmentArr || [];
		return(
			<div className='set-content'>
				<p style={{fontSize:'20px',marginBottom:'10px'}}>部门业绩统计报表</p>
				<Tabs
					defaultActiveKey="1"
					onChange={this.callback}
					className="test">
					<TabPane tab="搜索" key="1">
						<div className="clearfix">
							<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}
	                            scroll={{ x: 3200,y:500}}
	                            bordered
								pagination={false}
								size="small"
	                            />
	                    </Spin>
	                </div>
	            </div>
			</div>
		)
	}
});

export default PersonalReport;