kede-client/js/component/manageCenter/customer/NEW/crm/crmCount.jsx

import React from 'react';
import { Select, Spin, message, Table, Button, DatePicker, Tabs } from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery';
import './customer.less';
import { post } from '@/dataDic.js';
import moment from 'moment';
import { ChooseList } from "../../../order/orderNew/chooseList";
import { onReplace } from '@/tools.js';

const { TabPane } = Tabs;

const DiurnalStatisticsOne = React.createClass({
	loadData(timeTypes, totalArr) {
		let total = totalArr;
		this.setState({
			loading: true
		});
		$.ajax({
			method: "get",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + "/api/admin/report/userDataStatistics",
			data: {

				depId: this.state.superId,//部门机构
			},
			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,
							depName: item.depName,//部门
							name: item.name,//员工姓名
							signUser: item.signUser,//签单客户数
							fullUser: item.fullUser,//资料完善数
							dayFullUser: item.dayFullUser,//今日完善数
							dayNewUser: item.dayNewUser, //今日新增数
							countUser: item.countUser,//私有客户数
							signFullUser: item.signFullUser,//签单客户完善数
						})
					})
				}
				if (theArr.length) {
					theArr.push(
						{
							key: 9999999,
							theNumber: true,
							name: '合计',
							signUser: total.signUser,//签单客户数
							fullUser: total.fullUser,//资料完善数
							dayFullUser: total.dayFullUser,//今日完善数
							dayNewUser: total.dayNewUser,//今日新增数
							countUser: total.countUser,//私有客户数
							signFullUser: total.signFullUser,//签单客户完整数
						}
					)
				}
				this.setState({
					dataSource: theArr,
				})
			}.bind(this),
		}).always(function () {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	totalData(timeTypes) {
		this.setState({
			loading: true
		});
		$.ajax({
			method: "get",
			dataType: "json",
			crossDomain: false,
			url: globalConfig.context + "/api/admin/report/userDataStatisticsCount",
			data: {
				depId: this.state.superId,//部门机构
			},
			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(timeTypes, thedata);
				this.selectSuperId();
			}.bind(this),
		}).always(function () {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	//时间选择
	selTime(value, index) {
		this.setState({
			Dtime: value,
			selTime: index
		})
	},
	//获取上级组织
	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 = {};
				};
				var contactIds = [];
				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,
				});

			}.bind(this),
		}).always(function () {
			this.setState({
				loading: false
			});
		}.bind(this));
	},
	//判断浏览器类型
	getExplorer() {
		var explorer = window.navigator.userAgent;
		//ie 
		if (explorer.indexOf("MSIE") >= 0) {
			return 'ie';
		}
		//firefox 
		else if (explorer.indexOf("Firefox") >= 0) {
			return 'Firefox';
		}
		//Chrome
		else if (explorer.indexOf("Chrome") >= 0) {
			return 'Chrome';
		}
		//Opera
		else if (explorer.indexOf("Opera") >= 0) {
			return 'Opera';
		}
		//Safari
		else if (explorer.indexOf("Safari") >= 0) {
			return 'Safari';
		}
	},
	//导出为exel表格
	tabExel() {
		var table = document.querySelector('#daochu1');
		var idTmr;
		var ahtml = ' <a href="#" id="exportExcel" style="display:none" ></a>';//提供给下面自定义文件名的操作
		$("#daochu1").after(ahtml);
		//debugger;
		//整个表格拷贝到EXCEL中
		if (this.getExplorer() == 'ie') {
			var curTbl = document.getElementById(tableid);
			var oXL = new ActiveXObject("Excel.Application");
			//创建AX对象excel 
			var oWB = oXL.Workbooks.Add();
			//获取workbook对象 
			var xlsheet = oWB.Worksheets(1);
			//激活当前sheet 
			var sel = document.body.createTextRange();
			sel.moveToElementText(curTbl);
			//把表格中的内容移到TextRange中 
			sel.select();
			//全选TextRange中内容 
			sel.execCommand("Copy");
			//复制TextRange中内容  
			xlsheet.Paste();
			//粘贴到活动的EXCEL中
			oXL.Visible = true;
			//设置excel可见属性
			try {
				var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
			} catch (e) {
				print("Nested catch caught " + e);
			} finally {
				oWB.SaveAs(fname);

				oWB.Close(savechanges = false);
				//xls.visible = false;
				oXL.Quit();
				oXL = null;
				//结束excel进程，退出完成
				//window.setInterval("Cleanup();",1);
				idTmr = window.setInterval("Cleanup();", 1);
			}
		} else {
			this.tableToExcel(table, this.getExplorer());
		}
		function Cleanup() {
			window.clearInterval(idTmr);
			CollectGarbage();
		}
	},
	tableToExcel(table, name) {
		var worksheet = '表格'
		var uri = 'data:application/vnd.ms-excel;base64,',
			template = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>${worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>`,
			base64 = function (s) {
				return window.btoa(unescape(encodeURIComponent(s)))
			},
			format = function (s, c) {
				return s.replace(/{(\w+)}/g,
					function (m, p) {
						return c[p];
					})
			}
		if (!table.nodeType) table = document.getElementById(table);
		var ctx = {
			worksheet: name || 'Worksheet',
			table: table.innerHTML
		};
		document.getElementById("exportExcel").href = uri
			+ base64(format(template, ctx));
		document.getElementById("exportExcel").download = '客户资料统计' + ".xls";//自定义文件名
		document.getElementById("exportExcel").click();
		//window.location.href = uri + base64(format(template, ctx))
	},
	getInitialState() {
		return {
			releaseDate: [],
			selectedRowKeys: [],
			selectedRows: [],
			loading: false,
			visible: false,
			showDesc: false,
			timeState: false,
			weekColor: true,
			monthColor: false,
			quarterColor: false,
			yearColor: false,
			Dtime: undefined,
			selTime: '',
			columns: [
				{
					title: '序号',
					dataIndex: 'nub',
					width: 50,
					key: 'nub',
					fixed: false,
					render: (text, record) => {
						if (!record.theNumber) {
							return text
						} else {
							return {
								children: text,
								props: {
									colSpan: 0
								},
							}

						}

					}
				}, {
					title: '姓名',
					fixed: false,
					dataIndex: 'name',
					key: 'name',
					render: (text, record) => {
						if (!record.theNumber) {
							return onReplace(text)
						} else {
							return {
								children: onReplace(text),
								props: {
									colSpan: 3
								},
							}

						}

					}
				},
				{
					title: '部门',
					dataIndex: 'depName',
					key: 'depName',
					fixed: false,
					width: 300,
					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: 0
								},
							}

						}

					}
				}, {
					title: '客户总数',
					fixed: false,
					dataIndex: 'countUser',
					key: 'countUser',
					render: (text, record) => {
						if (!record.theNumber) {
							return text
						} else {
							return {
								children: text,
								props: {
									colSpan: 1
								},
							}

						}

					}
				},
				{
					title: '今日新增客户数',
					fixed: false,
					dataIndex: 'dayNewUser',
					key: 'dayNewUser',
					sorter: (a, b) => a.dayNewUser - b.dayNewUser,
					render: (text, record) => {
						if (!record.theNumber) {
							return text
						} else {
							return {
								children: text,
								props: {
									colSpan: 1
								},
							}

						}

					}
				},
				{
					title: '完整客户总数',
					fixed: false,
					dataIndex: 'fullUser',
					key: 'fullUser',
					sorter: (a, b) => a.fullUser - b.fullUser,
					render: (text, record) => {
						if (!record.theNumber) {
							return text
						} else {
							return {
								children: text,
								props: {
									colSpan: 1
								},
							}

						}

					}
				},
				{
					title: '今日完整客户数',
					fixed: false,
					dataIndex: 'dayFullUser',
					key: 'dayFullUser',
					sorter: (a, b) => a.dayFullUser - b.dayFullUser,
					render: (text, record) => {
						if (!record.theNumber) {
							return text
						} else {
							return {
								children: text,
								props: {
									colSpan: 1
								},
							}

						}

					}
				},
				{
					title: '签单客户总数',
					fixed: false,
					dataIndex: 'signUser',
					key: 'signUser',
					sorter: (a, b) => a.signUser - b.signUser,
					render: (text, record) => {
						if (!record.theNumber) {
							return text
						} else {
							return {
								children: text,
								props: {
									colSpan: 1
								},
							}

						}

					}
				},
				{
					title: '签单完整客户数',
					fixed: false,
					dataIndex: 'signFullUser',
					key: 'signFullUser',
					sorter: (a, b) => a.signFullUser - b.signFullUser,
					render: (text, record) => {
						if (!record.theNumber) {
							return text
						} else {
							return {
								children: text,
								props: {
									colSpan: 1
								},
							}

						}

					}
				}
			],
			dataSource: [],
		};
	},
	search() {
		this.totalData(0)
	},
	reset() {
		this.state.superId = undefined;//部门机构清零
		this.totalData(0);
	},
	week() {
		this.state.releaseDate[0] = undefined;//开始时间清零
		this.state.releaseDate[1] = undefined;//结束时间清零
		this.totalData(0);
		this.setState({
			weekColor: true,
			monthColor: false,
			quarterColor: false,
			yearColor: false
		})
	},
	month() {
		this.state.releaseDate[0] = undefined;//开始时间清零
		this.state.releaseDate[1] = undefined;//结束时间清零
		this.totalData(1);
		this.setState({
			weekColor: false,
			monthColor: true,
			quarterColor: false,
			yearColor: false
		})
	},
	quarter() {
		this.state.releaseDate[0] = undefined;//开始时间清零
		this.state.releaseDate[1] = undefined;//结束时间清零
		this.totalData(2);
		this.setState({
			weekColor: false,
			monthColor: false,
			quarterColor: true,
			yearColor: false
		})
	},
	year() {
		this.state.releaseDate[0] = undefined;//开始时间清零
		this.state.releaseDate[1] = undefined;//结束时间清零
		this.totalData(3);
		this.setState({
			weekColor: false,
			monthColor: false,
			quarterColor: false,
			yearColor: true
		})
	},
	componentWillMount() {
		this.totalData(0);
		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() {
		const { RangePicker } = DatePicker;
		let departmentArr = this.state.departmentArr || [];
		return (
			<div className='set-content'>
				<span style={{ fontWeight: 900, fontSize: 16 }}>客户资料填写统计</span>
				<Tabs
					defaultActiveKey="1"
					className="test">
					<TabPane tab="搜索" key="1">
						<div className="clearfix" style={{ marginTop: 10 }}>
							<Button type="primary" onClick={this.tabExel} style={{ float: 'right' }}>导出到表格</Button>
							<span style={{ fontSize: '16px' }}>部门机构 : </span>
							<Select placeholder="选择部门"
								style={{ width: '200px', marginRight: '10px' }}
								value={this.state.superId}
								onChange={(e) => { this.setState({ superId: e }) }} notFoundContent="未获取到上级组织列表">
								{this.state.contactsOption}
							</Select>

							<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 id='daochu1'>
					<div className="surfaceTitle">
						<span style={{ fontWeight: 900, fontSize: 16 }}>客户资料填写统计表</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}
									pagination={false}
									bordered
									size="small"
								/>
							</Spin>
						</div>
					</div>
				</div>
			</div>
		)
	}
});

export default DiurnalStatisticsOne;