orderDetail.jsx 45 KB

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