pressList.jsx 30 KB

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