orderDetail.js 29 KB

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