orderDetail.jsx 46 KB

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