huiKuan.jsx 30 KB

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