pressList.jsx 30 KB

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