huiKuan.jsx 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152
  1. import React from "react";
  2. import $ from "jquery/src/ajax";
  3. import moment from "moment";
  4. import "./public.less";
  5. import {
  6. Form,
  7. Button,
  8. Input,
  9. Select,
  10. Spin,
  11. Table,
  12. message,
  13. Modal,
  14. Upload,
  15. DatePicker,
  16. Icon,
  17. Tabs,
  18. Popconfirm,
  19. Tag
  20. } from "antd";
  21. import {
  22. getProjectStatus,
  23. getProvinceA,
  24. getInvoiceStatus,
  25. getprovince,
  26. getStatus,
  27. getPeople,
  28. splitUrl,
  29. moneyVerify
  30. } from "@/tools";
  31. import { ChooseList } from "../../../../component/manageCenter/order/orderNew/chooseList";
  32. import "./huiKuan.less"
  33. const { RangePicker } = DatePicker;
  34. const FormItem = Form.Item;
  35. const { TextArea } = Input;
  36. const { TabPane } = Tabs;
  37. const HuiKuan = React.createClass({
  38. loadData(pageNo,pageSize) {
  39. this.state.data = [];
  40. this.setState({
  41. loading: true
  42. });
  43. $.ajax({
  44. method: "get",
  45. dataType: "json",
  46. crossDomain: false,
  47. url: globalConfig.context + "/api/admin/receivables/listReceivables",
  48. data: {
  49. pageNo: pageNo || 1,
  50. pageSize: pageSize || this.state.pagination.pageSize,
  51. // 订单状态 判断是否重复
  52. status: this.state.statusSearch,
  53. // 订单编号
  54. orderNo: this.state.orderNoSearch,
  55. // 合同编号
  56. contractNo: this.state.nameSearch,
  57. // 付款方
  58. corporateName: this.state.payFrom,
  59. // 营销员名字
  60. adminName: this.state.adminName,
  61. // 客户名称
  62. nickname: this.state.nickname,
  63. // 订单所属部门id
  64. orderDepId: this.state.orderBranch,
  65. // 管理员部门id
  66. adminDepId: this.state.principalList
  67. },
  68. success: function(data) {
  69. let theArr = [];
  70. if (!data.data || !data.data.pagination.list) {
  71. if (data.error && data.error.length) {
  72. message.warning(data.error[0].message);
  73. }
  74. } else {
  75. for (let i = 0; i < data.data.pagination.list.length; i++) {
  76. let thisdata = data.data.pagination.list[i];
  77. theArr.push({
  78. key: thisdata.id,
  79. status: {
  80. first: thisdata.status,
  81. second: thisdata.inptStatus
  82. },
  83. orderNo: thisdata.orderNo,
  84. contractNo: thisdata.contractNo,
  85. corporateName: thisdata.corporateName,
  86. nickname: thisdata.nickname,
  87. totalAmount: thisdata.totalAmount,
  88. depName: thisdata.depName,
  89. amount: thisdata.amount,
  90. receivablesTimes: thisdata.receivablesTimes,
  91. createTimes: thisdata.createTimes,
  92. remarks: thisdata.remarks,
  93. financialPayNo: thisdata.financialPayNo,
  94. settlementAmount: thisdata.settlementAmount
  95. });
  96. }
  97. }
  98. this.state.pagination.current = data.data.pagination.pageNo;
  99. this.state.pagination.total = data.data.pagination.totalCount;
  100. if (
  101. data.data &&
  102. data.data.pagination.list &&
  103. !data.data.pagination.list.length
  104. ) {
  105. this.state.pagination.current = 0;
  106. this.state.pagination.total = 0;
  107. }
  108. this.setState({
  109. totalPage: data.data.pagination.totalPage,
  110. dataSource: theArr,
  111. pagination: this.state.pagination,
  112. totalHui: data.data.count ? data.data.count.totalAmount : 0,
  113. hui: data.data.count ? data.data.count.amount : 0
  114. });
  115. // console.log(this.state.dataSource);
  116. }.bind(this)
  117. }).always(
  118. function() {
  119. this.setState({
  120. loading: false
  121. });
  122. }.bind(this)
  123. );
  124. },
  125. departmentList() {
  126. this.setState({
  127. loading: true
  128. });
  129. $.ajax({
  130. method: "get",
  131. dataType: "json",
  132. crossDomain: false,
  133. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  134. data: {},
  135. success: function(data) {
  136. let thedata = data.data;
  137. let theArr = [];
  138. if (!thedata) {
  139. if (data.error && data.error.length) {
  140. message.warning(data.error[0].message);
  141. }
  142. } else {
  143. thedata.map(function(item, index) {
  144. theArr.push({
  145. key: index,
  146. name: item.name,
  147. id: item.id
  148. });
  149. });
  150. }
  151. this.setState({
  152. departmentArr: theArr
  153. });
  154. }.bind(this)
  155. }).always(
  156. function() {
  157. this.setState({
  158. loading: false
  159. });
  160. }.bind(this)
  161. );
  162. },
  163. getInitialState() {
  164. return {
  165. mergeModal: false,
  166. visible: false,
  167. selectedRowKeys: [], // Check here to configure the default column
  168. loading: false,
  169. searchMore: true,
  170. assignVisible: false,
  171. releaseDate: [],
  172. totalPage: 0,
  173. boHuivisible: false,
  174. selectedRowKeys: [],
  175. selectedRows: [],
  176. // 弹出层数据
  177. modalData: {},
  178. // userName: "",
  179. contractNo: "",
  180. loading: false,
  181. reason: "",
  182. foo: 0,
  183. // 子组件改变的表格title数组
  184. changeList: undefined,
  185. pagination: {
  186. defaultCurrent: 1,
  187. defaultPageSize: 10,
  188. showQuickJumper: true,
  189. pageSize: 10,
  190. onChange: function(page) {
  191. this.loadData(page);
  192. }.bind(this),
  193. showTotal: function(total) {
  194. return "共" + total + "条数据";
  195. }
  196. },
  197. paginationModal: {
  198. pageSize: 100,
  199. showTotal: function(total) {
  200. return "共" + total + "条数据";
  201. }
  202. },
  203. columns: [
  204. {
  205. title: "合同编号",
  206. dataIndex: "contractNo",
  207. key: "contractNo",
  208. // fixed: "left"
  209. className: "title-table"
  210. },
  211. {
  212. title: "订单编号",
  213. dataIndex: "orderNo",
  214. key: "orderNo",
  215. className: "title-table"
  216. },
  217. {
  218. title: "流水编号",
  219. dataIndex: "financialPayNo",
  220. key: "financialPayNo",
  221. className: "title-table"
  222. },
  223. {
  224. title: "客户名称",
  225. dataIndex: "nickname",
  226. key: "nickname",
  227. className: "title-table"
  228. },
  229. {
  230. title: "付款方",
  231. dataIndex: "corporateName",
  232. key: "corporateName",
  233. className: "title-table"
  234. },
  235. {
  236. title: "合同额(万元)",
  237. dataIndex: "totalAmount",
  238. key: "totalAmount",
  239. className: "title-table"
  240. },
  241. {
  242. title: "已收款(万元)",
  243. dataIndex: "settlementAmount",
  244. key: "settlementAmount",
  245. className: "title-table"
  246. },
  247. {
  248. title: "本次回款(万元)",
  249. dataIndex: "amount",
  250. key: "amount",
  251. className: "title-table"
  252. },
  253. {
  254. title: "回款时间",
  255. dataIndex: "receivablesTimes",
  256. key: "receivablesTimes",
  257. className: "title-table"
  258. },
  259. {
  260. title: "状态",
  261. dataIndex: "status",
  262. key: "status",
  263. className: "title-table",
  264. render: status => {
  265. let str = "";
  266. let color = "";
  267. let str2 = "";
  268. let color2 = "";
  269. if (status.first == 0) {
  270. color = "#87d068";
  271. str = "正常"
  272. if(status.second == 1) {
  273. str = "内容缺失"
  274. color = "#000";
  275. }else if(status.second == 2) {
  276. str = "订单异常"
  277. color = "#000";
  278. }else if(status.second == 3) {
  279. str = "名称不一致"
  280. color = "#000";
  281. }
  282. } else if (status.first == 1) {
  283. str = "重复";
  284. color = "#f50";
  285. if (status.second == 1) {
  286. str2 = "内容缺失";
  287. color2 = "#000";
  288. } else if (status.second == 2) {
  289. str2 = "订单异常";
  290. color2 = "#000";
  291. } else if (status.second == 3) {
  292. str2 = "名称不一致";
  293. color2 = "#000";
  294. }
  295. } else {
  296. color = "#000";
  297. if (status.first == 2) {
  298. str = "订单异常";
  299. } else if (status.first == 3) {
  300. str = "金额异常";
  301. } else if (status.first == 4) {
  302. str = "名称异常";
  303. }else {
  304. str = "未知异常"
  305. }
  306. }
  307. return (
  308. <div>
  309. <Tag color={color}>{str}</Tag>
  310. <Tag color={color2} style={{ display: status.first == 1 && status.second != 0 ? "inline-blcok" : "none" }}>{str2}</Tag>
  311. </div>
  312. );
  313. }
  314. },
  315. {
  316. title: "批量导入时间",
  317. dataIndex: "createTimes",
  318. key: "createTimes",
  319. className: "title-table"
  320. },
  321. {
  322. title: "备注",
  323. dataIndex: "remarks",
  324. key: "remarks",
  325. className: "title-table"
  326. }
  327. ],
  328. columnsDate: [
  329. {
  330. title: "编号",
  331. dataIndex: "id",
  332. key: "id"
  333. },
  334. {
  335. title: "订单编号",
  336. dataIndex: "orderno",
  337. key: "orderno"
  338. },
  339. {
  340. title: "开票金额(万元)",
  341. dataIndex: "amount",
  342. key: "amount"
  343. },
  344. {
  345. title: "申请时间",
  346. dataIndex: "createTime",
  347. key: "createTime"
  348. },
  349. {
  350. title: "开票状态",
  351. dataIndex: "status",
  352. key: "status",
  353. render: text => {
  354. return getInvoiceStatus(text);
  355. }
  356. }
  357. ],
  358. dataSource: [],
  359. upLoadFlag: false,
  360. upLoad: {
  361. name: "file",
  362. action: globalConfig.context + "/api/admin/receivables/import",
  363. headers: {
  364. authorization: "authorization-text"
  365. },
  366. onChange: info => {
  367. if (info.file.status == "done") {
  368. if (info.file.response.data == 1) {
  369. message.success("导入成功!");
  370. this.loadData();
  371. } else {
  372. message.warning(info.file.response.error[0].message);
  373. }
  374. }
  375. }
  376. }
  377. };
  378. },
  379. search() {
  380. this.loadData();
  381. },
  382. componentWillMount() {
  383. this.loadData();
  384. this.departmentList();
  385. // $("#rcDialogTitle0").on("click", function() {
  386. // alert(123);
  387. // console.log(123);
  388. // });
  389. },
  390. reset() {
  391. this.state.nameSearch = "";
  392. this.state.releaseDate = [];
  393. this.state.orderNoSearch = "";
  394. this.state.adminName = "";
  395. this.state.departmenttList = [];
  396. this.state.nickname = "";
  397. this.state.principalList = [];
  398. this.state.payFrom = "";
  399. this.state.statusSearch = [];
  400. this.state.orderBranch = [];
  401. this.state.statusSearch = [];
  402. this.loadData();
  403. },
  404. changeList(arr) {
  405. const newArr = [];
  406. this.state.columns.forEach(item => {
  407. arr.forEach(val => {
  408. if (val === item.title) {
  409. newArr.push(item);
  410. }
  411. });
  412. });
  413. this.setState({
  414. changeList: newArr
  415. });
  416. },
  417. onSelectChange(selectedRowKeys) {
  418. // console.log("selectedRowKeys changed: ", selectedRowKeys);
  419. this.setState({ selectedRowKeys });
  420. },
  421. showModal() {
  422. this.setState({
  423. visible: true,
  424. choose: true
  425. });
  426. this.state.dataSource.forEach((item) => {
  427. if(item.key == this.state.selectedRowKeys[0]) {
  428. this.setState({
  429. modalData: JSON.parse(JSON.stringify(item))
  430. })
  431. // console.log(this.state.modalData);
  432. }
  433. })
  434. },
  435. handleOk() {
  436. if(moneyVerify(this.state.modalData.amount)) return
  437. this.setState({ loading: true });
  438. if(!this.state.choose) {
  439. $.ajax({
  440. method: "POST",
  441. dataType: "json",
  442. crossDomain: false,
  443. url: globalConfig.context + "/api/admin/receivables/addReceivables",
  444. data: {
  445. orderNo: this.state.modalData.orderNo,
  446. amount: this.state.modalData.amount,
  447. receivablesTimes: this.state.modalData.receivablesTimes,
  448. // totalAmount: this.state.modalData.totalAmount,
  449. // contractNo: this.state.modalData.contractNo,
  450. // nickname: this.state.modalData.nickname,
  451. remarks: this.state.modalData.remarks,
  452. corporateName: this.state.modalData.corporateName,
  453. financialPayNo: this.state.modalData.financialPayNo
  454. },
  455. success: function(data) {
  456. if (data.error && data.error.length) {
  457. message.warning(data.error[0].message);
  458. } else {
  459. // console.log("成功", data);
  460. this.loadData();
  461. this.state.selectedRowKeys = [];
  462. this.setState({
  463. selectedRowKeys: this.state.selectedRowKeys
  464. });
  465. this.setState({ loading: false, visible: false });
  466. }
  467. }.bind(this)
  468. }).always(
  469. function() {
  470. this.setState({
  471. loading: false
  472. });
  473. }.bind(this)
  474. );
  475. }else{
  476. $.ajax({
  477. method: "POST",
  478. dataType: "json",
  479. crossDomain: false,
  480. url: globalConfig.context + "/api/admin/receivables/updateReceivables",
  481. data: {
  482. orderNo: this.state.modalData.orderNo,
  483. amount: this.state.modalData.amount,
  484. receivablesTimes: this.state.modalData.receivablesTimes,
  485. // totalAmount: this.state.modalData.totalAmount,
  486. // contractNo: this.state.modalData.contractNo,
  487. // nickname: this.state.modalData.nickname,
  488. corporateName: this.state.modalData.corporateName,
  489. financialPayNo: this.state.modalData.financialPayNo,
  490. remarks: this.state.modalData.remarks,
  491. id: this.state.modalData.key
  492. },
  493. success: function(data) {
  494. if (data.error && data.error.length) {
  495. message.warning(data.error[0].message);
  496. }else {
  497. // console.log("成功",data);
  498. this.loadData()
  499. this.state.selectedRowKeys = [];
  500. this.setState({
  501. selectedRowKeys: this.state.selectedRowKeys
  502. });
  503. this.setState({ loading: false, visible: false });
  504. }
  505. }.bind(this)
  506. }).always(
  507. function() {
  508. this.setState({
  509. loading: false
  510. });
  511. }.bind(this)
  512. );}
  513. // this.setState({ loading: false, visible: false });
  514. },
  515. handleCancel() {
  516. this.loadData()
  517. this.setState({ visible: false });
  518. },
  519. callback(key) {
  520. // console.log(key);
  521. },
  522. delChecked() {
  523. // console.log("被删除列表",this.state.selectedRowKeys);
  524. let ids = this.state.selectedRowKeys.join(",")
  525. $.ajax({
  526. method: "POST",
  527. dataType: "json",
  528. crossDomain: false,
  529. url: globalConfig.context + "/api/admin/receivables/deleteReceivables",
  530. data: {
  531. ids,
  532. type: 0
  533. },
  534. success: function(data) {
  535. if (data.error && data.error.length) {
  536. message.warning(data.error[0].message);
  537. }
  538. }.bind(this)
  539. }).always(
  540. function() {
  541. this.loadData()
  542. this.state.selectedRowKeys = [];
  543. this.setState({
  544. selectedRowKeys: this.state.selectedRowKeys
  545. });
  546. }.bind(this)
  547. );
  548. // this.loadData()
  549. },
  550. delAllChecked() {
  551. // console.log("删除全部");
  552. $.ajax({
  553. method: "POST",
  554. dataType: "json",
  555. crossDomain: false,
  556. url: globalConfig.context + "/api/admin/receivables/deleteReceivables",
  557. data: {
  558. type: 1
  559. },
  560. success: function(data) {
  561. if (data.error && data.error.length) {
  562. message.warning(data.error[0].message);
  563. }
  564. }.bind(this)
  565. }).always(
  566. function() {
  567. this.loadData();
  568. this.state.selectedRowKeys = [];
  569. this.setState({
  570. selectedRowKeys: this.state.selectedRowKeys
  571. });
  572. }.bind(this)
  573. );
  574. // this.loadData()
  575. // console.log("aaa", $(".ant-modal-content"));
  576. },
  577. mergeAll() {
  578. // console.log("合并全部");
  579. $.ajax({
  580. method: "POST",
  581. dataType: "json",
  582. crossDomain: false,
  583. url: globalConfig.context + "/api/admin/receivables/batchImport",
  584. data: {},
  585. success: function(data) {
  586. if (data.error && data.error.length) {
  587. message.warning(data.error[0].message);
  588. }else {
  589. message.success("合并成功!请在收款列表中,查看已收款情况。");
  590. this.setState({
  591. mergeModal: false
  592. });
  593. }
  594. }.bind(this)
  595. }).always(
  596. function() {
  597. this.loadData();
  598. this.state.pagination.pageSize = 10
  599. this.state.selectedRowKeys = []
  600. this.setState({
  601. selectedRowKeys: this.state.selectedRowKeys,
  602. pagination: this.state.pagination,
  603. mergeModal: false
  604. })
  605. // window.location.reload();
  606. }.bind(this)
  607. );
  608. // message.success("合并成功!请在收款列表中,查看已收款情况。");
  609. },
  610. addModal() {
  611. this.state.modalData = {}
  612. this.setState({
  613. modalData: this.state.modalData,
  614. visible: true,
  615. choose: false
  616. })
  617. },
  618. download() {
  619. window.location.href =
  620. globalConfig.context +
  621. "/api/admin/receivables/downloadTemplate?" +
  622. "sign=receivbles_template";
  623. },
  624. // daoHui() {
  625. // window.location.href =
  626. // globalConfig.context +
  627. // "/api/admin/receivables/exportReceivables"
  628. // },
  629. render() {
  630. const formItemLayout = {
  631. labelCol: { span: 8 },
  632. wrapperCol: { span: 14 }
  633. };
  634. var departmentArr = this.state.departmentArr || [];
  635. const { loading, selectedRowKeys, visible } = this.state;
  636. const rowSelection = {
  637. selectedRowKeys,
  638. onChange: this.onSelectChange,
  639. hideDefaultSelections: true
  640. };
  641. var departmentArr = this.state.departmentArr || [];
  642. return (
  643. <div className="user-content" style={{ position: "relative" }}>
  644. <div className="content-title" style={{ marginBottom: 10 }}>
  645. <span style={{ fontWeight: 900, fontSize: 16 }}>批量回款</span>
  646. </div>
  647. <Tabs defaultActiveKey="1" onChange={this.callback}>
  648. <TabPane tab="搜索" key="1">
  649. <div className="user-search" style={{ marginLeft: 10 }}>
  650. <Input
  651. placeholder="合同编号"
  652. value={this.state.nameSearch}
  653. onChange={e => {
  654. this.setState({ nameSearch: e.target.value });
  655. }}
  656. />
  657. <Input
  658. placeholder="订单编号"
  659. value={this.state.orderNoSearch}
  660. onChange={e => {
  661. this.setState({ orderNoSearch: e.target.value });
  662. }}
  663. />
  664. <Input
  665. placeholder="客户名称"
  666. value={this.state.nickname}
  667. onChange={e => {
  668. this.setState({ nickname: e.target.value });
  669. }}
  670. />
  671. <Select
  672. placeholder="状态"
  673. style={{ width: 150, marginRight: 10 }}
  674. value={this.state.statusSearch}
  675. onChange={e => {
  676. this.setState({ statusSearch: e });
  677. // console.log("状态", e);
  678. }}
  679. >
  680. <Select.Option key={0}>正常</Select.Option>
  681. <Select.Option key={1}>重复</Select.Option>
  682. <Select.Option key={2}>异常</Select.Option>
  683. </Select>
  684. <Input
  685. placeholder="订单负责人"
  686. value={this.state.adminName}
  687. onChange={e => {
  688. this.setState({ adminName: e.target.value });
  689. }}
  690. />
  691. <Select
  692. placeholder="订单所属部门"
  693. style={{ width: 150, marginRight: 10 }}
  694. value={this.state.orderBranch}
  695. onChange={e => {
  696. this.setState({ orderBranch: e });
  697. }}
  698. >
  699. {departmentArr.map(function(item) {
  700. return (
  701. <Select.Option key={item.id}>{item.name}</Select.Option>
  702. );
  703. })}
  704. </Select>
  705. <Select
  706. placeholder="负责人所属部门"
  707. style={{ width: 150, marginRight: 10 }}
  708. value={this.state.principalList}
  709. onChange={e => {
  710. this.setState({ principalList: e });
  711. }}
  712. >
  713. {departmentArr.map(function(item) {
  714. return (
  715. <Select.Option key={item.id}>{item.name}</Select.Option>
  716. );
  717. })}
  718. </Select>
  719. <Input
  720. placeholder="付款方"
  721. value={this.state.payFrom}
  722. onChange={e => {
  723. this.setState({ payFrom: e.target.value });
  724. }}
  725. />
  726. <Button
  727. type="primary"
  728. onClick={this.search}
  729. style={{ marginLeft: 10 }}
  730. >
  731. 搜索
  732. </Button>
  733. <Button onClick={this.reset}>重置</Button>
  734. </div>
  735. </TabPane>
  736. <TabPane tab="更改表格显示数据" key="2">
  737. <div style={{ marginLeft: 10 }}>
  738. <ChooseList
  739. columns={this.state.columns}
  740. changeFn={this.changeList}
  741. changeList={this.state.changeList}
  742. top={55}
  743. display={"inline-block"}
  744. style={{ marginBottom: 17 }}
  745. />
  746. </div>
  747. </TabPane>
  748. <TabPane tab="操作" key="3">
  749. <div
  750. class={123}
  751. style={{
  752. position: "relative",
  753. top: 10,
  754. left: 10,
  755. // zIndex: 99,
  756. // left: 400,
  757. // transform: "translateX(-50%)",
  758. display: "inline-block",
  759. width: 119,
  760. height: 28,
  761. overflow: "hidden"
  762. }}
  763. >
  764. <Upload {...this.state.upLoad}>
  765. <Button
  766. type="primary"
  767. disabled={this.state.dataSource.length != 0}
  768. >
  769. <Icon type="upload" />
  770. 导入回款列表
  771. </Button>
  772. </Upload>
  773. </div>
  774. <Button
  775. type="primary"
  776. style={{ marginBottom: 20, marginLeft: 15 }}
  777. onClick={this.download}
  778. >
  779. 下载回款列表模板
  780. </Button>
  781. {/* <Button
  782. type="primary"
  783. style={{ marginBottom: 20, marginLeft: 15 }}
  784. onClick={this.daoHui}
  785. >
  786. 导出回款列表
  787. </Button> */}
  788. <Button
  789. type="primary"
  790. style={{ marginBottom: 20, marginLeft: 15 }}
  791. disabled={this.state.selectedRowKeys.length == 1 ? false : true}
  792. onClick={this.showModal}
  793. >
  794. 修改单条数据
  795. </Button>
  796. <Button
  797. type="primary"
  798. style={{ marginBottom: 20, marginLeft: 15 }}
  799. onClick={this.addModal}
  800. >
  801. 添加单条数据
  802. </Button>
  803. <Popconfirm
  804. placement="top"
  805. title={"您确定要删除选中项的回款信息吗?删除后,不可以恢复!"}
  806. onConfirm={this.delChecked}
  807. okText="确定"
  808. cancelText="取消"
  809. >
  810. <Button
  811. primary
  812. type="danger"
  813. style={{ marginBottom: 20, marginLeft: 15 }}
  814. disabled={this.state.selectedRowKeys.length > 0 ? false : true}
  815. >
  816. 删除选中项
  817. </Button>
  818. </Popconfirm>
  819. <Popconfirm
  820. placement="top"
  821. title={"您确定要删除全部的回款信息吗?删除后,不可以恢复!"}
  822. onConfirm={this.delAllChecked}
  823. okText="确定"
  824. cancelText="取消"
  825. >
  826. <Button
  827. type="danger"
  828. style={{ marginBottom: 20, marginLeft: 15 }}
  829. disabled={this.state.dataSource.length == 0}
  830. >
  831. 删除全部
  832. </Button>
  833. </Popconfirm>
  834. <Button
  835. type="danger"
  836. style={{ marginBottom: 20, marginLeft: 15 }}
  837. disabled={this.state.dataSource.length == 0}
  838. onClick={e => {
  839. this.loadData(1, 100);
  840. this.setState({
  841. mergeModal: true,
  842. });
  843. }}
  844. >
  845. 确认合并回款
  846. </Button>
  847. </TabPane>
  848. </Tabs>
  849. <div className="patent-table" style={{ position: "relative" }}>
  850. <Spin spinning={this.state.loading}>
  851. <Table
  852. columns={
  853. this.state.changeList == undefined
  854. ? this.state.columns
  855. : this.state.changeList
  856. }
  857. scroll={{ x: "max-content" }}
  858. dataSource={this.state.dataSource}
  859. pagination={this.state.pagination}
  860. rowSelection={rowSelection}
  861. bordered
  862. size="small"
  863. />
  864. </Spin>
  865. <p
  866. style={{ display: "inline-block", fontSize: "14px", color: "red" }}
  867. >
  868. {
  869. <span style={{ marginRight: 10 }}>
  870. {`回款金额总计(万元):${this.state.hui ? this.state.hui : "0"}`}
  871. </span>
  872. }
  873. {
  874. <span>
  875. {`合同额总计(万元):${
  876. this.state.totalHui ? this.state.totalHui : "0"
  877. }`}
  878. </span>
  879. }
  880. </p>
  881. </div>
  882. <Modal
  883. width={500}
  884. visible={visible}
  885. title="收款记录"
  886. onOk={this.handleOk}
  887. onCancel={this.handleCancel}
  888. footer={[
  889. <Button key="back" onClick={this.handleCancel}>
  890. 取消
  891. </Button>,
  892. <Button
  893. key="submit"
  894. type="primary"
  895. loading={loading}
  896. onClick={this.handleOk}
  897. >
  898. 保存
  899. </Button>
  900. ]}
  901. >
  902. <p
  903. style={{
  904. marginBottom: 10,
  905. display: this.state.choose ? "block" : "none"
  906. }}
  907. >
  908. 合同编号:
  909. <Input
  910. style={{
  911. width: "auto"
  912. }}
  913. disabled={this.state.choose}
  914. value={this.state.modalData.contractNo}
  915. onChange={e => {
  916. let val = e.target.value;
  917. this.state.modalData.contractNo = val;
  918. this.setState({ modalData: this.state.modalData });
  919. }}
  920. />
  921. </p>
  922. <p style={{ marginBottom: 10 }}>
  923. 订单编号:
  924. <Input
  925. style={{ width: "auto" }}
  926. value={this.state.modalData.orderNo}
  927. onChange={e => {
  928. let val = e.target.value;
  929. this.state.modalData.orderNo = val;
  930. this.setState({ modalData: this.state.modalData });
  931. }}
  932. />
  933. </p>
  934. <p style={{ marginBottom: 10 }}>
  935. 流水编号:
  936. <Input
  937. style={{ width: "auto" }}
  938. value={this.state.modalData.financialPayNo}
  939. onChange={e => {
  940. let val = e.target.value;
  941. this.state.modalData.financialPayNo = val;
  942. this.setState({ modalData: this.state.modalData });
  943. }}
  944. />
  945. </p>
  946. <p style={{ marginBottom: 10 }}>
  947. 付款方:
  948. <Input
  949. style={{ width: "auto" }}
  950. value={this.state.modalData.corporateName}
  951. onChange={e => {
  952. let val = e.target.value;
  953. this.state.modalData.corporateName = val;
  954. this.setState({ modalData: this.state.modalData });
  955. }}
  956. />
  957. </p>
  958. <p
  959. style={{
  960. marginBottom: 10,
  961. display: this.state.choose ? "block" : "none"
  962. }}
  963. >
  964. 客户名称:
  965. <Input
  966. style={{
  967. width: "auto"
  968. }}
  969. disabled={this.state.choose}
  970. value={this.state.modalData.nickname}
  971. onChange={e => {
  972. let val = e.target.value;
  973. this.state.modalData.nickname = val;
  974. this.setState({ modalData: this.state.modalData });
  975. }}
  976. />
  977. </p>
  978. <p
  979. style={{
  980. marginBottom: 10,
  981. display: this.state.choose ? "block" : "none"
  982. }}
  983. >
  984. 合同额(万元):
  985. <Input
  986. style={{
  987. width: "auto",
  988. display: this.state.choose ? "inline-block" : "none"
  989. }}
  990. disabled={this.state.choose}
  991. value={this.state.modalData.totalAmount}
  992. onChange={e => {
  993. let val = e.target.value;
  994. this.state.modalData.totalAmount = val;
  995. this.setState({ modalData: this.state.modalData });
  996. }}
  997. />
  998. </p>
  999. <p style={{ marginBottom: 10 }}>
  1000. 本次回款(万元):
  1001. <Input
  1002. style={{ width: "auto" }}
  1003. value={this.state.modalData.amount}
  1004. onChange={e => {
  1005. let val = e.target.value;
  1006. this.state.modalData.amount = val;
  1007. this.setState({ modalData: this.state.modalData });
  1008. }}
  1009. />
  1010. </p>
  1011. <p style={{ marginBottom: 10 }}>
  1012. 回款时间:
  1013. <DatePicker
  1014. showTime
  1015. placeholder="选择回款时间"
  1016. value={
  1017. this.state.modalData.receivablesTimes
  1018. ? moment(this.state.modalData.receivablesTimes, "YYYY-MM-DD")
  1019. : ""
  1020. }
  1021. onChange={(v, e) => {
  1022. this.state.modalData.receivablesTimes = e;
  1023. console.log(e);
  1024. this.setState({ modalData: this.state.modalData });
  1025. }}
  1026. onOk={() => {}}
  1027. />
  1028. </p>
  1029. <p
  1030. style={{
  1031. marginBottom: 10,
  1032. display: this.state.choose ? "block" : "none"
  1033. }}
  1034. >
  1035. 批量导入时间:
  1036. <Input
  1037. style={{ width: "auto" }}
  1038. value={this.state.modalData.createTimes}
  1039. disabled
  1040. onChange={e => {
  1041. let val = e.target.value;
  1042. this.state.modalData.createTimes = val;
  1043. this.setState({ modalData: this.state.modalData });
  1044. }}
  1045. />
  1046. </p>
  1047. <p style={{ marginBottom: 10 }}>
  1048. <span style={{ display: "inline-block", marginBottom: 20 }}>
  1049. 备注:
  1050. </span>
  1051. <TextArea
  1052. style={{ width: "70%" }}
  1053. value={this.state.modalData.remarks}
  1054. onChange={e => {
  1055. this.state.modalData.remarks = e.target.value;
  1056. // console.log(e);
  1057. this.setState({ modalData: this.state.modalData });
  1058. }}
  1059. placeholder="请输入备注信息"
  1060. autosize={{ minRows: 3, maxRows: 5 }}
  1061. />
  1062. </p>
  1063. </Modal>
  1064. <Modal
  1065. title="确认合并列表"
  1066. visible={this.state.mergeModal}
  1067. width={1300}
  1068. onOk={this.mergeAll}
  1069. onCancel={() => {
  1070. this.setState({
  1071. mergeModal: false,
  1072. });
  1073. }}
  1074. >
  1075. <div className="patent-table" style={{ position: "relative" }}>
  1076. <Spin spinning={this.state.loading}>
  1077. <Table
  1078. columns={this.state.columns}
  1079. scroll={{ x: "max-content" }}
  1080. dataSource={this.state.dataSource}
  1081. bordered
  1082. size="small"
  1083. pagination={this.state.paginationModal}
  1084. />
  1085. </Spin>
  1086. <p
  1087. style={{
  1088. display: "inline-block",
  1089. fontSize: "14px",
  1090. color: "red"
  1091. }}
  1092. >
  1093. {
  1094. <span style={{ marginRight: 10 }}>
  1095. {`回款金额总计(万元):${
  1096. this.state.hui ? this.state.hui : "0"
  1097. }`}
  1098. </span>
  1099. }
  1100. {
  1101. <span>
  1102. {`合同额总计(万元):${
  1103. this.state.totalHui ? this.state.totalHui : "0"
  1104. }`}
  1105. </span>
  1106. }
  1107. </p>
  1108. </div>
  1109. </Modal>
  1110. </div>
  1111. );
  1112. }
  1113. });
  1114. export default HuiKuan;