pressList.jsx 19 KB

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