arrearsList.jsx 20 KB

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