orderDetail.jsx 41 KB

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