orderDetail.jsx 43 KB

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