arrearsList.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
  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,
  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. depId: this.state.departmenttSearch, //订单部门
  48. starTime: this.state.releaseDate[0], //开始时间
  49. endTime: this.state.releaseDate[1], //结束时间
  50. tStarTime: this.state.chufaDate[0], //开始时间
  51. tEndTime: this.state.chufaDate[1], //结束时间
  52. adminName: this.state.adminName,
  53. },
  54. success: function (data) {
  55. ShowModal(this);
  56. let theArr = [];
  57. if (data.error.length || data.data.list == "") {
  58. if (data.error && data.error.length) {
  59. message.warning(data.error[0].message);
  60. }
  61. } else {
  62. for (let i = 0; i < data.data.list.length; i++) {
  63. let thisdata = data.data.list[i];
  64. let obj = thisdata;
  65. obj.key = i + 1;
  66. theArr.push(obj);
  67. }
  68. this.state.pagination.total = data.data.totalCount;
  69. this.state.pagination.current = data.data.pageNo;
  70. }
  71. if (data.data && data.data.list && !data.data.list.length) {
  72. this.state.pagination.total = 0;
  73. }
  74. this.setState({
  75. dataSource: theArr,
  76. pageNo: pageNo,
  77. pagination: this.state.pagination,
  78. selectedRowKeys: [],
  79. });
  80. }.bind(this),
  81. }).always(
  82. function () {
  83. this.setState({
  84. loading: false,
  85. });
  86. }.bind(this)
  87. );
  88. },
  89. getInitialState() {
  90. return {
  91. releaseDate: [],
  92. chufaDate: [],
  93. pagination: {
  94. defaultCurrent: 1,
  95. defaultPageSize: 10,
  96. showQuickJumper: true,
  97. pageSize: 10,
  98. onChange: function (page) {
  99. this.loadData(page);
  100. }.bind(this),
  101. showTotal: function (total) {
  102. return "共" + total + "条数据";
  103. },
  104. },
  105. columns: [
  106. {
  107. title: "序号",
  108. dataIndex: "key",
  109. key: "key",
  110. },
  111. {
  112. title: "合同编号",
  113. dataIndex: "contractNo",
  114. key: "contractNo",
  115. },
  116. {
  117. title: "订单编号",
  118. dataIndex: "orderNo",
  119. key: "orderNo",
  120. },
  121. {
  122. title: "客户名称",
  123. dataIndex: "userName",
  124. key: "userName",
  125. render: (text) => {
  126. return text && text.length > 9 ? text.substr(0, 9) + "..." : text;
  127. },
  128. },
  129. {
  130. title: "订单负责人",
  131. dataIndex: "salesmanName",
  132. key: "salesmanName",
  133. },
  134. {
  135. title: "订单部门",
  136. dataIndex: "depName",
  137. key: "depName",
  138. },
  139. {
  140. title: "订单状态",
  141. dataIndex: "orderStatus",
  142. key: "orderStatus",
  143. render: (text) => {
  144. return getNewOrderStatus(text);
  145. },
  146. },
  147. {
  148. title: "项目状态",
  149. dataIndex: "projectStatus",
  150. key: "projectStatus",
  151. render: (text) => {
  152. return getProjectName(text);
  153. },
  154. },
  155. {
  156. title: "签单金额(万元)",
  157. dataIndex: "totalAmount",
  158. key: "totalAmount",
  159. },
  160. {
  161. title: "已收款(万元)",
  162. dataIndex: "settlementAmount",
  163. key: "settlementAmount",
  164. },
  165. {
  166. title: "应收款(万元)",
  167. dataIndex: "orderReceivables",
  168. key: "orderReceivables",
  169. },
  170. {
  171. title: "欠款(万元)",
  172. dataIndex: "orderArrears",
  173. key: "orderArrears",
  174. },
  175. {
  176. title: "结算状态",
  177. dataIndex: "liquidationStatus",
  178. key: "liquidationStatus",
  179. render: (text) => {
  180. return getLiquidationStatus(text);
  181. },
  182. },
  183. {
  184. title: "催收科目",
  185. dataIndex: "type",
  186. key: "type",
  187. render: text => {
  188. if(text == 0) {
  189. return "按时触发应收欠款"
  190. }
  191. }
  192. },
  193. {
  194. title: "催款状态",
  195. dataIndex: "dunStatus",
  196. key: "dunStatus",
  197. render: (text) => {
  198. if (text == 0) {
  199. return "未启动";
  200. } else if (text == 1) {
  201. return "催款中";
  202. } else if (text == 2) {
  203. return "已完成";
  204. } else if (text == 3) {
  205. return "已停止";
  206. }
  207. },
  208. },
  209. {
  210. title: "催款启动日期",
  211. dataIndex: "startDate",
  212. key: "startDate",
  213. },
  214. {
  215. title: "下单时间",
  216. dataIndex: "signDate",
  217. key: "signDate",
  218. },
  219. ],
  220. dataSource: [],
  221. };
  222. },
  223. //页面加载函数
  224. componentWillMount() {
  225. this.loadData();
  226. },
  227. //搜索
  228. search() {
  229. this.setState({
  230. //signBillVisible:false
  231. });
  232. this.loadData();
  233. },
  234. //导出
  235. exportExec() {
  236. var data = {
  237. name: this.state.customerName ? this.state.customerName : undefined, //客户名称
  238. adminName: this.state.adminName ? this.state.adminName : undefined, //订单负责人
  239. orderNo: this.state.orderNo ? this.state.orderNo : undefined, //订单编号
  240. starTime: this.state.releaseDate[0]
  241. ? this.state.releaseDate[0]
  242. : undefined,
  243. endTime: this.state.releaseDate[1]
  244. ? this.state.releaseDate[1]
  245. : undefined,
  246. tStarTime: this.state.chufaDate[0]
  247. ? this.state.chufaDate[0]
  248. : undefined,
  249. tEndTime: this.state.chufaDate[1] ? this.state.chufaDate[1] : undefined,
  250. depId: this.state.departmenttSearch,
  251. pageSize: 9999,
  252. };
  253. window.location.href =
  254. globalConfig.context +
  255. "/api/admin/newOrder/exportArrearsDunListData?" +
  256. $.param(data);
  257. },
  258. //重置
  259. reset() {
  260. this.state.orderNo = "";
  261. this.state.customerName = "";
  262. this.state.adminName = "";
  263. this.state.departmenttSearch = undefined;
  264. this.state.releaseDate[0] = undefined;
  265. this.state.releaseDate[1] = undefined;
  266. this.state.chufaDate[1] = undefined;
  267. this.state.chufaDate[0] = undefined;
  268. this.loadData();
  269. },
  270. changeList(arr) {
  271. const newArr = [];
  272. this.state.columns.forEach(item => {
  273. arr.forEach(val => {
  274. if (val === item.title) {
  275. newArr.push(item);
  276. }
  277. });
  278. });
  279. this.setState({
  280. changeList: newArr
  281. });
  282. },
  283. render() {
  284. const formItemLayout = {
  285. labelCol: { span: 8 },
  286. wrapperCol: { span: 14 },
  287. };
  288. const FormItem = Form.Item;
  289. const { RangePicker } = DatePicker;
  290. const rowSelection = {
  291. selectedRowKeys: this.state.selectedRowKeys,
  292. onChange: (selectedRowKeys, selectedRows) => {
  293. this.setState({
  294. modalVisible: false,
  295. selectedRows: selectedRows.slice(-1),
  296. selectedRowKeys: selectedRowKeys.slice(-1),
  297. });
  298. },
  299. onSelect: (recordt) => {
  300. this.setState({
  301. modalVisible: false,
  302. recordt: recordt.id,
  303. });
  304. },
  305. };
  306. const { TabPane } = Tabs;
  307. return (
  308. <div className="user-content">
  309. <ShowModalDiv ShowModal={this.state.showModal} />
  310. <div className="content-title" style={{ marginBottom: 10 }}>
  311. <span style={{ fontWeight: 900, fontSize: 16 }}>欠款催收列表</span>
  312. </div>
  313. <div className="user-search">
  314. <Tabs
  315. defaultActiveKey="1"
  316. onChange={this.callback}
  317. className="test"
  318. >
  319. <TabPane tab="搜索" key="1">
  320. <Input
  321. placeholder="客户名称"
  322. style={{
  323. width: "150px",
  324. marginBottom: "10px",
  325. marginLeft: 10,
  326. marginRight: 10,
  327. }}
  328. value={this.state.customerName}
  329. onChange={(e) => {
  330. this.setState({ customerName: e.target.value });
  331. }}
  332. />
  333. <Input
  334. placeholder="订单编号"
  335. style={{ width: "150px", marginRight: 10 }}
  336. value={this.state.orderNo}
  337. onChange={(e) => {
  338. this.setState({ orderNo: e.target.value });
  339. }}
  340. />
  341. <Input
  342. placeholder="营销员名称"
  343. style={{
  344. width: "150px",
  345. marginBottom: "10px",
  346. marginRight: 10,
  347. }}
  348. value={this.state.adminName}
  349. onChange={(e) => {
  350. this.setState({ adminName: e.target.value });
  351. }}
  352. />
  353. <DepartmentList
  354. value={this.state.departmenttSearch}
  355. onChange={e => {
  356. this.setState({ departmenttSearch: e });
  357. }}/>
  358. <span style={{ marginRight: "10px" }}>下单时间 :</span>
  359. <RangePicker
  360. value={[
  361. this.state.releaseDate[0]
  362. ? moment(this.state.releaseDate[0])
  363. : null,
  364. this.state.releaseDate[1]
  365. ? moment(this.state.releaseDate[1])
  366. : null,
  367. ]}
  368. onChange={(data, dataString) => {
  369. this.setState({ releaseDate: dataString });
  370. }}
  371. />
  372. <span style={{ marginRight: "10px", marginLeft: 10 }}>触发时间 :</span>
  373. <RangePicker
  374. value={[
  375. this.state.chufaDate[0]
  376. ? moment(this.state.chufaDate[0])
  377. : null,
  378. this.state.chufaDate[1]
  379. ? moment(this.state.chufaDate[1])
  380. : null,
  381. ]}
  382. onChange={(data, dataString) => {
  383. this.setState({ chufaDate: dataString });
  384. }}
  385. />
  386. <Button
  387. type="primary"
  388. onClick={this.search}
  389. style={{ marginLeft: "10px", marginRight: 10 }}
  390. >
  391. 搜索
  392. </Button>
  393. <Button onClick={this.reset}>重置</Button>
  394. </TabPane>
  395. <TabPane tab="导出催款列表" key="2">
  396. <Button
  397. type="primary"
  398. onClick={this.exportExec}
  399. style={{ marginBottom: 10, marginTop: 10, marginLeft: 10 }}
  400. >
  401. 导出催款列表
  402. </Button>
  403. </TabPane>
  404. <TabPane tab="更改表格显示数据" key="3">
  405. <div style={{ marginLeft: 10 }}>
  406. <ChooseList
  407. columns={this.state.columns}
  408. changeFn={this.changeList}
  409. changeList={this.state.changeList}
  410. top={55}
  411. margin={11}
  412. />
  413. </div>
  414. </TabPane>
  415. </Tabs>
  416. <div className="patent-table">
  417. <Spin spinning={this.state.loading}>
  418. <Table
  419. columns={
  420. this.state.changeList
  421. ? this.state.changeList
  422. : this.state.columns
  423. }
  424. dataSource={this.state.dataSource}
  425. pagination={this.state.pagination}
  426. scroll={{ x: "max-content", y: 0 }}
  427. bordered
  428. size="small"
  429. />
  430. </Spin>
  431. </div>
  432. </div>
  433. </div>
  434. );
  435. },
  436. })
  437. );
  438. export default ArrearsList;