arrearsList.jsx 14 KB

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