personalReport.jsx 13 KB

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