press.jsx 18 KB

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