departmentReport.jsx 16 KB

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