huiKuan.jsx 29 KB

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