personalReport.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530
  1. import React from 'react';
  2. import { Select, Spin, Input, Table, Button ,message,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,pageNo) {
  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/personal",
  27. data: {
  28. pNo: pageNo || 1,
  29. pSize: 10,
  30. date:this.state.selTime?(this.state.selTime+' '+'00:00:00'):'',
  31. depName:this.state.departmentSearch,
  32. name:this.state.uesrNameSearch,
  33. },
  34. success: function(data) {
  35. let thedata = data.data;
  36. let theArr = [];
  37. if(!data.data) {
  38. if(data.error && data.error.length) {
  39. message.warning(data.error[0].message);
  40. };
  41. thedata = {};
  42. } else {
  43. thedata.map(function(item, index) {
  44. var yTime=new Date(item.enrollTime).toLocaleDateString();
  45. let nub=index+1;
  46. theArr.push({
  47. key: index,
  48. theNumber:false,
  49. nub:nub,
  50. id: item.id,
  51. name:item.name, //姓名
  52. departmentName:item.departmentName,//部门
  53. position:item.position, //职务
  54. enrollTime:yTime,// 入职时间
  55. dailyOrderCount:item.values.daily.orderCount,//日签单业绩
  56. dailyOrderAmount:item.values.daily.orderAmount,//日签单业绩
  57. weeklyOrderCount:item.values.weekly.orderCount,//周签单业绩
  58. weeklyOrderAmount:item.values.weekly.orderAmount,//周签单业绩
  59. monthlyOrderCount:item.values.monthly.orderCount,//月签单业绩
  60. monthlyOrderAmount:item.values.monthly.orderAmount,//月签单业绩
  61. quarterlyOrderCount:item.values.quarterly.orderCount,//季签单业绩
  62. quarterlyOrderAmount:item.values.quarterly.orderAmount,//季签单业绩
  63. annuallyOrderCount:item.values.annually.orderCount,//年签单业绩
  64. annuallyOrderAmount:item.values.annually.orderAmount,//年签单业绩
  65. })
  66. })
  67. this.state.pagination.current =pageNo;
  68. this.state.pagination.total=total.totalRecordCount+Math.floor(total.totalRecordCount/10);
  69. };
  70. if(!data.data.length){
  71. this.state.pagination.total=0;
  72. };
  73. if(theArr.length){
  74. theArr.push(
  75. {
  76. key:9999999,
  77. theNumber:true,
  78. nub:data.data.length+1,
  79. name:'',
  80. position:'', //职务
  81. enrollTime:'',// 入职时间
  82. departmentName:'合计',
  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. }
  96. this.setState({
  97. dataSource: theArr,
  98. pagination: this.state.pagination,
  99. })
  100. }.bind(this),
  101. }).always(function() {
  102. this.setState({
  103. loading: false
  104. });
  105. }.bind(this));
  106. },
  107. totalData(page) {
  108. this.setState({
  109. loading: true
  110. });
  111. $.ajax({
  112. method: "get",
  113. dataType: "json",
  114. crossDomain: false,
  115. url: globalConfig.context + "/api/admin/report/sales/total",
  116. data: {
  117. date:this.state.selTime?(this.state.selTime+' '+'00:00:00'):'',
  118. depName:this.state.departmentSearch,
  119. name:this.state.uesrNameSearch,
  120. },
  121. success: function(data) {
  122. let thedata = data.data;
  123. let theArr = [];
  124. if(!thedata) {
  125. if(data.error && data.error.length) {
  126. message.warning(data.error[0].message);
  127. };
  128. thedata = {};
  129. }
  130. this.loadData(thedata,page)
  131. }.bind(this),
  132. }).always(function() {
  133. this.setState({
  134. loading: false
  135. });
  136. }.bind(this));
  137. },
  138. departmentList() {
  139. this.setState({
  140. loading: true
  141. });
  142. $.ajax({
  143. method: "get",
  144. dataType: "json",
  145. crossDomain: false,
  146. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  147. data: {
  148. },
  149. success: function(data) {
  150. let thedata = data.data;
  151. let theArr = [];
  152. if(!thedata) {
  153. if(data.error && data.error.length) {
  154. message.warning(data.error[0].message);
  155. };
  156. thedata = {};
  157. } else {
  158. thedata.map(function(item, index) {
  159. theArr.push({
  160. key: index,
  161. name: item.name,
  162. id: item.id,
  163. depNo: item.depNo
  164. })
  165. })
  166. }
  167. this.setState({
  168. departmentArr: theArr,
  169. })
  170. }.bind(this),
  171. }).always(function() {
  172. this.setState({
  173. loading: false
  174. });
  175. }.bind(this));
  176. },
  177. getInitialState() {
  178. return {
  179. selectedRowKeys: [],
  180. selectedRows: [],
  181. loading: false,
  182. visible: false,
  183. showDesc: false,
  184. timeState:false,
  185. pagination: {
  186. defaultCurrent: 1,
  187. defaultPageSize: 11,
  188. showQuickJumper: true,
  189. pageSize: 11,
  190. onChange: function (page) {
  191. this.totalData(page);
  192. }.bind(this),
  193. showTotal: function (total) {
  194. return '共' + total + '条数据';
  195. }
  196. },
  197. columns: [
  198. {
  199. title: '序号',
  200. dataIndex: 'nub',
  201. width:50,
  202. fixed:true,
  203. key: 'nub',
  204. render:(text,record)=>{
  205. if(!record.theNumber){
  206. return text
  207. }else{
  208. return {
  209. children: text,
  210. props: {
  211. colSpan:1
  212. },
  213. }
  214. }
  215. }
  216. },
  217. {
  218. title: '姓名',
  219. dataIndex: 'name',
  220. width:100,
  221. fixed:true,
  222. key: 'name',
  223. render:(text,record)=>{
  224. if(!record.theNumber){
  225. return text
  226. }else{
  227. return {
  228. children: text,
  229. props: {
  230. colSpan:0
  231. },
  232. }
  233. }
  234. }
  235. },{
  236. title: '部门',
  237. dataIndex: 'departmentName',
  238. width:100,
  239. fixed:true,
  240. key: 'departmentName',
  241. render:(text,record)=>{
  242. if(!record.theNumber){
  243. return text&&text.length>6?<span title={text}>{text.substr(0,6)+'…'}</span>:text
  244. }else{
  245. return {
  246. children: text,
  247. props: {
  248. colSpan:4
  249. },
  250. }
  251. }
  252. }
  253. },
  254. {
  255. title: '职务',
  256. dataIndex: 'position',
  257. key: 'position',
  258. fixed:true,
  259. width:100,
  260. render:(text,record)=>{
  261. if(!record.theNumber){
  262. return text
  263. }else{
  264. return {
  265. children: text,
  266. props: {
  267. colSpan:0
  268. },
  269. }
  270. }
  271. }
  272. },{
  273. title: '入职时间',
  274. width:100,
  275. fixed:true,
  276. dataIndex: 'enrollTime',
  277. key: 'enrollTime',
  278. render:(text,record)=>{
  279. if(!record.theNumber){
  280. return text
  281. }else{
  282. return {
  283. children: text,
  284. props: {
  285. colSpan:0
  286. },
  287. }
  288. }
  289. }
  290. },{
  291. title: '当日营销客户数',
  292. children: [
  293. {
  294. title: '总数',
  295. dataIndex: 'num',
  296. width:70,
  297. key: 'num',
  298. sorter: (a, b) => a.num - b.num,
  299. },{
  300. title: '新增',
  301. dataIndex: 'age2',
  302. width:70,
  303. key: 'age2',
  304. sorter: (a, b) => a.age - b.age,
  305. },{
  306. title: '回访',
  307. width:70,
  308. dataIndex: 'age3',
  309. key: 'age3',
  310. sorter: (a, b) => a.age - b.age,
  311. },{
  312. title: '有效',
  313. width:70,
  314. dataIndex: 'age4',
  315. key: 'age4',
  316. sorter: (a, b) => a.age - b.age,
  317. },
  318. ],
  319. }, {
  320. title: '当日营销方式',
  321. children: [
  322. {
  323. title: '总数',
  324. width:70,
  325. dataIndex: 'age11',
  326. key: 'age11',
  327. sorter: (a, b) => a.age - b.age,
  328. },{
  329. title: '电话',
  330. width:70,
  331. dataIndex: 'age22',
  332. key: 'age22',
  333. sorter: (a, b) => a.age - b.age,
  334. },{
  335. title: '外拜',
  336. width:70,
  337. dataIndex: 'age33',
  338. key: 'age33',
  339. sorter: (a, b) => a.age - b.age,
  340. },{
  341. title: '邮件',
  342. width:70,
  343. dataIndex: 'age44',
  344. key: 'age44',
  345. sorter: (a, b) => a.age - b.age,
  346. },{
  347. title: '微信',
  348. width:70,
  349. dataIndex: 'age55',
  350. key: 'age55',
  351. sorter: (a, b) => a.age - b.age,
  352. }
  353. ],
  354. },
  355. {
  356. title: '本日签单业绩',
  357. children: [
  358. {
  359. title: '数量',
  360. width:70,
  361. dataIndex: 'dailyOrderCount',
  362. key: 'dailyOrderCount',
  363. sorter: (a, b) => a.dailyOrderCount - b.dailyOrderCount,
  364. },{
  365. title: '金额',
  366. width:70,
  367. dataIndex: 'dailyOrderAmount',
  368. key: 'dailyOrderAmount',
  369. sorter: (a, b) => a.dailyOrderAmount - b.dailyOrderAmount,
  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. dataSource: [],
  443. };
  444. },
  445. search() {
  446. this.totalData()
  447. },
  448. reset() {
  449. this.state.departmentSearch = undefined;
  450. this.state.postSearch = undefined;
  451. this.state.uesrNameSearch = '';
  452. this.state.Dtime = undefined;
  453. this.state.selTime='';
  454. this.state.timeState=false;
  455. this.totalData();
  456. },
  457. //时间选择
  458. selTime(value,index){
  459. this.setState({
  460. Dtime:value,
  461. selTime:index
  462. })
  463. },
  464. componentWillMount() {
  465. this.departmentList();
  466. this.totalData();
  467. let times=new Date();
  468. let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';
  469. this.setState({
  470. Nowtime:nowTime
  471. })
  472. },
  473. render() {
  474. let departmentArr = this.state.departmentArr || [];
  475. return(
  476. <div className='set-content'>
  477. <span style={{fontSize:'20px'}}>个人业绩统计报表</span>
  478. <div className="clearfix">
  479. <Select placeholder="部门机构"
  480. style={{ width: 150 ,marginRight:'10px',marginTop:'10px',marginBottom:'10px'}}
  481. value={this.state.departmentSearch}
  482. onChange={(e) => { this.setState({ departmentSearch: e }) }}>
  483. {
  484. departmentArr.map(function (item) {
  485. return <Select.Option key={item.name} >{item.name}</Select.Option>
  486. })
  487. }
  488. </Select>
  489. <Input value={this.state.uesrNameSearch} placeholder="用户姓名" style={{width:'150px',marginRight:'5px'}}
  490. onChange={(e)=>{this.setState({uesrNameSearch:e.target.value})}} />
  491. <span style={{fontSize:'16px'}}>选择日期 : </span>
  492. <DatePicker onChange={this.selTime} value={this.state.Dtime}/>
  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.timeState?this.state.txtTime:this.state.Nowtime}</span>
  498. <span>个人营销业绩统计表</span>
  499. <span>(每日17:00统计当天数据)</span>
  500. </div>
  501. <div className="patent-table">
  502. <div className="scroll">
  503. <Spin spinning={this.state.loading}>
  504. <Table columns={this.state.columns}
  505. dataSource={this.state.dataSource}
  506. bordered
  507. scroll={{x:1780}}
  508. pagination={this.state.pagination}
  509. />
  510. </Spin>
  511. </div>
  512. </div>
  513. </div>
  514. )
  515. }
  516. });
  517. export default PersonalReport;