crmCount.jsx 17 KB

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