arrearsList.jsx 14 KB

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