orderDetail.jsx 46 KB

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