orderStatistics.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806
  1. import React from 'react';
  2. import { Select, Spin, Input, Table, Button ,DatePicker, Form , Tabs , Switch,message} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import './report.less';
  6. import { post,taskStatus,publishStatus } from '../../../dataDic.js';
  7. import moment from 'moment';
  8. const TabPane = Tabs.TabPane;
  9. const DiurnalStatistics = React.createClass({
  10. loadData(timeTypes) {
  11. this.setState({
  12. loading: true
  13. });
  14. $.ajax({
  15. method: "get",
  16. dataType: "json",
  17. crossDomain: false,
  18. url: globalConfig.context + "/api/admin/report/technicalDepStatistics",
  19. data: {
  20. type:'1',
  21. timeType:this.state.releaseDate[0]?4:timeTypes,
  22. startTime: this.state.releaseDate[0],
  23. endTime: this.state.releaseDate[1],
  24. depId:this.state.superId,//部门机构
  25. taskStatus:this.state.taskStatus,//任务状态
  26. publishStatus:this.state.publishStatus,//公示状态
  27. },
  28. success: function(data) {
  29. let thedata = data.data;
  30. let theArr = [];
  31. if(!thedata) {
  32. if(data.error && data.error.length) {
  33. message.warning(data.error[0].message);
  34. };
  35. thedata = {};
  36. } else {
  37. thedata.map(function(item, index) {
  38. let nub=index+1;
  39. theArr.push({
  40. key: index,
  41. theNumber:false,
  42. nub:nub,
  43. orderDep: item.orderDep,//订单部门
  44. signTotalAmount:item.signTotalAmount,//项目签单金额
  45. signTime:item.signTime,//签单日期
  46. contractNo:item.contractNo,//合同编号
  47. orderRemarks:item.orderRemarks, //订单留言
  48. contacts:item.contacts,//企业联系人
  49. contactMobile:item.contactMobile,//联系人电话
  50. commodityName:item.commodityName,//任务名称
  51. taskDistributionTime:item.taskDistributionTime,//派单时间
  52. dutyDep:item.dutyDep, //任务责任部门
  53. dutyName:item.dutyName,//任务责任人
  54. dutyContactMobile:item.dutyContactMobile,//责任人联系电话
  55. taskStatus:item.taskStatus,//任务状态
  56. finishTime:item.finishTime, //完成时间
  57. taskComment:item.taskComment,//任务说明
  58. publishStatus:item.publishStatus, //公示状态
  59. publishTime:item.publishTime,//公示时间
  60. salesmanName:item.salesmanName, //营销员
  61. orgName:item.orgName,//公司名称
  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/sales/countsometimeMarketingStatistics",
  84. data: {
  85. type:'1',
  86. timeType:this.state.releaseDate[0]?4:timeTypes,
  87. startTime: this.state.releaseDate[0],
  88. endTime: this.state.releaseDate[1],
  89. depId:this.state.superId,//部门机构
  90. },
  91. success: function(data) {
  92. let thedata = data.data;
  93. let theArr = [];
  94. if(!thedata) {
  95. if(data.error && data.error.length) {
  96. message.warning(data.error[0].message);
  97. };
  98. thedata = {};
  99. }
  100. this.loadData(timeTypes)
  101. this.selectSuperId();
  102. }.bind(this),
  103. }).always(function() {
  104. this.setState({
  105. loading: false
  106. });
  107. }.bind(this));
  108. },
  109. //时间选择
  110. selTime(value,index){
  111. this.setState({
  112. Dtime:value,
  113. selTime:index
  114. })
  115. },
  116. //获取上级组织
  117. selectSuperId() {
  118. this.state.data = []
  119. $.ajax({
  120. method: "post",
  121. dataType: "json",
  122. crossDomain: false,
  123. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  124. data:{
  125. },
  126. success: function (data) {
  127. let theArr = [];
  128. let theId=[];//用于保存上级组织的ID和名称
  129. let thedata=data.data;
  130. if (!thedata) {
  131. if (data.error && data.error.length) {
  132. message.warning(data.error[0].message);
  133. };
  134. thedata = {};
  135. };
  136. var contactIds=[];
  137. for(var i=0;i<data.data.length;i++){
  138. let theData = data.data[i];
  139. theArr.push(
  140. <Select.Option value={theData.id} key={theData.id}>{theData.name}</Select.Option>
  141. );
  142. theId.push(
  143. [theData.id,theData.name]
  144. );
  145. };
  146. this.setState({
  147. SuperArr:thedata,
  148. contactsOption: theArr,
  149. theId: theId,
  150. orderStatusOptions:data.data,
  151. });
  152. }.bind(this),
  153. }).always(function () {
  154. this.setState({
  155. loading: false
  156. });
  157. }.bind(this));
  158. },
  159. //判断浏览器类型
  160. getExplorer() {
  161. var explorer = window.navigator.userAgent;
  162. //ie
  163. if(explorer.indexOf("MSIE") >= 0) {
  164. return 'ie';
  165. }
  166. //firefox
  167. else if(explorer.indexOf("Firefox") >= 0) {
  168. return 'Firefox';
  169. }
  170. //Chrome
  171. else if(explorer.indexOf("Chrome") >= 0) {
  172. return 'Chrome';
  173. }
  174. //Opera
  175. else if(explorer.indexOf("Opera") >= 0) {
  176. return 'Opera';
  177. }
  178. //Safari
  179. else if(explorer.indexOf("Safari") >= 0) {
  180. return 'Safari';
  181. }
  182. },
  183. //导出为exel表格
  184. tabExel() {
  185. var table = document.querySelector('#daochu');
  186. var idTmr;
  187. //debugger;
  188. //整个表格拷贝到EXCEL中
  189. if(this.getExplorer() == 'ie') {
  190. var curTbl = document.getElementById(tableid);
  191. var oXL = new ActiveXObject("Excel.Application");
  192. //创建AX对象excel
  193. var oWB = oXL.Workbooks.Add();
  194. //获取workbook对象
  195. var xlsheet = oWB.Worksheets(1);
  196. //激活当前sheet
  197. var sel = document.body.createTextRange();
  198. sel.moveToElementText(curTbl);
  199. //把表格中的内容移到TextRange中
  200. sel.select();
  201. //全选TextRange中内容
  202. sel.execCommand("Copy");
  203. //复制TextRange中内容
  204. xlsheet.Paste();
  205. //粘贴到活动的EXCEL中
  206. oXL.Visible = true;
  207. //设置excel可见属性
  208. try {
  209. var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
  210. } catch(e) {
  211. print("Nested catch caught " + e);
  212. } finally {
  213. oWB.SaveAs(fname);
  214. oWB.Close(savechanges = false);
  215. //xls.visible = false;
  216. oXL.Quit();
  217. oXL = null;
  218. //结束excel进程,退出完成
  219. //window.setInterval("Cleanup();",1);
  220. idTmr = window.setInterval("Cleanup();", 1);
  221. }
  222. } else {
  223. this.tableToExcel(table,this.getExplorer());
  224. }
  225. function Cleanup() {
  226. window.clearInterval(idTmr);
  227. CollectGarbage();
  228. }
  229. },
  230. tableToExcel(table,name) {
  231. var uri = 'data:application/vnd.ms-excel;base64,',
  232. 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>',
  233. base64 = function(s) {
  234. return window.btoa(unescape(encodeURIComponent(s)))
  235. },
  236. format = function(s, c) {
  237. return s.replace(/{(\w+)}/g,
  238. function(m, p) {
  239. return c[p];
  240. })
  241. }
  242. if(!table.nodeType) table = document.getElementById(table);
  243. var ctx = {
  244. worksheet: name || 'Worksheet',
  245. table: table.innerHTML
  246. };
  247. window.location.href = uri + base64(format(template, ctx))
  248. },
  249. getInitialState() {
  250. return {
  251. releaseDate: [],
  252. selectedRowKeys: [],
  253. selectedRows: [],
  254. loading: false,
  255. visible: false,
  256. showDesc: false,
  257. timeState:false,
  258. weekColor:true,
  259. monthColor:false,
  260. quarterColor:false,
  261. yearColor:false,
  262. Dtime:undefined,
  263. selTime:'',
  264. columns: [
  265. {
  266. title: '序号',
  267. dataIndex: 'nub',
  268. width:50,
  269. key: 'nub',
  270. fixed:false,
  271. render:(text,record)=>{
  272. if(!record.theNumber){
  273. return text
  274. }else{
  275. return {
  276. children: text,
  277. props: {
  278. colSpan:0
  279. },
  280. }
  281. }
  282. }
  283. },
  284. {
  285. title: '公司名称',
  286. dataIndex: 'orgName',
  287. key: 'orgName',
  288. width:100,
  289. fixed:false,
  290. render:(text,record)=>{
  291. if(!record.theNumber){
  292. return text//&&text.length>6?<span title={text}>{text.substr(0,6)+'…'}</span>:text
  293. }else{
  294. return {
  295. children: text,
  296. props: {
  297. colSpan:3
  298. },
  299. }
  300. }
  301. }
  302. }, {
  303. title: '订单部门',
  304. fixed:false,
  305. width:100,
  306. dataIndex: 'orderDep',
  307. key: 'orderDep',
  308. render:(text,record)=>{
  309. if(!record.theNumber){
  310. return text
  311. }else{
  312. return {
  313. children: text,
  314. props: {
  315. colSpan:0
  316. },
  317. }
  318. }
  319. }
  320. },
  321. {
  322. title: '项目签单金额',
  323. fixed:false,
  324. dataIndex: 'signTotalAmount',
  325. key: 'signTotalAmount',
  326. sorter: (a, b) => a.signTotalAmount - b.signTotalAmount,
  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. title: '签单日期',
  341. fixed:false,
  342. dataIndex: 'signTime',
  343. key: 'signTime',
  344. render:(text,record)=>{
  345. if(!record.theNumber){
  346. return text
  347. }else{
  348. return {
  349. children: text,
  350. props: {
  351. colSpan:0
  352. },
  353. }
  354. }
  355. }
  356. }, {
  357. title: '合同编号',
  358. fixed:false,
  359. dataIndex: 'contractNo',
  360. key: 'contractNo',
  361. render:(text,record)=>{
  362. if(!record.theNumber){
  363. return text
  364. }else{
  365. return {
  366. children: text,
  367. props: {
  368. colSpan:0
  369. },
  370. }
  371. }
  372. }
  373. },{
  374. title: '订单留言',
  375. fixed:false,
  376. dataIndex: 'orderRemarks',
  377. key: 'orderRemarks',
  378. render:(text,record)=>{
  379. if(!record.theNumber){
  380. return text&&text.length>6?<span title={text}>{text.substr(0,6)+'…'}</span>:text
  381. }else{
  382. return {
  383. children: text,
  384. props: {
  385. colSpan:0
  386. },
  387. }
  388. }
  389. }
  390. },{
  391. title: '企业联系人',
  392. fixed:false,
  393. dataIndex: 'contacts',
  394. key: 'contacts',
  395. render:(text,record)=>{
  396. if(!record.theNumber){
  397. return text
  398. }else{
  399. return {
  400. children: text,
  401. props: {
  402. colSpan:0
  403. },
  404. }
  405. }
  406. }
  407. },{
  408. title: '联系人电话',
  409. fixed:false,
  410. dataIndex: 'contactMobile',
  411. key: 'contactMobile',
  412. render:(text,record)=>{
  413. if(!record.theNumber){
  414. return text
  415. }else{
  416. return {
  417. children: text,
  418. props: {
  419. colSpan:0
  420. },
  421. }
  422. }
  423. }
  424. },{
  425. title: '任务名称',
  426. fixed:false,
  427. dataIndex: 'commodityName',
  428. key: 'commodityName',
  429. render:(text,record)=>{
  430. if(!record.theNumber){
  431. return text
  432. }else{
  433. return {
  434. children: text,
  435. props: {
  436. colSpan:0
  437. },
  438. }
  439. }
  440. }
  441. },{
  442. title: '派单时间',
  443. fixed:false,
  444. dataIndex: 'taskDistributionTime',
  445. key: 'taskDistributionTime',
  446. render:(text,record)=>{
  447. if(!record.theNumber){
  448. return text
  449. }else{
  450. return {
  451. children: text,
  452. props: {
  453. colSpan:0
  454. },
  455. }
  456. }
  457. }
  458. },{
  459. title: '部门',
  460. fixed:false,
  461. dataIndex: 'dutyDep',
  462. key: 'dutyDep',
  463. render:(text,record)=>{
  464. if(!record.theNumber){
  465. return text
  466. }else{
  467. return {
  468. children: text,
  469. props: {
  470. colSpan:0
  471. },
  472. }
  473. }
  474. }
  475. },{
  476. title: '负责人',
  477. fixed:false,
  478. dataIndex: 'dutyName',
  479. key: 'dutyName',
  480. render:(text,record)=>{
  481. if(!record.theNumber){
  482. return text
  483. }else{
  484. return {
  485. children: text,
  486. props: {
  487. colSpan:0
  488. },
  489. }
  490. }
  491. }
  492. },{
  493. title: '负责人电话',
  494. fixed:false,
  495. dataIndex: 'dutyContactMobile',
  496. key: 'dutyContactMobile',
  497. render:(text,record)=>{
  498. if(!record.theNumber){
  499. return text
  500. }else{
  501. return {
  502. children: text,
  503. props: {
  504. colSpan:0
  505. },
  506. }
  507. }
  508. }
  509. },{
  510. title: '任务状态',
  511. fixed:false,
  512. dataIndex: 'taskStatus',
  513. key: 'taskStatus',
  514. render:(text,record)=>{
  515. if(!record.theNumber){
  516. return text
  517. }else{
  518. return {
  519. children: text,
  520. props: {
  521. colSpan:0
  522. },
  523. }
  524. }
  525. }
  526. },{
  527. title: '项目完成时间',
  528. fixed:false,
  529. dataIndex: 'finishTime',
  530. key: 'finishTime',
  531. render:(text,record)=>{
  532. if(!record.theNumber){
  533. return text
  534. }else{
  535. return {
  536. children: text,
  537. props: {
  538. colSpan:0
  539. },
  540. }
  541. }
  542. }
  543. },{
  544. title: '任务说明',
  545. fixed:false,
  546. dataIndex: 'taskComment',
  547. key: 'taskComment',
  548. render:(text,record)=>{
  549. if(!record.theNumber){
  550. return text
  551. }else{
  552. return {
  553. children: text,
  554. props: {
  555. colSpan:0
  556. },
  557. }
  558. }
  559. }
  560. },{
  561. title: '公示状态',
  562. fixed:false,
  563. dataIndex: 'publishStatus',
  564. key: 'publishStatus',
  565. render:(text,record)=>{
  566. if(!record.theNumber){
  567. return text
  568. }else{
  569. return {
  570. children: text,
  571. props: {
  572. colSpan:0
  573. },
  574. }
  575. }
  576. }
  577. },{
  578. title: '公示时间',
  579. fixed:false,
  580. dataIndex: 'publishTime',
  581. key: 'publishTime',
  582. render:(text,record)=>{
  583. if(!record.theNumber){
  584. return text
  585. }else{
  586. return {
  587. children: text,
  588. props: {
  589. colSpan:0
  590. },
  591. }
  592. }
  593. }
  594. },
  595. {
  596. title: '营销员',
  597. fixed:false,
  598. dataIndex: 'salesmanName',
  599. key: 'salesmanName',
  600. render:(text,record)=>{
  601. if(!record.theNumber){
  602. return text
  603. }else{
  604. return {
  605. children: text,
  606. props: {
  607. colSpan:1
  608. },
  609. }
  610. }
  611. }
  612. }
  613. ],
  614. dataSource: [],
  615. };
  616. },
  617. search() {
  618. this.loadData(0)
  619. },
  620. reset() {
  621. this.state.superId = undefined;//部门机构清零
  622. this.loadData(0)
  623. this.setState({
  624. order:"false",
  625. weekColor:true,
  626. monthColor:false,
  627. quarterColor:false,
  628. yearColor:false
  629. })
  630. },
  631. week(){
  632. this.state.releaseDate[0] = undefined;//开始时间清零
  633. this.state.releaseDate[1] = undefined;//结束时间清零
  634. this.loadData(0);
  635. this.setState({
  636. weekColor:true,
  637. monthColor:false,
  638. quarterColor:false,
  639. yearColor:false
  640. })
  641. },
  642. month(){
  643. this.state.releaseDate[0] = undefined;//开始时间清零
  644. this.state.releaseDate[1] = undefined;//结束时间清零
  645. this.loadData(1);
  646. this.setState({
  647. weekColor:false,
  648. monthColor:true,
  649. quarterColor:false,
  650. yearColor:false
  651. })
  652. },
  653. quarter(){
  654. this.state.releaseDate[0] = undefined;//开始时间清零
  655. this.state.releaseDate[1] = undefined;//结束时间清零
  656. this.loadData(2);
  657. this.setState({
  658. weekColor:false,
  659. monthColor:false,
  660. quarterColor:true,
  661. yearColor:false
  662. })
  663. },
  664. year(){
  665. this.state.releaseDate[0] = undefined;//开始时间清零
  666. this.state.releaseDate[1] = undefined;//结束时间清零
  667. this.loadData(3);
  668. this.setState({
  669. weekColor:false,
  670. monthColor:false,
  671. quarterColor:false,
  672. yearColor:true
  673. })
  674. },
  675. //重构排序
  676. tabChange(pagination,filter,sorter){
  677. console.log(pagination)
  678. console.log(sorter)
  679. },
  680. componentWillMount() {
  681. //this.loadData();
  682. this.totalData(0);
  683. let times=new Date();
  684. let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';
  685. this.setState({
  686. Nowtime:nowTime
  687. })
  688. },
  689. render() {
  690. const { RangePicker } = DatePicker;
  691. let departmentArr = this.state.departmentArr || [];
  692. return(
  693. <div className='set-content'>
  694. <p style={{fontSize:'20px',marginBottom:'10px'}}>客户营销统计表(部门)</p>
  695. <div className="clearfix">
  696. <Button type="primary" onClick={this.tabExel} style={{ float:'right' }}>导出到表格</Button>
  697. <span style={{fontSize:'16px'}}>部门机构 : </span>
  698. <Select placeholder="选择部门"
  699. style={{ width:'200px',marginRight:'10px' }}
  700. value={this.state.superId}
  701. onChange={(e) => { this.setState({ superId: e }) }} notFoundContent="未获取到上级组织列表">
  702. {this.state.contactsOption}
  703. </Select>
  704. <Select placeholder="任务状态"
  705. style={{ width: 150 ,marginRight:'10px'}}
  706. value={this.state.taskStatus}
  707. onChange={(e) => { this.setState({ taskStatus: e }) }}>
  708. {
  709. taskStatus.map(function (item) {
  710. return <Select.Option key={item.value} >{item.key}</Select.Option>
  711. })
  712. }
  713. </Select>
  714. <Select placeholder="公示状态"
  715. style={{ width: 150 ,marginRight:'10px'}}
  716. value={this.state.publishStatus}
  717. onChange={(e) => { this.setState({ publishStatus: e }) }}>
  718. {
  719. publishStatus.map(function (item) {
  720. return <Select.Option key={item.value} >{item.key}</Select.Option>
  721. })
  722. }
  723. </Select>
  724. <Button type="primary" onClick={this.search} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
  725. <Button onClick={this.reset}>重置</Button>
  726. <div className="clearfix" style={{marginTop:"10px"}}>
  727. <Button onClick={this.week} style={{marginRight:'5px'}} type={this.state.weekColor?"primary":''}>本周</Button>
  728. <Button onClick={this.month} style={{marginRight:'5px'}} type={this.state.monthColor?"primary":''}>本月</Button>
  729. <Button onClick={this.quarter} style={{marginRight:'5px'}} type={this.state.quarterColor?"primary":''}>本季</Button>
  730. <Button onClick={this.year} style={{marginRight:'5px'}} type={this.state.yearColor?"primary":''}>本年</Button>
  731. <span className="titleTime" style={{marginRight:'5px',marginTop:"0px"}}>起止时间:</span>
  732. <RangePicker style={{marginRight:'5px',marginTop:"0px"}}
  733. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  734. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  735. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  736. </div>
  737. </div>
  738. <div id='daochu'>
  739. <div className="surfaceTitle">
  740. <span style={{marginTop:"10px"}}>客户营销统计表(部门)</span>
  741. </div>
  742. <div className="patent-table" id='daochu'>
  743. <div className="scroll">
  744. <Spin spinning={this.state.loading}>
  745. <Table columns={this.state.columns}
  746. dataSource={this.state.dataSource}
  747. //scroll={{ x: 600,y:500}}
  748. bordered
  749. onChange={this.tabChange}
  750. pagination={false}
  751. />
  752. </Spin>
  753. </div>
  754. </div>
  755. </div>
  756. </div>
  757. )
  758. }
  759. });
  760. export default DiurnalStatistics;