orderDetail.jsx 33 KB

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