followUpDetails.jsx 38 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846
  1. import React,{Component} from "react";
  2. import {Button, Col, Form, message, Modal, Spin, Table, Tabs, Tag} from "antd";
  3. import {
  4. getApprovedState,
  5. getCuikuan,
  6. getjiedian,
  7. getLiquidationStatus,
  8. getProcessStatus,
  9. splitUrl
  10. } from "../../../tools";
  11. import ImgList from "../../../common/imgList";
  12. import $ from "jquery/src/ajax";
  13. import OrderRiZi from "@/orderRiZi.jsx";
  14. import ProjectDetailsReadOnly from "../../../common/projectDetailsReadOnly";
  15. import CustomerServiceRecord from './customerServiceRecord';
  16. const FormItem = Form.Item;
  17. const { TabPane } = Tabs;
  18. const formItemLayout = {
  19. labelCol: { span: 8 },
  20. wrapperCol: { span: 14 },
  21. };
  22. class FollowUpDetails extends Component{
  23. constructor(props) {
  24. super(props);
  25. this.state={
  26. loading:false,
  27. columnsX: [
  28. {
  29. title: "业务项目名称",
  30. dataIndex: "commodityName",
  31. key: "commodityName",
  32. render: (text, record) => {
  33. return text + "-" + record.id
  34. }
  35. },
  36. {
  37. title: "项目类别",
  38. dataIndex: "cname",
  39. key: "cname",
  40. },
  41. {
  42. title: "项目数量",
  43. dataIndex: "commodityQuantity",
  44. key: "commodityQuantity",
  45. render: (text, record) => {
  46. if (record.splitStatus == 1) {
  47. return (
  48. <span>
  49. {text}{" "}
  50. <Tag
  51. color="#108ee9"
  52. onClick={(e) => {
  53. e.stopPropagation();
  54. this.showRes(record);
  55. }}
  56. >
  57. 已拆
  58. </Tag>
  59. </span>
  60. );
  61. } else {
  62. return text;
  63. }
  64. },
  65. },
  66. {
  67. title: "金额(万元)",
  68. dataIndex: "commodityPrice",
  69. key: "commodityPrice",
  70. },
  71. {
  72. title: "负责人",
  73. dataIndex: "contacts",
  74. key: "contacts",
  75. },
  76. {
  77. title: "负责人电话",
  78. dataIndex: "contactsMobile",
  79. key: "contactsMobile",
  80. },
  81. {
  82. title: "主要项目",
  83. dataIndex: "main",
  84. key: "main",
  85. render: (text) => {
  86. return text ? "是" : "否";
  87. },
  88. },
  89. {
  90. title: "项目说明",
  91. dataIndex: "taskComment",
  92. key: "taskComment",
  93. render: (text) => {
  94. return text && text.length > 8 ? text.substr(0, 8) + "…" : text;
  95. },
  96. },
  97. ],
  98. dataSourceX:[],
  99. contactList:[],
  100. ContactsListsNew: [
  101. {
  102. title: "项目名称",
  103. dataIndex: "commodityName",
  104. key: "commodityName",
  105. render: (text, record) => {
  106. return <span>{text + "-" + record.tid}</span>;
  107. },
  108. },
  109. {
  110. title: "项目分类",
  111. dataIndex: "projectType",
  112. key: "projectType",
  113. render: (text) => {
  114. let arr = this.state.dataSourceX || [];
  115. let str = "";
  116. for (let i = 0; i < arr.length; i++) {
  117. if (this.state.dataSourceX[i].sort == text) {
  118. str = this.state.dataSourceX[i].cname;
  119. return <span>{str}</span>;
  120. }
  121. }
  122. },
  123. },
  124. {
  125. title: "催款科目",
  126. dataIndex: "dunTypeName",
  127. key: "dunTypeName",
  128. render: (text, record) => {
  129. if (record.customizeName) {
  130. return text + record.customizeName;
  131. }
  132. return <span>{text}</span>;
  133. },
  134. },
  135. {
  136. title: "时间(天)",
  137. dataIndex: "waitDay",
  138. key: "waitDay",
  139. render: (text, record) => {
  140. if (record.dunTypeName) {
  141. if (record.customizeTimes) {
  142. return record.customizeTimes;
  143. }
  144. return <span>{text}</span>;
  145. }
  146. },
  147. },
  148. {
  149. title: "金额(万元)",
  150. dataIndex: "money",
  151. key: "money",
  152. render: (text, record) => {
  153. if (record.dunTypeName) {
  154. if (record.appropriationRatio && !record.money) {
  155. return <span>{record.appropriationRatio}(拨款比例)</span>;
  156. } else if (record.appropriationRatio && record.money) {
  157. return (
  158. <span>
  159. {text}(比例:{record.appropriationRatio})
  160. </span>
  161. );
  162. } else {
  163. return <span>{text}</span>;
  164. }
  165. }
  166. },
  167. },
  168. {
  169. title: "服务年限",
  170. dataIndex: "startDate",
  171. key: "startDate",
  172. render: (text, record) => {
  173. if (record.dunTypeName) {
  174. return <span>{text}</span>;
  175. }
  176. },
  177. },
  178. {
  179. title: "催款状态",
  180. dataIndex: "status",
  181. key: "status",
  182. render: (text) => {
  183. return <span>{text == 1 ? "已启动" : "未启动"}</span>;
  184. },
  185. },
  186. ],
  187. ContactsLists: [
  188. {
  189. title: "催款科目",
  190. dataIndex: "dunSubject",
  191. key: "dunSubject",
  192. render: (text) => {
  193. return getjiedian(text);
  194. },
  195. },
  196. {
  197. title: "金额(万元)",
  198. dataIndex: "money",
  199. key: "money",
  200. },
  201. {
  202. title: "催款状态",
  203. dataIndex: "dunStatus",
  204. key: "dunStatus",
  205. render: (text) => {
  206. return getCuikuan(text);
  207. },
  208. },
  209. ],
  210. tabsKey:'1',
  211. dataSourcerizhi:[],
  212. }
  213. this.jiedian =this.jiedian.bind(this);
  214. this.jiedianNew =this.jiedianNew.bind(this);
  215. this.xiangqing =this.xiangqing.bind(this);
  216. this.rizhi =this.rizhi.bind(this);
  217. this.closeOrderLog =this.closeOrderLog.bind(this);
  218. this.tableRowClickX =this.tableRowClickX.bind(this);
  219. this.nextCancel =this.nextCancel.bind(this);
  220. this.rizhi =this.rizhi.bind(this);
  221. this.getOrderLog =this.getOrderLog.bind(this);
  222. this.xiangmu =this.xiangmu.bind(this);
  223. }
  224. componentDidMount() {
  225. this.xiangqing();
  226. this.jiedian();
  227. this.jiedianNew();
  228. this.xiangmu();
  229. }
  230. getOrderLog() {
  231. this.setState({
  232. rizhivisible: true,
  233. });
  234. this.rizhi();
  235. }
  236. closeOrderLog() {
  237. this.setState({
  238. rizhivisible: false,
  239. dataSourcerizhi:[],
  240. });
  241. }
  242. tableRowClickX(record) {
  243. this.setState({
  244. addnextVisible: true,
  245. dataInfor:record,
  246. });
  247. }
  248. nextCancel() {
  249. this.setState({
  250. addnextVisible: false,
  251. dataInfor:{}
  252. });
  253. }
  254. rizhi() {
  255. this.setState({
  256. selectOrderLogLoading: true,
  257. });
  258. $.ajax({
  259. method: "get",
  260. dataType: "json",
  261. crossDomain: false,
  262. url: "/api/admin/newOrder/selectOrderLog",
  263. data: {
  264. orderNo: this.props.orderNo,
  265. },
  266. success: function (data) {
  267. let theArr = [];
  268. let thisData = data.data;
  269. if (!thisData.length) {
  270. if (data.error && data.error.length) {
  271. message.warning(data.error[0].message);
  272. }
  273. } else {
  274. for (let i = 0; i < data.data.length; i++) {
  275. let thisdata = data.data[i];
  276. theArr.push({
  277. processName: thisdata.processName,
  278. adminName: thisdata.adminName,
  279. createDate: thisdata.createDate,
  280. remarks: thisdata.remarks,
  281. });
  282. }
  283. }
  284. this.setState({
  285. dataSourcerizhi: theArr,
  286. });
  287. }.bind(this),
  288. }).always(
  289. function () {
  290. this.setState({
  291. selectOrderLogLoading: false,
  292. });
  293. }.bind(this)
  294. );
  295. }
  296. jiedian() {
  297. $.ajax({
  298. method: "get",
  299. dataType: "json",
  300. crossDomain: false,
  301. url: globalConfig.context + "/api/admin/newOrder/selectOrderDun",
  302. data: {
  303. orderNo: this.props.orderNo,
  304. },
  305. success: function (data) {
  306. let theArr = [];
  307. let thisData = [];
  308. if (data.error.length || data.data.list == "") {
  309. if (data.error && data.error.length) {
  310. message.warning(data.error[0].message);
  311. }
  312. } else {
  313. for (let i = 0; i < data.data.length; i++) {
  314. thisData = data.data[i];
  315. theArr.push({
  316. key: i,
  317. dunSubject: thisData.dunSubject
  318. ? thisData.dunSubject.toString()
  319. : "", //催款科目
  320. id: thisData.id, //节点Id
  321. money: thisData.money, //催款金额
  322. dunStatus: thisData.dunStatus, //催款状态
  323. });
  324. }
  325. this.setState({
  326. contactList: theArr,
  327. });
  328. }
  329. }.bind(this),
  330. }).always(
  331. function () {
  332. }.bind(this)
  333. );
  334. }
  335. //查看催款节点
  336. jiedianNew() {
  337. this.setState({
  338. newOrderDunLoading: true,
  339. });
  340. $.ajax({
  341. method: "get",
  342. dataType: "json",
  343. crossDomain: false,
  344. url:
  345. globalConfig.context + "/api/admin/newOrderDun/selectListNewOrderDun",
  346. data: {
  347. orderNo: this.props.orderNo,
  348. },
  349. success: function (data) {
  350. if (data.error && data.error.length) {
  351. message.warning(data.error[0].message);
  352. } else {
  353. let theArr = [];
  354. let thisData = [];
  355. let arr = data.data || [];
  356. let totalCui = 0;
  357. for (let i = 0; i < arr.length; i++) {
  358. thisData = arr[i];
  359. totalCui += +thisData.money;
  360. theArr.push({
  361. key: i,
  362. dunSubject: thisData.dunSubject
  363. ? thisData.dunSubject.toString()
  364. : "", //催款科目
  365. id: thisData.id, //节点Id
  366. money: thisData.money, //催款金额
  367. commodityName: thisData.commodityName,
  368. projectType: thisData.projectType,
  369. dunTypeName: thisData.dunTypeName,
  370. status: thisData.status,
  371. waitDay: thisData.waitDay,
  372. effectiveCount: thisData.effectiveCount,
  373. startDate: thisData.startDate,
  374. dunType: thisData.dunType,
  375. appropriationRatio: thisData.appropriationRatio,
  376. customizeName: thisData.customizeName,
  377. customizeTimes: thisData.customizeTimes,
  378. tid: thisData.tid,
  379. });
  380. }
  381. if (!totalCui) {
  382. totalCui = 0;
  383. }
  384. totalCui = (Math.round(totalCui * 1000000) / 1000000).toFixed(6);
  385. this.setState({
  386. contactListNew: theArr,
  387. totalCui,
  388. });
  389. }
  390. }.bind(this),
  391. }).always(
  392. function () {
  393. this.setState({
  394. newOrderDunLoading: false,
  395. });
  396. }.bind(this)
  397. );
  398. }
  399. xiangqing() {
  400. this.setState({
  401. loading: true,
  402. });
  403. $.ajax({
  404. method: "get",
  405. dataType: "json",
  406. crossDomain: false,
  407. url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail",
  408. data: {
  409. orderNo: this.props.orderNo,
  410. },
  411. success: function (data) {
  412. if (data.error.length || data.data.list == "") {
  413. if (data.error && data.error.length) {
  414. message.warning(data.error[0].message);
  415. }
  416. } else {
  417. let thisdata = data.data;
  418. this.setState({
  419. orderNo: thisdata.orderNo, //订单编号
  420. contractNo: thisdata.contractNo, //合同编号
  421. userName: thisdata.userName, //客户名称
  422. signDate: thisdata.signDate, //签单时间
  423. processStatus: thisdata.processStatus, //流程状态
  424. liquidationStatus: thisdata.liquidationStatus, //结算状态
  425. contacts: thisdata.contacts, //企业联系人
  426. contactMobile: thisdata.contactMobile, //联系人电话
  427. legalPerson: thisdata.legalPerson, //法人
  428. legalPersonTel: thisdata.legalPersonTel, //法人电话
  429. firstAmount: thisdata.firstAmount, //签单金额
  430. totalAmount: thisdata.totalAmount, //首付金额
  431. approval: thisdata.approval, //特批状态
  432. settlementAmount: thisdata.settlementAmount, //已收款项
  433. orderRemarks: thisdata.orderRemarks, //订单留言
  434. orgCodeUrl: thisdata.contractPictureUrl
  435. ? splitUrl(
  436. thisdata.contractPictureUrl,
  437. ",",
  438. globalConfig.avatarHost + "/upload"
  439. )
  440. : [], //图片地址
  441. replenishUrl: thisdata.agreementUrl
  442. ? splitUrl(
  443. thisdata.agreementUrl,
  444. ",",
  445. globalConfig.avatarHost + "/upload"
  446. )
  447. : [], //图片地址
  448. salesmanName: thisdata.salesmanName, //营销员名称
  449. salesmanMobile: thisdata.salesmanMobile, //营销员电话
  450. oldSalesmanName: thisdata.oldSalesmanName, //营销员名称
  451. oldSalesmanMobile: thisdata.oldSalesmanMobile, //营销员电话
  452. financeName: thisdata.financeName, //财务名称
  453. financeMobile: thisdata.financeMobile, //财务电话
  454. nowFinance: thisdata.nowFinance, //财务名称
  455. nowFinanceMobile: thisdata.nowFinanceMobile, //财务电话
  456. depName: thisdata.depName,
  457. outsource: thisdata.outsource == 0 ? "否" : "是",
  458. });
  459. }
  460. }.bind(this),
  461. }).always(
  462. function () {
  463. this.setState({
  464. loading: false,
  465. });
  466. }.bind(this)
  467. );
  468. }
  469. xiangmu() {
  470. this.setState({
  471. orderTaskLoading:true
  472. })
  473. $.ajax({
  474. method: "get",
  475. dataType: "json",
  476. crossDomain: false,
  477. url: globalConfig.context + "/api/admin/newOrder/getOrderTask",
  478. data: {
  479. orderNo: this.props.orderNo,
  480. },
  481. success: function (data) {
  482. let theArr = [];
  483. if (data.error.length || data.data.list == "") {
  484. if (data.error && data.error.length) {
  485. message.warning(data.error[0].message);
  486. }
  487. } else {
  488. for (let i = 0; i < data.data.length; i++) {
  489. let thisdata = data.data[i];
  490. thisdata.key = i;
  491. theArr.push(thisdata);
  492. }
  493. this.setState({
  494. dataSourceX: theArr,
  495. });
  496. }
  497. }.bind(this),
  498. }).always(
  499. function () {
  500. this.setState({
  501. orderTaskLoading: false,
  502. });
  503. }.bind(this)
  504. );
  505. }
  506. render() {
  507. return (
  508. <Modal
  509. className="customeDetails"
  510. footer=""
  511. title={null}
  512. width="1200px"
  513. maskClosable={false}
  514. visible={this.props.visible}
  515. onOk={this.props.onCancel}
  516. onCancel={this.props.onCancel}
  517. >
  518. <div>
  519. <Tabs defaultActiveKey="1" className="test" activeKey={this.state.tabsKey} onChange={(e)=>{this.setState({tabsKey:e})}}>
  520. <TabPane tab="订单详情" key="1">
  521. <Form
  522. layout="horizontal"
  523. id="demand-form"
  524. style={{ paddingBottom: "40px" }}
  525. >
  526. <Spin spinning={this.state.loading}>
  527. <div className="clearfix">
  528. <FormItem
  529. className="half-item"
  530. {...formItemLayout}
  531. label="订单编号"
  532. >
  533. <span>{this.state.orderNo}</span>
  534. </FormItem>
  535. <FormItem
  536. className="half-item"
  537. {...formItemLayout}
  538. label="合同编号"
  539. >
  540. <span>{this.state.contractNo}</span>
  541. </FormItem>
  542. <FormItem
  543. className="half-item"
  544. {...formItemLayout}
  545. label="客户名称"
  546. >
  547. <span>{this.state.userName}</span>
  548. </FormItem>
  549. <FormItem
  550. className="half-item"
  551. {...formItemLayout}
  552. label="下单时间"
  553. >
  554. <span>{this.state.signDate}</span>
  555. </FormItem>
  556. <FormItem
  557. className="half-item"
  558. {...formItemLayout}
  559. label="流程状态"
  560. >
  561. <span>{getProcessStatus(this.state.processStatus)}</span>
  562. </FormItem>
  563. <FormItem
  564. className="half-item"
  565. {...formItemLayout}
  566. label="结算状态"
  567. >
  568. <span>
  569. {getLiquidationStatus(this.state.liquidationStatus)}
  570. </span>
  571. </FormItem>
  572. <FormItem
  573. className="half-item"
  574. {...formItemLayout}
  575. label="企业联系人"
  576. >
  577. <span>{this.state.contacts}</span>
  578. </FormItem>
  579. <FormItem
  580. className="half-item"
  581. {...formItemLayout}
  582. label="联系人电话"
  583. >
  584. <span>{this.state.contactMobile}</span>
  585. </FormItem>
  586. <FormItem
  587. className="half-item"
  588. {...formItemLayout}
  589. label="企业法人"
  590. >
  591. <span>{this.state.legalPerson}</span>
  592. </FormItem>
  593. <FormItem
  594. className="half-item"
  595. {...formItemLayout}
  596. label="法人电话"
  597. >
  598. <span>{this.state.legalPersonTel}</span>
  599. </FormItem>
  600. <FormItem
  601. className="half-item"
  602. {...formItemLayout}
  603. label="签单金额(万元)"
  604. >
  605. <span>{this.state.totalAmount}</span>
  606. </FormItem>
  607. <FormItem
  608. className="half-item"
  609. {...formItemLayout}
  610. label="首付金额(万元)"
  611. >
  612. <span>{this.state.firstAmount}</span>
  613. </FormItem>
  614. <FormItem
  615. className="half-item"
  616. {...formItemLayout}
  617. label="特批立项"
  618. >
  619. <span>{getApprovedState(this.state.approval)}</span>
  620. </FormItem>
  621. <FormItem
  622. className="half-item"
  623. {...formItemLayout}
  624. label="已收款项(万元)"
  625. >
  626. <span>{this.state.settlementAmount}</span>
  627. </FormItem>
  628. <FormItem
  629. className="half-item"
  630. {...formItemLayout}
  631. label="订单部门"
  632. >
  633. <span>{this.state.depName}</span>
  634. </FormItem>
  635. <FormItem
  636. className="half-item"
  637. {...formItemLayout}
  638. label="是否外包"
  639. >
  640. {this.state.outsource}
  641. </FormItem>
  642. <div className="clearfix">
  643. <FormItem
  644. labelCol={{ span: 4 }}
  645. wrapperCol={{ span: 16 }}
  646. label="订单留言"
  647. >
  648. <span>{this.state.orderRemarks}</span>
  649. </FormItem>
  650. </div>
  651. <div className="clearfix">
  652. <FormItem
  653. labelCol={{ span: 4 }}
  654. wrapperCol={{ span: 18 }}
  655. label={"合同扫描件"}
  656. >
  657. <div style={{paddingTop:'10px',paddingBottom:'10px'}}>
  658. {this.props.visible && this.state.orgCodeUrl ? <ImgList fileList={this.state.orgCodeUrl} ItemWidth={'96px'}/> : <div/>}
  659. </div>
  660. <Button
  661. style={{
  662. float: "right",
  663. marginRight: "140px",
  664. marginTop: "20px",
  665. }}
  666. onClick={this.getOrderLog}
  667. >
  668. 查看订单 日志
  669. </Button>
  670. </FormItem>
  671. <FormItem
  672. labelCol={{ span: 4 }}
  673. wrapperCol={{ span: 18 }}
  674. label="补充协议"
  675. >
  676. <div style={{paddingTop:'10px',paddingBottom:'10px'}}>
  677. {this.props.visible && this.state.replenishUrl ? <ImgList domId={'inquiry1'} fileList={this.state.replenishUrl} ItemWidth={'96px'}/> : <div/>}
  678. </div>
  679. </FormItem>
  680. </div>
  681. <div className="clearfix">
  682. <FormItem
  683. className="half-item"
  684. {...formItemLayout}
  685. label="订单负责人"
  686. >
  687. <span>{this.state.salesmanName}</span>
  688. </FormItem>
  689. <FormItem
  690. className="half-item"
  691. {...formItemLayout}
  692. label="订单负责人电话"
  693. >
  694. <span>{this.state.salesmanMobile}</span>
  695. </FormItem>
  696. </div>
  697. <div className="clearfix">
  698. <FormItem
  699. className="half-item"
  700. {...formItemLayout}
  701. label="当前财务负责人"
  702. >
  703. <span>{this.state.nowFinance}</span>
  704. </FormItem>
  705. <FormItem
  706. className="half-item"
  707. {...formItemLayout}
  708. label="当前财务负责人电话"
  709. >
  710. <span>{this.state.nowFinanceMobile}</span>
  711. </FormItem>
  712. </div>
  713. <div className="clearfix">
  714. <FormItem
  715. className="half-item"
  716. {...formItemLayout}
  717. style={{ opacity: ".5" }}
  718. label="原订单负责人"
  719. >
  720. <span>{this.state.oldSalesmanName}</span>
  721. </FormItem>
  722. <FormItem
  723. className="half-item"
  724. {...formItemLayout}
  725. style={{ opacity: ".5" }}
  726. label="原订单负责人电话"
  727. >
  728. <span>{this.state.oldSalesmanMobile}</span>
  729. </FormItem>
  730. </div>
  731. <div className="clearfix">
  732. <FormItem
  733. className="half-item"
  734. style={{ opacity: ".5" }}
  735. {...formItemLayout}
  736. label="实际财务操作人"
  737. >
  738. <span>{this.state.financeName}</span>
  739. </FormItem>
  740. <FormItem
  741. className="half-item"
  742. {...formItemLayout}
  743. style={{ opacity: ".5" }}
  744. label="实际财务操作人电话"
  745. >
  746. <span>{this.state.financeMobile}</span>
  747. </FormItem>
  748. </div>
  749. <div>
  750. <span style={{ marginLeft: "50px", fontSize: "20px" }}>
  751. 项目业务
  752. </span>
  753. </div>
  754. <div className="patent-table">
  755. <Spin spinning={this.state.orderTaskLoading}>
  756. <Table
  757. columns={this.state.columnsX}
  758. dataSource={this.state.dataSourceX}
  759. pagination={false}
  760. onRowClick={this.tableRowClickX}
  761. bordered
  762. size="small"
  763. />
  764. </Spin>
  765. </div>
  766. <div>
  767. <span style={{ marginLeft: "50px", fontSize: "20px" }}>
  768. 催款节点
  769. </span>
  770. <span
  771. style={{
  772. display: this.state.contactList.length ? "none" : "inline-block",
  773. marginLeft: 10,
  774. color: "red",
  775. }}
  776. >
  777. 金额总计(万元): {this.state.totalCui}
  778. </span>
  779. </div>
  780. <div className="clearfix">
  781. <Spin spinning={this.state.newOrderDunLoading}>
  782. <Form layout="horizontal" id="demand-form">
  783. <Table
  784. pagination={false}
  785. bordered
  786. size="small"
  787. columns={
  788. this.state.ContactsListsNew
  789. }
  790. dataSource={
  791. this.state.contactListNew
  792. }
  793. />
  794. <Col
  795. span={24}
  796. offset={9}
  797. style={{ marginTop: "15px" }}
  798. />
  799. </Form>
  800. </Spin>
  801. </div>
  802. </div>
  803. </Spin>
  804. </Form>
  805. </TabPane>
  806. <TabPane tab="客服跟进详情" key="2">
  807. {this.state.tabsKey === '2' ? <CustomerServiceRecord
  808. orderNo={this.props.orderNo}
  809. uid={this.props.uid}
  810. /> : ''}
  811. </TabPane>
  812. </Tabs>
  813. <OrderRiZi
  814. dataSourcerizhi={this.state.dataSourcerizhi}
  815. closeOrderLog={this.closeOrderLog}
  816. visible={this.state.rizhivisible}
  817. loading={this.state.selectOrderLogLoading}
  818. />
  819. {this.state.addnextVisible && <ProjectDetailsReadOnly
  820. infor={this.state.dataInfor}
  821. visible={this.state.addnextVisible}
  822. onCancel={this.nextCancel}
  823. />}
  824. </div>
  825. </Modal>
  826. )
  827. }
  828. }
  829. export default FollowUpDetails;