orderDetail.jsx 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287
  1. import React from 'react';
  2. import $ from 'jquery/src/ajax';
  3. import {
  4. Modal,
  5. message,
  6. Spin,
  7. Upload,
  8. Button,
  9. Form,
  10. Table,
  11. Col,
  12. Tag
  13. } from 'antd';
  14. import {
  15. getjiedian,
  16. splitUrl,
  17. getNewOrderType,
  18. getProcessStatus,
  19. getApproval,
  20. getLiquidationStatus,
  21. getProjectStatus,
  22. getCuikuan
  23. } from "@/tools";
  24. import OrderRiZi from "@/orderRiZi.jsx";
  25. import ResolutionDetail from "@/resolutionDetail";
  26. const OrderDetail = Form.create()(
  27. React.createClass({
  28. loadXmu(record) {
  29. this.state.data = [];
  30. this.setState({
  31. loading: true
  32. });
  33. $.ajax({
  34. method: "get",
  35. dataType: "json",
  36. crossDomain: false,
  37. url: globalConfig.context + "/api/admin/newOrder/getOrderTask",
  38. data: {
  39. orderNo: record ? record.orderNo : this.props.data.orderNo
  40. },
  41. success: function(data) {
  42. let theArr = [];
  43. if (!data.data) {
  44. if (data.error && data.error.length) {
  45. message.warning(data.error[0].message);
  46. }
  47. } else {
  48. for (let i = 0; i < data.data.length; i++) {
  49. let thisdata = data.data[i];
  50. theArr.push({
  51. key: i,
  52. id: thisdata.id,
  53. orderNo: thisdata.orderNo,
  54. commodityName: thisdata.commodityName,
  55. commodityPrice: thisdata.commodityPrice,
  56. commodityQuantity: thisdata.commodityQuantity,
  57. taskStatus: thisdata.taskStatus,
  58. taskComment: thisdata.taskComment,
  59. main: thisdata.main,
  60. contacts: thisdata.contacts,
  61. contactsMobile: thisdata.contactsMobile,
  62. cname: thisdata.cname,
  63. certificateNumber: thisdata.certificateNumber,
  64. projectStatus: thisdata.projectStatus,
  65. sort: thisdata.cSort,
  66. splitStatus: thisdata.splitStatus
  67. });
  68. }
  69. }
  70. this.setState({
  71. dataSource: theArr,
  72. pagination: false
  73. });
  74. }.bind(this)
  75. }).always(
  76. function() {
  77. this.setState({
  78. loading: false
  79. });
  80. }.bind(this)
  81. );
  82. },
  83. getInitialState() {
  84. return {
  85. rotateDeg: 0,
  86. visible: false,
  87. avisible: false,
  88. loading: false,
  89. jsDate: [],
  90. auditStatus: 0,
  91. textFileList: [],
  92. videoFileList: [],
  93. pictureUrl: [],
  94. pictureUrlMin: [],
  95. columns: [
  96. {
  97. title: "业务项目名称",
  98. dataIndex: "commodityName",
  99. key: "commodityName",
  100. render: text => {
  101. return text && text.length > 6 ? (
  102. <span title={text}>{text.substr(0, 8)}...</span>
  103. ) : (
  104. text
  105. );
  106. }
  107. },
  108. {
  109. title: "项目类别",
  110. dataIndex: "cname",
  111. key: "cname"
  112. },
  113. {
  114. title: "项目数量",
  115. dataIndex: "commodityQuantity",
  116. key: "commodityQuantity",
  117. render: (text, record) => {
  118. if (record.splitStatus == 1) {
  119. return (
  120. <span>
  121. {text}{" "}
  122. <Tag
  123. color="#108ee9"
  124. onClick={e => {
  125. e.stopPropagation();
  126. this.showRes(record);
  127. }}
  128. >
  129. 已拆
  130. </Tag>
  131. </span>
  132. );
  133. } else {
  134. return text;
  135. }
  136. }
  137. },
  138. {
  139. title: "服务市价(万元)",
  140. dataIndex: "commodityPrice",
  141. key: "commodityPrice"
  142. },
  143. {
  144. title: "项目状态",
  145. dataIndex: "projectStatus",
  146. key: "projectStatus",
  147. render: text => {
  148. return getProjectStatus(text);
  149. }
  150. },
  151. {
  152. title: "证书编号",
  153. dataIndex: "certificateNumber",
  154. key: "certificateNumber"
  155. },
  156. {
  157. title: "是否主要项目",
  158. dataIndex: "main",
  159. key: "main",
  160. render: text => {
  161. return text ? "是" : "否";
  162. }
  163. },
  164. {
  165. title: "项目说明",
  166. dataIndex: "taskComment",
  167. key: "taskComment",
  168. render: text => {
  169. return text && text.length > 8 ? (
  170. <span title={text}>{text.substr(0, 8)}...</span>
  171. ) : (
  172. text
  173. );
  174. }
  175. }
  176. ],
  177. columnsX: [
  178. {
  179. title: "流程",
  180. dataIndex: "processName",
  181. key: "processName"
  182. },
  183. {
  184. title: "操作人",
  185. dataIndex: "adminName",
  186. key: "adminName"
  187. },
  188. {
  189. title: "时间",
  190. dataIndex: "createDate",
  191. key: "createDate"
  192. }
  193. ],
  194. ContactsListsNew: [
  195. {
  196. title: "项目名称",
  197. dataIndex: "commodityName",
  198. key: "commodityName",
  199. render: text => {
  200. return <span>{text}</span>;
  201. }
  202. },
  203. {
  204. title: "项目分类",
  205. dataIndex: "projectType",
  206. key: "projectType",
  207. render: text => {
  208. let arr = this.state.dataSource || [];
  209. let str = "";
  210. for (let i = 0; i < arr.length; i++) {
  211. if (this.state.dataSource[i].sort == text) {
  212. str = this.state.dataSource[i].cname;
  213. return <span>{str}</span>;
  214. }
  215. }
  216. }
  217. },
  218. {
  219. title: "催款科目",
  220. dataIndex: "dunTypeName",
  221. key: "dunTypeName",
  222. render: text => {
  223. return <span>{text}</span>;
  224. }
  225. },
  226. {
  227. title: "时间(天)",
  228. dataIndex: "waitDay",
  229. key: "waitDay",
  230. render: (text, record) => {
  231. if (record.dunTypeName) {
  232. return <span>{text}</span>;
  233. }
  234. }
  235. },
  236. {
  237. title: "金额(万元)",
  238. dataIndex: "money",
  239. key: "money",
  240. render: (text, record) => {
  241. if (record.dunTypeName) {
  242. if (record.appropriationRatio && !record.money) {
  243. return <span>{record.appropriationRatio}(拨款比例)</span>;
  244. } else if (record.appropriationRatio && record.money) {
  245. return (
  246. <span>
  247. {text}(比例:{record.appropriationRatio})
  248. </span>
  249. );
  250. } else {
  251. return <span>{text}</span>;
  252. }
  253. }
  254. }
  255. },
  256. {
  257. title: "服务年限",
  258. dataIndex: "startDate",
  259. key: "startDate",
  260. render: (text, record) => {
  261. if (record.dunTypeName) {
  262. return <span>{text}</span>;
  263. }
  264. }
  265. },
  266. {
  267. title: "催款状态",
  268. dataIndex: "status",
  269. key: "status",
  270. render: text => {
  271. return <span>{text == 1 ? "已启动" : "未启动"}</span>;
  272. }
  273. }
  274. ],
  275. ContactsLists: [
  276. {
  277. title: "催款科目",
  278. dataIndex: "dunSubject",
  279. key: "dunSubject",
  280. render: text => {
  281. return getjiedian(text);
  282. }
  283. },
  284. {
  285. title: "金额(万元)",
  286. dataIndex: "money",
  287. key: "money"
  288. },
  289. {
  290. title: "催款状态",
  291. dataIndex: "dunStatus",
  292. key: "dunStatus",
  293. render: text => {
  294. return getCuikuan(text);
  295. }
  296. }
  297. ]
  298. };
  299. },
  300. // 拆分详细
  301. showRes(record) {
  302. this.setState({
  303. resVisible: true,
  304. resRecord: record
  305. });
  306. },
  307. resCancel() {
  308. this.setState({
  309. resVisible: false
  310. });
  311. },
  312. loadData(record) {
  313. this.state.orderList = [];
  314. $.ajax({
  315. method: "get",
  316. dataType: "json",
  317. crossDomain: false,
  318. url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail",
  319. data: {
  320. orderNo: record ? record.orderNo : this.props.data.orderNo
  321. },
  322. success: function(data) {
  323. let thisData = data.data;
  324. if (!thisData) {
  325. if (data.error && data.error.length) {
  326. message.warning(data.error[0].message);
  327. }
  328. thisData = {};
  329. }
  330. this.setState({
  331. id: thisData.id,
  332. orderList: thisData,
  333. approval:
  334. thisData.approval == 0
  335. ? thisData.approval.toString()
  336. : thisData.approval,
  337. orderRemarks: thisData.orderRemarks,
  338. orgCodeUrl: thisData.contractPictureUrl
  339. ? splitUrl(
  340. thisData.contractPictureUrl,
  341. ",",
  342. globalConfig.avatarHost + "/upload"
  343. )
  344. : [],
  345. replenishUrl: thisData.agreementUrl
  346. ? splitUrl(
  347. thisData.agreementUrl,
  348. ",",
  349. globalConfig.avatarHost + "/upload"
  350. )
  351. : [],
  352. orderNo: thisData.orderNo, //订单编号
  353. buyerId: thisData.buyerId,
  354. depName: thisData.depName,
  355. outsource: thisData.outsource == 0 ? "否" : "是",
  356. });
  357. }.bind(this)
  358. }).always(
  359. function() {
  360. this.setState({
  361. loading: false
  362. });
  363. }.bind(this)
  364. );
  365. },
  366. jdDate(record) {
  367. $.ajax({
  368. method: "get",
  369. dataType: "json",
  370. crossDomain: false,
  371. url: globalConfig.context + "/api/admin/newOrder/selectOrderDun",
  372. data: {
  373. orderNo: record ? record.orderNo : this.props.data.orderNo
  374. },
  375. success: function(data) {
  376. let thisData = data.data;
  377. if (!thisData.length) {
  378. if (data.error && data.error.length) {
  379. message.warning(data.error[0].message);
  380. }
  381. thisData = {};
  382. } else {
  383. this.setState({
  384. jsDate: thisData
  385. });
  386. }
  387. }.bind(this)
  388. }).always(
  389. function() {
  390. this.setState({
  391. loading: false
  392. });
  393. }.bind(this)
  394. );
  395. },
  396. rizhi() {
  397. this.setState({
  398. loading: true
  399. });
  400. $.ajax({
  401. method: "get",
  402. dataType: "json",
  403. crossDomain: false,
  404. url: "/api/admin/newOrder/selectOrderLog",
  405. data: {
  406. orderNo: this.props.data.orderNo
  407. },
  408. success: function(data) {
  409. let theArr = [];
  410. let thisData = data.data;
  411. if (!thisData.length) {
  412. if (data.error && data.error.length) {
  413. message.warning(data.error[0].message);
  414. }
  415. thisData = {};
  416. } else {
  417. for (let i = 0; i < data.data.length; i++) {
  418. let thisdata = data.data[i];
  419. theArr.push({
  420. processName: thisdata.processName,
  421. adminName: thisdata.adminName,
  422. createDate: thisdata.createDate,
  423. remarks: thisdata.remarks
  424. });
  425. }
  426. }
  427. this.setState({
  428. dataSourceX: theArr
  429. });
  430. }.bind(this)
  431. }).always(
  432. function() {
  433. this.setState({
  434. loading: false
  435. });
  436. }.bind(this)
  437. );
  438. },
  439. getOrderLog() {
  440. this.setState({
  441. avisible: true
  442. });
  443. this.rizhi();
  444. },
  445. closeOrderLog() {
  446. this.setState({
  447. avisible: false
  448. });
  449. },
  450. getPictureUrl(e) {
  451. this.setState({ pictureUrl: e });
  452. },
  453. componentWillMount() {
  454. if (this.props.data.orderNo) {
  455. this.loadData();
  456. this.loadXmu();
  457. this.jdDate();
  458. this.jiedian(this.props.data.orderNo);
  459. this.jiedianNew(this.props.data.orderNo);
  460. } else {
  461. this.state.data = {};
  462. }
  463. },
  464. componentWillReceiveProps(nextProps) {
  465. if (!this.props.visible && nextProps.visible) {
  466. this.state.textFileList = [];
  467. this.state.videoFileList = [];
  468. if (nextProps.data.orderNo) {
  469. this.loadData(nextProps.data);
  470. this.loadXmu(nextProps.data);
  471. this.jdDate(nextProps.data);
  472. this.jiedian(nextProps.data.orderNo);
  473. this.jiedianNew(nextProps.data.orderNo);
  474. } else {
  475. this.state.data = {};
  476. this.state.pictureUrl = [];
  477. this.state.pictureUrlMin = [];
  478. }
  479. this.props.form.resetFields();
  480. }
  481. },
  482. downImg() {
  483. let num = 0;
  484. for (let i = 0; i < this.state.orgCodeUrl.length; i++) {
  485. if (this.state.orgCodeUrl[i].url == this.state.previewImage) {
  486. num = i;
  487. }
  488. }
  489. if (num == this.state.orgCodeUrl.length - 1) {
  490. return message.warning("已经是最后一张了哦");
  491. }
  492. this.state.previewImage = this.state.orgCodeUrl[num + 1].url;
  493. this.setState({
  494. previewImage: this.state.previewImage,
  495. rotateDeg: 0
  496. });
  497. },
  498. upImg() {
  499. let num = 0;
  500. for (let i = 0; i < this.state.orgCodeUrl.length; i++) {
  501. if (this.state.orgCodeUrl[i].url == this.state.previewImage) {
  502. num = i;
  503. }
  504. }
  505. if (num == 0) {
  506. return message.warning("已经是第一张了哦");
  507. }
  508. this.state.previewImage = this.state.orgCodeUrl[num - 1].url;
  509. this.setState({
  510. previewImage: this.state.previewImage,
  511. rotateDeg: 0
  512. });
  513. },
  514. rotate() {
  515. let rotateDeg = this.state.rotateDeg + 90;
  516. this.setState({
  517. rotateDeg
  518. });
  519. },
  520. downImgs() {
  521. let num = 0;
  522. for (let i = 0; i < this.state.replenishUrl.length; i++) {
  523. if (this.state.replenishUrl[i].url == this.state.previewImage) {
  524. num = i;
  525. }
  526. }
  527. if (num == this.state.replenishUrl.length - 1) {
  528. return message.warning("已经是最后一张了哦");
  529. }
  530. this.state.previewImage = this.state.replenishUrl[num + 1].url;
  531. this.setState({
  532. previewImage: this.state.previewImage,
  533. rotateDeg: 0
  534. });
  535. },
  536. upImgs() {
  537. let num = 0;
  538. for (let i = 0; i < this.state.replenishUrl.length; i++) {
  539. if (this.state.replenishUrl[i].url == this.state.previewImage) {
  540. num = i;
  541. }
  542. }
  543. if (num == 0) {
  544. return message.warning("已经是第一张了哦");
  545. }
  546. this.state.previewImage = this.state.replenishUrl[num - 1].url;
  547. this.setState({
  548. previewImage: this.state.previewImage,
  549. rotateDeg: 0
  550. });
  551. },
  552. rotates() {
  553. let rotateDeg = this.state.rotateDeg + 90;
  554. this.setState({
  555. rotateDeg
  556. });
  557. },
  558. //节点列表
  559. jiedian(orderNos) {
  560. $.ajax({
  561. method: "get",
  562. dataType: "json",
  563. crossDomain: false,
  564. url: globalConfig.context + "/api/admin/newOrder/selectOrderDun",
  565. data: {
  566. orderNo: orderNos
  567. },
  568. success: function(data) {
  569. let theArr = [];
  570. let thisData = [];
  571. if (data.error.length || data.data.list == "") {
  572. if (data.error && data.error.length) {
  573. message.warning(data.error[0].message);
  574. }
  575. } else {
  576. for (let i = 0; i < data.data.length; i++) {
  577. thisData = data.data[i];
  578. theArr.push({
  579. key: i,
  580. dunSubject: thisData.dunSubject
  581. ? thisData.dunSubject.toString()
  582. : "", //催款科目
  583. id: thisData.id, //节点Id
  584. money: thisData.money, //催款金额
  585. dunStatus: thisData.dunStatus, //催款状态
  586. orderNo: thisData.orderNo
  587. });
  588. }
  589. this.setState({
  590. contactList: theArr
  591. });
  592. }
  593. }.bind(this)
  594. }).always(
  595. function() {
  596. this.setState({
  597. loading: false
  598. });
  599. }.bind(this)
  600. );
  601. },
  602. //查看催款节点
  603. jiedianNew(orderNos) {
  604. $.ajax({
  605. method: "get",
  606. dataType: "json",
  607. crossDomain: false,
  608. url:
  609. globalConfig.context + "/api/admin/newOrderDun/selectListNewOrderDun",
  610. data: {
  611. orderNo: orderNos
  612. },
  613. success: function(data) {
  614. if (data.error && data.error.length) {
  615. message.warning(data.error[0].message);
  616. } else {
  617. let theArr = [];
  618. let thisData = [];
  619. let arr = data.data || [];
  620. let totalCui = 0;
  621. for (let i = 0; i < arr.length; i++) {
  622. thisData = arr[i];
  623. totalCui += +thisData.money;
  624. theArr.push({
  625. key: i,
  626. dunSubject: thisData.dunSubject
  627. ? thisData.dunSubject.toString()
  628. : "", //催款科目
  629. id: thisData.id, //节点Id
  630. money: thisData.money, //催款金额
  631. // orderNo: record ? record.orderNo : this.props.datauser.orderNo,
  632. commodityName: thisData.commodityName,
  633. projectType: thisData.projectType,
  634. dunTypeName: thisData.dunTypeName,
  635. status: thisData.status,
  636. waitDay: thisData.waitDay,
  637. effectiveCount: thisData.effectiveCount,
  638. startDate: thisData.startDate,
  639. dunType: thisData.dunType,
  640. appropriationRatio: thisData.appropriationRatio
  641. });
  642. }
  643. if (!totalCui) {
  644. totalCui = 0;
  645. }
  646. totalCui = (Math.round(totalCui * 10000) / 10000).toFixed(4);
  647. this.setState({
  648. contactListNew: theArr,
  649. totalCui
  650. });
  651. }
  652. }.bind(this)
  653. }).always(
  654. function() {
  655. this.setState({
  656. loading: false
  657. });
  658. }.bind(this)
  659. );
  660. },
  661. render() {
  662. const theData = this.state.orderList || {};
  663. const FormItem = Form.Item;
  664. const formItemLayout = {
  665. labelCol: { span: 10 },
  666. wrapperCol: { span: 12 }
  667. };
  668. const jsDate = this.state.jsDate || [];
  669. const cuiDataList = this.state.contactList || [];
  670. return (
  671. <div className="login">
  672. {this.state.resVisible ? (
  673. <ResolutionDetail
  674. cancel={this.resCancel}
  675. detail={this.state.resRecord}
  676. visible={this.state.resVisible}
  677. id={this.state.resRecord.orderNo}
  678. />
  679. ) : (
  680. ""
  681. )}
  682. <Form layout="horizontal" id="demand-form">
  683. <Spin spinning={this.state.loading}>
  684. <div className="clearfix">
  685. <FormItem
  686. className="half-item"
  687. {...formItemLayout}
  688. label="订单编号"
  689. >
  690. <span>{theData.orderNo}</span>
  691. </FormItem>
  692. <FormItem
  693. className="half-item"
  694. {...formItemLayout}
  695. label="签单时间"
  696. >
  697. <span>{theData.signDate}</span>
  698. </FormItem>
  699. <FormItem
  700. className="half-item"
  701. {...formItemLayout}
  702. label="客户名称"
  703. >
  704. <span>{theData.userName}</span>
  705. </FormItem>
  706. <FormItem
  707. className="half-item"
  708. {...formItemLayout}
  709. label="流程状态"
  710. >
  711. <span>{getProcessStatus(theData.processStatus)}</span>
  712. </FormItem>
  713. <FormItem
  714. className="half-item"
  715. {...formItemLayout}
  716. label="订单类型"
  717. >
  718. <span>{getNewOrderType(theData.orderType)}</span>
  719. </FormItem>
  720. <FormItem
  721. className="half-item"
  722. {...formItemLayout}
  723. label="结算状态"
  724. >
  725. <span>{getLiquidationStatus(theData.liquidationStatus)}</span>
  726. </FormItem>
  727. <FormItem
  728. className="half-item"
  729. {...formItemLayout}
  730. label="签单总金额(万元)"
  731. >
  732. <span>{theData.totalAmount}</span>
  733. </FormItem>
  734. <FormItem
  735. className="half-item"
  736. {...formItemLayout}
  737. label="首付款(万元)"
  738. >
  739. <span>{theData.firstAmount}</span>
  740. </FormItem>
  741. <FormItem
  742. className="half-item"
  743. {...formItemLayout}
  744. label="已收款(万元)"
  745. >
  746. <span>{theData.settlementAmount}</span>
  747. </FormItem>
  748. <FormItem
  749. className="half-item"
  750. {...formItemLayout}
  751. label="是否特批"
  752. >
  753. <span>{getApproval(theData.approval)}</span>
  754. </FormItem>
  755. <FormItem
  756. className="half-item"
  757. {...formItemLayout}
  758. label="是否外包"
  759. >
  760. <span>{this.state.outsource}</span>
  761. </FormItem>
  762. {this.props.data.orderStatus == "6" && (
  763. <FormItem
  764. className="half-item"
  765. {...formItemLayout}
  766. label="已退(万元)"
  767. >
  768. <span>{this.props.data.refundAmount}</span>
  769. </FormItem>
  770. )}
  771. </div>
  772. <div className="clearfix">
  773. <FormItem
  774. labelCol={{ span: 5 }}
  775. wrapperCol={{ span: 18 }}
  776. label="合同扫描件"
  777. >
  778. <Upload
  779. className="demandDetailShow-upload"
  780. listType="picture-card"
  781. fileList={this.state.orgCodeUrl}
  782. onPreview={file => {
  783. this.setState({
  784. previewImage: file.url || file.thumbUrl,
  785. previewVisible: true
  786. });
  787. }}
  788. ></Upload>
  789. <Modal
  790. maskClosable={false}
  791. footer={null}
  792. width={"70%"}
  793. visible={this.state.previewVisible}
  794. onCancel={() => {
  795. this.setState({ previewVisible: false, rotateDeg: 0 });
  796. }}
  797. >
  798. {/* <div
  799. onClick={this.upImg}
  800. className="up-btn"
  801. style={{
  802. cursor: "pointer",
  803. transition: "all .5s",
  804. opacity: ".2",
  805. width: "41px",
  806. height: "69px",
  807. backgroundColor: "rgba(0,0,0,.5)",
  808. position: "absolute",
  809. top: "50%",
  810. left: 16,
  811. transform: "translateY(-50%)",
  812. zIndex: 1
  813. }}
  814. >
  815. <span
  816. style={{
  817. position: "absolute",
  818. border: "1px solid #fff",
  819. width: "20px",
  820. height: "20px",
  821. left: "60%",
  822. top: "50%",
  823. transform: "translate(-50%, -50%) rotate(45deg)",
  824. borderTop: "none",
  825. borderRight: "none"
  826. }}
  827. ></span>
  828. </div>
  829. <div
  830. onClick={this.rotate}
  831. style={{
  832. textAlign: "center",
  833. lineHeight: "30px",
  834. color: "#000",
  835. cursor: "pointer",
  836. transition: "all .5s",
  837. width: "50px",
  838. height: "30px",
  839. backgroundColor: "white",
  840. position: "absolute",
  841. bottom: "-30",
  842. left: "50%",
  843. transform: "translateX(-50%)",
  844. zIndex: 1,
  845. borderRadius: "5px",
  846. border: "1px solid #ccc"
  847. }}
  848. >
  849. 旋转
  850. </div>
  851. <div
  852. onClick={this.downImg}
  853. className="up-btn"
  854. style={{
  855. cursor: "pointer",
  856. transition: "all .5s",
  857. opacity: ".2",
  858. width: "41px",
  859. height: "69px",
  860. backgroundColor: "rgba(0,0,0,.5)",
  861. position: "absolute",
  862. top: "50%",
  863. right: 16,
  864. transform: "translateY(-50%)",
  865. zIndex: 1
  866. }}
  867. >
  868. <span
  869. style={{
  870. position: "absolute",
  871. border: "1px solid #fff",
  872. width: "20px",
  873. height: "20px",
  874. left: "40%",
  875. top: "50%",
  876. transform: "translate(-50%, -50%) rotate(225deg)",
  877. borderTop: "none",
  878. borderRight: "none"
  879. }}
  880. ></span>
  881. </div> */}
  882. <img
  883. alt=""
  884. style={{
  885. width: "100%",
  886. transform: `rotate(${this.state.rotateDeg}deg)`
  887. }}
  888. src={this.state.previewImage || ""}
  889. />
  890. <Button
  891. onClick={this.rotate}
  892. style={{
  893. position: "relative",
  894. left: "50%",
  895. transform: "translateX(-50%)",
  896. }}
  897. >
  898. 旋转
  899. </Button>
  900. <Button
  901. onClick={this.upImg}
  902. style={{
  903. position: "absolute",
  904. left: -81,
  905. top: "50%",
  906. transform: "translateY(-50%)",
  907. }}
  908. >
  909. 上一张
  910. </Button>
  911. <Button
  912. onClick={this.downImg}
  913. style={{
  914. position: "absolute",
  915. right: -81,
  916. top: "50%",
  917. transform: "translateY(-50%)",
  918. }}
  919. >
  920. 下一张
  921. </Button>
  922. </Modal>
  923. <Button
  924. style={{
  925. float: "right",
  926. marginRight: "140px",
  927. marginTop: "20px"
  928. }}
  929. onClick={this.getOrderLog}
  930. >
  931. 查看订单日志
  932. </Button>
  933. </FormItem>
  934. <FormItem
  935. labelCol={{ span: 5 }}
  936. wrapperCol={{ span: 18 }}
  937. label="补充协议"
  938. >
  939. <Upload
  940. className="demandDetailShow-upload"
  941. listType="picture-card"
  942. fileList={this.state.replenishUrl}
  943. onPreview={file => {
  944. this.setState({
  945. previewImage: file.url || file.thumbUrl,
  946. previewVisible: true
  947. });
  948. }}
  949. ></Upload>
  950. <Modal
  951. maskClosable={false}
  952. footer={null}
  953. width={"70%"}
  954. visible={this.state.previewVisible}
  955. onCancel={() => {
  956. this.setState({ previewVisible: false, rotateDeg: 0 });
  957. }}
  958. >
  959. {/* <div
  960. onClick={this.upImg}
  961. className="up-btn"
  962. style={{
  963. cursor: "pointer",
  964. transition: "all .5s",
  965. opacity: ".2",
  966. width: "41px",
  967. height: "69px",
  968. backgroundColor: "rgba(0,0,0,.5)",
  969. position: "absolute",
  970. top: "50%",
  971. left: 16,
  972. transform: "translateY(-50%)",
  973. zIndex: 1
  974. }}
  975. >
  976. <span
  977. style={{
  978. position: "absolute",
  979. border: "1px solid #fff",
  980. width: "20px",
  981. height: "20px",
  982. left: "60%",
  983. top: "50%",
  984. transform: "translate(-50%, -50%) rotate(45deg)",
  985. borderTop: "none",
  986. borderRight: "none"
  987. }}
  988. ></span>
  989. </div>
  990. <div
  991. onClick={this.rotate}
  992. style={{
  993. textAlign: "center",
  994. lineHeight: "30px",
  995. color: "#000",
  996. cursor: "pointer",
  997. transition: "all .5s",
  998. width: "50px",
  999. height: "30px",
  1000. backgroundColor: "white",
  1001. position: "absolute",
  1002. bottom: "-30",
  1003. left: "50%",
  1004. transform: "translateX(-50%)",
  1005. zIndex: 1,
  1006. borderRadius: "5px",
  1007. border: "1px solid #ccc"
  1008. }}
  1009. >
  1010. 旋转
  1011. </div>
  1012. <div
  1013. onClick={this.downImg}
  1014. className="up-btn"
  1015. style={{
  1016. cursor: "pointer",
  1017. transition: "all .5s",
  1018. opacity: ".2",
  1019. width: "41px",
  1020. height: "69px",
  1021. backgroundColor: "rgba(0,0,0,.5)",
  1022. position: "absolute",
  1023. top: "50%",
  1024. right: 16,
  1025. transform: "translateY(-50%)",
  1026. zIndex: 1
  1027. }}
  1028. >
  1029. <span
  1030. style={{
  1031. position: "absolute",
  1032. border: "1px solid #fff",
  1033. width: "20px",
  1034. height: "20px",
  1035. left: "40%",
  1036. top: "50%",
  1037. transform: "translate(-50%, -50%) rotate(225deg)",
  1038. borderTop: "none",
  1039. borderRight: "none"
  1040. }}
  1041. ></span>
  1042. </div> */}
  1043. <img
  1044. alt=""
  1045. style={{
  1046. width: "100%",
  1047. transform: `rotate(${this.state.rotateDeg}deg)`
  1048. }}
  1049. src={this.state.previewImage || ""}
  1050. />
  1051. <Button
  1052. onClick={this.rotates}
  1053. style={{
  1054. position: "relative",
  1055. left: "50%",
  1056. transform: "translateX(-50%)",
  1057. }}
  1058. >
  1059. 旋转
  1060. </Button>
  1061. <Button
  1062. onClick={this.upImgs}
  1063. style={{
  1064. position: "absolute",
  1065. left: -81,
  1066. top: "50%",
  1067. transform: "translateY(-50%)",
  1068. }}
  1069. >
  1070. 上一张
  1071. </Button>
  1072. <Button
  1073. onClick={this.downImgs}
  1074. style={{
  1075. position: "absolute",
  1076. right: -81,
  1077. top: "50%",
  1078. transform: "translateY(-50%)",
  1079. }}
  1080. >
  1081. 下一张
  1082. </Button>
  1083. </Modal>
  1084. </FormItem>
  1085. </div>
  1086. <div className="clearfix">
  1087. <FormItem
  1088. className="half-item"
  1089. {...formItemLayout}
  1090. label="合同编号"
  1091. >
  1092. <span>{theData.contractNo}</span>
  1093. </FormItem>
  1094. <FormItem
  1095. className="half-item"
  1096. {...formItemLayout}
  1097. label="订单部门"
  1098. >
  1099. <span>{theData.depName}</span>
  1100. </FormItem>
  1101. </div>
  1102. <div className="clearfix">
  1103. <FormItem
  1104. labelCol={{ span: 5 }}
  1105. wrapperCol={{ span: 18 }}
  1106. label="订单留言"
  1107. >
  1108. <p style={{ maxWidth: 500, wordWrap: "break-word" }}>
  1109. {this.state.orderRemarks}
  1110. </p>
  1111. </FormItem>
  1112. </div>
  1113. {/* <div className="clearfix">
  1114. <FormItem
  1115. labelCol={{ span: 5 }}
  1116. wrapperCol={{ span: 18 }}
  1117. label="收款节点"
  1118. >
  1119. {jsDate.map(item => {
  1120. return (
  1121. <p>
  1122. {getjiedian(item.dunSubject)} -- {item.money} 万元
  1123. </p>
  1124. );
  1125. })}
  1126. </FormItem>
  1127. </div> */}
  1128. <div className="clearfix">
  1129. <FormItem
  1130. className="half-item"
  1131. {...formItemLayout}
  1132. label="订单负责人"
  1133. >
  1134. <span>{theData.salesmanName}</span>
  1135. </FormItem>
  1136. <FormItem
  1137. className="half-item"
  1138. {...formItemLayout}
  1139. label="订单负责人电话"
  1140. >
  1141. <span>{theData.salesmanMobile}</span>
  1142. </FormItem>
  1143. <FormItem
  1144. className="half-item"
  1145. {...formItemLayout}
  1146. label="当前财务负责人"
  1147. >
  1148. <span>{theData.nowFinance}</span>
  1149. </FormItem>
  1150. <FormItem
  1151. className="half-item"
  1152. {...formItemLayout}
  1153. label="当前财务负责人电话"
  1154. >
  1155. <span>{theData.nowFinanceMobile}</span>
  1156. </FormItem>
  1157. <FormItem
  1158. className="half-item"
  1159. {...formItemLayout}
  1160. style={{ opacity: ".5" }}
  1161. label="原订单负责人"
  1162. >
  1163. <span>{theData.oldSalesmanName}</span>
  1164. </FormItem>
  1165. <FormItem
  1166. className="half-item"
  1167. {...formItemLayout}
  1168. style={{ opacity: ".5" }}
  1169. label="原订单负责人电话"
  1170. >
  1171. <span>{theData.oldSalesmanMobile}</span>
  1172. </FormItem>
  1173. <FormItem
  1174. className="half-item"
  1175. {...formItemLayout}
  1176. style={{ opacity: ".5" }}
  1177. label="实际财务操作人"
  1178. >
  1179. <span>{theData.financeName}</span>
  1180. </FormItem>
  1181. <FormItem
  1182. className="half-item"
  1183. {...formItemLayout}
  1184. style={{ opacity: ".5" }}
  1185. label="实际财务操作人电话"
  1186. >
  1187. <span>{theData.financeMobile}</span>
  1188. </FormItem>
  1189. </div>
  1190. {/* <Modal
  1191. visible={this.state.avisible}
  1192. className="admin-desc-content"
  1193. width="800px"
  1194. maskClosable={false}
  1195. title="订单日志"
  1196. footer={null}
  1197. onCancel={this.closeOrderLog}
  1198. >
  1199. <div className="patent-table">
  1200. <Spin spinning={this.state.loading}>
  1201. <Table
  1202. columns={this.state.columnsX}
  1203. dataSource={this.state.dataSourceX}
  1204. pagination={false}
  1205. />
  1206. </Spin>
  1207. </div>
  1208. </Modal> */}
  1209. <OrderRiZi
  1210. dataSourcerizhi={this.state.dataSourceX}
  1211. closeOrderLog={this.closeOrderLog}
  1212. visible={this.state.avisible}
  1213. loading={this.state.loading}
  1214. />
  1215. <div className="clearfix" style={{ marginBottom: 10 }}>
  1216. <p style={{ fontSize: 18, marginLeft: 20 }}>项目业务</p>
  1217. <div className="patent-table">
  1218. <Spin spinning={this.state.loading}>
  1219. <Table
  1220. columns={this.state.columns}
  1221. dataSource={this.state.dataSource}
  1222. pagination={this.state.pagination}
  1223. onRowClick={this.tableRowClick}
  1224. bordered
  1225. size="small"
  1226. />
  1227. </Spin>
  1228. </div>
  1229. </div>
  1230. <div>
  1231. <span style={{ marginLeft: 20, fontSize: "18px" }}>
  1232. 催款节点
  1233. </span>
  1234. <span
  1235. style={{
  1236. display: cuiDataList.length ? "none" : "inline-block",
  1237. marginLeft: 10,
  1238. color: "red"
  1239. }}
  1240. >
  1241. 金额总计(万元): {this.state.totalCui}
  1242. </span>
  1243. </div>
  1244. <div className="clearfix">
  1245. <Spin spinning={this.state.loading}>
  1246. <Form layout="horizontal" id="demand-form">
  1247. <Table
  1248. pagination={false}
  1249. bordered
  1250. size="small"
  1251. columns={
  1252. cuiDataList.length
  1253. ? this.state.ContactsLists
  1254. : this.state.ContactsListsNew
  1255. }
  1256. dataSource={
  1257. cuiDataList.length
  1258. ? this.state.contactList
  1259. : this.state.contactListNew
  1260. }
  1261. />
  1262. <Col
  1263. span={24}
  1264. offset={9}
  1265. style={{ marginTop: "15px" }}
  1266. ></Col>
  1267. </Form>
  1268. </Spin>
  1269. </div>
  1270. </Spin>
  1271. </Form>
  1272. </div>
  1273. );
  1274. }
  1275. })
  1276. );
  1277. export default OrderDetail;