adminCustomerStatistics.jsx 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572
  1. "use strict";
  2. import React from 'react';
  3. import ReactDom from 'react-dom';
  4. import ajax from 'jquery/src/ajax/xhr.js';
  5. import $ from 'jquery/src/ajax';
  6. import { Form, Radio, Icon, Button, Input, Select, Spin, Table, Switch, message, DatePicker, Modal, Upload, Popconfirm } from 'antd';
  7. import ManagementDetaile from "../../order/settlementOrder/settlementManage/managementDetaile.2.jsx";
  8. import moment from 'moment';
  9. import '../../order/userMangagement.less';
  10. import { orderState, orderChannel, orderType } from '../../../dataDic.js';
  11. import { getProjectState, getOrderChannel, getOrderType, getOrderState, getPaymentState, getApprovedState } from '../../../tools.js';
  12. const AdminCustomerStatistics = Form.create()(React.createClass({
  13. loadData(pageNo) {
  14. this.state.data = [];
  15. this.setState({
  16. loading: true
  17. });
  18. $.ajax({
  19. method: "get",
  20. dataType: "json",
  21. crossDomain: false,
  22. url: globalConfig.context + '/api/admin/customer/selectAdminCustomerStatistics',
  23. data: {
  24. pageNo: pageNo || 1,
  25. pageSize: this.state.pagination.pageSize,
  26. buyerName: this.state.buyerNameSearch,
  27. depId: this.state.departmenttSearch, //部门
  28. salesmanName: this.state.salesmanNameSearch, //负责人
  29. startTime: this.state.releaseDate[0],
  30. endTime: this.state.releaseDate[1],
  31. liquidationStatus: this.state.liquidationStatusSearch, //结算
  32. orderStatus: this.state.orderStatusSearch,
  33. orderChannel: this.state.orderChannelSearch,
  34. financeName: this.state.financeNameSearchs,
  35. orderType: this.state.orderTypeSearch,
  36. orderNo: this.state.orderNoSearch,
  37. isDistributionFinance: this.state.isDistributionFinance
  38. },
  39. success: function(data) {
  40. let theArr = [];
  41. if(!data.data) {
  42. if(data.error && data.error.length) {
  43. message.warning(data.error[0].message);
  44. };
  45. } else {
  46. for(let i = 0; i < data.data.list.length; i++) {
  47. let thisdata = data.data.list[i];
  48. theArr.push({
  49. key: i+1,
  50. aid:thisdata.aid,
  51. aName:thisdata.aName,
  52. depName:thisdata.depName,
  53. userCount:thisdata.userCount,
  54. timeCount:thisdata.timeCount,
  55. // key: i,
  56. // id: thisdata.id,
  57. // orderNo: thisdata.orderNo, //订单编号
  58. // orderType: thisdata.orderType, //订单类型
  59. // orderStatus: thisdata.orderStatus,
  60. // liquidationStatus: thisdata.liquidationStatus,
  61. // createTime: thisdata.createTime,
  62. // buyerName: thisdata.buyerName,
  63. // signTotalAmount: thisdata.signTotalAmount,
  64. // projectStage: thisdata.projectStage,
  65. // approval: thisdata.approval,
  66. // orderChannel: thisdata.orderChannel,
  67. // salesmanName: thisdata.salesmanName,
  68. // active: thisdata.active,
  69. // departmentName: thisdata.departmentName,
  70. // salesmanName: thisdata.salesmanName,
  71. // financeName: thisdata.financeName,
  72. // technicianName: thisdata.technicianName,
  73. });
  74. };
  75. this.state.pagination.current = data.data.pageNo;
  76. this.state.pagination.total = data.data.totalCount;
  77. };
  78. if(!data.data.list.length) {
  79. this.state.pagination.current = 0
  80. this.state.pagination.total = 0
  81. }
  82. this.setState({
  83. pageNo: pageNo,
  84. dataSource: theArr,
  85. pagination: this.state.pagination,
  86. selectedRowKeys: [],
  87. signBillVisible: false
  88. });
  89. }.bind(this),
  90. }).always(function() {
  91. this.setState({
  92. loading: false
  93. });
  94. }.bind(this));
  95. },
  96. //部门
  97. departmentList() {
  98. this.setState({
  99. loading: true
  100. });
  101. $.ajax({
  102. method: "get",
  103. dataType: "json",
  104. crossDomain: false,
  105. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  106. data: {
  107. },
  108. success: function(data) {
  109. let thedata = data.data;
  110. let theArr = [];
  111. if(!thedata) {
  112. if(data.error && data.error.length) {
  113. message.warning(data.error[0].message);
  114. };
  115. thedata = {};
  116. } else {
  117. thedata.map(function(item, index) {
  118. theArr.push({
  119. key: index,
  120. name: item.name,
  121. id: item.id,
  122. })
  123. })
  124. }
  125. this.setState({
  126. departmentArr: theArr,
  127. })
  128. }.bind(this),
  129. }).always(function() {
  130. this.setState({
  131. loading: false
  132. });
  133. }.bind(this));
  134. },
  135. getInitialState() {
  136. return {
  137. datauser: {},
  138. selectedRowKeys: [],
  139. releaseDate: [],
  140. selectedRows: [],
  141. departmentArr: [],
  142. searchMore: true,
  143. loading: false,
  144. distributionVisible: false,
  145. visible: false,
  146. showDesc: false,
  147. pagination: {
  148. defaultCurrent: 1,
  149. defaultPageSize: 10,
  150. showQuickJumper: true,
  151. pageSize: 10,
  152. onChange: function(page) {
  153. this.loadData(page);
  154. }.bind(this),
  155. showTotal: function(total) {
  156. return '共' + total + '条数据';
  157. }
  158. },
  159. columns: [{
  160. title: '编号',
  161. dataIndex: 'key',
  162. key: 'key'
  163. }, {
  164. title: '营销员名称',
  165. dataIndex: 'aName',
  166. key: 'aName',
  167. // render: text => {
  168. // return getOrderType(text)
  169. // }
  170. }, {
  171. title: '部门名称',
  172. dataIndex: 'depName',
  173. key: 'depName',
  174. // render: (text) => {
  175. // return(text && text.length > 9 ? text.substr(0, 9) + '...' : text)
  176. // }
  177. }, {
  178. title: '客户数',
  179. dataIndex: 'userCount',
  180. key: 'userCount',
  181. // render: (text) => {
  182. // return(text && text.length > 9 ? text.substr(0, 9) + '...' : text)
  183. // }
  184. }, {
  185. title: '时间内客户数',
  186. dataIndex: 'timeCount',
  187. key: 'timeCount'
  188. // }, {
  189. // title: '订单状态',
  190. // dataIndex: 'orderStatus',
  191. // key: 'orderStatus',
  192. // render: (text) => {
  193. // return getOrderState(text)
  194. // }
  195. // }, {
  196. // title: '结算状态',
  197. // dataIndex: 'liquidationStatus',
  198. // key: 'liquidationStatus',
  199. // render: text => {
  200. // return getPaymentState(text)
  201. // }
  202. // }, {
  203. // title: '项目状态',
  204. // dataIndex: 'projectStage',
  205. // key: 'projectStage',
  206. // render: text => {
  207. // return getProjectState(text)
  208. // }
  209. // }, {
  210. // title: '是否特批',
  211. // dataIndex: 'approval',
  212. // key: 'approval',
  213. // render: text => {
  214. // return getApprovedState(text)
  215. // }
  216. // }, {
  217. // title: '订单部门',
  218. // dataIndex: 'departmentName',
  219. // key: 'departmentName',
  220. // }, {
  221. // title: '订单负责人',
  222. // dataIndex: 'salesmanName',
  223. // key: 'salesmanName',
  224. // }, {
  225. // title: '财务负责人',
  226. // dataIndex: 'financeName',
  227. // key: 'financeName',
  228. // }, {
  229. // title: '项目负责人',
  230. // dataIndex: 'technicianName',
  231. // key: 'technicianName',
  232. // }, {
  233. // title: '操作',
  234. // dataIndex: 'operation',
  235. // key: 'operation',
  236. // render: (text, record, index) => {
  237. // return <div>
  238. // {!record.financeName&&<Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation(),this.confirmDelet(record)}} type="primary">派单</Button>}
  239. // </div>
  240. // }
  241. }],
  242. userList: [{
  243. title: '用户编号',
  244. dataIndex: 'userNo',
  245. key: 'userNo'
  246. }, {
  247. title: '用户姓名',
  248. dataIndex: 'name',
  249. key: 'name'
  250. }, {
  251. title: '部门机构',
  252. dataIndex: 'departmentName',
  253. key: 'departmentName'
  254. }, {
  255. title: '职务',
  256. dataIndex: 'position',
  257. key: 'position'
  258. }, {
  259. title: '联系手机',
  260. dataIndex: 'mobile',
  261. key: 'mobile'
  262. }, {
  263. title: '操作',
  264. dataIndex: 'abc',
  265. key: 'abc',
  266. render: (text, record, index) => {
  267. return(
  268. <Popconfirm title={'您确认将订单 【'+ this.state.orderNot+'】 分配给【'+record.departmentName+'-'+record.name+'】进行业务跟进?'} onConfirm={(e)=>{this.confirmSelect(record)}} okText="确认" cancelText="取消">
  269. <Button style={{marginRight:'5px'}} type="primary">选定</Button>
  270. </Popconfirm>
  271. )
  272. }
  273. }],
  274. dataSource: [],
  275. };
  276. },
  277. //操作分配
  278. confirmDelet(index) {
  279. this.setState({
  280. orderNot: index.orderNo,
  281. userDetaile: false,
  282. distributionVisible: true
  283. });
  284. },
  285. distributionCancel() {
  286. this.setState({
  287. distributionVisible: false
  288. })
  289. },
  290. distributionOk() {
  291. this.setState({
  292. distributionVisible: false
  293. })
  294. },
  295. //分配对象列表
  296. contactList() {
  297. $.ajax({
  298. method: "get",
  299. dataType: "json",
  300. crossDomain: false,
  301. url: globalConfig.context + '/api/admin/superviser/adminList',
  302. data: {
  303. pageNo: 1,
  304. pageSize: 99,
  305. departmentId: this.state.departmenttList,
  306. name: this.state.financeNameSearch,
  307. },
  308. success: function(data) {
  309. let theArr = [];
  310. if(!data.data) {
  311. if(data.error && data.error.length) {
  312. message.warning(data.error[0].message);
  313. };
  314. } else {
  315. for(let i = 0; i < data.data.list.length; i++) {
  316. let thisdata = data.data.list[i];
  317. theArr.push({
  318. key: i,
  319. id: thisdata.id,
  320. userNo: thisdata.userNo,
  321. name: thisdata.name,
  322. departmentName: thisdata.departmentName,
  323. departmentId: thisdata.departmentId,
  324. position: thisdata.position,
  325. mobile: thisdata.mobile,
  326. });
  327. };
  328. };
  329. this.setState({
  330. distributionList: theArr,
  331. });
  332. }.bind(this),
  333. }).always(function() {
  334. this.setState({
  335. loading: false
  336. });
  337. }.bind(this));
  338. },
  339. //选定对象
  340. confirmSelect(record) {
  341. this.setState({
  342. loading: true
  343. });
  344. $.ajax({
  345. method: "POST",
  346. dataType: "json",
  347. crossDomain: false,
  348. url: globalConfig.context + "/api/admin/order/distributionOrder",
  349. data: {
  350. orderNo: this.state.orderNot,
  351. financeId: record.id
  352. }
  353. }).done(function(data) {
  354. if(!data.error.length) {
  355. message.success('分派成功!');
  356. this.setState({
  357. loading: false,
  358. });
  359. this.distributionOk();
  360. } else {
  361. message.warning(data.error[0].message);
  362. };
  363. this.loadData(this.state.pageNo);
  364. }.bind(this));
  365. },
  366. componentWillMount() {
  367. this.departmentList();
  368. this.loadData();
  369. },
  370. tableRowClick(record, index) {
  371. this.state.userDetaile = true;
  372. this.state.datauser = record;
  373. this.setState({
  374. showDesc: true
  375. });
  376. },
  377. closeDesc(e, s) {
  378. this.state.userDetaile = false;
  379. this.state.showDesc = e;
  380. if(s) {
  381. this.loadData(this.state.pageNo);
  382. };
  383. },
  384. searchSwitch() {
  385. this.setState({
  386. searchMore: !this.state.searchMore
  387. });
  388. },
  389. search() {
  390. this.loadData();
  391. },
  392. //分配时搜索
  393. searchOrder() {
  394. this.contactList();
  395. },
  396. //分配时重置
  397. resetOrder() {
  398. this.setState({
  399. departmenttList: undefined,
  400. financeNameSearch: ''
  401. })
  402. },
  403. reset() {
  404. this.state.buyerNameSearch = '';
  405. this.state.financeNameSearchs = '';
  406. this.state.orderNoSearch = '';
  407. this.state.releaseDate[0] = undefined;
  408. this.state.releaseDate[1] = undefined;
  409. this.state.orderChannelSearch = undefined;
  410. this.state.liquidationStatusSearch = undefined;
  411. this.state.orderStatusSearch = undefined;
  412. this.state.salesmanNameSearch = undefined;
  413. this.state.departmenttSearch = undefined;
  414. this.state.approved = undefined;
  415. this.state.orderChannelSearch = undefined;
  416. this.state.orderTypeSearch = undefined;
  417. this.state.isDistributionFinance = undefined;
  418. this.loadData();
  419. },
  420. render() {
  421. const rowSelection = {
  422. selectedRowKeys: this.state.selectedRowKeys,
  423. onChange: (selectedRowKeys, selectedRows) => {
  424. this.setState({
  425. selectedRows: selectedRows.slice(-1),
  426. selectedRowKeys: selectedRowKeys.slice(-1)
  427. });
  428. },
  429. onSelectAll: (selected, selectedRows, changeRows) => {
  430. this.setState({
  431. selectedRowKeys: []
  432. })
  433. },
  434. };
  435. let departmentArr = this.state.departmentArr || [];
  436. const hasSelected = this.state.selectedRowKeys.length > 0;
  437. const {
  438. RangePicker
  439. } = DatePicker;
  440. return(
  441. <div className="user-content" >
  442. <div className="content-title">
  443. <span style={{fontSize:'16px'}}>结算订单管理</span>
  444. <div className="user-search">
  445. {/*<Input placeholder="客户名称" style={{width:'150px'}}
  446. value={this.state.buyerNameSearch}
  447. onChange={(e) => { this.setState({ buyerNameSearch: e.target.value }); }} />
  448. */}
  449. <RangePicker
  450. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  451. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  452. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  453. <Select placeholder="订单部门"
  454. style={{ width: 150 ,marginRight:'10px',marginLeft:'10px'}}
  455. value={this.state.departmenttSearch}
  456. onChange={(e) => { this.setState({ departmenttSearch: e }) }}>
  457. {
  458. departmentArr.map(function (item) {
  459. return <Select.Option key={item.id} >{item.name}</Select.Option>
  460. })
  461. }
  462. </Select>
  463. {/*<Input placeholder="订单负责人" style={{width:'150px'}}
  464. value={this.state.salesmanNameSearch}
  465. onChange={(e) => { this.setState({ salesmanNameSearch: e.target.value }); }} />
  466. <Input placeholder="财务负责人" style={{width:'150px'}}
  467. value={this.state.financeNameSearchs}
  468. onChange={(e) => { this.setState({ financeNameSearchs: e.target.value }); }} />
  469. */}
  470. <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
  471. <Button onClick={this.reset}>重置</Button>
  472. {/*<span style={{marginLeft:'10px',marginRight:'20px'}}>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  473. */}
  474. </div>
  475. {/*<div className='clearfix' style={{marginTop:'5px'}}>
  476. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  477. <Input placeholder="订单编号" style={{width:'150px'}}
  478. value={this.state.orderNoSearch}
  479. onChange={(e) => { this.setState({ orderNoSearch: e.target.value }); }} />
  480. <Select placeholder="订单类型"
  481. style={{ width: 150 }}
  482. value={this.state.orderTypeSearch}
  483. onChange={(e) => { this.setState({ orderTypeSearch: e }) }}>
  484. {
  485. orderType.map(function (item) {
  486. return <Select.Option key={item.value} >{item.key}</Select.Option>
  487. })
  488. }
  489. </Select>
  490. <Select placeholder="订单状态"
  491. style={{ width: 150 ,margin:'10px'}}
  492. value={this.state.orderStatusSearch}
  493. onChange={(e) => { this.setState({ orderStatusSearch: e }) }}>
  494. {
  495. orderState.map(function (item) {
  496. return <Select.Option key={item.value} >{item.key}</Select.Option>
  497. })
  498. }
  499. </Select>
  500. <Select placeholder="是否分配财务"
  501. style={{ width: 150 }}
  502. value={this.state.isDistributionFinance }
  503. onChange={(e) => { this.setState({ isDistributionFinance: e }) }}>
  504. <Select.Option value="1">已分配 </Select.Option>
  505. <Select.Option value="0">未分配 </Select.Option>
  506. </Select>
  507. </div>
  508. </div>*/}
  509. {<div className="patent-table">
  510. <Spin spinning={this.state.loading}>
  511. <Table columns={this.state.columns}
  512. dataSource={this.state.dataSource}
  513. rowSelection={rowSelection}
  514. pagination={this.state.pagination}
  515. onRowClick={this.tableRowClick} />
  516. </Spin>
  517. </div>}
  518. {<ManagementDetaile
  519. confirmDelet={this.confirmDelet}
  520. userDetaile={this.state.userDetaile}
  521. datauser={this.state.datauser}
  522. showDesc={this.state.showDesc}
  523. closeDesc={this.closeDesc} />}
  524. </div >
  525. {/*<Modal maskClosable={false} visible={this.state.distributionVisible}
  526. onOk={this.distributionOk} onCancel={this.distributionCancel}
  527. width='800px'
  528. title='分派财务订单'
  529. footer=''
  530. className="admin-desc-content">
  531. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form" style={{paddingBottom:'40px'}} >
  532. <Spin spinning={this.state.loading}>
  533. <div>
  534. <Select placeholder="部门"
  535. style={{ width: 150 ,marginRight:'10px',marginLeft:'10px'}}
  536. value={this.state.departmenttList}
  537. onChange={(e) => { this.setState({ departmenttList: e }) }}>
  538. {
  539. departmentArr.map(function (item) {
  540. return <Select.Option key={item.id} >{item.name}</Select.Option>
  541. })
  542. }
  543. </Select>
  544. <Input placeholder="财务负责人" style={{width:'150px',marginLeft:'10px'}}
  545. value={this.state.financeNameSearch}
  546. onChange={(e) => { this.setState({ financeNameSearch: e.target.value }); }} />
  547. <Button type="primary" onClick={this.searchOrder} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
  548. <Button onClick={this.resetOrder}>重置</Button>
  549. </div>
  550. <div className="patent-table" style={{marginTop:'10px'}}>
  551. <Spin spinning={this.state.loading}>
  552. <Table columns={this.state.userList}
  553. dataSource={this.state.distributionList}
  554. pagination={false}
  555. />
  556. </Spin>
  557. </div>
  558. </Spin>
  559. </Form>
  560. </Modal>*/}
  561. </div>
  562. );
  563. }
  564. }));
  565. export default AdminCustomerStatistics;