huiKuan.jsx 34 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181
  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 if (status.first == 5) {
  304. str = "已收款";
  305. }else if (status.first == 6) {
  306. str = "变更锁定";
  307. }
  308. }
  309. return (
  310. <div>
  311. <Tag color={color}>{str}</Tag>
  312. <Tag color={color2} style={{ display: status.first == 1 && status.second != 0 ? "inline-blcok" : "none" }}>{str2}</Tag>
  313. </div>
  314. );
  315. }
  316. },
  317. {
  318. title: "批量导入时间",
  319. dataIndex: "createTimes",
  320. key: "createTimes",
  321. className: "title-table"
  322. },
  323. {
  324. title: "备注",
  325. dataIndex: "remarks",
  326. key: "remarks",
  327. className: "title-table"
  328. }
  329. ],
  330. columnsDate: [
  331. {
  332. title: "编号",
  333. dataIndex: "id",
  334. key: "id"
  335. },
  336. {
  337. title: "订单编号",
  338. dataIndex: "orderno",
  339. key: "orderno"
  340. },
  341. {
  342. title: "开票金额(万元)",
  343. dataIndex: "amount",
  344. key: "amount"
  345. },
  346. {
  347. title: "申请时间",
  348. dataIndex: "createTime",
  349. key: "createTime"
  350. },
  351. {
  352. title: "开票状态",
  353. dataIndex: "status",
  354. key: "status",
  355. render: text => {
  356. return getInvoiceStatus(text);
  357. }
  358. }
  359. ],
  360. dataSource: [],
  361. upLoadFlag: false,
  362. upLoad: {
  363. name: "file",
  364. action: globalConfig.context + "/api/admin/receivables/import",
  365. headers: {
  366. authorization: "authorization-text"
  367. },
  368. onChange: info => {
  369. if (info.file.status == "done") {
  370. if (info.file.response.data == 1) {
  371. message.success("导入成功!");
  372. this.loadData();
  373. } else {
  374. message.warning(info.file.response.error[0].message);
  375. }
  376. }
  377. }
  378. }
  379. };
  380. },
  381. search() {
  382. this.loadData();
  383. },
  384. componentWillMount() {
  385. this.loadData();
  386. this.departmentList();
  387. // $("#rcDialogTitle0").on("click", function() {
  388. // alert(123);
  389. // console.log(123);
  390. // });
  391. },
  392. reset() {
  393. this.state.nameSearch = "";
  394. this.state.releaseDate = [];
  395. this.state.orderNoSearch = "";
  396. this.state.adminName = "";
  397. this.state.departmenttList = [];
  398. this.state.nickname = "";
  399. this.state.principalList = [];
  400. this.state.payFrom = "";
  401. this.state.statusSearch = [];
  402. this.state.orderBranch = [];
  403. this.state.statusSearch = [];
  404. this.loadData();
  405. },
  406. changeList(arr) {
  407. const newArr = [];
  408. this.state.columns.forEach(item => {
  409. arr.forEach(val => {
  410. if (val === item.title) {
  411. newArr.push(item);
  412. }
  413. });
  414. });
  415. this.setState({
  416. changeList: newArr
  417. });
  418. },
  419. onSelectChange(selectedRowKeys) {
  420. // console.log("selectedRowKeys changed: ", selectedRowKeys);
  421. this.setState({ selectedRowKeys });
  422. },
  423. showModal() {
  424. this.setState({
  425. visible: true,
  426. choose: true
  427. });
  428. this.state.dataSource.forEach((item) => {
  429. if (item.key == this.state.selectedRowKeys[0]) {
  430. this.setState({
  431. modalData: JSON.parse(JSON.stringify(item))
  432. })
  433. // console.log(this.state.modalData);
  434. }
  435. })
  436. },
  437. tableRowClick(record) {
  438. this.setState({
  439. visible: true,
  440. choose: true
  441. });
  442. this.setState({
  443. modalData: JSON.parse(JSON.stringify(record))
  444. });
  445. },
  446. handleOk() {
  447. if (moneyVerify(this.state.modalData.amount)) return
  448. this.setState({ loading: true });
  449. if (!this.state.choose) {
  450. $.ajax({
  451. method: "POST",
  452. dataType: "json",
  453. crossDomain: false,
  454. url: globalConfig.context + "/api/admin/receivables/addReceivables",
  455. data: {
  456. orderNo: this.state.modalData.orderNo,
  457. amount: this.state.modalData.amount,
  458. receivablesTimes: this.state.modalData.receivablesTimes,
  459. // totalAmount: this.state.modalData.totalAmount,
  460. // contractNo: this.state.modalData.contractNo,
  461. // nickname: this.state.modalData.nickname,
  462. remarks: this.state.modalData.remarks,
  463. corporateName: this.state.modalData.corporateName,
  464. financialPayNo: this.state.modalData.financialPayNo
  465. },
  466. success: function (data) {
  467. if (data.error && data.error.length) {
  468. message.warning(data.error[0].message);
  469. } else {
  470. // console.log("成功", data);
  471. message.success("添加成功!")
  472. this.loadData();
  473. this.state.selectedRowKeys = [];
  474. this.setState({
  475. selectedRowKeys: this.state.selectedRowKeys
  476. });
  477. this.setState({ loading: false, visible: false });
  478. }
  479. }.bind(this)
  480. }).always(
  481. function () {
  482. this.setState({
  483. loading: false
  484. });
  485. }.bind(this)
  486. );
  487. } else {
  488. $.ajax({
  489. method: "POST",
  490. dataType: "json",
  491. crossDomain: false,
  492. url: globalConfig.context + "/api/admin/receivables/updateReceivables",
  493. data: {
  494. orderNo: this.state.modalData.orderNo,
  495. amount: this.state.modalData.amount,
  496. receivablesTimes: this.state.modalData.receivablesTimes,
  497. // totalAmount: this.state.modalData.totalAmount,
  498. // contractNo: this.state.modalData.contractNo,
  499. // nickname: this.state.modalData.nickname,
  500. corporateName: this.state.modalData.corporateName,
  501. financialPayNo: this.state.modalData.financialPayNo,
  502. remarks: this.state.modalData.remarks,
  503. id: this.state.modalData.key
  504. },
  505. success: function (data) {
  506. if (data.error && data.error.length) {
  507. message.warning(data.error[0].message);
  508. } else {
  509. // console.log("成功",data);
  510. message.success("修改成功!")
  511. this.loadData()
  512. this.state.selectedRowKeys = [];
  513. this.setState({
  514. selectedRowKeys: this.state.selectedRowKeys
  515. });
  516. this.setState({ loading: false, visible: false });
  517. }
  518. }.bind(this)
  519. }).always(
  520. function () {
  521. this.setState({
  522. loading: false
  523. });
  524. }.bind(this)
  525. );
  526. }
  527. // this.setState({ loading: false, visible: false });
  528. },
  529. handleCancel() {
  530. // this.loadData()
  531. this.setState({ visible: false });
  532. },
  533. callback(key) {
  534. // console.log(key);
  535. },
  536. delChecked() {
  537. // console.log("被删除列表",this.state.selectedRowKeys);
  538. let ids = this.state.selectedRowKeys.join(",")
  539. $.ajax({
  540. method: "POST",
  541. dataType: "json",
  542. crossDomain: false,
  543. url: globalConfig.context + "/api/admin/receivables/deleteReceivables",
  544. data: {
  545. ids,
  546. type: 0
  547. },
  548. success: function (data) {
  549. if (data.error && data.error.length) {
  550. message.warning(data.error[0].message);
  551. }
  552. message.success("删除成功!")
  553. }.bind(this)
  554. }).always(
  555. function () {
  556. this.loadData()
  557. this.state.selectedRowKeys = [];
  558. this.setState({
  559. selectedRowKeys: this.state.selectedRowKeys
  560. });
  561. }.bind(this)
  562. );
  563. // this.loadData()
  564. },
  565. delAllChecked() {
  566. // console.log("删除全部");
  567. $.ajax({
  568. method: "POST",
  569. dataType: "json",
  570. crossDomain: false,
  571. url: globalConfig.context + "/api/admin/receivables/deleteReceivables",
  572. data: {
  573. type: 1
  574. },
  575. success: function (data) {
  576. if (data.error && data.error.length) {
  577. message.warning(data.error[0].message);
  578. }
  579. message.success("删除全部成功!")
  580. }.bind(this)
  581. }).always(
  582. function () {
  583. this.loadData();
  584. this.state.selectedRowKeys = [];
  585. this.setState({
  586. selectedRowKeys: this.state.selectedRowKeys
  587. });
  588. }.bind(this)
  589. );
  590. // this.loadData()
  591. // console.log("aaa", $(".ant-modal-content"));
  592. },
  593. mergeAll() {
  594. // console.log("合并全部");
  595. $.ajax({
  596. method: "POST",
  597. dataType: "json",
  598. crossDomain: false,
  599. url: globalConfig.context + "/api/admin/receivables/batchImport",
  600. data: {},
  601. success: function (data) {
  602. if (data.error && data.error.length) {
  603. message.warning(data.error[0].message);
  604. } else {
  605. message.success("合并成功!请在收款列表中,查看已收款情况。");
  606. this.setState({
  607. mergeModal: false
  608. });
  609. }
  610. }.bind(this)
  611. }).always(
  612. function () {
  613. this.loadData();
  614. this.state.pagination.pageSize = 10
  615. this.state.selectedRowKeys = []
  616. this.setState({
  617. selectedRowKeys: this.state.selectedRowKeys,
  618. pagination: this.state.pagination,
  619. mergeModal: false
  620. })
  621. // window.location.reload();
  622. }.bind(this)
  623. );
  624. // message.success("合并成功!请在收款列表中,查看已收款情况。");
  625. },
  626. addModal() {
  627. this.state.modalData = {}
  628. this.setState({
  629. modalData: this.state.modalData,
  630. visible: true,
  631. choose: false
  632. })
  633. },
  634. download() {
  635. window.location.href =
  636. globalConfig.context +
  637. "/api/admin/receivables/downloadTemplate?" +
  638. "sign=receivbles_template";
  639. },
  640. // daoHui() {
  641. // window.location.href =
  642. // globalConfig.context +
  643. // "/api/admin/receivables/exportReceivables"
  644. // },
  645. render() {
  646. const formItemLayout = {
  647. labelCol: { span: 8 },
  648. wrapperCol: { span: 14 }
  649. };
  650. var departmentArr = this.state.departmentArr || [];
  651. const { loading, selectedRowKeys, visible } = this.state;
  652. const rowSelection = {
  653. selectedRowKeys,
  654. onChange: this.onSelectChange,
  655. hideDefaultSelections: true
  656. };
  657. var departmentArr = this.state.departmentArr || [];
  658. return (
  659. <div className="user-content" style={{ position: "relative" }}>
  660. <div className="content-title" style={{ marginBottom: 10 }}>
  661. <span style={{ fontWeight: 900, fontSize: 16 }}>批量回款</span>
  662. </div>
  663. <Tabs defaultActiveKey="1" onChange={this.callback} className="test">
  664. <TabPane tab="搜索" key="1">
  665. <div className="user-search" style={{ marginLeft: 10 }}>
  666. <Input
  667. placeholder="合同编号"
  668. value={this.state.nameSearch}
  669. onChange={e => {
  670. this.setState({ nameSearch: e.target.value });
  671. }}
  672. />
  673. <Input
  674. placeholder="订单编号"
  675. value={this.state.orderNoSearch}
  676. onChange={e => {
  677. this.setState({ orderNoSearch: e.target.value });
  678. }}
  679. />
  680. <Input
  681. placeholder="客户名称"
  682. value={this.state.nickname}
  683. onChange={e => {
  684. this.setState({ nickname: e.target.value });
  685. }}
  686. />
  687. <Select
  688. placeholder="状态"
  689. style={{ width: 150, marginRight: 10 }}
  690. value={this.state.statusSearch}
  691. onChange={e => {
  692. this.setState({ statusSearch: e });
  693. // console.log("状态", e);
  694. }}
  695. >
  696. <Select.Option key={0}>正常</Select.Option>
  697. <Select.Option key={1}>重复</Select.Option>
  698. <Select.Option key={2}>异常</Select.Option>
  699. </Select>
  700. <Input
  701. placeholder="订单负责人"
  702. value={this.state.adminName}
  703. onChange={e => {
  704. this.setState({ adminName: e.target.value });
  705. }}
  706. />
  707. <Select
  708. placeholder="订单所属部门"
  709. style={{ width: 150, marginRight: 10 }}
  710. value={this.state.orderBranch}
  711. onChange={e => {
  712. this.setState({ orderBranch: e });
  713. }}
  714. >
  715. {departmentArr.map(function (item) {
  716. return (
  717. <Select.Option key={item.id}>{item.name}</Select.Option>
  718. );
  719. })}
  720. </Select>
  721. <Select
  722. placeholder="负责人所属部门"
  723. style={{ width: 150, marginRight: 10 }}
  724. value={this.state.principalList}
  725. onChange={e => {
  726. this.setState({ principalList: e });
  727. }}
  728. >
  729. {departmentArr.map(function (item) {
  730. return (
  731. <Select.Option key={item.id}>{item.name}</Select.Option>
  732. );
  733. })}
  734. </Select>
  735. <Input
  736. placeholder="付款方"
  737. value={this.state.payFrom}
  738. onChange={e => {
  739. this.setState({ payFrom: e.target.value });
  740. }}
  741. />
  742. <Button
  743. type="primary"
  744. onClick={this.search}
  745. style={{ marginLeft: 10 }}
  746. >
  747. 搜索
  748. </Button>
  749. <Button onClick={this.reset}>重置</Button>
  750. </div>
  751. </TabPane>
  752. <TabPane tab="更改表格显示数据" key="2">
  753. <div style={{ marginLeft: 10 }}>
  754. <ChooseList
  755. columns={this.state.columns}
  756. changeFn={this.changeList}
  757. changeList={this.state.changeList}
  758. top={55}
  759. margin={11}
  760. display={"inline-block"}
  761. style={{ marginBottom: 17 }}
  762. />
  763. </div>
  764. </TabPane>
  765. <TabPane tab="操作" key="3">
  766. <div
  767. class={123}
  768. style={{
  769. position: "relative",
  770. top: 10,
  771. left: 10,
  772. // zIndex: 99,
  773. // left: 400,
  774. // transform: "translateX(-50%)",
  775. display: "inline-block",
  776. width: 122,
  777. height: 28,
  778. overflow: "hidden"
  779. }}
  780. >
  781. <Upload {...this.state.upLoad}>
  782. <Button
  783. type="primary"
  784. disabled={this.state.dataSource.length != 0 || this.props.look}
  785. >
  786. <Icon type="upload" />
  787. 导入回款列表
  788. </Button>
  789. </Upload>
  790. </div>
  791. <Button
  792. type="primary"
  793. style={{ marginBottom: 11, marginLeft: 25 }}
  794. onClick={this.download}
  795. >
  796. 下载回款列表模板
  797. </Button>
  798. {/* <Button
  799. type="primary"
  800. style={{ marginBottom: 20, marginLeft: 15 }}
  801. onClick={this.daoHui}
  802. >
  803. 导出回款列表
  804. </Button> */}
  805. <Button
  806. type="primary"
  807. style={{ marginBottom: 11, marginLeft: 15 }}
  808. disabled={this.state.selectedRowKeys.length == 1 ? false : true}
  809. onClick={this.showModal}
  810. >
  811. 修改单条数据
  812. </Button>
  813. <Button
  814. type="primary"
  815. style={{ marginBottom: 11, marginLeft: 15 }}
  816. onClick={this.addModal}
  817. >
  818. 添加单条数据
  819. </Button>
  820. <Popconfirm
  821. placement="top"
  822. title={"您确定要删除选中项的回款信息吗?删除后,不可以恢复!"}
  823. onConfirm={this.delChecked}
  824. okText="确定"
  825. cancelText="取消"
  826. >
  827. <Button
  828. primary
  829. type="danger"
  830. style={{ marginBottom: 11, marginLeft: 15 }}
  831. disabled={this.state.selectedRowKeys.length > 0 ? false : true}
  832. >
  833. 删除选中项
  834. </Button>
  835. </Popconfirm>
  836. <Popconfirm
  837. placement="top"
  838. title={"您确定要删除全部的回款信息吗?删除后,不可以恢复!"}
  839. onConfirm={this.delAllChecked}
  840. okText="确定"
  841. cancelText="取消"
  842. >
  843. <Button
  844. type="danger"
  845. style={{ marginBottom: 11, marginLeft: 15 }}
  846. disabled={this.state.dataSource.length == 0}
  847. >
  848. 删除全部
  849. </Button>
  850. </Popconfirm>
  851. <Button
  852. type="danger"
  853. style={{ marginBottom: 11, marginLeft: 15 }}
  854. disabled={this.state.dataSource.length == 0 || this.props.look}
  855. onClick={e => {
  856. this.loadData(1, 100);
  857. this.setState({
  858. mergeModal: true
  859. });
  860. }}
  861. >
  862. 确认合并回款
  863. </Button>
  864. <Button
  865. type="danger"
  866. style={{ marginBottom: 11, marginLeft: 15 }}
  867. disabled={this.state.dataSource.length == 0}
  868. onClick={e => {
  869. this.setState({
  870. selectedRowKeys: []
  871. });
  872. }}
  873. >
  874. 重置选项
  875. </Button>
  876. </TabPane>
  877. </Tabs>
  878. <div className="patent-table" style={{ position: "relative" }}>
  879. <Spin spinning={this.state.loading}>
  880. <Table
  881. columns={
  882. this.state.changeList == undefined
  883. ? this.state.columns
  884. : this.state.changeList
  885. }
  886. scroll={{ x: "max-content" }}
  887. dataSource={this.state.dataSource}
  888. pagination={this.state.pagination}
  889. rowSelection={rowSelection}
  890. onRowDoubleClick={this.tableRowClick.bind(this)}
  891. bordered
  892. size="small"
  893. />
  894. </Spin>
  895. <p
  896. style={{ display: "inline-block", fontSize: "14px", color: "red" }}
  897. >
  898. {
  899. <span style={{ marginRight: 10 }}>
  900. {`回款金额总计(万元):${this.state.hui ? this.state.hui : "0"}`}
  901. </span>
  902. }
  903. {
  904. <span>
  905. {`合同额总计(万元):${
  906. this.state.totalHui ? this.state.totalHui : "0"
  907. }`}
  908. </span>
  909. }
  910. </p>
  911. </div>
  912. <Modal
  913. width={500}
  914. visible={visible}
  915. title="收款记录"
  916. onOk={this.handleOk}
  917. onCancel={this.handleCancel}
  918. footer={[
  919. <Button key="back" onClick={this.handleCancel}>
  920. 取消
  921. </Button>,
  922. <Button
  923. key="submit"
  924. type="primary"
  925. loading={loading}
  926. disabled={this.props.look}
  927. onClick={this.handleOk}
  928. >
  929. 保存
  930. </Button>
  931. ]}
  932. >
  933. <p
  934. style={{
  935. marginBottom: 10,
  936. display: this.state.choose ? "block" : "none"
  937. }}
  938. >
  939. 合同编号:
  940. <Input
  941. style={{
  942. width: "auto"
  943. }}
  944. disabled={this.state.choose}
  945. value={this.state.modalData.contractNo}
  946. onChange={e => {
  947. let val = e.target.value;
  948. this.state.modalData.contractNo = val;
  949. this.setState({ modalData: this.state.modalData });
  950. }}
  951. />
  952. </p>
  953. <p style={{ marginBottom: 10 }}>
  954. 订单编号:
  955. <Input
  956. style={{ width: "auto" }}
  957. value={this.state.modalData.orderNo}
  958. onChange={e => {
  959. let val = e.target.value;
  960. this.state.modalData.orderNo = val;
  961. this.setState({ modalData: this.state.modalData });
  962. }}
  963. />
  964. </p>
  965. <p style={{ marginBottom: 10 }}>
  966. 流水编号:
  967. <Input
  968. style={{ width: "auto" }}
  969. value={this.state.modalData.financialPayNo}
  970. onChange={e => {
  971. let val = e.target.value;
  972. this.state.modalData.financialPayNo = val;
  973. this.setState({ modalData: this.state.modalData });
  974. }}
  975. />
  976. </p>
  977. <p style={{ marginBottom: 10 }}>
  978. 付款方:
  979. <Input
  980. style={{ width: "auto" }}
  981. value={this.state.modalData.corporateName}
  982. onChange={e => {
  983. let val = e.target.value;
  984. this.state.modalData.corporateName = val;
  985. this.setState({ modalData: this.state.modalData });
  986. }}
  987. />
  988. </p>
  989. <p
  990. style={{
  991. marginBottom: 10,
  992. display: this.state.choose ? "block" : "none"
  993. }}
  994. >
  995. 客户名称:
  996. <Input
  997. style={{
  998. width: "auto"
  999. }}
  1000. disabled={this.state.choose}
  1001. value={this.state.modalData.nickname}
  1002. onChange={e => {
  1003. let val = e.target.value;
  1004. this.state.modalData.nickname = val;
  1005. this.setState({ modalData: this.state.modalData });
  1006. }}
  1007. />
  1008. </p>
  1009. <p
  1010. style={{
  1011. marginBottom: 10,
  1012. display: this.state.choose ? "block" : "none"
  1013. }}
  1014. >
  1015. 合同额(万元):
  1016. <Input
  1017. style={{
  1018. width: "auto",
  1019. display: this.state.choose ? "inline-block" : "none"
  1020. }}
  1021. disabled={this.state.choose}
  1022. value={this.state.modalData.totalAmount}
  1023. onChange={e => {
  1024. let val = e.target.value;
  1025. this.state.modalData.totalAmount = val;
  1026. this.setState({ modalData: this.state.modalData });
  1027. }}
  1028. />
  1029. </p>
  1030. <p style={{ marginBottom: 10 }}>
  1031. 本次回款(万元):
  1032. <Input
  1033. style={{ width: "auto" }}
  1034. value={this.state.modalData.amount}
  1035. onChange={e => {
  1036. let val = e.target.value;
  1037. this.state.modalData.amount = val;
  1038. this.setState({ modalData: this.state.modalData });
  1039. }}
  1040. />
  1041. </p>
  1042. <p style={{ marginBottom: 10 }}>
  1043. 回款时间:
  1044. <DatePicker
  1045. showTime
  1046. placeholder="选择回款时间"
  1047. value={
  1048. this.state.modalData.receivablesTimes
  1049. ? moment(this.state.modalData.receivablesTimes, "YYYY-MM-DD")
  1050. : ""
  1051. }
  1052. onChange={(v, e) => {
  1053. this.state.modalData.receivablesTimes = e;
  1054. console.log(e);
  1055. this.setState({ modalData: this.state.modalData });
  1056. }}
  1057. onOk={() => { }}
  1058. />
  1059. </p>
  1060. <p
  1061. style={{
  1062. marginBottom: 10,
  1063. display: this.state.choose ? "block" : "none"
  1064. }}
  1065. >
  1066. 批量导入时间:
  1067. <Input
  1068. style={{ width: "auto" }}
  1069. value={this.state.modalData.createTimes}
  1070. disabled
  1071. onChange={e => {
  1072. let val = e.target.value;
  1073. this.state.modalData.createTimes = val;
  1074. this.setState({ modalData: this.state.modalData });
  1075. }}
  1076. />
  1077. </p>
  1078. <p style={{ marginBottom: 10 }}>
  1079. <span style={{ display: "inline-block", marginBottom: 20 }}>
  1080. 备注:
  1081. </span>
  1082. <TextArea
  1083. style={{ width: "70%" }}
  1084. value={this.state.modalData.remarks}
  1085. onChange={e => {
  1086. this.state.modalData.remarks = e.target.value;
  1087. // console.log(e);
  1088. this.setState({ modalData: this.state.modalData });
  1089. }}
  1090. placeholder="请输入备注信息"
  1091. autosize={{ minRows: 3, maxRows: 5 }}
  1092. />
  1093. </p>
  1094. </Modal>
  1095. <Modal
  1096. title="确认合并列表"
  1097. visible={this.state.mergeModal}
  1098. width={1300}
  1099. onOk={this.mergeAll}
  1100. onCancel={() => {
  1101. this.setState({
  1102. mergeModal: false
  1103. });
  1104. }}
  1105. >
  1106. <div className="patent-table" style={{ position: "relative" }}>
  1107. <Spin spinning={this.state.loading}>
  1108. <Table
  1109. columns={this.state.columns}
  1110. scroll={{ x: "max-content" }}
  1111. dataSource={this.state.dataSource}
  1112. bordered
  1113. size="small"
  1114. pagination={this.state.paginationModal}
  1115. />
  1116. </Spin>
  1117. <p
  1118. style={{
  1119. display: "inline-block",
  1120. fontSize: "14px",
  1121. color: "red"
  1122. }}
  1123. >
  1124. {
  1125. <span style={{ marginRight: 10 }}>
  1126. {`回款金额总计(万元):${
  1127. this.state.hui ? this.state.hui : "0"
  1128. }`}
  1129. </span>
  1130. }
  1131. {
  1132. <span>
  1133. {`合同额总计(万元):${
  1134. this.state.totalHui ? this.state.totalHui : "0"
  1135. }`}
  1136. </span>
  1137. }
  1138. </p>
  1139. </div>
  1140. </Modal>
  1141. </div>
  1142. );
  1143. }
  1144. });
  1145. export default HuiKuan;