orderDetail.js 25 KB

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