personalReport.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  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. key: 'nub',
  176. render:(text,record)=>{
  177. if(!record.theNumber){
  178. return text
  179. }else{
  180. return {
  181. children: text,
  182. props: {
  183. colSpan:0
  184. },
  185. }
  186. }
  187. }
  188. },
  189. {
  190. title: '姓名',
  191. dataIndex: 'name',
  192. key: 'name',
  193. render:(text,record)=>{
  194. if(!record.theNumber){
  195. return text
  196. }else{
  197. return {
  198. children: text,
  199. props: {
  200. colSpan:5
  201. },
  202. }
  203. }
  204. }
  205. },{
  206. title: '部门',
  207. dataIndex: 'departmentName',
  208. key: 'departmentName',
  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: 'position',
  225. key: 'position',
  226. render:(text,record)=>{
  227. if(!record.theNumber){
  228. return text
  229. }else{
  230. return {
  231. children: text,
  232. props: {
  233. colSpan:0
  234. },
  235. }
  236. }
  237. }
  238. },{
  239. title: '入职时间',
  240. dataIndex: 'enrollTime',
  241. key: 'enrollTime',
  242. render:(text,record)=>{
  243. if(!record.theNumber){
  244. return text
  245. }else{
  246. return {
  247. children: text,
  248. props: {
  249. colSpan:0
  250. },
  251. }
  252. }
  253. }
  254. },{
  255. title: '当日营销客户数',
  256. children: [
  257. {
  258. title: '总数',
  259. dataIndex: 'num',
  260. key: 'num',
  261. sorter: (a, b) => a.num - b.num,
  262. },{
  263. title: '新增',
  264. dataIndex: 'age2',
  265. key: 'age2',
  266. sorter: (a, b) => a.age - b.age,
  267. },{
  268. title: '回访',
  269. dataIndex: 'age3',
  270. key: 'age3',
  271. sorter: (a, b) => a.age - b.age,
  272. },{
  273. title: '有效',
  274. dataIndex: 'age4',
  275. key: 'age4',
  276. sorter: (a, b) => a.age - b.age,
  277. },
  278. ],
  279. }, {
  280. title: '当日营销方式',
  281. children: [
  282. {
  283. title: '总数',
  284. dataIndex: 'age11',
  285. key: 'age11',
  286. sorter: (a, b) => a.age - b.age,
  287. },{
  288. title: '电话',
  289. dataIndex: 'age22',
  290. key: 'age22',
  291. sorter: (a, b) => a.age - b.age,
  292. },{
  293. title: '外拜',
  294. dataIndex: 'age33',
  295. key: 'age33',
  296. sorter: (a, b) => a.age - b.age,
  297. },{
  298. title: '邮件',
  299. dataIndex: 'age44',
  300. key: 'age44',
  301. sorter: (a, b) => a.age - b.age,
  302. },{
  303. title: '微信',
  304. dataIndex: 'age55',
  305. key: 'age55',
  306. sorter: (a, b) => a.age - b.age,
  307. }
  308. ],
  309. },
  310. {
  311. title: '本日签单业绩',
  312. children: [
  313. {
  314. title: '数量',
  315. dataIndex: 'dailyOrderCount',
  316. key: 'dailyOrderCount',
  317. sorter: (a, b) => a.dailyOrderCount - b.dailyOrderCount,
  318. },{
  319. title: '金额',
  320. dataIndex: 'dailyOrderAmount',
  321. key: 'dailyOrderAmount',
  322. sorter: (a, b) => a.dailyOrderAmount - b.dailyOrderAmount,
  323. }
  324. ],
  325. },{
  326. title: '本周签单业绩',
  327. children: [
  328. {
  329. title: '数量',
  330. dataIndex: 'weeklyOrderCount',
  331. key: 'weeklyOrderCount',
  332. sorter: (a, b) => a.weeklyOrderCount - b.weeklyOrderCount,
  333. },{
  334. title: '金额',
  335. dataIndex: 'weeklyOrderAmount',
  336. key: 'weeklyOrderAmount',
  337. sorter: (a, b) => a.weeklyOrderAmount - b.weeklyOrderAmount,
  338. }
  339. ],
  340. },{
  341. title: '本月签单业绩',
  342. children: [
  343. {
  344. title: '数量',
  345. dataIndex: 'monthlyOrderCount',
  346. key: 'monthlyOrderCount',
  347. sorter: (a, b) => a.monthlyOrderCount - b.monthlyOrderCount,
  348. },{
  349. title: '金额',
  350. dataIndex: 'monthlyOrderAmount',
  351. key: 'monthlyOrderAmount',
  352. sorter: (a, b) => a.monthlyOrderAmount - b.monthlyOrderAmount,
  353. }
  354. ],
  355. },{
  356. title: '本季签单业绩',
  357. children: [
  358. {
  359. title: '数量',
  360. dataIndex: 'quarterlyOrderCount',
  361. key: 'quarterlyOrderCount',
  362. sorter: (a, b) => a.quarterlyOrderCount - b.quarterlyOrderCount,
  363. },{
  364. title: '金额',
  365. dataIndex: 'quarterlyOrderAmount',
  366. key: 'quarterlyOrderAmount',
  367. sorter: (a, b) => a.quarterlyOrderAmount - b.quarterlyOrderAmount,
  368. }
  369. ],
  370. },{
  371. title: '本年签单业绩',
  372. children: [
  373. {
  374. title: '数量',
  375. dataIndex: 'annuallyOrderCount',
  376. key: 'annuallyOrderCount',
  377. sorter: (a, b) => a.annuallyOrderCount - b.annuallyOrderCount,
  378. },{
  379. title: '金额',
  380. dataIndex: 'annuallyOrderAmount',
  381. key: 'annuallyOrderAmount',
  382. sorter: (a, b) => a.annuallyOrderAmount - b.annuallyOrderAmount,
  383. }
  384. ],
  385. }
  386. ],
  387. dataSource: [],
  388. };
  389. },
  390. search() {
  391. this.totalData()
  392. },
  393. reset() {
  394. this.state.departmentSearch = undefined;
  395. this.state.postSearch = undefined;
  396. this.state.uesrNameSearch = '';
  397. this.totalData()
  398. },
  399. componentWillMount() {
  400. this.departmentList();
  401. this.totalData();
  402. let times=new Date();
  403. let nowTime=times.getFullYear()+'年'+(times.getMonth()+1)+'月'+times.getDate()+'日';
  404. this.setState({
  405. Nowtime:nowTime
  406. })
  407. },
  408. render() {
  409. let departmentArr = this.state.departmentArr || [];
  410. return(
  411. <div className='set-content'>
  412. <span style={{fontSize:'16px'}}>个人业绩统计报表</span>
  413. <div className="clearfix">
  414. <Select placeholder="部门机构"
  415. style={{ width: 150 ,marginRight:'10px',marginTop:'10px',marginBottom:'10px'}}
  416. value={this.state.departmentSearch}
  417. onChange={(e) => { this.setState({ departmentSearch: e }) }}>
  418. {
  419. departmentArr.map(function (item) {
  420. return <Select.Option key={item.id} >{item.name}</Select.Option>
  421. })
  422. }
  423. </Select>
  424. <Input value={this.state.uesrNameSearch} placeholder="用户姓名" style={{width:'150px'}}
  425. onChange={(e)=>{this.setState({uesrNameSearch:e.target.value})}} />
  426. <Select placeholder="职务"
  427. style={{ width: 150 ,marginRight:'10px',marginLeft:'10px'}}
  428. value={this.state.postSearch}
  429. onChange={(e) => { this.setState({ postSearch: e }) }}>
  430. {
  431. post.map(function (item) {
  432. return <Select.Option key={item.value} >{item.key}</Select.Option>
  433. })
  434. }
  435. </Select>
  436. <Button type="primary" onClick={this.search} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
  437. <Button onClick={this.reset}>重置</Button>
  438. </div>
  439. <div className="surfaceTitle">
  440. <span>湖南科德公司</span>
  441. <span className="nowtime">{this.state.Nowtime}</span>
  442. <span>个人营销业绩统计表</span>
  443. </div>
  444. <div className="patent-table">
  445. <div className="scroll">
  446. <Spin spinning={this.state.loading}>
  447. <Table columns={this.state.columns}
  448. dataSource={this.state.dataSource}
  449. bordered
  450. pagination={false}
  451. />
  452. </Spin>
  453. </div>
  454. </div>
  455. </div>
  456. )
  457. }
  458. });
  459. export default PersonalReport;