personalReport.jsx 14 KB

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