arrearsList.jsx 14 KB

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