personalReport.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  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;
  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. },
  118. success: function(data) {
  119. let thedata = data.data;
  120. let theArr = [];
  121. if(!thedata) {
  122. if(data.error && data.error.length) {
  123. message.warning(data.error[0].message);
  124. };
  125. thedata = {};
  126. }
  127. this.loadData(thedata,page)
  128. }.bind(this),
  129. }).always(function() {
  130. this.setState({
  131. loading: false
  132. });
  133. }.bind(this));
  134. },
  135. departmentList() {
  136. this.setState({
  137. loading: true
  138. });
  139. $.ajax({
  140. method: "post",
  141. dataType: "json",
  142. crossDomain: false,
  143. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  144. data: {
  145. },
  146. success: function(data) {
  147. let thedata = data.data;
  148. let theArr = [];
  149. if(!thedata) {
  150. if(data.error && data.error.length) {
  151. message.warning(data.error[0].message);
  152. };
  153. thedata = {};
  154. } else {
  155. thedata.map(function(item, index) {
  156. theArr.push({
  157. key: index,
  158. name: item.name,
  159. id: item.id,
  160. depNo: item.depNo
  161. })
  162. })
  163. }
  164. this.setState({
  165. departmentArr: theArr,
  166. })
  167. }.bind(this),
  168. }).always(function() {
  169. this.setState({
  170. loading: false
  171. });
  172. }.bind(this));
  173. },
  174. getInitialState() {
  175. return {
  176. selectedRowKeys: [],
  177. selectedRows: [],
  178. loading: false,
  179. visible: false,
  180. showDesc: false,
  181. timeState:false,
  182. pagination: {
  183. defaultCurrent: 1,
  184. defaultPageSize: 11,
  185. showQuickJumper: true,
  186. pageSize: 11,
  187. onChange: function (page) {
  188. this.totalData(page);
  189. }.bind(this),
  190. showTotal: function (total) {
  191. return '共' + total + '条数据';
  192. }
  193. },
  194. columns: [
  195. {
  196. title: '序号',
  197. dataIndex: 'nub',
  198. width:50,
  199. fixed:true,
  200. key: 'nub',
  201. render:(text,record)=>{
  202. if(!record.theNumber){
  203. return text
  204. }else{
  205. return {
  206. children: text,
  207. props: {
  208. colSpan:1
  209. },
  210. }
  211. }
  212. }
  213. },
  214. {
  215. title: '姓名',
  216. dataIndex: 'name',
  217. width:100,
  218. fixed:true,
  219. key: 'name',
  220. render:(text,record)=>{
  221. if(!record.theNumber){
  222. return text
  223. }else{
  224. return {
  225. children: text,
  226. props: {
  227. colSpan:0
  228. },
  229. }
  230. }
  231. }
  232. },{
  233. title: '部门',
  234. dataIndex: 'departmentName',
  235. width:100,
  236. fixed:true,
  237. key: 'departmentName',
  238. render:(text,record)=>{
  239. if(!record.theNumber){
  240. return text&&text.length>6?<span title={text}>{text.substr(0,6)+'…'}</span>:text
  241. }else{
  242. return {
  243. children: text,
  244. props: {
  245. colSpan:4
  246. },
  247. }
  248. }
  249. }
  250. },
  251. {
  252. title: '职务',
  253. dataIndex: 'position',
  254. key: 'position',
  255. fixed:true,
  256. width:100,
  257. render:(text,record)=>{
  258. if(!record.theNumber){
  259. return text
  260. }else{
  261. return {
  262. children: text,
  263. props: {
  264. colSpan:0
  265. },
  266. }
  267. }
  268. }
  269. },{
  270. title: '入职时间',
  271. width:100,
  272. fixed:true,
  273. dataIndex: 'enrollTime',
  274. key: 'enrollTime',
  275. render:(text,record)=>{
  276. if(!record.theNumber){
  277. return text
  278. }else{
  279. return {
  280. children: text,
  281. props: {
  282. colSpan:0
  283. },
  284. }
  285. }
  286. }
  287. },{
  288. title: '当日营销客户数',
  289. children: [
  290. {
  291. title: '总数',
  292. dataIndex: 'num',
  293. width:70,
  294. key: 'num',
  295. sorter: (a, b) => a.num - b.num,
  296. },{
  297. title: '新增',
  298. dataIndex: 'age2',
  299. width:70,
  300. key: 'age2',
  301. sorter: (a, b) => a.age - b.age,
  302. },{
  303. title: '回访',
  304. width:70,
  305. dataIndex: 'age3',
  306. key: 'age3',
  307. sorter: (a, b) => a.age - b.age,
  308. },{
  309. title: '有效',
  310. width:70,
  311. dataIndex: 'age4',
  312. key: 'age4',
  313. sorter: (a, b) => a.age - b.age,
  314. },
  315. ],
  316. }, {
  317. title: '当日营销方式',
  318. children: [
  319. {
  320. title: '总数',
  321. width:70,
  322. dataIndex: 'age11',
  323. key: 'age11',
  324. sorter: (a, b) => a.age - b.age,
  325. },{
  326. title: '电话',
  327. width:70,
  328. dataIndex: 'age22',
  329. key: 'age22',
  330. sorter: (a, b) => a.age - b.age,
  331. },{
  332. title: '外拜',
  333. width:70,
  334. dataIndex: 'age33',
  335. key: 'age33',
  336. sorter: (a, b) => a.age - b.age,
  337. },{
  338. title: '邮件',
  339. width:70,
  340. dataIndex: 'age44',
  341. key: 'age44',
  342. sorter: (a, b) => a.age - b.age,
  343. },{
  344. title: '微信',
  345. width:70,
  346. dataIndex: 'age55',
  347. key: 'age55',
  348. sorter: (a, b) => a.age - b.age,
  349. }
  350. ],
  351. },
  352. {
  353. title: '本日签单业绩',
  354. children: [
  355. {
  356. title: '数量',
  357. width:70,
  358. dataIndex: 'dailyOrderCount',
  359. key: 'dailyOrderCount',
  360. sorter: (a, b) => a.dailyOrderCount - b.dailyOrderCount,
  361. },{
  362. title: '金额',
  363. width:70,
  364. dataIndex: 'dailyOrderAmount',
  365. key: 'dailyOrderAmount',
  366. sorter: (a, b) => a.dailyOrderAmount - b.dailyOrderAmount,
  367. }
  368. ],
  369. },{
  370. title: '本周签单业绩',
  371. children: [
  372. {
  373. title: '数量',
  374. width:70,
  375. dataIndex: 'weeklyOrderCount',
  376. key: 'weeklyOrderCount',
  377. sorter: (a, b) => a.weeklyOrderCount - b.weeklyOrderCount,
  378. },{
  379. title: '金额',
  380. width:70,
  381. dataIndex: 'weeklyOrderAmount',
  382. key: 'weeklyOrderAmount',
  383. sorter: (a, b) => a.weeklyOrderAmount - b.weeklyOrderAmount,
  384. }
  385. ],
  386. },{
  387. title: '本月签单业绩',
  388. children: [
  389. {
  390. title: '数量',
  391. width:70,
  392. dataIndex: 'monthlyOrderCount',
  393. key: 'monthlyOrderCount',
  394. sorter: (a, b) => a.monthlyOrderCount - b.monthlyOrderCount,
  395. },{
  396. title: '金额',
  397. width:70,
  398. dataIndex: 'monthlyOrderAmount',
  399. key: 'monthlyOrderAmount',
  400. sorter: (a, b) => a.monthlyOrderAmount - b.monthlyOrderAmount,
  401. }
  402. ],
  403. },{
  404. title: '本季签单业绩',
  405. children: [
  406. {
  407. title: '数量',
  408. width:70,
  409. dataIndex: 'quarterlyOrderCount',
  410. key: 'quarterlyOrderCount',
  411. sorter: (a, b) => a.quarterlyOrderCount - b.quarterlyOrderCount,
  412. },{
  413. title: '金额',
  414. width:70,
  415. dataIndex: 'quarterlyOrderAmount',
  416. key: 'quarterlyOrderAmount',
  417. sorter: (a, b) => a.quarterlyOrderAmount - b.quarterlyOrderAmount,
  418. }
  419. ],
  420. },{
  421. title: '本年签单业绩',
  422. children: [
  423. {
  424. title: '数量',
  425. width:70,
  426. dataIndex: 'annuallyOrderCount',
  427. key: 'annuallyOrderCount',
  428. sorter: (a, b) => a.annuallyOrderCount - b.annuallyOrderCount,
  429. },{
  430. title: '金额',
  431. width:70,
  432. dataIndex: 'annuallyOrderAmount',
  433. key: 'annuallyOrderAmount',
  434. sorter: (a, b) => a.annuallyOrderAmount - b.annuallyOrderAmount,
  435. }
  436. ],
  437. }
  438. ],
  439. dataSource: [],
  440. };
  441. },
  442. search() {
  443. this.totalData()
  444. },
  445. reset() {
  446. this.state.departmentSearch = undefined;
  447. this.state.postSearch = undefined;
  448. this.state.uesrNameSearch = '';
  449. this.state.Dtime = undefined;
  450. this.state.selTime='';
  451. this.state.timeState=false;
  452. this.totalData();
  453. },
  454. //时间选择
  455. selTime(value,index){
  456. this.setState({
  457. Dtime:value,
  458. selTime:index
  459. })
  460. },
  461. componentWillMount() {
  462. this.departmentList();
  463. this.totalData();
  464. let times=new Date();
  465. let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';
  466. this.setState({
  467. Nowtime:nowTime
  468. })
  469. },
  470. render() {
  471. let departmentArr = this.state.departmentArr || [];
  472. return(
  473. <div className='set-content'>
  474. <span style={{fontSize:'20px'}}>个人业绩统计报表</span>
  475. <div className="clearfix">
  476. <Select placeholder="部门机构"
  477. style={{ width: 150 ,marginRight:'10px',marginTop:'10px',marginBottom:'10px'}}
  478. value={this.state.departmentSearch}
  479. onChange={(e) => { this.setState({ departmentSearch: e }) }}>
  480. {
  481. departmentArr.map(function (item) {
  482. return <Select.Option key={item.name} >{item.name}</Select.Option>
  483. })
  484. }
  485. </Select>
  486. <Input value={this.state.uesrNameSearch} placeholder="用户姓名" style={{width:'150px',marginRight:'5px'}}
  487. onChange={(e)=>{this.setState({uesrNameSearch:e.target.value})}} />
  488. <span style={{fontSize:'16px'}}>选择日期 : </span>
  489. <DatePicker onChange={this.selTime} value={this.state.Dtime}/>
  490. <Button type="primary" onClick={this.search} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
  491. <Button onClick={this.reset}>重置</Button>
  492. </div>
  493. <div className="surfaceTitle">
  494. <span className="nowtime">{this.state.timeState?this.state.txtTime:this.state.Nowtime}</span>
  495. <span>个人营销业绩统计表</span>
  496. </div>
  497. <div className="patent-table">
  498. <div className="scroll">
  499. <Spin spinning={this.state.loading}>
  500. <Table columns={this.state.columns}
  501. dataSource={this.state.dataSource}
  502. bordered
  503. scroll={{x:1780}}
  504. pagination={this.state.pagination}
  505. />
  506. </Spin>
  507. </div>
  508. </div>
  509. </div>
  510. )
  511. }
  512. });
  513. export default PersonalReport;