press.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593
  1. import React from 'react';
  2. import { Button, Input, Select, Spin, Table, message,DatePicker, Form ,Modal} from 'antd';
  3. import $ from 'jquery/src/ajax';
  4. import moment from 'moment';
  5. import { getLiquidationStatus,getjiedian,getNewOrderStatus,getProjectStatus} from '@/tools.js';
  6. import './customer.less';
  7. const IntentionCustomer = Form.create()(React.createClass({
  8. loadData(pageNo) {
  9. this.setState({
  10. visitModul:false,
  11. loading: true,
  12. ispage:pageNo,
  13. modalVisible:false
  14. });
  15. $.ajax({
  16. method: "get",
  17. dataType: "json",
  18. crossDomain: false,
  19. url: globalConfig.context +"/api/admin/newOrder/dunOrderNewList",
  20. data: {
  21. pageNo: pageNo || 1,
  22. pageSize: this.state.pagination.pageSize,
  23. name: this.state.customerName,//名称
  24. orderNo: this.state.orderNo,//订单编号
  25. depId: this.state.departmenttSearch,//订单部门
  26. adminName:this.state.adminName,//责任人名称
  27. starTime: this.state.releaseDate[0],//开始时间
  28. endTime: this.state.releaseDate[1],//结束时间
  29. },
  30. success: function(data) {
  31. let theArr = [];
  32. if(data.error.length || data.data.list == "") {
  33. if(data.error && data.error.length) {
  34. message.warning(data.error[0].message);
  35. };
  36. } else {
  37. for(let i = 0; i < data.data.list.length; i++) {
  38. let thisdata = data.data.list[i];
  39. theArr.push({
  40. key: i,
  41. id:thisdata.id,//ID
  42. orderNo: thisdata.orderNo,//订单编号
  43. totalAmount:thisdata.totalAmount,//签单金额
  44. settlementAmount:thisdata.settlementAmount,//已收款
  45. accountsReceivable:thisdata.accountsReceivable,//应收款
  46. uncollectedAmount:thisdata.uncollectedAmount,//应收款
  47. orderStatus:thisdata.orderStatus,//订单状态
  48. projectStatus:thisdata.projectStatus,//项目状态
  49. liquidationStatus:thisdata.liquidationStatus,//结算状态
  50. signDate:thisdata.signDate,//签单时间
  51. userName:thisdata.userName,//客户名称
  52. salesmanName:thisdata.salesmanName,//营销员名称
  53. dunSubject:thisdata.dunSubject,//催收科目
  54. startDate:thisdata.startDate,//催收启动时间
  55. depName:thisdata.depName,//部门名称
  56. contractNo: thisdata.contractNo
  57. });
  58. };
  59. this.state.pagination.total = data.data.totalCount;
  60. };
  61. if(data.data&&data.data.list&&!data.data.list.length){
  62. this.state.pagination.total=0
  63. }
  64. this.setState({
  65. dataSource: theArr,
  66. pageNo: pageNo,
  67. pagination: this.state.pagination,
  68. selectedRowKeys:[]
  69. });
  70. }.bind(this),
  71. }).always(function() {
  72. this.setState({
  73. loading: false
  74. });
  75. }.bind(this));
  76. },
  77. loadDatas(dunId) {
  78. this.setState({
  79. loading: true,
  80. });
  81. $.ajax({
  82. method: "get",
  83. dataType: "json",
  84. crossDomain: false,
  85. url: globalConfig.context +"/api/admin/newOrder/selectDunLogList",
  86. data: {
  87. dunId:dunId,
  88. },
  89. success: function(data) {
  90. let theArr = [];
  91. if(data.error.length || data.data == "") {
  92. if(data.error && data.error.length) {
  93. message.warning(data.error[0].message);
  94. };
  95. } else {
  96. for(let i = 0; i < data.data.length; i++) {
  97. let thisdata = data.data[i];
  98. theArr.push({
  99. key: i,
  100. id:thisdata.id,//ID
  101. dunId: thisdata.dunId,//催款ID
  102. dumBy:thisdata.dumBy,//催款人
  103. dumTime:thisdata.dumDate,//催款时间
  104. remarks:thisdata.remarks,//备注
  105. });
  106. };
  107. };
  108. this.setState({
  109. dataSources: theArr,
  110. });
  111. }.bind(this),
  112. }).always(function() {
  113. this.setState({
  114. loading: false
  115. });
  116. }.bind(this));
  117. },
  118. getInitialState() {
  119. return {
  120. page: 1,
  121. releaseDate: [],
  122. selectedRowKeys: [],
  123. orgCodeUrl: [],
  124. departmentArr: [],
  125. paginations: false,
  126. pagination: {
  127. defaultCurrent: 1,
  128. defaultPageSize: 10,
  129. showQuickJumper: true,
  130. pageSize: 10,
  131. onChange: function(page) {
  132. this.loadData(page);
  133. }.bind(this),
  134. showTotal: function(total) {
  135. return "共" + total + "条数据";
  136. }
  137. },
  138. columns: [
  139. {
  140. title: "序号",
  141. dataIndex: "key",
  142. key: "key"
  143. },
  144. {
  145. title: "合同编号",
  146. dataIndex: "contractNo",
  147. key: "contractNo"
  148. },
  149. {
  150. title: "订单编号",
  151. dataIndex: "orderNo",
  152. key: "orderNo"
  153. },
  154. {
  155. title: "客户名称",
  156. dataIndex: "userName",
  157. key: "userName",
  158. render: text => {
  159. return text && text.length > 9 ? text.substr(0, 9) + "..." : text;
  160. }
  161. },
  162. {
  163. title: "订单负责人",
  164. dataIndex: "salesmanName",
  165. key: "salesmanName"
  166. },
  167. {
  168. title: "订单部门",
  169. dataIndex: "depName",
  170. key: "depName"
  171. },
  172. {
  173. title: "订单状态",
  174. dataIndex: "orderStatus",
  175. key: "orderStatus",
  176. render: text => {
  177. return getNewOrderStatus(text);
  178. }
  179. },
  180. {
  181. title: "项目状态",
  182. dataIndex: "projectStatus",
  183. key: "projectStatus",
  184. render: text => {
  185. return getProjectStatus(text);
  186. }
  187. },
  188. {
  189. title: "签单金额(万元)",
  190. dataIndex: "totalAmount",
  191. key: "totalAmount"
  192. },
  193. {
  194. title: "结算状态",
  195. dataIndex: "liquidationStatus",
  196. key: "liquidationStatus",
  197. render: text => {
  198. return getLiquidationStatus(text);
  199. }
  200. },
  201. {
  202. title: "应收款(万)",
  203. dataIndex: "accountsReceivable",
  204. key: "accountsReceivable"
  205. },
  206. {
  207. title: "已收款(万)",
  208. dataIndex: "settlementAmount",
  209. key: "settlementAmount"
  210. },
  211. {
  212. title: "未收款(万)",
  213. dataIndex: "uncollectedAmount",
  214. key: "uncollectedAmount"
  215. },
  216. {
  217. title: "催收科目",
  218. dataIndex: "dunSubject",
  219. key: "dunSubject",
  220. render: text => {
  221. return getjiedian(text);
  222. }
  223. },
  224. {
  225. title: "催款启动日期",
  226. dataIndex: "startDate",
  227. key: "startDate"
  228. },
  229. {
  230. title: "签单时间",
  231. dataIndex: "signDate",
  232. key: "signDate"
  233. },
  234. // {
  235. // title: "催收操作",
  236. // dataIndex: "abc",
  237. // key: "abc",
  238. // render: (text, record) => {
  239. // return (
  240. // <div>
  241. // <Button
  242. // onClick={e => {
  243. // e.stopPropagation(), this.visit(record);
  244. // }}
  245. // type="primary"
  246. // >
  247. // 添加催款记录
  248. // </Button>
  249. // </div>
  250. // );
  251. // }
  252. // }
  253. ],
  254. data: [],
  255. dataSource: [],
  256. columnsX: [
  257. {
  258. title: "催款人",
  259. dataIndex: "dumBy",
  260. key: "dumBy"
  261. },
  262. {
  263. title: "催款时间",
  264. dataIndex: "dumTime",
  265. key: "dumTime"
  266. },
  267. {
  268. title: "催款情况",
  269. dataIndex: "remarks",
  270. key: "remarks"
  271. }
  272. ],
  273. dataSources: []
  274. };
  275. },
  276. //页面加载函数
  277. componentWillMount() {
  278. this.departmentList();
  279. this.loadData();
  280. },
  281. //进入新增拜访记录
  282. visit(record) {
  283. this.setState({
  284. visible:true,
  285. dunId:record.id
  286. })
  287. },
  288. // //整行点击
  289. tableRowClick(record) {
  290. this.setState({
  291. visibles:true,
  292. });
  293. this.loadDatas(record.id);
  294. },
  295. //新增催款记录
  296. examOk(){
  297. $.ajax({
  298. method: "post",
  299. dataType: "json",
  300. crossDomain: false,
  301. url: globalConfig.context +"/api/admin/newOrder/createDunLog",
  302. data: {
  303. dunId:this.state.dunId,
  304. dumTime:this.state.dumTime,
  305. remarks:this.state.remarks,
  306. },
  307. success: function(data) {
  308. if(data.error.length || data.data.list == "") {
  309. if(data.error && data.error.length) {
  310. message.warning(data.error[0].message);
  311. };
  312. } else {
  313. message.success("新增催款记录成功~");
  314. this.setState({
  315. visible:false,
  316. });
  317. this.loadData();
  318. this.resets();
  319. };
  320. }.bind(this),
  321. }).always(function() {
  322. this.setState({
  323. loading: false
  324. });
  325. }.bind(this));
  326. },
  327. //关闭输入理由框
  328. noCancel(){
  329. this.setState({
  330. visible:false
  331. })
  332. },
  333. //搜索
  334. search() {
  335. this.setState({
  336. //signBillVisible:false
  337. })
  338. this.loadData();
  339. },
  340. //重置
  341. reset() {
  342. this.setState({
  343. signBillVisible:false
  344. })
  345. this.state.orderNo='';
  346. this.state.customerName='';
  347. this.state.adminName='';
  348. this.state.departmenttSearch=undefined;
  349. this.state.releaseDate[0] = undefined;
  350. this.state.releaseDate[1] = undefined;
  351. this.loadData();
  352. },
  353. resets(){
  354. this.state.orderNo='';
  355. this.state.customerName='';
  356. this.state.adminName='';
  357. this.state.departmenttSearch=undefined;
  358. this.state.releaseDate[0] = undefined;
  359. this.state.releaseDate[1] = undefined;
  360. },
  361. getOrgCodeUrl(e) {
  362. this.setState({ orgCodeUrl: e });
  363. },
  364. //关闭详情
  365. visitCancel(){
  366. this.setState({
  367. visible:false
  368. })
  369. this.resets();
  370. },
  371. visitOk(){
  372. this.setState({
  373. visible:false
  374. })
  375. this.resets();
  376. },
  377. //关闭详情
  378. visitCancels(){
  379. this.setState({
  380. visibles:false
  381. })
  382. this.resets();
  383. },
  384. //导出
  385. exportExec(){
  386. var data = {
  387. name: this.state.customerName?this.state.customerName:undefined,//客户名称
  388. adminName:this.state.adminName?this.state.adminName:undefined,//订单负责人
  389. orderNo: this.state.orderNo?this.state.orderNo:undefined,//订单编号
  390. starTime: this.state.releaseDate[0]?this.state.releaseDate[0]:undefined,
  391. endTime: this.state.releaseDate[1]?this.state.releaseDate[1]:undefined,
  392. }
  393. window.location.href=(globalConfig.context+'/api/admin/newOrder/exportOrderDunData?'+$.param(data));
  394. },
  395. visitOks(){
  396. this.setState({
  397. visibles:false
  398. })
  399. this.resets();
  400. },
  401. //部门
  402. departmentList() {
  403. this.setState({
  404. loading: true
  405. });
  406. $.ajax({
  407. method: "get",
  408. dataType: "json",
  409. crossDomain: false,
  410. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  411. data: {
  412. },
  413. success: function(data) {
  414. let thedata = data.data;
  415. let theArr = [];
  416. if(!thedata) {
  417. if(data.error && data.error.length) {
  418. message.warning(data.error[0].message);
  419. };
  420. thedata = {};
  421. } else {
  422. thedata.map(function(item, index) {
  423. theArr.push({
  424. key: index,
  425. name: item.name,
  426. id: item.id,
  427. })
  428. })
  429. }
  430. this.setState({
  431. departmentArr: theArr,
  432. })
  433. }.bind(this),
  434. }).always(function() {
  435. this.setState({
  436. loading: false
  437. });
  438. }.bind(this));
  439. },
  440. render() {
  441. const formItemLayout = {
  442. labelCol: { span: 8 },
  443. wrapperCol: { span: 14 },
  444. };
  445. const FormItem = Form.Item;
  446. const { RangePicker } = DatePicker;
  447. const rowSelection = {
  448. selectedRowKeys: this.state.selectedRowKeys,
  449. onChange: (selectedRowKeys, selectedRows) => {
  450. this.setState({
  451. modalVisible:false,
  452. selectedRows: selectedRows.slice(-1),
  453. selectedRowKeys: selectedRowKeys.slice(-1)
  454. });
  455. },
  456. onSelect: (recordt) => {
  457. this.setState({
  458. modalVisible:false,
  459. recordt: recordt.id
  460. })
  461. },
  462. };
  463. let departmentArr = this.state.departmentArr || [];
  464. return(
  465. <div className="user-content">
  466. <div className="content-title">
  467. <span>催款节点统计</span>
  468. </div>
  469. <div className="user-search">
  470. <Input placeholder="客户名称" style={{width:'150px',marginBottom:'10px'}}
  471. value={this.state.customerName}
  472. onChange={(e) => { this.setState({ customerName: e.target.value }); }} />
  473. <Input placeholder="营销员名称" style={{width:'150px',marginBottom:'10px'}}
  474. value={this.state.adminName}
  475. onChange={(e) => { this.setState({ adminName: e.target.value }); }} />
  476. <Input placeholder="订单编号" style={{width:'150px'}}
  477. value={this.state.orderNo}
  478. onChange={(e) => { this.setState({ orderNo: e.target.value }); }} />
  479. <Select placeholder="选择部门"
  480. style={{ width: 150 ,marginRight:'10px'}}
  481. value={this.state.departmenttSearch}
  482. onChange={(e) => { this.setState({ departmenttSearch: e }) }}>
  483. {
  484. departmentArr.map(function (item) {
  485. return <Select.Option key={item.id} >{item.name}</Select.Option>
  486. })
  487. }
  488. </Select>
  489. <span style={{marginRight:"10px"}}>下单时间 :</span>
  490. <RangePicker
  491. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  492. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  493. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  494. <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
  495. <Button onClick={this.reset}>重置</Button>
  496. <Button type="primary" onClick={this.exportExec} >导出催款列表</Button>
  497. <div className="patent-table">
  498. <Spin spinning={this.state.loading}>
  499. <Table columns={this.state.columns}
  500. dataSource={this.state.dataSource}
  501. scroll={{ x: 1500, y: 0 }}
  502. pagination={this.state.pagination}
  503. onRowClick={this.tableRowClick}
  504. bordered
  505. />
  506. </Spin>
  507. </div>
  508. <Modal
  509. className="customeDetails"
  510. footer=''
  511. title="新增催款记录"
  512. width='500px'
  513. visible={this.state.visible}
  514. onOk={this.visitOk}
  515. onCancel={this.visitCancel}
  516. >
  517. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form" style={{paddingBottom:'40px'}} >
  518. <Spin spinning={this.state.loading}>
  519. <div className="clearfix">
  520. <div className='clearfix'>
  521. <FormItem className="half-item" {...formItemLayout} label="催款时间">
  522. <DatePicker
  523. style={{marginTop:"2px",width: '240px',height:"32px" }}
  524. showTime
  525. format="YYYY-MM-DD"
  526. onOk={()=>{}}
  527. value={this.state.dumTime ? moment(this.state.dumTime) : null}
  528. onChange={(data, dataString) => { this.setState({ dumTime: dataString }); }} />
  529. </FormItem>
  530. </div>
  531. <div className='clearfix'>
  532. <FormItem
  533. labelCol={{ span: 4 }}
  534. wrapperCol={{ span: 16 }}
  535. label="催款情况" >
  536. <Input type="textarea" placeholder="请输入催款情况" rows={4} value={this.state.remarks}
  537. onChange={(e)=>{this.setState({remarks:e.target.value})}}/>
  538. </FormItem>
  539. </div>
  540. <div className='clearfix'>
  541. <Button className="cancel" type="primary" onClick={this.examOk} style={{marginLeft:"50px"}} htmlType="submit">添加</Button>
  542. <Button className="cancel" type="ghost" onClick={this.noCancel} style={{marginLeft:"50px"}}>取消</Button>
  543. </div>
  544. </div>
  545. </Spin>
  546. </Form>
  547. </Modal>
  548. <Modal
  549. className="customeDetails"
  550. footer=''
  551. title="催款记录查看"
  552. width='500px'
  553. visible={this.state.visibles}
  554. onOk={this.visitOks}
  555. onCancel={this.visitCancels}
  556. >
  557. <div className="user-content">
  558. <div className="patent-table">
  559. <Spin spinning={this.state.loading}>
  560. <Table columns={this.state.columnsX}
  561. dataSource={this.state.dataSources}
  562. rowSelection={rowSelection}
  563. pagination={this.state.paginations}
  564. onRowClick={this.tableRowClick}
  565. />
  566. </Spin>
  567. </div>
  568. </div>
  569. </Modal>
  570. </div>
  571. </div>
  572. );
  573. }
  574. }));
  575. export default IntentionCustomer;