pressList.jsx 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954
  1. import React from "react";
  2. import {
  3. Button,
  4. Input,
  5. Select,
  6. Spin,
  7. Table,
  8. message,
  9. DatePicker,
  10. Form,
  11. Modal,
  12. Tabs,
  13. Tooltip,
  14. Tag,
  15. } from "antd";
  16. import $ from "jquery/src/ajax";
  17. import moment from "moment";
  18. import {
  19. getLiquidationStatus,
  20. getjiedian,
  21. getNewOrderStatus,
  22. getProjectStatus,
  23. } from "@/tools.js";
  24. import "./customer.less";
  25. import { ChooseList } from "./chooseList";
  26. import { getProjectName } from "../../../tools";
  27. import { salesList } from "@/dataDic.js"
  28. import DepartmentList from "../../../common/departmentList";
  29. import OrderDesc from "../../financialManage/orderDetail/orderDesc";
  30. const IntentionCustomer = Form.create()(
  31. React.createClass({
  32. loadData(pageNo) {
  33. this.setState({
  34. visitModul: false,
  35. loading: true,
  36. ispage: pageNo,
  37. modalVisible: false,
  38. });
  39. $.ajax({
  40. method: "get",
  41. dataType: "json",
  42. crossDomain: false,
  43. url: globalConfig.context + "/api/admin/newOrder/dunOrderNewList",
  44. data: {
  45. pageNo: pageNo || 1,
  46. pageSize: this.state.pagination.pageSize,
  47. name: this.state.customerName, //名称
  48. orderNo: this.state.orderNo, //订单编号
  49. contractNo: this.state.contractNo,
  50. depId: this.state.departmenttSearch, //订单部门
  51. adminName: this.state.adminName, //责任人名称
  52. starTime: this.state.releaseDate[0], //开始时间
  53. endTime: this.state.releaseDate[1], //结束时间
  54. newStatus: this.state.newStatus,
  55. amountStatus: this.state.amountStatus,//签单金额
  56. approval: this.state.approval,//是否特批
  57. memberType: this.state.memberType,//会员
  58. },
  59. success: function (data) {
  60. let theArr = [];
  61. if (data.error.length || data.data.list == "") {
  62. if (data.error && data.error.length) {
  63. message.warning(data.error[0].message);
  64. }
  65. } else {
  66. for (let i = 0; i < data.data.list.length; i++) {
  67. let thisdata = data.data.list[i];
  68. theArr.push({
  69. key: i + 1,
  70. id: thisdata.id, //ID
  71. contractNo: thisdata.contractNo,
  72. orderNo: thisdata.orderNo, //订单编号
  73. totalAmount: thisdata.totalAmount, //签单金额
  74. settlementAmount: thisdata.settlementAmount, //已收款
  75. accountsReceivable: thisdata.accountsReceivable, //应收款
  76. uncollectedAmount: thisdata.uncollectedAmount, //应收款
  77. appropriationRatio: thisdata.appropriationRatio, //拨款比例
  78. orderStatus: thisdata.orderStatus, //订单状态
  79. projectStatus: thisdata.projectStatus, //项目状态
  80. liquidationStatus: thisdata.liquidationStatus, //结算状态
  81. signDate: thisdata.signDate, //签单时间
  82. userName: thisdata.userName, //客户名称
  83. salesmanName: thisdata.salesmanName, //营销员名称
  84. dunSubject: thisdata.dunSubject, //催收科目
  85. startDate: thisdata.startDate, //催收启动时间
  86. depName: thisdata.depName, //部门名称
  87. dunStatus: thisdata.dunStatus == 0 ? "未触发" : "已触发",
  88. commodityName: thisdata.commodityName,
  89. approval: thisdata.approval, //特批状态
  90. memberType: thisdata.memberType, //会员状态
  91. });
  92. }
  93. this.state.pagination.total = data.data.totalCount;
  94. this.state.pagination.current = data.data.pageNo;
  95. }
  96. if (data.data && data.data.list && !data.data.list.length) {
  97. this.state.pagination.total = 0;
  98. }
  99. this.setState({
  100. dataSource: theArr,
  101. pageNo: pageNo,
  102. pagination: this.state.pagination,
  103. selectedRowKeys: [],
  104. });
  105. }.bind(this),
  106. }).always(
  107. function () {
  108. this.setState({
  109. loading: false,
  110. });
  111. }.bind(this)
  112. );
  113. },
  114. loadDatas(dunId) {
  115. this.setState({
  116. loading: true,
  117. });
  118. $.ajax({
  119. method: "get",
  120. dataType: "json",
  121. crossDomain: false,
  122. url: globalConfig.context + "/api/admin/newOrder/selectDunLogList",
  123. data: {
  124. dunId: dunId,
  125. },
  126. success: function (data) {
  127. let theArr = [];
  128. if (data.error.length || data.data == "") {
  129. if (data.error && data.error.length) {
  130. message.warning(data.error[0].message);
  131. }
  132. } else {
  133. for (let i = 0; i < data.data.length; i++) {
  134. let thisdata = data.data[i];
  135. theArr.push({
  136. key: i,
  137. id: thisdata.id, //ID
  138. dunId: thisdata.dunId, //催款ID
  139. dumBy: thisdata.dumBy, //催款人
  140. dumTime: thisdata.dumDate, //催款时间
  141. remarks: thisdata.remarks, //备注
  142. });
  143. }
  144. }
  145. this.setState({
  146. dataSources: theArr,
  147. });
  148. }.bind(this),
  149. }).always(
  150. function () {
  151. this.setState({
  152. loading: false,
  153. });
  154. }.bind(this)
  155. );
  156. },
  157. getInitialState() {
  158. return {
  159. showDesc: false,
  160. newStatus: 1,
  161. page: 1,
  162. releaseDate: [],
  163. selectedRowKeys: [],
  164. orgCodeUrl: [],
  165. paginations: false,
  166. pagination: {
  167. defaultCurrent: 1,
  168. defaultPageSize: 10,
  169. showQuickJumper: true,
  170. pageSize: 10,
  171. onChange: function (page) {
  172. this.loadData(page);
  173. }.bind(this),
  174. showTotal: function (total) {
  175. return "共" + total + "条数据";
  176. },
  177. },
  178. columns: [
  179. {
  180. title: "合同编号",
  181. dataIndex: "contractNo",
  182. key: "contractNo",
  183. render: (text, record) => {
  184. return (
  185. <Tooltip
  186. title={
  187. <Button
  188. type="primary"
  189. onClick={(e) => {
  190. e.stopPropagation();
  191. let input = document.getElementById("copyText");
  192. input.value = text;
  193. input.select();
  194. document.execCommand("copy");
  195. message.success("复制成功");
  196. }}
  197. >
  198. 复制
  199. </Button>
  200. }
  201. >
  202. <div>
  203. {text}
  204. <div style={{ display: "flex" }}>
  205. {/* <OrderItemStatus deleteSign={record.deleteSign} /> */}
  206. {
  207. record.approval == 1
  208. ? <Tag color="#faa755">特批待审</Tag> :
  209. record.approval == 2 && <Tag color="#ff0000">特批通过</Tag>
  210. }
  211. </div>
  212. </div>
  213. </Tooltip>
  214. );
  215. },
  216. },
  217. {
  218. title: "订单编号",
  219. dataIndex: "orderNo",
  220. key: "orderNo",
  221. render: (text, record) => {
  222. return (
  223. <Tooltip
  224. title={
  225. <Button
  226. type="primary"
  227. onClick={(e) => {
  228. e.stopPropagation();
  229. let input = document.getElementById("copyText");
  230. input.value = text;
  231. input.select();
  232. document.execCommand("copy");
  233. message.success("复制成功");
  234. }}
  235. >
  236. 复制
  237. </Button>
  238. }
  239. >
  240. <div>
  241. {text}
  242. <div>
  243. {record.totalAmount >= 10 && <Tag color="#ef7207">大客户</Tag>}
  244. {record.memberType == 1 && <Tag color="rgb(22, 155, 213)">会员</Tag>}
  245. </div>
  246. </div>
  247. </Tooltip>
  248. );
  249. },
  250. },
  251. {
  252. title: "客户名称",
  253. dataIndex: "userName",
  254. key: "userName",
  255. width: 150,
  256. render: (text) => {
  257. return (
  258. <Tooltip title={text}>
  259. <div
  260. style={{
  261. maxWidth: "150px",
  262. overflow: "hidden",
  263. textOverflow: "ellipsis",
  264. whiteSpace: "nowrap",
  265. }}
  266. >
  267. {text}
  268. </div>
  269. </Tooltip>
  270. );
  271. },
  272. },
  273. {
  274. title: "订单负责人",
  275. dataIndex: "salesmanName",
  276. key: "salesmanName",
  277. },
  278. {
  279. title: "订单部门",
  280. dataIndex: "depName",
  281. key: "depName",
  282. },
  283. {
  284. title: "订单状态",
  285. dataIndex: "orderStatus",
  286. key: "orderStatus",
  287. render: (text) => {
  288. return getNewOrderStatus(text);
  289. },
  290. },
  291. {
  292. title: "项目名称",
  293. dataIndex: "commodityName",
  294. key: "commodityName",
  295. },
  296. {
  297. title: "项目状态",
  298. dataIndex: "projectStatus",
  299. key: "projectStatus",
  300. render: (text) => {
  301. return getProjectName(text);
  302. },
  303. },
  304. {
  305. title: "签单金额(万元)",
  306. dataIndex: "totalAmount",
  307. key: "totalAmount",
  308. },
  309. {
  310. title: "已收款(万元)",
  311. dataIndex: "settlementAmount",
  312. key: "settlementAmount",
  313. },
  314. {
  315. title: "未收款(万元)",
  316. dataIndex: "uncollectedAmount",
  317. key: "uncollectedAmount",
  318. },
  319. {
  320. title: "拨款比例",
  321. dataIndex: "appropriationRatio",
  322. key: "appropriationRatio",
  323. },
  324. {
  325. title: "结算状态",
  326. dataIndex: "liquidationStatus",
  327. key: "liquidationStatus",
  328. render: (text) => {
  329. return getLiquidationStatus(text);
  330. },
  331. },
  332. {
  333. title: "催收科目",
  334. dataIndex: "dunSubject",
  335. key: "dunSubject",
  336. // render: text => {
  337. // return getjiedian(text);
  338. // }
  339. },
  340. {
  341. title: "应收款(万元)",
  342. dataIndex: "accountsReceivable",
  343. key: "accountsReceivable",
  344. },
  345. {
  346. title: "催款状态",
  347. dataIndex: "dunStatus",
  348. key: "dunStatus",
  349. },
  350. {
  351. title: "催款启动日期",
  352. dataIndex: "startDate",
  353. key: "startDate",
  354. },
  355. {
  356. title: "签单时间",
  357. dataIndex: "signDate",
  358. key: "signDate",
  359. },
  360. {
  361. title: "催收操作",
  362. dataIndex: "abc",
  363. key: "abc",
  364. render: (text, record) => {
  365. return (
  366. <div>
  367. <Button
  368. onClick={(e) => {
  369. e.stopPropagation(),
  370. this.visit(record);
  371. }}
  372. type="primary"
  373. >
  374. 添加催款记录
  375. </Button>
  376. <Button
  377. style={{ marginLeft: 5 }}
  378. onClick={(e) => {
  379. e.stopPropagation(),
  380. this.setState({
  381. visibles: true,
  382. });
  383. }}
  384. type="primary"
  385. >
  386. 查看催款记录
  387. </Button>
  388. </div>
  389. );
  390. },
  391. },
  392. ],
  393. data: [],
  394. dataSource: [],
  395. columnsX: [
  396. {
  397. title: "催款人",
  398. dataIndex: "dumBy",
  399. key: "dumBy",
  400. },
  401. {
  402. title: "催款时间",
  403. dataIndex: "dumTime",
  404. key: "dumTime",
  405. },
  406. {
  407. title: "催款情况",
  408. dataIndex: "remarks",
  409. key: "remarks",
  410. },
  411. ],
  412. dataSources: [],
  413. };
  414. },
  415. //页面加载函数
  416. componentWillMount() {
  417. this.loadData();
  418. },
  419. //进入新增拜访记录
  420. visit(record) {
  421. this.setState({
  422. visible: true,
  423. dunId: record.id,
  424. });
  425. },
  426. // 整行点击
  427. tableRowClick(record) {
  428. this.state.RowData = record;
  429. this.setState({
  430. showDesc: true,
  431. });
  432. },
  433. //新增催款记录
  434. examOk() {
  435. $.ajax({
  436. method: "post",
  437. dataType: "json",
  438. crossDomain: false,
  439. url: globalConfig.context + "/api/admin/newOrder/createDunLog",
  440. data: {
  441. dunId: this.state.dunId,
  442. dumTime: this.state.dumTime,
  443. remarks: this.state.remarks,
  444. },
  445. success: function (data) {
  446. if (data.error.length || data.data.list == "") {
  447. if (data.error && data.error.length) {
  448. message.warning(data.error[0].message);
  449. }
  450. } else {
  451. message.success("新增催款记录成功~");
  452. this.setState({
  453. visible: false,
  454. });
  455. this.loadData();
  456. this.resets();
  457. }
  458. }.bind(this),
  459. }).always(
  460. function () {
  461. this.setState({
  462. loading: false,
  463. });
  464. }.bind(this)
  465. );
  466. },
  467. //关闭输入理由框
  468. noCancel() {
  469. this.setState({
  470. noVisible: false,
  471. });
  472. },
  473. //搜索
  474. search() {
  475. this.setState({
  476. //signBillVisible:false
  477. });
  478. this.loadData();
  479. },
  480. //重置
  481. reset() {
  482. this.setState({
  483. signBillVisible: false,
  484. });
  485. this.state.orderNo = "";
  486. this.state.contractNo = "";
  487. this.state.customerName = "";
  488. this.state.adminName = "";
  489. this.state.departmenttSearch = undefined;
  490. this.state.releaseDate[0] = undefined;
  491. this.state.releaseDate[1] = undefined;
  492. this.state.amountStatus = undefined;
  493. this.state.approval = undefined;
  494. this.state.memberType = undefined;
  495. this.loadData();
  496. },
  497. resets() {
  498. this.state.orderNo = "";
  499. this.state.contractNo = "";
  500. this.state.customerName = "";
  501. this.state.adminName = "";
  502. this.state.departmenttSearch = undefined;
  503. this.state.releaseDate[0] = undefined;
  504. this.state.releaseDate[1] = undefined;
  505. this.state.amountStatus = undefined;
  506. this.state.approval = undefined;
  507. this.state.memberType = undefined;
  508. },
  509. getOrgCodeUrl(e) {
  510. this.setState({ orgCodeUrl: e });
  511. },
  512. //关闭详情
  513. visitCancel() {
  514. this.setState({
  515. visible: false,
  516. });
  517. this.resets();
  518. },
  519. visitOk() {
  520. this.setState({
  521. visible: false,
  522. });
  523. this.resets();
  524. },
  525. //关闭详情
  526. visitCancels() {
  527. this.setState({
  528. visibles: false,
  529. });
  530. this.resets();
  531. },
  532. // 关闭订单详情
  533. closeDesc(e, s) {
  534. this.state.showDesc = e;
  535. if (s) {
  536. this.loadData(this.state.page);
  537. }
  538. },
  539. //导出
  540. exportExec() {
  541. message.config({
  542. duration: 20,
  543. });
  544. let loading = message.loading("下载中...");
  545. this.setState({
  546. exportPendingLoading: true,
  547. });
  548. let data = {
  549. name: this.state.customerName ? this.state.customerName : undefined, //客户名称
  550. adminName: this.state.adminName ? this.state.adminName : undefined, //订单负责人
  551. orderNo: this.state.orderNo ? this.state.orderNo : undefined, //订单编号
  552. contractNo: this.state.contractNo ? this.state.contractNo : undefined,
  553. starTime: this.state.releaseDate[0]
  554. ? this.state.releaseDate[0]
  555. : undefined,
  556. endTime: this.state.releaseDate[1]
  557. ? this.state.releaseDate[1]
  558. : undefined,
  559. depId: this.state.departmenttSearch
  560. ? this.state.departmenttSearch
  561. : undefined, //订单部门
  562. pageSize: 9999999,
  563. newStatus: this.state.newStatus,
  564. };
  565. $.ajax({
  566. method: "get",
  567. dataType: "json",
  568. crossDomain: false,
  569. url: "/api/admin/newOrder/exportOrderDunData",
  570. data,
  571. success: function (data) {
  572. if (data.error.length === 0) {
  573. this.download(data.data);
  574. } else {
  575. message.warning(data.error[0].message);
  576. }
  577. }.bind(this),
  578. }).always(
  579. function () {
  580. loading();
  581. this.setState({
  582. exportPendingLoading: false,
  583. });
  584. }.bind(this)
  585. );
  586. },
  587. // 下载
  588. download(fileName) {
  589. window.location.href =
  590. globalConfig.context + "/open/download?fileName=" + fileName;
  591. },
  592. visitOks() {
  593. this.setState({
  594. visibles: false,
  595. });
  596. this.resets();
  597. },
  598. changeList(arr) {
  599. const newArr = [];
  600. this.state.columns.forEach((item) => {
  601. arr.forEach((val) => {
  602. if (val === item.title) {
  603. newArr.push(item);
  604. }
  605. });
  606. });
  607. this.setState({
  608. changeList: newArr,
  609. });
  610. },
  611. render() {
  612. const formItemLayout = {
  613. labelCol: { span: 8 },
  614. wrapperCol: { span: 14 },
  615. };
  616. const FormItem = Form.Item;
  617. const { RangePicker } = DatePicker;
  618. const rowSelection = {
  619. selectedRowKeys: this.state.selectedRowKeys,
  620. onChange: (selectedRowKeys, selectedRows) => {
  621. this.setState({
  622. modalVisible: false,
  623. selectedRows: selectedRows.slice(-1),
  624. selectedRowKeys: selectedRowKeys.slice(-1),
  625. });
  626. },
  627. onSelect: (recordt) => {
  628. this.setState({
  629. modalVisible: false,
  630. recordt: recordt.id,
  631. });
  632. },
  633. };
  634. const { TabPane } = Tabs;
  635. return (
  636. <div className="user-content">
  637. <div className="content-title" style={{ marginBottom: 10 }}>
  638. <span style={{ fontWeight: 900, fontSize: 16 }}>催款节点统计</span>
  639. </div>
  640. <div className="user-search">
  641. <Tabs
  642. defaultActiveKey="1"
  643. onChange={this.callback}
  644. className="test"
  645. >
  646. <TabPane tab="导出催款列表" key="2">
  647. <Button
  648. type="primary"
  649. onClick={this.exportExec}
  650. style={{
  651. float: "left",
  652. marginTop: 10,
  653. marginBottom: 10,
  654. marginLeft: 10,
  655. marginRight: 10,
  656. }}
  657. >
  658. 导出催款列表
  659. </Button>
  660. </TabPane>
  661. <TabPane tab="搜索" key="1">
  662. <Input
  663. placeholder="客户名称"
  664. style={{
  665. width: 170,
  666. marginBottom: "10px",
  667. marginRight: 10,
  668. marginLeft: 10,
  669. }}
  670. value={this.state.customerName}
  671. onChange={(e) => {
  672. this.setState({ customerName: e.target.value });
  673. }}
  674. />
  675. <Input
  676. placeholder="营销员名称"
  677. style={{
  678. width: 170,
  679. marginBottom: "10px",
  680. marginRight: 10,
  681. }}
  682. value={this.state.adminName}
  683. onChange={(e) => {
  684. this.setState({ adminName: e.target.value });
  685. }}
  686. />
  687. <Input
  688. placeholder="订单编号"
  689. style={{
  690. width: 170,
  691. marginBottom: "10px",
  692. marginRight: 10,
  693. }}
  694. value={this.state.orderNo}
  695. onChange={(e) => {
  696. this.setState({ orderNo: e.target.value });
  697. }}
  698. />
  699. <Input
  700. placeholder="合同编号"
  701. style={{
  702. width: 170,
  703. marginBottom: "10px",
  704. marginRight: 10,
  705. }}
  706. value={this.state.contractNo}
  707. onChange={(e) => {
  708. this.setState({ contractNo: e.target.value });
  709. }}
  710. />
  711. <DepartmentList
  712. value={this.state.departmenttSearch}
  713. onChange={(e) => {
  714. this.setState({ departmenttSearch: e });
  715. }}
  716. />
  717. <Select
  718. placeholder="选择催款节点类型"
  719. style={{ width: 170, marginRight: "10px" }}
  720. value={
  721. this.state.newStatus == 0 ? "旧催款节点" : "新催款节点"
  722. }
  723. onChange={(e) => {
  724. this.setState({ newStatus: e });
  725. }}
  726. >
  727. <Select.Option key={0}>{"旧催款节点"}</Select.Option>
  728. <Select.Option key={1}>{"新催款节点"}</Select.Option>
  729. </Select>
  730. <Select
  731. style={{ width: 170 }}
  732. placeholder="签单金额"
  733. value={this.state.amountStatus}
  734. onChange={(e) => {
  735. this.setState({
  736. amountStatus: e,
  737. });
  738. }}
  739. >
  740. <Option value="0">10万元以下</Option>
  741. <Option value="1">10~20万元</Option>
  742. <Option value="2">20~30万元</Option>
  743. <Option value="3">30~40万元</Option>
  744. <Option value="4">40万元以上</Option>
  745. </Select>
  746. <Select
  747. style={{ width: 170, marginRight: 60 }}
  748. placeholder="特批状态"
  749. value={this.state.approval}
  750. onChange={(e) => {
  751. this.setState({
  752. approval: e,
  753. });
  754. }}
  755. >
  756. <Option value="0">非特批</Option>
  757. <Option value="1">特批待审</Option>
  758. <Option value="2">特批通过</Option>
  759. <Option value="4">全部特批</Option>
  760. </Select>
  761. <Select
  762. style={{ width: 170, }}
  763. placeholder="会员"
  764. value={this.state.memberType}
  765. onChange={(e) => {
  766. this.setState({
  767. memberType: e,
  768. });
  769. }}
  770. >
  771. <Option value="0">否</Option>
  772. <Option value="1">是</Option>
  773. </Select>
  774. <span style={{ marginRight: 10, marginLeft: 10 }}>下单时间 :</span>
  775. <RangePicker
  776. value={[
  777. this.state.releaseDate[0]
  778. ? moment(this.state.releaseDate[0])
  779. : null,
  780. this.state.releaseDate[1]
  781. ? moment(this.state.releaseDate[1])
  782. : null,
  783. ]}
  784. onChange={(data, dataString) => {
  785. this.setState({ releaseDate: dataString });
  786. }}
  787. />
  788. <Button
  789. type="primary"
  790. onClick={this.search}
  791. style={{ marginLeft: "10px", marginRight: 10 }}
  792. >
  793. 搜索
  794. </Button>
  795. <Button onClick={this.reset}>重置</Button>
  796. </TabPane>
  797. <TabPane tab="更改表格显示数据" key="3">
  798. <div style={{ marginLeft: 10 }}>
  799. <ChooseList
  800. columns={this.state.columns}
  801. changeFn={this.changeList}
  802. changeList={this.state.changeList}
  803. top={55}
  804. margin={11}
  805. />
  806. </div>
  807. </TabPane>
  808. </Tabs>
  809. </div>
  810. <div className="patent-table">
  811. <Spin spinning={this.state.loading}>
  812. <Table
  813. columns={
  814. this.state.changeList
  815. ? this.state.changeList
  816. : this.state.columns
  817. }
  818. dataSource={this.state.dataSource}
  819. pagination={this.state.pagination}
  820. scroll={{ x: "max-content", y: 0 }}
  821. onRowClick={this.tableRowClick}
  822. bordered
  823. size="small"
  824. />
  825. </Spin>
  826. <Modal
  827. maskClosable={false}
  828. className="customeDetails"
  829. footer=""
  830. title="新增催款记录"
  831. width="500px"
  832. visible={this.state.visible}
  833. onOk={this.visitOk}
  834. onCancel={this.visitCancel}
  835. >
  836. <Form
  837. layout="horizontal"
  838. onSubmit={this.handleSubmit}
  839. id="demand-form"
  840. style={{ paddingBottom: "40px" }}
  841. >
  842. <Spin spinning={this.state.loading}>
  843. <div className="clearfix">
  844. <div className="clearfix">
  845. <FormItem
  846. className="half-item"
  847. {...formItemLayout}
  848. label="催款时间"
  849. >
  850. <DatePicker
  851. style={{
  852. marginTop: "2px",
  853. width: "240px",
  854. height: "27px",
  855. }}
  856. showTime
  857. format="YYYY-MM-DD"
  858. onOk={() => { }}
  859. value={
  860. this.state.dumTime
  861. ? moment(this.state.dumTime)
  862. : null
  863. }
  864. onChange={(data, dataString) => {
  865. this.setState({ dumTime: dataString });
  866. }}
  867. />
  868. </FormItem>
  869. </div>
  870. <div className="clearfix">
  871. <FormItem
  872. labelCol={{ span: 4 }}
  873. wrapperCol={{ span: 16 }}
  874. label="催款情况"
  875. >
  876. <Input
  877. type="textarea"
  878. placeholder="请输入催款情况"
  879. rows={4}
  880. value={this.state.remarks}
  881. onChange={(e) => {
  882. this.setState({ remarks: e.target.value });
  883. }}
  884. />
  885. </FormItem>
  886. </div>
  887. <div className="clearfix">
  888. <Button
  889. className="cancel"
  890. type="primary"
  891. onClick={this.examOk}
  892. style={{ marginLeft: "50px" }}
  893. htmlType="submit"
  894. >
  895. 添加
  896. </Button>
  897. <Button
  898. className="cancel"
  899. type="ghost"
  900. onClick={this.visitCancel}
  901. style={{ marginLeft: "50px" }}
  902. >
  903. 取消
  904. </Button>
  905. </div>
  906. </div>
  907. </Spin>
  908. </Form>
  909. </Modal>
  910. <Modal
  911. maskClosable={false}
  912. className="customeDetails"
  913. footer=""
  914. title="催款记录查看"
  915. width="500px"
  916. visible={this.state.visibles}
  917. onOk={this.visitOks}
  918. onCancel={this.visitCancels}
  919. >
  920. <div className="user-content">
  921. <div className="patent-table">
  922. <Spin spinning={this.state.loading}>
  923. <Table
  924. columns={this.state.columnsX}
  925. dataSource={this.state.dataSources}
  926. rowSelection={rowSelection}
  927. pagination={this.state.paginations}
  928. />
  929. </Spin>
  930. </div>
  931. </div>
  932. </Modal>
  933. </div>
  934. {
  935. // 订单详情
  936. this.state.showDesc &&
  937. <OrderDesc
  938. data={this.state.RowData}
  939. showDesc={this.state.showDesc}
  940. closeDesc={this.closeDesc.bind(this)}
  941. />
  942. }
  943. </div>
  944. );
  945. },
  946. })
  947. );
  948. export default IntentionCustomer;