orderDetail.jsx 36 KB

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