crmCount.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597
  1. import React from 'react';
  2. import {Select, Spin, message, Table, Button, DatePicker, Tabs} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery';
  5. import './customer.less';
  6. import { post } from '@/dataDic.js';
  7. import moment from 'moment';
  8. import {ChooseList} from "../../../order/orderNew/chooseList";
  9. const { TabPane } = Tabs;
  10. const DiurnalStatisticsOne = React.createClass({
  11. loadData(timeTypes,totalArr) {
  12. let total=totalArr;
  13. this.setState({
  14. loading: true
  15. });
  16. $.ajax({
  17. method: "get",
  18. dataType: "json",
  19. crossDomain: false,
  20. url: globalConfig.context + "/api/admin/report/userDataStatistics",
  21. data: {
  22. depId:this.state.superId,//部门机构
  23. },
  24. success: function(data) {
  25. let thedata = data.data;
  26. let theArr = [];
  27. if(!thedata) {
  28. if(data.error && data.error.length) {
  29. message.warning(data.error[0].message);
  30. };
  31. thedata = {};
  32. } else {
  33. thedata.map(function(item, index) {
  34. let nub=index+1;
  35. theArr.push({
  36. key: index,
  37. theNumber:false,
  38. nub:nub,
  39. depName: item.depName,//部门
  40. name:item.name,//员工姓名
  41. signUser:item.signUser,//签单客户数
  42. fullUser:item.fullUser,//资料完善数
  43. dayFullUser:item.dayFullUser,//今日完善数
  44. dayNewUser:item.dayNewUser, //今日新增数
  45. countUser:item.countUser,//私有客户数
  46. signFullUser:item.signFullUser,//签单客户完善数
  47. })
  48. })
  49. }
  50. if(theArr.length){
  51. theArr.push(
  52. {
  53. key:9999999,
  54. theNumber:true,
  55. name:'合计',
  56. signUser:total.signUser,//签单客户数
  57. fullUser:total.fullUser,//资料完善数
  58. dayFullUser:total.dayFullUser,//今日完善数
  59. dayNewUser:total.dayNewUser,//今日新增数
  60. countUser:total.countUser,//私有客户数
  61. signFullUser:total.signFullUser,//签单客户完整数
  62. }
  63. )
  64. }
  65. this.setState({
  66. dataSource: theArr,
  67. })
  68. }.bind(this),
  69. }).always(function() {
  70. this.setState({
  71. loading: false
  72. });
  73. }.bind(this));
  74. },
  75. totalData(timeTypes) {
  76. this.setState({
  77. loading: true
  78. });
  79. $.ajax({
  80. method: "get",
  81. dataType: "json",
  82. crossDomain: false,
  83. url: globalConfig.context + "/api/admin/report/userDataStatisticsCount",
  84. data: {
  85. depId:this.state.superId,//部门机构
  86. },
  87. success: function(data) {
  88. let thedata = data.data;
  89. let theArr = [];
  90. if(!thedata) {
  91. if(data.error && data.error.length) {
  92. message.warning(data.error[0].message);
  93. };
  94. thedata = {};
  95. }
  96. this.loadData(timeTypes,thedata);
  97. this.selectSuperId();
  98. }.bind(this),
  99. }).always(function() {
  100. this.setState({
  101. loading: false
  102. });
  103. }.bind(this));
  104. },
  105. //时间选择
  106. selTime(value,index){
  107. this.setState({
  108. Dtime:value,
  109. selTime:index
  110. })
  111. },
  112. //获取上级组织
  113. selectSuperId() {
  114. this.state.data = []
  115. $.ajax({
  116. method: "get",
  117. dataType: "json",
  118. crossDomain: false,
  119. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  120. data:{
  121. },
  122. success: function (data) {
  123. let theArr = [];
  124. let theId=[];//用于保存上级组织的ID和名称
  125. let thedata=data.data;
  126. if (!thedata) {
  127. if (data.error && data.error.length) {
  128. message.warning(data.error[0].message);
  129. };
  130. thedata = {};
  131. };
  132. var contactIds=[];
  133. for(var i=0;i<data.data.length;i++){
  134. let theData = data.data[i];
  135. theArr.push(
  136. <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
  137. );
  138. theId.push(
  139. [theData.id,theData.name]
  140. );
  141. };
  142. this.setState({
  143. SuperArr:thedata,
  144. contactsOption: theArr,
  145. theId: theId,
  146. orderStatusOptions:data.data,
  147. });
  148. }.bind(this),
  149. }).always(function () {
  150. this.setState({
  151. loading: false
  152. });
  153. }.bind(this));
  154. },
  155. //判断浏览器类型
  156. getExplorer() {
  157. var explorer = window.navigator.userAgent;
  158. //ie
  159. if(explorer.indexOf("MSIE") >= 0) {
  160. return 'ie';
  161. }
  162. //firefox
  163. else if(explorer.indexOf("Firefox") >= 0) {
  164. return 'Firefox';
  165. }
  166. //Chrome
  167. else if(explorer.indexOf("Chrome") >= 0) {
  168. return 'Chrome';
  169. }
  170. //Opera
  171. else if(explorer.indexOf("Opera") >= 0) {
  172. return 'Opera';
  173. }
  174. //Safari
  175. else if(explorer.indexOf("Safari") >= 0) {
  176. return 'Safari';
  177. }
  178. },
  179. //导出为exel表格
  180. tabExel() {
  181. var table = document.querySelector('#daochu1');
  182. var idTmr;
  183. var ahtml = ' <a href="#" id="exportExcel" style="display:none" ></a>';//提供给下面自定义文件名的操作
  184. $("#daochu1").after(ahtml);
  185. //debugger;
  186. //整个表格拷贝到EXCEL中
  187. if(this.getExplorer() == 'ie') {
  188. var curTbl = document.getElementById(tableid);
  189. var oXL = new ActiveXObject("Excel.Application");
  190. //创建AX对象excel
  191. var oWB = oXL.Workbooks.Add();
  192. //获取workbook对象
  193. var xlsheet = oWB.Worksheets(1);
  194. //激活当前sheet
  195. var sel = document.body.createTextRange();
  196. sel.moveToElementText(curTbl);
  197. //把表格中的内容移到TextRange中
  198. sel.select();
  199. //全选TextRange中内容
  200. sel.execCommand("Copy");
  201. //复制TextRange中内容
  202. xlsheet.Paste();
  203. //粘贴到活动的EXCEL中
  204. oXL.Visible = true;
  205. //设置excel可见属性
  206. try {
  207. var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
  208. } catch(e) {
  209. print("Nested catch caught " + e);
  210. } finally {
  211. oWB.SaveAs(fname);
  212. oWB.Close(savechanges = false);
  213. //xls.visible = false;
  214. oXL.Quit();
  215. oXL = null;
  216. //结束excel进程,退出完成
  217. //window.setInterval("Cleanup();",1);
  218. idTmr = window.setInterval("Cleanup();", 1);
  219. }
  220. } else {
  221. this.tableToExcel(table,this.getExplorer());
  222. }
  223. function Cleanup() {
  224. window.clearInterval(idTmr);
  225. CollectGarbage();
  226. }
  227. },
  228. tableToExcel(table,name) {
  229. var worksheet = '表格'
  230. var uri = 'data:application/vnd.ms-excel;base64,',
  231. 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>`,
  232. base64 = function(s) {
  233. return window.btoa(unescape(encodeURIComponent(s)))
  234. },
  235. format = function(s, c) {
  236. return s.replace(/{(\w+)}/g,
  237. function(m, p) {
  238. return c[p];
  239. })
  240. }
  241. if(!table.nodeType) table = document.getElementById(table);
  242. var ctx = {
  243. worksheet: name || 'Worksheet',
  244. table: table.innerHTML
  245. };
  246. document.getElementById("exportExcel").href = uri
  247. + base64(format(template, ctx));
  248. document.getElementById("exportExcel").download = '客户资料统计' + ".xls";//自定义文件名
  249. document.getElementById("exportExcel").click();
  250. //window.location.href = uri + base64(format(template, ctx))
  251. },
  252. getInitialState() {
  253. return {
  254. releaseDate: [],
  255. selectedRowKeys: [],
  256. selectedRows: [],
  257. loading: false,
  258. visible: false,
  259. showDesc: false,
  260. timeState:false,
  261. weekColor:true,
  262. monthColor:false,
  263. quarterColor:false,
  264. yearColor:false,
  265. Dtime:undefined,
  266. selTime:'',
  267. columns: [
  268. {
  269. title: '序号',
  270. dataIndex: 'nub',
  271. width:50,
  272. key: 'nub',
  273. fixed:false,
  274. render:(text,record)=>{
  275. if(!record.theNumber){
  276. return text
  277. }else{
  278. return {
  279. children: text,
  280. props: {
  281. colSpan:0
  282. },
  283. }
  284. }
  285. }
  286. },{
  287. title: '姓名',
  288. fixed:false,
  289. dataIndex: 'name',
  290. key: 'name',
  291. render:(text,record)=>{
  292. if(!record.theNumber){
  293. return text
  294. }else{
  295. return {
  296. children: text,
  297. props: {
  298. colSpan:3
  299. },
  300. }
  301. }
  302. }
  303. },
  304. {
  305. title: '部门',
  306. dataIndex: 'depName',
  307. key: 'depName',
  308. fixed:false,
  309. width:300,
  310. render:(text,record)=>{
  311. if(!record.theNumber){
  312. return text //&&text.length>6?<span title={text}>{text.substr(0,6)+'…'}</span>:text
  313. }else{
  314. return {
  315. children: text,
  316. props: {
  317. colSpan:0
  318. },
  319. }
  320. }
  321. }
  322. },{
  323. title: '客户总数',
  324. fixed:false,
  325. dataIndex: 'countUser',
  326. key: 'countUser',
  327. render:(text,record)=>{
  328. if(!record.theNumber){
  329. return text
  330. }else{
  331. return {
  332. children: text,
  333. props: {
  334. colSpan:1
  335. },
  336. }
  337. }
  338. }
  339. },
  340. {
  341. title: '今日新增客户数',
  342. fixed:false,
  343. dataIndex: 'dayNewUser',
  344. key: 'dayNewUser',
  345. sorter: (a, b) => a.dayNewUser - b.dayNewUser,
  346. render:(text,record)=>{
  347. if(!record.theNumber){
  348. return text
  349. }else{
  350. return {
  351. children: text,
  352. props: {
  353. colSpan:1
  354. },
  355. }
  356. }
  357. }
  358. },
  359. {
  360. title: '完整客户总数',
  361. fixed:false,
  362. dataIndex: 'fullUser',
  363. key: 'fullUser',
  364. sorter: (a, b) => a.fullUser - b.fullUser,
  365. render:(text,record)=>{
  366. if(!record.theNumber){
  367. return text
  368. }else{
  369. return {
  370. children: text,
  371. props: {
  372. colSpan:1
  373. },
  374. }
  375. }
  376. }
  377. },
  378. {
  379. title: '今日完整客户数',
  380. fixed:false,
  381. dataIndex: 'dayFullUser',
  382. key: 'dayFullUser',
  383. sorter: (a, b) => a.dayFullUser - b.dayFullUser,
  384. render:(text,record)=>{
  385. if(!record.theNumber){
  386. return text
  387. }else{
  388. return {
  389. children: text,
  390. props: {
  391. colSpan:1
  392. },
  393. }
  394. }
  395. }
  396. },
  397. {
  398. title: '签单客户总数',
  399. fixed:false,
  400. dataIndex: 'signUser',
  401. key: 'signUser',
  402. sorter: (a, b) => a.signUser - b.signUser,
  403. render:(text,record)=>{
  404. if(!record.theNumber){
  405. return text
  406. }else{
  407. return {
  408. children: text,
  409. props: {
  410. colSpan:1
  411. },
  412. }
  413. }
  414. }
  415. },
  416. {
  417. title: '签单完整客户数',
  418. fixed:false,
  419. dataIndex: 'signFullUser',
  420. key: 'signFullUser',
  421. sorter: (a, b) => a.signFullUser - b.signFullUser,
  422. render:(text,record)=>{
  423. if(!record.theNumber){
  424. return text
  425. }else{
  426. return {
  427. children: text,
  428. props: {
  429. colSpan:1
  430. },
  431. }
  432. }
  433. }
  434. }
  435. ],
  436. dataSource: [],
  437. };
  438. },
  439. search() {
  440. this.totalData(0)
  441. },
  442. reset() {
  443. this.state.superId = undefined;//部门机构清零
  444. this.totalData(0);
  445. },
  446. week(){
  447. this.state.releaseDate[0] = undefined;//开始时间清零
  448. this.state.releaseDate[1] = undefined;//结束时间清零
  449. this.totalData(0);
  450. this.setState({
  451. weekColor:true,
  452. monthColor:false,
  453. quarterColor:false,
  454. yearColor:false
  455. })
  456. },
  457. month(){
  458. this.state.releaseDate[0] = undefined;//开始时间清零
  459. this.state.releaseDate[1] = undefined;//结束时间清零
  460. this.totalData(1);
  461. this.setState({
  462. weekColor:false,
  463. monthColor:true,
  464. quarterColor:false,
  465. yearColor:false
  466. })
  467. },
  468. quarter(){
  469. this.state.releaseDate[0] = undefined;//开始时间清零
  470. this.state.releaseDate[1] = undefined;//结束时间清零
  471. this.totalData(2);
  472. this.setState({
  473. weekColor:false,
  474. monthColor:false,
  475. quarterColor:true,
  476. yearColor:false
  477. })
  478. },
  479. year(){
  480. this.state.releaseDate[0] = undefined;//开始时间清零
  481. this.state.releaseDate[1] = undefined;//结束时间清零
  482. this.totalData(3);
  483. this.setState({
  484. weekColor:false,
  485. monthColor:false,
  486. quarterColor:false,
  487. yearColor:true
  488. })
  489. },
  490. componentWillMount() {
  491. this.totalData(0);
  492. let times=new Date();
  493. let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';
  494. this.setState({
  495. Nowtime:nowTime
  496. })
  497. },
  498. changeList(arr) {
  499. const newArr = [];
  500. this.state.columns.forEach(item => {
  501. arr.forEach(val => {
  502. if (val === item.title) {
  503. newArr.push(item);
  504. }
  505. });
  506. });
  507. this.setState({
  508. changeList: newArr
  509. });
  510. },
  511. render() {
  512. const { RangePicker } = DatePicker;
  513. let departmentArr = this.state.departmentArr || [];
  514. return(
  515. <div className='set-content'>
  516. <p style={{fontSize:'20px',marginBottom:'10px'}}>客户资料填写统计</p>
  517. <Tabs
  518. defaultActiveKey="1"
  519. className="test">
  520. <TabPane tab="搜索" key="1">
  521. <div className="clearfix" style={{ marginTop: 10 }}>
  522. <Button type="primary" onClick={this.tabExel} style={{float:'right'}}>导出到表格</Button>
  523. <span style={{fontSize:'16px'}}>部门机构 : </span>
  524. <Select placeholder="选择部门"
  525. style={{ width:'200px',marginRight:'10px' }}
  526. value={this.state.superId}
  527. onChange={(e) => { this.setState({ superId: e }) }} notFoundContent="未获取到上级组织列表">
  528. {this.state.contactsOption}
  529. </Select>
  530. <Button type="primary" onClick={this.search} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
  531. <Button onClick={this.reset}>重置</Button>
  532. </div>
  533. </TabPane>
  534. <TabPane tab="更改表格显示数据" key="2">
  535. <div style={{ marginLeft: 10 }}>
  536. <ChooseList
  537. columns={this.state.columns}
  538. changeFn={this.changeList}
  539. changeList={this.state.changeList}
  540. top={55}
  541. margin={11}
  542. />
  543. </div>
  544. </TabPane>
  545. </Tabs>
  546. <div id='daochu1'>
  547. <div className="surfaceTitle">
  548. <span>客户资料填写统计表</span>
  549. </div>
  550. <div className="patent-table">
  551. <div className="scroll">
  552. <Spin spinning={this.state.loading}>
  553. <Table columns={
  554. this.state.changeList
  555. ? this.state.changeList
  556. : this.state.columns
  557. }
  558. dataSource={this.state.dataSource}
  559. pagination={false}
  560. bordered
  561. size="small"
  562. />
  563. </Spin>
  564. </div>
  565. </div>
  566. </div>
  567. </div>
  568. )
  569. }
  570. });
  571. export default DiurnalStatisticsOne;