arrearsList.jsx 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667
  1. import React from "react";
  2. import {
  3. Button,
  4. Input,
  5. Select,
  6. Spin,
  7. Table,
  8. message,
  9. DatePicker,
  10. Form,
  11. Modal,
  12. Tabs, Tooltip,
  13. } from "antd";
  14. import $ from "jquery/src/ajax";
  15. import moment from "moment";
  16. import ShowModalDiv from "@/showModal.jsx";
  17. import {
  18. getLiquidationStatus,
  19. getjiedian,
  20. getNewOrderStatus,
  21. getProjectStatus,
  22. ShowModal,
  23. } from "@/tools.js";
  24. import "./customer.less";
  25. import { ChooseList } from "./chooseList";
  26. import { getProjectName } from "../../../tools";
  27. import DepartmentList from "../../../common/departmentList";
  28. import Cascaders from "../../../common/cascaders";
  29. const ArrearsList = Form.create()(
  30. React.createClass({
  31. loadData(pageNo) {
  32. this.setState({
  33. visitModul: false,
  34. loading: true,
  35. ispage: pageNo,
  36. modalVisible: false,
  37. });
  38. $.ajax({
  39. method: "get",
  40. dataType: "json",
  41. crossDomain: false,
  42. url: globalConfig.context + "/api/admin/newOrder/arrearsDunList",
  43. data: {
  44. pageNo: pageNo || 1,
  45. pageSize: this.state.pagination.pageSize,
  46. name: this.state.customerName, //名称
  47. orderNo: this.state.orderNo, //订单编号
  48. contractNo: this.state.contractNo,
  49. deps: this.state.departmenttSearch, //订单部门
  50. starTime: this.state.releaseDate[0], //开始时间
  51. endTime: this.state.releaseDate[1], //结束时间
  52. tStarTime: this.state.chufaDate[0], //开始时间
  53. tEndTime: this.state.chufaDate[1], //结束时间
  54. adminName: this.state.adminName,
  55. },
  56. success: function (data) {
  57. ShowModal(this);
  58. let theArr = [];
  59. if (data.error.length || data.data.list == "") {
  60. if (data.error && data.error.length) {
  61. message.warning(data.error[0].message);
  62. }
  63. } else {
  64. for (let i = 0; i < data.data.list.length; i++) {
  65. let thisdata = data.data.list[i];
  66. let obj = thisdata;
  67. obj.key = i + 1;
  68. theArr.push(obj);
  69. }
  70. this.state.pagination.total = data.data.totalCount;
  71. this.state.pagination.current = data.data.pageNo;
  72. }
  73. if (data.data && data.data.list && !data.data.list.length) {
  74. this.state.pagination.total = 0;
  75. }
  76. this.setState({
  77. dataSource: theArr,
  78. pageNo: pageNo,
  79. pagination: this.state.pagination,
  80. selectedRowKeys: [],
  81. });
  82. }.bind(this),
  83. }).always(
  84. function () {
  85. this.setState({
  86. loading: false,
  87. });
  88. }.bind(this)
  89. );
  90. },
  91. getInitialState() {
  92. return {
  93. releaseDate: [],
  94. chufaDate: [],
  95. pagination: {
  96. defaultCurrent: 1,
  97. defaultPageSize: 10,
  98. showQuickJumper: true,
  99. pageSize: 10,
  100. modalVisible: false,
  101. onChange: function (page) {
  102. this.loadData(page);
  103. }.bind(this),
  104. showTotal: function (total) {
  105. return "共" + total + "条数据";
  106. },
  107. },
  108. columns: [
  109. {
  110. title: "序号",
  111. dataIndex: "key",
  112. key: "key",
  113. },
  114. {
  115. title: "合同编号",
  116. dataIndex: "contractNo",
  117. key: "contractNo",
  118. },
  119. {
  120. title: "订单编号",
  121. dataIndex: "orderNo",
  122. key: "orderNo",
  123. },
  124. {
  125. title: "客户名称",
  126. dataIndex: "userName",
  127. key: "userName",
  128. render: text => {
  129. return (
  130. <Tooltip title={text}>
  131. <div style={{
  132. maxWidth: '150px',
  133. overflow: 'hidden',
  134. textOverflow: "ellipsis",
  135. whiteSpace: 'nowrap',
  136. }}>{text}</div>
  137. </Tooltip>
  138. )
  139. }
  140. },
  141. {
  142. title: "订单负责人",
  143. dataIndex: "salesmanName",
  144. key: "salesmanName",
  145. },
  146. {
  147. title: "订单部门",
  148. dataIndex: "depName",
  149. key: "depName",
  150. },
  151. {
  152. title: "订单状态",
  153. dataIndex: "orderStatus",
  154. key: "orderStatus",
  155. render: (text) => {
  156. return getNewOrderStatus(text);
  157. },
  158. },
  159. {
  160. title: "项目名称",
  161. dataIndex: "commodityName",
  162. key: "commodityName",
  163. },
  164. {
  165. title: "项目状态",
  166. dataIndex: "projectStatus",
  167. key: "projectStatus",
  168. render: (text) => {
  169. return getProjectName(text);
  170. },
  171. },
  172. {
  173. title: "签单金额(万元)",
  174. dataIndex: "totalAmount",
  175. key: "totalAmount",
  176. },
  177. {
  178. title: "已收款(万元)",
  179. dataIndex: "settlementAmount",
  180. key: "settlementAmount",
  181. },
  182. {
  183. title: "应收款(万元)",
  184. dataIndex: "orderReceivables",
  185. key: "orderReceivables",
  186. },
  187. {
  188. title: "欠款(万元)",
  189. dataIndex: "orderArrears",
  190. key: "orderArrears",
  191. },
  192. {
  193. title: "结算状态",
  194. dataIndex: "liquidationStatus",
  195. key: "liquidationStatus",
  196. render: (text) => {
  197. return getLiquidationStatus(text);
  198. },
  199. },
  200. {
  201. title: "催收科目",
  202. dataIndex: "type",
  203. key: "type",
  204. render: text => {
  205. if (text == 0) {
  206. return "按时触发应收欠款"
  207. }
  208. }
  209. },
  210. {
  211. title: "催款状态",
  212. dataIndex: "dunStatus",
  213. key: "dunStatus",
  214. render: (text) => {
  215. if (text == 0) {
  216. return "未启动";
  217. } else if (text == 1) {
  218. return "催款中";
  219. } else if (text == 2) {
  220. return "已完成";
  221. } else if (text == 3) {
  222. return "已停止";
  223. }
  224. },
  225. },
  226. {
  227. title: "催款启动日期",
  228. dataIndex: "startDate",
  229. key: "startDate",
  230. },
  231. {
  232. title: "下单时间",
  233. dataIndex: "signDate",
  234. key: "signDate",
  235. },
  236. {
  237. title: "移交法务",
  238. dataIndex: "legalTimes",
  239. key: "legalTimes",
  240. },
  241. ],
  242. legalColumns: [
  243. {
  244. title: "序号",
  245. dataIndex: "key",
  246. key: "key",
  247. width: 45,
  248. },
  249. {
  250. title: "操作人名称",
  251. dataIndex: "adminName",
  252. key: "adminName",
  253. width: 80,
  254. },
  255. {
  256. title: "客户名称",
  257. dataIndex: "userName",
  258. key: "userName",
  259. width: 140,
  260. },
  261. {
  262. title: "法务时间",
  263. dataIndex: "operationDate",
  264. key: "operationDate",
  265. width: 140,
  266. },
  267. {
  268. title: "详细",
  269. dataIndex: "remarks",
  270. key: "remarks",
  271. width: 140,
  272. },
  273. {
  274. title: "法务类型",
  275. dataIndex: "type",
  276. key: "type",
  277. width: 140,
  278. render: (text, data) => {
  279. let status;
  280. if (data.status == 0) {
  281. status = "否";
  282. } else if (data.status == 1) {
  283. status = "已回款";
  284. } else if (data.status == 2) {
  285. status = "已诉讼";
  286. } else if (data.status == 3) {
  287. status = "已坏账处理";
  288. }
  289. //
  290. if (data.type == 0) {
  291. return "法务催收中";
  292. } else if (data.type == 1) {
  293. return "延期法务";
  294. } else if (data.type == 2) {
  295. return `已完成法务/${status}`;
  296. } else if (data.type == 3) {
  297. return "自动转交";
  298. } else if (data.type == 4) {
  299. return "营销转交";
  300. }
  301. }
  302. },
  303. {
  304. title: "操作时间",
  305. dataIndex: "createDate",
  306. key: "createDate",
  307. width: 140,
  308. },
  309. ],
  310. legalDataSource: [],
  311. legalPagination: {
  312. defaultCurrent: 1,
  313. defaultPageSize: 10,
  314. showQuickJumper: true,
  315. pageSize: 10,
  316. onChange: function (page) {
  317. this.linkList(page);
  318. this.setState({
  319. selectedRowKeys: [],
  320. });
  321. }.bind(this),
  322. showTotal: function (total) {
  323. return "共" + total + "条数据";
  324. },
  325. },
  326. dataSource: [],
  327. };
  328. },
  329. //页面加载函数
  330. componentWillMount() {
  331. this.loadData();
  332. },
  333. //搜索
  334. search() {
  335. this.setState({
  336. //signBillVisible:false
  337. });
  338. this.loadData();
  339. },
  340. //导出
  341. exportExec() {
  342. var data = {
  343. name: this.state.customerName ? this.state.customerName : undefined, //客户名称
  344. adminName: this.state.adminName ? this.state.adminName : undefined, //订单负责人
  345. orderNo: this.state.orderNo ? this.state.orderNo : undefined, //订单编号
  346. contractNo: this.state.contractNo ? this.state.contractNo : undefined,
  347. starTime: this.state.releaseDate[0]
  348. ? this.state.releaseDate[0]
  349. : undefined,
  350. endTime: this.state.releaseDate[1]
  351. ? this.state.releaseDate[1]
  352. : undefined,
  353. tStarTime: this.state.chufaDate[0]
  354. ? this.state.chufaDate[0]
  355. : undefined,
  356. tEndTime: this.state.chufaDate[1] ? this.state.chufaDate[1] : undefined,
  357. depId: this.state.departmenttSearch,
  358. pageSize: 9999999,
  359. };
  360. window.location.href =
  361. globalConfig.context +
  362. "/api/admin/newOrder/exportArrearsDunListData?" +
  363. $.param(data);
  364. },
  365. //重置
  366. reset() {
  367. this.state.orderNo = undefined;
  368. this.state.contractNo = undefined;
  369. this.state.customerName = undefined;
  370. this.state.adminName = undefined;
  371. this.state.departmenttSearch = undefined;
  372. this.state.releaseDate[0] = undefined;
  373. this.state.releaseDate[1] = undefined;
  374. this.state.chufaDate[1] = undefined;
  375. this.state.chufaDate[0] = undefined;
  376. this.Cascaders.empty();
  377. this.loadData();
  378. },
  379. changeList(arr) {
  380. const newArr = [];
  381. this.state.columns.forEach(item => {
  382. arr.forEach(val => {
  383. if (val === item.title) {
  384. newArr.push(item);
  385. }
  386. });
  387. });
  388. this.setState({
  389. changeList: newArr
  390. });
  391. },
  392. viewLegal() {
  393. console.log(this.state.rowkey);
  394. if (this.state.recordt == undefined || this.state.recordt == [] || this.state.rowkey.length == 0) {
  395. message.info("请选择查看的单号")
  396. return
  397. }
  398. this.setState({
  399. modalVisible: true
  400. })
  401. $.ajax({
  402. method: "get",
  403. dataType: "json",
  404. crossDomain: false,
  405. url: globalConfig.context + "/api/admin/lagalAffairs/lagalAffairsLogList",
  406. data: {
  407. pageNo: 1,
  408. pageSize: 10,
  409. orderNo: this.state.recordt
  410. },
  411. success: function (data) {
  412. let theArr = []
  413. if (data.error.length) {
  414. this.setState({
  415. loadLegal: false,
  416. });
  417. message.warning(data.error[0].message);
  418. } else {
  419. for (let i = 0; i < data.data.length; i++) {
  420. let thisdata = data.data[i];
  421. let obj = thisdata;
  422. obj.key = i + 1;
  423. theArr.push(obj);
  424. }
  425. this.setState({
  426. legalDataSource: theArr,
  427. legalPagination: this.state.legalPagination
  428. });
  429. this.state.legalPagination.total = data.data.totalCount;
  430. this.state.legalPagination.current = data.data.pageNo;
  431. }
  432. if (data.data && data.data.list && !data.data.list.length) {
  433. this.state.legalPagination.total = 0;
  434. }
  435. }.bind(this),
  436. }).always(
  437. function () {
  438. this.setState({
  439. loadLegal: false,
  440. });
  441. }.bind(this)
  442. );
  443. },
  444. render() {
  445. const formItemLayout = {
  446. labelCol: { span: 8 },
  447. wrapperCol: { span: 14 },
  448. };
  449. const FormItem = Form.Item;
  450. const { RangePicker } = DatePicker;
  451. const rowSelection = {
  452. selectedRowKeys: this.state.selectedRowKeys,
  453. onChange: (selectedRowKeys, selectedRows) => {
  454. this.setState({
  455. modalVisible: false,
  456. selectedRows: selectedRows.slice(-1),
  457. selectedRowKeys: selectedRowKeys.slice(-1),
  458. }, () => {
  459. this.setState({
  460. rowkey: this.state.selectedRowKeys
  461. })
  462. });
  463. },
  464. onSelect: (recordt) => {
  465. this.setState({
  466. modalVisible: false,
  467. recordt: recordt.orderNo,
  468. });
  469. },
  470. };
  471. const { TabPane } = Tabs;
  472. return (
  473. <div className="user-content">
  474. <ShowModalDiv ShowModal={this.state.showModal} />
  475. <div className="content-title" style={{ marginBottom: 10 }}>
  476. <span style={{ fontWeight: 900, fontSize: 16 }}>欠款催收列表</span>
  477. </div>
  478. <div className="user-search">
  479. <Tabs
  480. defaultActiveKey="1"
  481. onChange={this.callback}
  482. className="test"
  483. >
  484. <TabPane tab="搜索" key="1">
  485. <div className="user-search">
  486. <Input
  487. placeholder="客户名称"
  488. style={{
  489. width: "150px",
  490. marginBottom: "10px",
  491. marginLeft: 10,
  492. marginRight: 10,
  493. }}
  494. value={this.state.customerName}
  495. onChange={(e) => {
  496. this.setState({ customerName: e.target.value });
  497. }}
  498. />
  499. <Input
  500. placeholder="订单编号"
  501. style={{ width: "150px", marginRight: 10 }}
  502. value={this.state.orderNo}
  503. onChange={(e) => {
  504. this.setState({ orderNo: e.target.value });
  505. }}
  506. />
  507. <Input
  508. placeholder="合同编号"
  509. style={{ width: "150px", marginRight: 10 }}
  510. value={this.state.contractNo}
  511. onChange={(e) => {
  512. this.setState({ contractNo: e.target.value });
  513. }}
  514. />
  515. <Input
  516. placeholder="营销员名称"
  517. style={{
  518. width: "150px",
  519. marginBottom: "10px",
  520. marginRight: 10,
  521. }}
  522. value={this.state.adminName}
  523. onChange={(e) => {
  524. this.setState({ adminName: e.target.value });
  525. }}
  526. />
  527. <Cascaders
  528. ref={node => this.Cascaders = node}
  529. placeholder="订单部门"
  530. id="id"
  531. name="name"
  532. children="list"
  533. height={28}
  534. onSel={(e) => {
  535. this.setState({
  536. departmenttSearch: JSON.stringify(e),
  537. });
  538. }}
  539. />
  540. {/* <DepartmentList
  541. value={this.state.departmenttSearch}
  542. onChange={e => {
  543. this.setState({ departmenttSearch: e });
  544. }}
  545. /> */}
  546. <span style={{ marginRight: "10px" }}>下单时间 :</span>
  547. <RangePicker
  548. value={[
  549. this.state.releaseDate[0]
  550. ? moment(this.state.releaseDate[0])
  551. : null,
  552. this.state.releaseDate[1]
  553. ? moment(this.state.releaseDate[1])
  554. : null,
  555. ]}
  556. onChange={(data, dataString) => {
  557. this.setState({ releaseDate: dataString });
  558. }}
  559. />
  560. <span style={{ marginRight: "10px", marginLeft: 10 }}>触发时间 :</span>
  561. <RangePicker
  562. value={[
  563. this.state.chufaDate[0]
  564. ? moment(this.state.chufaDate[0])
  565. : null,
  566. this.state.chufaDate[1]
  567. ? moment(this.state.chufaDate[1])
  568. : null,
  569. ]}
  570. onChange={(data, dataString) => {
  571. this.setState({ chufaDate: dataString });
  572. }}
  573. />
  574. <div>
  575. <Button
  576. type="primary"
  577. onClick={this.search}
  578. style={{ marginLeft: "10px", marginRight: 10 }}
  579. >
  580. 搜索
  581. </Button>
  582. <Button onClick={this.reset}>重置</Button>
  583. </div>
  584. </div>
  585. </TabPane>
  586. <TabPane tab="导出催款列表" key="2">
  587. <Button
  588. type="primary"
  589. onClick={this.exportExec}
  590. style={{ marginBottom: 10, marginTop: 10, marginLeft: 10 }}
  591. >
  592. 导出催款列表
  593. </Button>
  594. </TabPane>
  595. <TabPane tab="更改表格显示数据" key="3">
  596. <div style={{ marginLeft: 10 }}>
  597. <ChooseList
  598. columns={this.state.columns}
  599. changeFn={this.changeList}
  600. changeList={this.state.changeList}
  601. top={55}
  602. margin={11}
  603. />
  604. </div>
  605. </TabPane>
  606. <TabPane tab="查看" key="4">
  607. <Button
  608. // disabled={ this.state.rowkey.length == 0 ? true : false}
  609. type="primary"
  610. onClick={this.viewLegal}
  611. style={{ marginBottom: 10, marginTop: 10, marginLeft: 10 }}
  612. >
  613. 查看欠款法务列表
  614. </Button>
  615. </TabPane>
  616. </Tabs>
  617. <div className="patent-table">
  618. <Spin spinning={this.state.loading}>
  619. <Table
  620. columns={
  621. this.state.changeList
  622. ? this.state.changeList
  623. : this.state.columns
  624. }
  625. dataSource={this.state.dataSource}
  626. pagination={this.state.pagination}
  627. scroll={{ x: "max-content", y: 0 }}
  628. rowSelection={rowSelection}
  629. bordered
  630. size="small"
  631. />
  632. </Spin>
  633. </div>
  634. <Modal
  635. title="欠款法务列表"
  636. footer=""
  637. width={1000}
  638. visible={this.state.modalVisible}
  639. onCancel={() => {
  640. this.setState({
  641. modalVisible: false
  642. })
  643. }}
  644. >
  645. <Spin spinning={this.state.loadLegal}>
  646. <Table
  647. columns={this.state.legalColumns}
  648. dataSource={this.state.legalDataSource}
  649. pagination={this.state.legalPagination}
  650. scroll={{ x: "max-content", y: 0 }}
  651. bordered
  652. size="small"
  653. />
  654. </Spin>
  655. </Modal>
  656. </div>
  657. </div>
  658. );
  659. },
  660. })
  661. );
  662. export default ArrearsList;