departmentReport.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607
  1. import React from 'react';
  2. import { Select, Spin, Input, Table, Button ,DatePicker} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import './report.less';
  6. import { post } from '../../../dataDic.js';
  7. const PersonalReport = React.createClass({
  8. loadData(totalArr) {
  9. if(this.state.selTime){
  10. var newTime=this.state.selTime;
  11. var timeArr=newTime.split('-');
  12. var txtTime=timeArr[0]+'年'+timeArr[1]+'月'+timeArr[2]+'日';
  13. this.setState({
  14. timeState:true,
  15. txtTime:txtTime,
  16. })
  17. }
  18. let total=totalArr;
  19. this.setState({
  20. loading: true
  21. });
  22. $.ajax({
  23. method: "get",
  24. dataType: "json",
  25. crossDomain: false,
  26. url: globalConfig.context + "/api/admin/report/sales/department",
  27. data: {
  28. date:this.state.selTime?(this.state.selTime+' '+'00:00:00'):'',
  29. },
  30. success: function(data) {
  31. let thedata = data.data;
  32. let theArr = [];
  33. if(!thedata) {
  34. if(data.error && data.error.length) {
  35. message.warning(data.error[0].message);
  36. };
  37. thedata = {};
  38. } else {
  39. thedata.map(function(item, index) {
  40. let nub=index+1;
  41. theArr.push({
  42. key: index,
  43. theNumber:false,
  44. nub:nub,
  45. id: item.id,
  46. departmentName:item.departmentName,//部门
  47. managerName:item.managerName,//负责人
  48. memberCount:item.memberCount, //部门人数
  49. enrollTime:item.enrollTime,// 入职时间
  50. dailyOrderCount:item.values.daily.orderCount,//日签单业绩
  51. dailyOrderAmount:item.values.daily.orderAmount,//日签单业绩
  52. weeklyOrderCount:item.values.weekly.orderCount,//周签单业绩
  53. weeklyOrderAmount:item.values.weekly.orderAmount,//周签单业绩
  54. monthlyOrderCount:item.values.monthly.orderCount,//月签单业绩
  55. monthlyOrderAmount:item.values.monthly.orderAmount,//月签单业绩
  56. quarterlyOrderCount:item.values.quarterly.orderCount,//季签单业绩
  57. quarterlyOrderAmount:item.values.quarterly.orderAmount,//季签单业绩
  58. annuallyOrderCount:item.values.annually.orderCount,//年签单业绩
  59. annuallyOrderAmount:item.values.annually.orderAmount,//年签单业绩
  60. })
  61. })
  62. }
  63. theArr.push(
  64. {
  65. key:9999999,
  66. theNumber:true,
  67. departmentName:'合计',
  68. dailyOrderCount:total.dailyTotalCount,//日签单业绩
  69. dailyOrderAmount:total.dailyTotalAmount,//日签单业绩
  70. weeklyOrderCount:total.weeklyTotalCount,//周签单业绩
  71. weeklyOrderAmount:total.weeklyTotalAmount,//周签单业绩
  72. monthlyOrderCount:total.monthlyTotalCount,//月签单业绩
  73. monthlyOrderAmount:total.monthlyTotalAmount,//月签单业绩
  74. quarterlyOrderCount:total.quarterlyTotalCount,//季签单业绩
  75. quarterlyOrderAmount:total.quarterlyTotalAmount,//季签单业绩
  76. annuallyOrderCount:total.annuallyTotalCount,//年签单业绩
  77. annuallyOrderAmount:total.annuallyTotalAmount,//年签单业绩
  78. }
  79. )
  80. this.setState({
  81. dataSource: theArr,
  82. })
  83. }.bind(this),
  84. }).always(function() {
  85. this.setState({
  86. loading: false
  87. });
  88. }.bind(this));
  89. },
  90. totalData() {
  91. this.setState({
  92. loading: true
  93. });
  94. $.ajax({
  95. method: "get",
  96. dataType: "json",
  97. crossDomain: false,
  98. url: globalConfig.context + "/api/admin/report/sales/total",
  99. data: {
  100. },
  101. success: function(data) {
  102. let thedata = data.data;
  103. let theArr = [];
  104. if(!thedata) {
  105. if(data.error && data.error.length) {
  106. message.warning(data.error[0].message);
  107. };
  108. thedata = {};
  109. }
  110. this.loadData(thedata)
  111. }.bind(this),
  112. }).always(function() {
  113. this.setState({
  114. loading: false
  115. });
  116. }.bind(this));
  117. },
  118. departmentList() {
  119. this.setState({
  120. loading: true
  121. });
  122. $.ajax({
  123. method: "post",
  124. dataType: "json",
  125. crossDomain: false,
  126. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  127. data: {
  128. },
  129. success: function(data) {
  130. let thedata = data.data;
  131. let theArr = [];
  132. if(!thedata) {
  133. if(data.error && data.error.length) {
  134. message.warning(data.error[0].message);
  135. };
  136. thedata = {};
  137. } else {
  138. thedata.map(function(item, index) {
  139. theArr.push({
  140. key: index,
  141. name: item.name,
  142. id: item.id,
  143. depNo: item.depNo
  144. })
  145. })
  146. }
  147. this.setState({
  148. departmentArr: theArr,
  149. })
  150. }.bind(this),
  151. }).always(function() {
  152. this.setState({
  153. loading: false
  154. });
  155. }.bind(this));
  156. },
  157. //时间选择
  158. selTime(value,index){
  159. this.setState({
  160. Dtime:value,
  161. selTime:index
  162. })
  163. },
  164. getInitialState() {
  165. return {
  166. selectedRowKeys: [],
  167. selectedRows: [],
  168. loading: false,
  169. visible: false,
  170. showDesc: false,
  171. timeState:false,
  172. Dtime:undefined,
  173. selTime:'',
  174. columns: [
  175. {
  176. title: '序号',
  177. dataIndex: 'nub',
  178. width:50,
  179. key: 'nub',
  180. fixed:true,
  181. render:(text,record)=>{
  182. if(!record.theNumber){
  183. return text
  184. }else{
  185. return {
  186. children: text,
  187. props: {
  188. colSpan:0
  189. },
  190. }
  191. }
  192. }
  193. },
  194. {
  195. title: '部门',
  196. dataIndex: 'departmentName',
  197. key: 'departmentName',
  198. width:100,
  199. fixed:true,
  200. render:(text,record)=>{
  201. if(!record.theNumber){
  202. return text
  203. }else{
  204. return {
  205. children: text,
  206. props: {
  207. colSpan:4
  208. },
  209. }
  210. }
  211. }
  212. },{
  213. title: '负责人',
  214. width:100,
  215. fixed:true,
  216. dataIndex: 'managerName',
  217. key: 'managerName',
  218. render:(text,record)=>{
  219. if(!record.theNumber){
  220. return text
  221. }else{
  222. return {
  223. children: text,
  224. props: {
  225. colSpan:0
  226. },
  227. }
  228. }
  229. }
  230. },
  231. {
  232. title: '部门人数',
  233. width:100,
  234. fixed:true,
  235. dataIndex: 'memberCount',
  236. key: 'memberCount',
  237. render:(text,record)=>{
  238. if(!record.theNumber){
  239. return text
  240. }else{
  241. return {
  242. children: text,
  243. props: {
  244. colSpan:0
  245. },
  246. }
  247. }
  248. }
  249. },{
  250. title: '当日业绩',
  251. children: [
  252. {
  253. title: '单量',
  254. dataIndex: 'dailyOrderCount',
  255. width:70,
  256. key: 'dailyOrderCount',
  257. sorter: (a, b) => a.dailyOrderCount - b.dailyOrderCount,
  258. },{
  259. title: '金额',
  260. dataIndex: 'dailyOrderAmount',
  261. width:70,
  262. key: 'dailyOrderAmount',
  263. sorter: (a, b) => a.dailyOrderAmount - b.dailyOrderAmount,
  264. }
  265. ],
  266. },
  267. {
  268. title: '当日人均业绩',
  269. children: [
  270. {
  271. title: '人均有效',
  272. dataIndex: 'num6611',
  273. key: 'num6611',
  274. width:100,
  275. sorter: (a, b) => a.num66 - b.num66,
  276. },{
  277. title: '人均单量',
  278. dataIndex: 'age262',
  279. key: 'age262',
  280. width:100,
  281. sorter: (a, b) => a.age - b.age,
  282. },{
  283. title: '人均金额',
  284. dataIndex: 'age26',
  285. width:100,
  286. key: 'age26',
  287. sorter: (a, b) => a.age - b.age,
  288. }
  289. ],
  290. },
  291. {
  292. title: '当日客户营销',
  293. children: [
  294. {
  295. title: '客户总量',
  296. dataIndex: 'anum66',
  297. key: 'anum66',
  298. width:100,
  299. sorter: (a, b) => a.num66 - b.num66,
  300. },{
  301. title: '新增营销',
  302. dataIndex: 'aage266',
  303. key: 'aage266',
  304. width:100,
  305. sorter: (a, b) => a.age - b.age,
  306. },
  307. {
  308. title: '营销回访',
  309. dataIndex: 'age266p',
  310. key: 'age266p',
  311. width:100,
  312. sorter: (a, b) => a.age - b.age,
  313. }
  314. ],
  315. },
  316. {
  317. title: '当日客户有效',
  318. children: [
  319. {
  320. title: '有效总量',
  321. width:100,
  322. dataIndex: 'num',
  323. key: 'num',
  324. sorter: (a, b) => a.num - b.num,
  325. },{
  326. title: '新增有效',
  327. width:100,
  328. dataIndex: 'age2',
  329. key: 'age2',
  330. sorter: (a, b) => a.age - b.age,
  331. },{
  332. title: '有效回访',
  333. width:100,
  334. dataIndex: 'age3',
  335. key: 'age3',
  336. sorter: (a, b) => a.age - b.age,
  337. }
  338. ],
  339. }, {
  340. title: '当日客户拜访',
  341. children: [
  342. {
  343. title: '拜访总量',
  344. width:100,
  345. dataIndex: 'age11',
  346. key: 'age11',
  347. sorter: (a, b) => a.age - b.age,
  348. },{
  349. title: '电话',
  350. width:70,
  351. dataIndex: 'age22',
  352. key: 'age22',
  353. sorter: (a, b) => a.age - b.age,
  354. },{
  355. title: '外拜',
  356. width:70,
  357. dataIndex: 'age33',
  358. key: 'age33',
  359. sorter: (a, b) => a.age - b.age,
  360. },{
  361. title: '邮件',
  362. width:70,
  363. dataIndex: 'age44',
  364. key: 'age44',
  365. sorter: (a, b) => a.age - b.age,
  366. },{
  367. title: '微信',
  368. width:70,
  369. dataIndex: 'age55',
  370. key: 'age55',
  371. sorter: (a, b) => a.age - b.age,
  372. }
  373. ],
  374. },
  375. {
  376. title: '本周业绩',
  377. children: [
  378. {
  379. title: '数量',
  380. width:70,
  381. dataIndex: 'weeklyOrderCount',
  382. key: 'weeklyOrderCount',
  383. sorter: (a, b) => a.weeklyOrderCount - b.weeklyOrderCount,
  384. },{
  385. title: '金额',
  386. width:70,
  387. dataIndex: 'weeklyOrderAmount',
  388. key: 'weeklyOrderAmount',
  389. sorter: (a, b) => a.weeklyOrderAmount - b.weeklyOrderAmount,
  390. }
  391. ],
  392. },{
  393. title: '本月业绩',
  394. children: [
  395. {
  396. title: '数量',
  397. width:70,
  398. dataIndex: 'monthlyOrderCount',
  399. key: 'monthlyOrderCount',
  400. sorter: (a, b) => a.monthlyOrderCount - b.monthlyOrderCount,
  401. },{
  402. title: '金额',
  403. width:70,
  404. dataIndex: 'monthlyOrderAmount',
  405. key: 'monthlyOrderAmount',
  406. sorter: (a, b) => a.monthlyOrderAmount - b.monthlyOrderAmount,
  407. }
  408. ],
  409. },{
  410. title: '本季业绩',
  411. children: [
  412. {
  413. title: '数量',
  414. width:70,
  415. dataIndex: 'quarterlyOrderCount',
  416. key: 'quarterlyOrderCount',
  417. sorter: (a, b) => a.quarterlyOrderCount - b.quarterlyOrderCount,
  418. },{
  419. title: '金额',
  420. width:70,
  421. dataIndex: 'quarterlyOrderAmount',
  422. key: 'quarterlyOrderAmount',
  423. sorter: (a, b) => a.quarterlyOrderAmount - b.quarterlyOrderAmount,
  424. }
  425. ],
  426. },{
  427. title: '本年业绩',
  428. children: [
  429. {
  430. title: '数量',
  431. width:70,
  432. dataIndex: 'annuallyOrderCount',
  433. key: 'annuallyOrderCount',
  434. sorter: (a, b) => a.annuallyOrderCount - b.annuallyOrderCount,
  435. },{
  436. title: '金额',
  437. width:70,
  438. dataIndex: 'annuallyOrderAmount',
  439. key: 'annuallyOrderAmount',
  440. sorter: (a, b) => a.annuallyOrderAmount - b.annuallyOrderAmount,
  441. }
  442. ],
  443. },
  444. {
  445. title: '本周人均',
  446. children: [
  447. {
  448. title: '有效',
  449. width:70,
  450. dataIndex: 'annuallyOrderCounty',
  451. key: 'annuallyOrderCounty',
  452. sorter: (a, b) => a.annuallyOrderCount1 - b.annuallyOrderCount1,
  453. },{
  454. title: '单量',
  455. width:70,
  456. dataIndex: 'annuallyOrderAmountt',
  457. key: 'annuallyOrderAmountt',
  458. sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
  459. },
  460. {
  461. title: '金额',
  462. width:70,
  463. dataIndex: 'annuallyOrderAmount1',
  464. key: 'annuallyOrderAmount1',
  465. sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
  466. }
  467. ],
  468. },{
  469. title: '本月人均',
  470. children: [
  471. {
  472. title: '有效',
  473. width:70,
  474. dataIndex: 'annuallyOrderCountv',
  475. key: 'annuallyOrderCountv',
  476. sorter: (a, b) => a.annuallyOrderCount1 - b.annuallyOrderCount1,
  477. },{
  478. title: '单量',
  479. width:70,
  480. dataIndex: 'annuallyOrderAmountv',
  481. key: 'annuallyOrderAmountv',
  482. sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
  483. },
  484. {
  485. title: '金额',
  486. width:70,
  487. dataIndex: 'annuallyOrderAmount1v',
  488. key: 'annuallyOrderAmount1v',
  489. sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
  490. }
  491. ],
  492. },{
  493. title: '本季人均',
  494. children: [
  495. {
  496. title: '有效',
  497. width:70,
  498. dataIndex: 'annuallyOrderCountc',
  499. key: 'annuallyOrderCountc',
  500. sorter: (a, b) => a.annuallyOrderCount1 - b.annuallyOrderCount1,
  501. },{
  502. title: '单量',
  503. width:70,
  504. dataIndex: 'annuallyOrderAmountb',
  505. key: 'annuallyOrderAmountb',
  506. sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
  507. },
  508. {
  509. title: '金额',
  510. width:70,
  511. dataIndex: 'annuallyOrderAmounta',
  512. key: 'annuallyOrderAmounta',
  513. sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
  514. }
  515. ],
  516. },{
  517. title: '本年人均',
  518. children: [
  519. {
  520. title: '有效',
  521. width:70,
  522. dataIndex: 'annuallyOrderCount2',
  523. key: 'annuallyOrderCount2',
  524. sorter: (a, b) => a.annuallyOrderCount1 - b.annuallyOrderCount1,
  525. },{
  526. title: '单量',
  527. width:70,
  528. dataIndex: 'annuallyOrderAmount3',
  529. key: 'annuallyOrderAmount3',
  530. sorter: (a, b) => a.annuallyOrderAmoun1t - b.annuallyOrderAmoun1t,
  531. },
  532. {
  533. title: '金额',
  534. width:70,
  535. dataIndex: 'annuallyOrderAmount4',
  536. key: 'annuallyOrderAmount4',
  537. sorter: (a, b) => a.annuallyOrderAmount1 - b.annuallyOrderAmount1,
  538. }
  539. ],
  540. }
  541. ],
  542. dataSource: [],
  543. };
  544. },
  545. search() {
  546. this.totalData()
  547. },
  548. reset() {
  549. this.state.Dtime = undefined;
  550. this.state.selTime='';
  551. this.state.timeState=false;
  552. this.totalData()
  553. },
  554. componentWillMount() {
  555. this.departmentList();
  556. this.totalData();
  557. let times=new Date();
  558. let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';
  559. this.setState({
  560. Nowtime:nowTime
  561. })
  562. },
  563. render() {
  564. let departmentArr = this.state.departmentArr || [];
  565. return(
  566. <div className='set-content'>
  567. <p style={{fontSize:'20px',marginBottom:'10px'}}>部门业绩统计报表</p>
  568. <div className="clearfix">
  569. <span style={{fontSize:'16px'}}>选择日期 : </span>
  570. <DatePicker onChange={this.selTime} value={this.state.Dtime}/>
  571. <Button type="primary" onClick={this.search} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
  572. <Button onClick={this.reset}>重置</Button>
  573. </div>
  574. <div className="surfaceTitle">
  575. <span className="nowtime">{this.state.timeState?this.state.txtTime:this.state.Nowtime}</span>
  576. <span>部门营销业绩统计表</span>
  577. </div>
  578. <div className="patent-table">
  579. <div className="scroll">
  580. <Spin spinning={this.state.loading}>
  581. <Table columns={this.state.columns}
  582. dataSource={this.state.dataSource}
  583. scroll={{ x: 3200,y:500}}
  584. bordered
  585. pagination={false}
  586. />
  587. </Spin>
  588. </div>
  589. </div>
  590. </div>
  591. )
  592. }
  593. });
  594. export default PersonalReport;