orderDetail.jsx 41 KB

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