pressList.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551
  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. specially:1
  30. },
  31. success: function(data) {
  32. let theArr = [];
  33. if(data.error.length || data.data.list == "") {
  34. if(data.error && data.error.length) {
  35. message.warning(data.error[0].message);
  36. };
  37. } else {
  38. for(let i = 0; i < data.data.list.length; i++) {
  39. let thisdata = data.data.list[i];
  40. theArr.push({
  41. key: i,
  42. id:thisdata.id,//ID
  43. orderNo: thisdata.orderNo,//订单编号
  44. totalAmount:thisdata.totalAmount,//签单金额
  45. settlementAmount:thisdata.settlementAmount,//已收款
  46. accountsReceivable:thisdata.accountsReceivable,//应收款
  47. uncollectedAmount:thisdata.uncollectedAmount,//应收款
  48. orderStatus:thisdata.orderStatus,//订单状态
  49. projectStatus:thisdata.projectStatus,//项目状态
  50. liquidationStatus:thisdata.liquidationStatus,//结算状态
  51. signDate:thisdata.signDate,//签单时间
  52. userName:thisdata.userName,//客户名称
  53. salesmanName:thisdata.salesmanName,//营销员名称
  54. dunSubject:thisdata.dunSubject,//催收科目
  55. startDate:thisdata.startDate,//催收启动时间
  56. depName:thisdata.depName,//部门名称
  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: 'orderNo',
  142. key: 'orderNo'
  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. },{
  194. title: '催收科目',
  195. dataIndex: 'dunSubject',
  196. key: 'dunSubject',
  197. render: text=>{return getjiedian(text)}
  198. },{
  199. title: '催款启动日期',
  200. dataIndex: 'startDate',
  201. key: 'startDate'
  202. }, {
  203. title: '催收操作',
  204. dataIndex: 'abc',
  205. key: 'abc',
  206. render: (text, record) => {
  207. return <div>
  208. <Button onClick={(e) =>{ e.stopPropagation(), this.visit(record)}} type="primary">添加催款记录</Button>
  209. </div>
  210. }
  211. }
  212. ],
  213. data: [],
  214. dataSource: [],
  215. columnsX: [
  216. {
  217. title: '催款人',
  218. dataIndex: 'dumBy',
  219. key: 'dumBy'
  220. }, {
  221. title: '催款时间',
  222. dataIndex: 'dumTime',
  223. key: 'dumTime',
  224. },{
  225. title: '催款情况',
  226. dataIndex: 'remarks',
  227. key: 'remarks'
  228. }
  229. ],
  230. dataSources: [],
  231. }
  232. },
  233. //页面加载函数
  234. componentWillMount() {
  235. this.departmentList();
  236. this.loadData();
  237. },
  238. //进入新增拜访记录
  239. visit(record) {
  240. this.setState({
  241. visible:true,
  242. dunId:record.id
  243. })
  244. },
  245. // //整行点击
  246. tableRowClick(record) {
  247. this.setState({
  248. visibles:true,
  249. });
  250. this.loadDatas(record.id);
  251. },
  252. //新增催款记录
  253. examOk(){
  254. $.ajax({
  255. method: "post",
  256. dataType: "json",
  257. crossDomain: false,
  258. url: globalConfig.context +"/api/admin/newOrder/createDunLog",
  259. data: {
  260. dunId:this.state.dunId,
  261. dumTime:this.state.dumTime,
  262. remarks:this.state.remarks,
  263. },
  264. success: function(data) {
  265. if(data.error.length || data.data.list == "") {
  266. if(data.error && data.error.length) {
  267. message.warning(data.error[0].message);
  268. };
  269. } else {
  270. message.success("新增催款记录成功~");
  271. this.setState({
  272. visible:false,
  273. });
  274. this.loadData();
  275. this.resets();
  276. };
  277. }.bind(this),
  278. }).always(function() {
  279. this.setState({
  280. loading: false
  281. });
  282. }.bind(this));
  283. },
  284. //关闭输入理由框
  285. noCancel(){
  286. this.setState({
  287. noVisible:false
  288. })
  289. },
  290. //搜索
  291. search() {
  292. this.setState({
  293. //signBillVisible:false
  294. })
  295. this.loadData();
  296. },
  297. //重置
  298. reset() {
  299. this.setState({
  300. signBillVisible:false
  301. })
  302. this.state.orderNo='';
  303. this.state.customerName='';
  304. this.state.adminName='';
  305. this.state.departmenttSearch=undefined;
  306. this.state.releaseDate[0] = undefined;
  307. this.state.releaseDate[1] = undefined;
  308. this.loadData();
  309. },
  310. resets(){
  311. this.state.orderNo='';
  312. this.state.customerName='';
  313. this.state.adminName='';
  314. this.state.departmenttSearch=undefined;
  315. this.state.releaseDate[0] = undefined;
  316. this.state.releaseDate[1] = undefined;
  317. },
  318. getOrgCodeUrl(e) {
  319. this.setState({ orgCodeUrl: e });
  320. },
  321. //关闭详情
  322. visitCancel(){
  323. this.setState({
  324. visible:false
  325. })
  326. this.resets();
  327. },
  328. visitOk(){
  329. this.setState({
  330. visible:false
  331. })
  332. this.resets();
  333. },
  334. //关闭详情
  335. visitCancels(){
  336. this.setState({
  337. visibles:false
  338. })
  339. this.resets();
  340. },
  341. //导出
  342. exportExec(){
  343. var data = {
  344. name: this.state.customerName?this.state.customerName:undefined,//客户名称
  345. adminName:this.state.adminName?this.state.adminName:undefined,//订单负责人
  346. orderNo: this.state.orderNo?this.state.orderNo:undefined,//订单编号
  347. starTime: this.state.releaseDate[0]?this.state.releaseDate[0]:undefined,
  348. endTime: this.state.releaseDate[1]?this.state.releaseDate[1]:undefined,
  349. }
  350. window.location.href=(globalConfig.context+'/api/admin/newOrder/exportOrderDunData?'+$.param(data));
  351. },
  352. visitOks(){
  353. this.setState({
  354. visibles:false
  355. })
  356. this.resets();
  357. },
  358. //部门
  359. departmentList() {
  360. this.setState({
  361. loading: true
  362. });
  363. $.ajax({
  364. method: "get",
  365. dataType: "json",
  366. crossDomain: false,
  367. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  368. data: {
  369. },
  370. success: function(data) {
  371. let thedata = data.data;
  372. let theArr = [];
  373. if(!thedata) {
  374. if(data.error && data.error.length) {
  375. message.warning(data.error[0].message);
  376. };
  377. thedata = {};
  378. } else {
  379. thedata.map(function(item, index) {
  380. theArr.push({
  381. key: index,
  382. name: item.name,
  383. id: item.id,
  384. })
  385. })
  386. }
  387. this.setState({
  388. departmentArr: theArr,
  389. })
  390. }.bind(this),
  391. }).always(function() {
  392. this.setState({
  393. loading: false
  394. });
  395. }.bind(this));
  396. },
  397. render() {
  398. const formItemLayout = {
  399. labelCol: { span: 8 },
  400. wrapperCol: { span: 14 },
  401. };
  402. const FormItem = Form.Item;
  403. const { RangePicker } = DatePicker;
  404. const rowSelection = {
  405. selectedRowKeys: this.state.selectedRowKeys,
  406. onChange: (selectedRowKeys, selectedRows) => {
  407. this.setState({
  408. modalVisible:false,
  409. selectedRows: selectedRows.slice(-1),
  410. selectedRowKeys: selectedRowKeys.slice(-1)
  411. });
  412. },
  413. onSelect: (recordt) => {
  414. this.setState({
  415. modalVisible:false,
  416. recordt: recordt.id
  417. })
  418. },
  419. };
  420. let departmentArr = this.state.departmentArr || [];
  421. return(
  422. <div className="user-content">
  423. <div className="content-title">
  424. <span>催款节点统计</span>
  425. </div>
  426. <div className="user-search">
  427. <Button type="primary" onClick={this.exportExec} style={{float:'right'}}>导出催款列表</Button>
  428. <Input placeholder="客户名称" style={{width:'150px',marginBottom:'10px'}}
  429. value={this.state.customerName}
  430. onChange={(e) => { this.setState({ customerName: e.target.value }); }} />
  431. <Input placeholder="营销员名称" style={{width:'150px',marginBottom:'10px'}}
  432. value={this.state.adminName}
  433. onChange={(e) => { this.setState({ adminName: e.target.value }); }} />
  434. <Input placeholder="订单编号" style={{width:'150px'}}
  435. value={this.state.orderNo}
  436. onChange={(e) => { this.setState({ orderNo: e.target.value }); }} />
  437. <Select placeholder="选择部门"
  438. style={{ width: 150 ,marginRight:'10px'}}
  439. value={this.state.departmenttSearch}
  440. onChange={(e) => { this.setState({ departmenttSearch: e }) }}>
  441. {
  442. departmentArr.map(function (item) {
  443. return <Select.Option key={item.id} >{item.name}</Select.Option>
  444. })
  445. }
  446. </Select>
  447. <span style={{marginRight:"10px"}}>下单时间 :</span>
  448. <RangePicker
  449. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  450. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  451. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  452. <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
  453. <Button onClick={this.reset}>重置</Button>
  454. <div className="patent-table">
  455. <Spin spinning={this.state.loading}>
  456. <Table columns={this.state.columns}
  457. dataSource={this.state.dataSource}
  458. rowSelection={rowSelection}
  459. pagination={this.state.pagination}
  460. onRowClick={this.tableRowClick}
  461. />
  462. </Spin>
  463. </div>
  464. <Modal
  465. className="customeDetails"
  466. footer=''
  467. title="新增催款记录"
  468. width='500px'
  469. visible={this.state.visible}
  470. onOk={this.visitOk}
  471. onCancel={this.visitCancel}
  472. >
  473. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form" style={{paddingBottom:'40px'}} >
  474. <Spin spinning={this.state.loading}>
  475. <div className="clearfix">
  476. <div className='clearfix'>
  477. <FormItem className="half-item" {...formItemLayout} label="催款时间">
  478. <DatePicker
  479. style={{marginTop:"2px",width: '240px',height:"32px" }}
  480. showTime
  481. format="YYYY-MM-DD"
  482. onOk={()=>{}}
  483. value={this.state.dumTime ? moment(this.state.dumTime) : null}
  484. onChange={(data, dataString) => { this.setState({ dumTime: dataString }); }} />
  485. </FormItem>
  486. </div>
  487. <div className='clearfix'>
  488. <FormItem
  489. labelCol={{ span: 4 }}
  490. wrapperCol={{ span: 16 }}
  491. label="催款情况" >
  492. <Input type="textarea" placeholder="请输入催款情况" rows={4} value={this.state.remarks}
  493. onChange={(e)=>{this.setState({remarks:e.target.value})}}/>
  494. </FormItem>
  495. </div>
  496. <div className='clearfix'>
  497. <Button className="cancel" type="primary" onClick={this.examOk} style={{marginLeft:"50px"}} htmlType="submit">添加</Button>
  498. <Button className="cancel" type="ghost" onClick={this.noCancel} style={{marginLeft:"50px"}}>取消</Button>
  499. </div>
  500. </div>
  501. </Spin>
  502. </Form>
  503. </Modal>
  504. <Modal
  505. className="customeDetails"
  506. footer=''
  507. title="催款记录查看"
  508. width='500px'
  509. visible={this.state.visibles}
  510. onOk={this.visitOks}
  511. onCancel={this.visitCancels}
  512. >
  513. <div className="user-content">
  514. <div className="patent-table">
  515. <Spin spinning={this.state.loading}>
  516. <Table columns={this.state.columnsX}
  517. dataSource={this.state.dataSources}
  518. rowSelection={rowSelection}
  519. pagination={this.state.paginations}
  520. onRowClick={this.tableRowClick}
  521. />
  522. </Spin>
  523. </div>
  524. </div>
  525. </Modal>
  526. </div>
  527. </div>
  528. );
  529. }
  530. }));
  531. export default IntentionCustomer;