changeDetailYxy.js 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960
  1. import React, { Component } from "react";
  2. import { Form, Tooltip, Modal, Button, message, Table, Input, Popconfirm } from "antd";
  3. import AgreeButton from "./agreeButton.js";
  4. import Rizhi from "./rizhi.js";
  5. import { getProcessStatusNew, changeColor } from "@/tools.js";
  6. import { shenghePeo } from "@/tools.js";
  7. import { typeList } from '@/dataDic.js'
  8. import $ from "jquery/src/ajax";
  9. import tongguo from "../../../../../../image/tongguo.png";
  10. import quxiao from "../../../../../../image/quxiao.png";
  11. import ProAndCuiList from "./proAndCuiList.jsx";
  12. import Refund from "./refund.js"
  13. import PicturesWall from "./picturesWall";
  14. import ReactToPrint from "react-to-print";
  15. import ImgList from "../../../../common/imgList";
  16. import EnterpriseNameChange from "../../../../common/enterpriseNameChange";
  17. import FlowChart from '../../../../common/flowchart'; // 流程图
  18. const formItemLayout = {
  19. labelCol: { span: 8 },
  20. wrapperCol: { span: 14 }
  21. };
  22. const getChangeType = function (e) {
  23. if (e || e == 0) {
  24. let str = e.toString();
  25. let theType = "";
  26. typeList.map(function (item) {
  27. if (item.value == str) {
  28. theType = item.key;
  29. }
  30. });
  31. return theType;
  32. }
  33. };
  34. class Itemlist extends Component {
  35. constructor(props) {
  36. super(props);
  37. }
  38. render() {
  39. let pageData = this.props.pageData;
  40. return (
  41. <div className="clearfix" style={{ height: "30px", overflow: "hidden" }}>
  42. {pageData.labelA === '变更原因' ?
  43. <Form.Item
  44. label={pageData.labelA}
  45. {...pageData.formItemLayoutA}
  46. className="half-item"
  47. >
  48. <Tooltip placement="topLeft" title={pageData.dataA}>
  49. <div style={{
  50. width: '350px !important',
  51. whiteSpace: 'nowrap',
  52. wordBreak: 'break-all',
  53. overflow: 'hidden',
  54. textOverflow: 'ellipsis',
  55. }}>{pageData.dataA}</div>
  56. </Tooltip>
  57. </Form.Item> : <Form.Item
  58. label={pageData.labelA}
  59. {...pageData.formItemLayoutA}
  60. className="half-item"
  61. >
  62. <div>
  63. {pageData.dataA}
  64. {pageData.labelA === '客户名称' ?
  65. <EnterpriseNameChange
  66. type='journal'
  67. style={{ marginLeft: 10 }}
  68. enterpriseId={this.props.orderUid} /> : null
  69. }
  70. {pageData.labelA === '当前进度' &&
  71. <FlowChart
  72. id={this.props.id}
  73. />
  74. }
  75. </div>
  76. </Form.Item>}
  77. <Form.Item
  78. label={pageData.labelB}
  79. {...pageData.formItemLayoutB}
  80. className="half-item"
  81. >
  82. <span>{pageData.dataB}</span>
  83. </Form.Item>
  84. </div>
  85. );
  86. }
  87. }
  88. class ChangeDetail extends Component {
  89. constructor(props) {
  90. super(props);
  91. this.state = {
  92. rotateDeg: 0,
  93. voucherUrl: [],
  94. previewVisible: false,
  95. dataSource: [],
  96. // 累计回收退票
  97. refundInvoice: 0,
  98. // 退票数组
  99. contactList: [],
  100. rejectState: 0,
  101. // 收款信息
  102. proceedsData: [],
  103. proceedsTotal: this.props.proceedsTotal,
  104. // 开票信息
  105. invoiceData: [],
  106. invoiceTotal: this.props.invoiceTotal,
  107. cost: 10,
  108. refund: 8,
  109. // 测试添加退票
  110. contactList: this.props.contactList,
  111. ContactsLists: [
  112. {
  113. title: "金额(万元)",
  114. dataIndex: "amount",
  115. key: "amount",
  116. render: (text, record) => {
  117. return (
  118. <div>
  119. 实际回收退票(万元)
  120. <Input
  121. value={record.amount}
  122. placeholder="请输入金额(必填项)"
  123. disabled={record.load}
  124. key={record.id}
  125. required="required"
  126. onChange={e => {
  127. record.amount = e.target.value;
  128. this.setState({ contactList: this.state.contactList });
  129. }}
  130. style={{ width: "120px" }}
  131. />
  132. </div>
  133. );
  134. }
  135. },
  136. {
  137. title: "时间",
  138. dataIndex: "createTimes",
  139. key: "createTimes",
  140. render: (text, record) => {
  141. return <div>{record.createTimes}</div>;
  142. }
  143. }
  144. ]
  145. };
  146. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  147. this.downImg = this.downImg.bind(this);
  148. this.upImg = this.upImg.bind(this);
  149. this.rotate = this.rotate.bind(this);
  150. this.moneyOld = this.moneyOld.bind(this);
  151. this.getVoucherUrl = this.getVoucherUrl.bind(this);
  152. this.OrderChange = this.OrderChange.bind(this)
  153. }
  154. getOrgCodeUrl(e) {
  155. this.setState({
  156. orgCodeUrl: e
  157. });
  158. }
  159. componentDidMount() { }
  160. // loadData() {
  161. // $.ajax({
  162. // method: "get",
  163. // dataType: "json",
  164. // async: false,
  165. // crossDomain: false,
  166. // url: globalConfig.context + "/api/admin/orderChange/orderChangeLogList",
  167. // data: {
  168. // changeId: this.props.data.id
  169. // },
  170. // success: function(data) {
  171. // if (data.error.length || data.data.list == "") {
  172. // if (data.error && data.error.length) {
  173. // message.warning(data.error[0].message);
  174. // }
  175. // } else {
  176. // this.setState({
  177. // dataSource: data.data
  178. // });
  179. // }
  180. // }.bind(this)
  181. // });
  182. // }
  183. componentWillReceiveProps(nextProps) {
  184. this.setState({
  185. paymentTimes: nextProps.data.paymentTimes,
  186. paymentAmount: nextProps.data.paymentAmount,
  187. invoiceTimes: nextProps.data.invoiceTimes,
  188. invoiceAmount: nextProps.data.invoiceAmount,
  189. cwCost: nextProps.data.cwCost,
  190. refundableAmount: nextProps.data.refundableAmount,
  191. cwRemarks: nextProps.data.cwRemarks,
  192. contactList: nextProps.contactList,
  193. refundInvoice: nextProps.data.refundInvoice
  194. });
  195. }
  196. getVoucherUrl(e) {
  197. this.setState({
  198. voucherUrl: e
  199. });
  200. let url = ""
  201. e.forEach((item, index) => {
  202. if (item.response && item.response.data) {
  203. if (index < e.length - 1) {
  204. url += item.response.data + ","
  205. } else {
  206. url += item.response.data
  207. }
  208. }
  209. })
  210. this.setState({
  211. refundUrl: url
  212. })
  213. // console.log(this.state.refundUrl);
  214. }
  215. downImg() {
  216. let num = 0;
  217. for (let i = 0; i < this.props.pictureUrl.length; i++) {
  218. if (this.props.pictureUrl[i].url == this.state.previewImage) {
  219. num = i;
  220. }
  221. }
  222. if (num == this.props.pictureUrl.length - 1) {
  223. return message.warning("已经是最后一张了哦");
  224. }
  225. this.state.previewImage = this.props.pictureUrl[num + 1].url;
  226. this.setState({
  227. previewImage: this.state.previewImage,
  228. rotateDeg: 0
  229. });
  230. }
  231. upImg() {
  232. let num = 0;
  233. for (let i = 0; i < this.props.pictureUrl.length; i++) {
  234. if (this.props.pictureUrl[i].url == this.state.previewImage) {
  235. num = i;
  236. }
  237. }
  238. if (num == 0) {
  239. return message.warning("已经是第一张了哦");
  240. }
  241. this.state.previewImage = this.props.pictureUrl[num - 1].url;
  242. this.setState({
  243. previewImage: this.state.previewImage,
  244. rotateDeg: 0
  245. });
  246. }
  247. rotate() {
  248. let rotateDeg = this.state.rotateDeg + 90;
  249. this.setState({
  250. rotateDeg
  251. });
  252. }
  253. moneyOld(str, money) {
  254. if (money) {
  255. return (
  256. <span style={{ color: "red", fontWeight: 900, fontSize: 16 }}>
  257. {str}(原合同金额{money}万元)
  258. </span>
  259. );
  260. } else {
  261. return (
  262. <span style={{ color: "red", fontWeight: 900, fontSize: 16 }}>
  263. {str}
  264. </span>
  265. );
  266. }
  267. }
  268. OrderChange() {
  269. if (!this.state.refundUrl) {
  270. message.info("请上传凭证")
  271. return
  272. }
  273. this.setState({
  274. loading: true
  275. })
  276. $.ajax({
  277. url: globalConfig.context + "/api/admin/orderChange/completeOrderChange",
  278. method: "get",
  279. data: {
  280. orderNo: this.props.data.orderNo,
  281. type: this.props.data.type,
  282. id: this.props.id,
  283. attachmentUrl: this.state.refundUrl,
  284. },
  285. success: data => {
  286. if (data.data) {
  287. message.success("提交成功!");
  288. // window.location.reload();
  289. this.setState({
  290. loading: false
  291. })
  292. this.props.visitCancel()
  293. } else if (data.error && data.error.length) {
  294. message.warning(data.error[0].message)
  295. this.setState({
  296. loading: false
  297. });
  298. }
  299. }
  300. });
  301. }
  302. render() {
  303. // const loadData = [
  304. // {
  305. // labelA: "",
  306. // formItemLayoutA: formItemLayout,
  307. // dataA
  308. // }
  309. // ];
  310. const pageData = [
  311. {
  312. labelA: "客户名称",
  313. formItemLayoutA: formItemLayout,
  314. dataA: this.props.data.userName,
  315. labelB: "合同编号",
  316. formItemLayoutB: formItemLayout,
  317. dataB: this.props.data.contractNo
  318. },
  319. {
  320. labelA: "时间",
  321. formItemLayoutA: formItemLayout,
  322. dataA: this.props.data.createTimes,
  323. labelB: "发起人",
  324. formItemLayoutB: formItemLayout,
  325. dataB: this.props.data.applicant
  326. },
  327. {
  328. labelA: "当前进度",
  329. formItemLayoutA: formItemLayout,
  330. // 当前是咨询师以及咨询师经理时使用shenhePeo函数,其他流程正常显示
  331. dataA:
  332. this.props.data.processState == 3 || this.props.data.processState == 4
  333. ? shenghePeo(this.props.data.examineName, this.props.data.processState)
  334. : getProcessStatusNew(
  335. this.props.data.examineName,
  336. this.props.data.processState,
  337. this.props.data.status
  338. ),
  339. labelB: "变更类型",
  340. formItemLayoutB: formItemLayout,
  341. dataB: getChangeType(this.props.data.type)
  342. },
  343. {
  344. labelA: "合同额(万元)",
  345. formItemLayoutA: formItemLayout,
  346. dataA: this.moneyOld(this.props.data.totalAmount, this.props.money),
  347. labelB: "已收款(万元)",
  348. formItemLayoutB: formItemLayout,
  349. dataB: changeColor(this.props.data.settlementAmount)
  350. },
  351. {
  352. labelA: "欠款(万元)",
  353. formItemLayoutA: formItemLayout,
  354. dataA: changeColor(this.props.data.arrears),
  355. labelB: "申请退款(万元)",
  356. formItemLayoutB: formItemLayout,
  357. dataB: changeColor(this.props.data.changeAmount)
  358. },
  359. {
  360. labelA: "首付款(万元)",
  361. formItemLayoutA: formItemLayout,
  362. dataA: changeColor(this.props.data.firstAmount),
  363. },
  364. {
  365. labelA: "变更原因",
  366. formItemLayoutA: formItemLayout,
  367. dataA: this.props.data.remarks
  368. }
  369. ];
  370. const planData = [
  371. {
  372. labelA: "项目进度",
  373. formItemLayoutA: formItemLayout,
  374. dataA: this.props.data.projectState,
  375. labelB: "发生成本费用(万元)",
  376. formItemLayoutB: formItemLayout,
  377. dataB: this.props.data.zxsCost
  378. },
  379. {
  380. labelA: "备注",
  381. formItemLayoutA: formItemLayout,
  382. dataA: this.props.data.zxsRemarks
  383. }
  384. ];
  385. const financeData = [
  386. {
  387. labelA: "发生成本(万元)",
  388. formItemLayoutA: formItemLayout,
  389. dataA: this.props.data.cwCost,
  390. labelB: "应退金额(万元)",
  391. formItemLayoutB: formItemLayout,
  392. dataB: this.props.data.refundableAmount
  393. }
  394. ];
  395. const buttonData = [
  396. {
  397. name: "同意",
  398. title: "理由",
  399. placeholder: "请输入理由",
  400. type: "primary",
  401. status: 2,
  402. onChange: value => {
  403. this.setState({
  404. remarks: value
  405. });
  406. }
  407. },
  408. {
  409. name: "拒绝",
  410. title: "理由",
  411. placeholder: "请输入理由",
  412. type: "danger",
  413. status: 3,
  414. onChange: value => {
  415. this.setState({
  416. remarks: value
  417. });
  418. }
  419. }
  420. ];
  421. const orgCodeUrl = this.props.pictureUrl;
  422. const attachment = this.props.attachment
  423. return (
  424. <div className="clearfix changeDetail">
  425. <div
  426. className="clearfix"
  427. style={{ marginTop: 0 }}
  428. ref={(e) => {
  429. this.refs = e;
  430. }}
  431. >
  432. <div
  433. style={{
  434. borderRadius: "50%",
  435. width: 300,
  436. height: 300,
  437. position: "absolute",
  438. top: 230,
  439. left: 525,
  440. transform: "rotate(-5deg)",
  441. zIndex: 1,
  442. display:
  443. this.props.data.status == 4
  444. ? "block"
  445. : "none",
  446. }}
  447. >
  448. <img src={tongguo} style={{ width: "100%" }} />
  449. </div>
  450. <div
  451. style={{
  452. borderRadius: "50%",
  453. width: 300,
  454. height: 300,
  455. position: "absolute",
  456. top: 284,
  457. left: 586,
  458. transform: "rotate(-5deg)",
  459. zIndex: 1,
  460. display: this.props.data.status == 5 ? "block" : "none",
  461. }}
  462. >
  463. {/* <span
  464. style={{
  465. fontSize: 29,
  466. position: "absolute",
  467. left: "50%",
  468. top: "50%",
  469. transform: "translate(-50%,-50%)",
  470. color: "red"
  471. }}
  472. >
  473. 通过
  474. </span> */}
  475. <img src={quxiao} style={{ width: "63%" }} />
  476. </div>
  477. <h2 style={{ textAlign: "center", marginBottom: 10, marginTop: 20 }}>
  478. 合同变更记录
  479. </h2>
  480. {pageData.map((item, index) => {
  481. return <Itemlist key={index} pageData={item} orderUid={this.props.orderUid} id={this.props.id} />;
  482. })}
  483. <Form.Item
  484. label="变更凭证"
  485. labelCol={{ span: 4 }}
  486. wrapperCol={{ span: 18 }}
  487. >
  488. {orgCodeUrl ? <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
  489. <ImgList domId={this.props.domId ? this.props.domId + '1' : 'changeDetailYxy1'} fileList={orgCodeUrl} ItemWidth={'96px'} />
  490. </div> : <div />}
  491. <div style={{ marginLeft: '-60px' }}>
  492. <Rizhi changeId={this.props.id} />
  493. </div>
  494. </Form.Item>
  495. {/* {this.props.data.type === 0 && this.props.data.processState >= 2 ? (
  496. <div>
  497. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  498. 当前项目进度(咨询师经理填写)
  499. </h3>
  500. {planData.map((item, index) => {
  501. return <Itemlist key={index} pageData={item} />;
  502. })}
  503. </div>
  504. ) : (
  505. ""
  506. )} */}
  507. {/* <h2 style={{ textAlign: "center", marginBottom: 0 }}>变更日志</h2> */}
  508. {
  509. this.props.contractPictureUrl && this.props.contractPictureUrl.length != 0 &&
  510. <div className="clearfix">
  511. <Form.Item
  512. labelCol={{ span: 4 }}
  513. wrapperCol={{ span: 18 }}
  514. label="最新合同"
  515. >
  516. <div style={{ paddingTop: 10 }}>
  517. <ImgList
  518. domId={"zxht"}
  519. fileList={
  520. this.props.contractPictureUrl
  521. }
  522. ItemWidth={"96px"}
  523. />
  524. </div>
  525. </Form.Item>
  526. </div>
  527. }
  528. <ul
  529. style={{
  530. width: "868px",
  531. overflow: "hidden",
  532. paddingLeft: "90px",
  533. position: "relative",
  534. bottom: "20px",
  535. paddingTop: '28px'
  536. }}
  537. >
  538. {/* <span>操作人:</span> */}
  539. {this.props.dataSource.map((item, index) => {
  540. if (item.status == 0) {
  541. item.status = "发起";
  542. } else if (item.status == 1) {
  543. item.status = "审核中";
  544. } else if (item.status == 2) {
  545. item.status = "通过";
  546. } else if (item.status == 3) {
  547. item.status = "驳回";
  548. } else if (item.status == 4) {
  549. item.status = "完成";
  550. } else if (item.status == 5) {
  551. item.status = "撤销";
  552. }
  553. return (
  554. <li
  555. key={index}
  556. style={{
  557. width: "100%",
  558. height: "auto",
  559. wordBreak: "break-all",
  560. marginBottom: "10px",
  561. }}
  562. >
  563. {item.aname + ":" + "【" + item.status + "】" + item.remarks + "(" + item.createTimes + ")"}
  564. </li>
  565. );
  566. })}
  567. </ul>
  568. <ProAndCuiList id={this.props.id} />
  569. {/* 收款情况1 */}
  570. <div className="clearfix">
  571. <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
  572. 收款情况
  573. </h3>
  574. <div style={{ marginLeft: "90px" }}>
  575. <ul>
  576. {(this.props.proceedsData.bill || []).map((item, index) => (
  577. <li key={index}>
  578. {item.payTime +
  579. " " +
  580. item.aName +
  581. " 收款:" +
  582. item.transactionAmount +
  583. "万元"}
  584. </li>
  585. ))}
  586. </ul>
  587. <div>收款总计:{this.props.proceedsTotal}万元</div>
  588. </div>
  589. <br />
  590. <div style={{ marginLeft: "90px" }}>
  591. <ul>
  592. {(this.props.proceedsData.invoice || []).map((item, index) => (
  593. <li key={index}>
  594. {item.createTime + " " + " 开票:" + item.amount + "万元"}
  595. </li>
  596. ))}
  597. </ul>
  598. <div>开票总计:{this.props.invoiceTotal}万元</div>
  599. </div>
  600. <p style={{ marginLeft: "90px", color: "red" }}>
  601. 系统预估 产生成本(万元):
  602. {this.props.data.estimateCost
  603. ? this.props.data.estimateCost
  604. : "0"}{" "}
  605. &nbsp;应退金额(万元):
  606. {this.props.data.estimateRefundable
  607. ? this.props.data.estimateRefundable
  608. : "0"}
  609. </p>
  610. </div>
  611. {/* {this.props.data.type === 0 ? (
  612. <div>
  613. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  614. 当前项目进度(咨询师经理填写)
  615. </h3>
  616. {planData.map((item, index) => {
  617. return <Itemlist key={index} pageData={item} />;
  618. })}
  619. </div>
  620. ) : (
  621. ""
  622. )} */}
  623. {/* 当前财务状态 */}
  624. <div
  625. style={{
  626. display: this.props.data.processState > 6 ? "block" : "none",
  627. marginTop: '10px'
  628. }}
  629. >
  630. <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
  631. 当前财务状态(财务填写)
  632. </h3>
  633. {financeData.map((item, index) => {
  634. return <Itemlist key={index} pageData={item} orderUid={this.props.orderUid} />;
  635. })}
  636. </div>
  637. {/* 回收退票3 */}
  638. <div
  639. style={{
  640. display:
  641. (this.props.data.processState == 9 ||
  642. this.props.data.processState == 8 ||
  643. this.props.data.processState == 10) &&
  644. (this.props.data.status == 2 || this.props.data.status == 4 || this.props.data.status == 3 || this.props.data.status == 6)
  645. ? "block"
  646. : "none",
  647. marginTop: '10px'
  648. }}
  649. >
  650. <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
  651. 回收退票
  652. </h3>
  653. <Table
  654. size="middle"
  655. pagination={false}
  656. bordered
  657. columns={this.state.ContactsLists}
  658. dataSource={this.state.contactList}
  659. />
  660. </div>
  661. {/* 完成审核,上传附件 */}
  662. <div style={{
  663. position: "relative",
  664. display:
  665. (this.props.data.processState == 8 ||
  666. this.props.data.processState == 9 ||
  667. this.props.data.processState == 10) &&
  668. this.props.data.status == 2 || this.props.data.status == 4 || this.props.data.status == 3
  669. ? "block"
  670. : "none",
  671. marginTop: 10,
  672. }}
  673. >
  674. <hr
  675. style={{
  676. marginTop: 12,
  677. marginBottom: 10,
  678. backgroundColor: "black",
  679. height: 1,
  680. border: "none",
  681. }}
  682. />
  683. <h3
  684. style={{
  685. marginLeft: 20,
  686. fontWeight: 800,
  687. marginBottom: 10,
  688. display: "inline-block",
  689. }}
  690. >
  691. 完成审核,上传附件{" "}
  692. <span
  693. style={{ fontSize: 12, fontWeight: "normal", color: "red" }}
  694. >
  695. (注:由营销员上传变更后附件,全变更流程完成。)
  696. </span>
  697. </h3>
  698. <div>
  699. <Form.Item
  700. label="变更附件"
  701. labelCol={{ span: 4 }}
  702. wrapperCol={{ span: 18 }}
  703. >
  704. <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
  705. {attachment.length > 0 ? <ImgList domId={this.props.domId + 2 ? this.props.domId + 2 : 'hetongbiangenjiluyxy1'} fileList={attachment} ItemWidth={'96px'} /> : '无附件'}
  706. </div>
  707. <Modal
  708. maskClosable={false}
  709. footer={null}
  710. width={"50%"}
  711. visible={this.state.uploadVisible}
  712. onCancel={() => {
  713. this.setState({ uploadVisible: false, rotateDeg: 0 }, () => {
  714. // this.reset();
  715. });
  716. }}
  717. >
  718. <img
  719. alt=""
  720. style={{
  721. width: "100%",
  722. transform: `rotate(${this.state.rotateDeg}deg)`,
  723. }}
  724. src={this.state.previewImage || ""}
  725. />
  726. <Button
  727. onClick={this.rotate}
  728. style={{
  729. position: "relative",
  730. left: "50%",
  731. transform: "translateX(-50%)",
  732. }}
  733. >
  734. 旋转
  735. </Button>
  736. <Button
  737. onClick={this.upImg}
  738. style={{
  739. position: "absolute",
  740. left: -81,
  741. top: "50%",
  742. transform: "translateY(-50%)",
  743. }}
  744. >
  745. 上一张
  746. </Button>
  747. <Button
  748. onClick={this.downImg}
  749. style={{
  750. position: "absolute",
  751. right: -81,
  752. top: "50%",
  753. transform: "translateY(-50%)",
  754. }}
  755. >
  756. 下一张
  757. </Button>
  758. </Modal>
  759. {/* <Rizhi changeId={this.props.id} /> */}
  760. </Form.Item>
  761. </div>
  762. </div>
  763. {/* <div>
  764. 营销员变更
  765. </div> */}
  766. {/* 完成审核,上传附件 */}
  767. <div style={{
  768. position: "relative",
  769. display:
  770. (this.props.data.processState == 8 ||
  771. this.props.data.processState == 9 ||
  772. this.props.data.processState == 10) &&
  773. this.props.data.status == 6
  774. ? "block"
  775. : "none",
  776. marginTop: 10,
  777. }}
  778. >
  779. <hr
  780. style={{
  781. marginTop: 12,
  782. marginBottom: 10,
  783. backgroundColor: "black",
  784. height: 1,
  785. border: "none",
  786. }}
  787. />
  788. <h3
  789. style={{
  790. marginLeft: 20,
  791. fontWeight: 800,
  792. marginBottom: 10,
  793. display: "inline-block",
  794. }}
  795. >
  796. 完成审核,上传附件{" "}
  797. <span
  798. style={{ fontSize: 12, fontWeight: "normal", color: "red" }}
  799. >
  800. (注:由营销员上传变更后附件,全变更流程完成。)
  801. </span>
  802. </h3>
  803. <div>
  804. <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
  805. 变更附件:
  806. </h3>
  807. <div style={{ marginLeft: 20, display: 'inline-block' }}>
  808. <PicturesWall
  809. fileList={this.getVoucherUrl}
  810. pictureUrl={this.state.voucherUrl}
  811. url="/api/admin/orderChange/uploadChangeAttachment"
  812. sign="order_change_file"
  813. />
  814. </div>
  815. </div>
  816. </div>
  817. <div style={{ display: ' flex', justifyContent: 'center' }}>
  818. <Popconfirm
  819. title="确定提交附件,完成订单?"
  820. onConfirm={this.OrderChange}
  821. okText="确定"
  822. cancelText="取消">
  823. <Button
  824. type="primary"
  825. shape="round"
  826. size="large"
  827. style={{
  828. display:
  829. (this.props.data.processState == 8 ||
  830. this.props.data.processState == 9 ||
  831. this.props.data.processState == 10) &&
  832. this.props.data.status == 6
  833. ? "block"
  834. : "none",
  835. }}
  836. // onClick={this.OrderChange}
  837. >
  838. 提交附件,完成订单
  839. </Button>
  840. </Popconfirm>
  841. </div>
  842. {/* <ul>
  843. <span>备注</span>
  844. {this.state.dataSource.map((item, index) => (
  845. <li key={index}>{item.remarks}</li>
  846. ))}
  847. </ul> */}
  848. {/* {this.props.data.type === 0 ? (
  849. this.props.data.processState >= 5 ? (
  850. <div style={{ marginTop: "20px" }}>
  851. <h3
  852. style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}
  853. >
  854. 当前财务状态(财务填写)
  855. </h3>
  856. {financeData.map((item, index) => {
  857. return <Itemlist key={index} pageData={item} />;
  858. })}
  859. </div>
  860. ) : (
  861. ""
  862. )
  863. ) : this.props.data.status === 4 ? (
  864. <div>
  865. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  866. 当前财务状态(财务填写)
  867. </h3>
  868. {financeData.map((item, index) => {
  869. return <Itemlist key={index} pageData={item} />;
  870. })}
  871. </div>
  872. ) : (
  873. ""
  874. )} */}
  875. <div
  876. style={{
  877. display:
  878. (this.props.data.processState == 8 ||
  879. this.props.data.processState == 9 ||
  880. this.props.data.processState == 10) &&
  881. this.props.data.status == 4 &&
  882. this.props.data.refundStatus
  883. ? "block"
  884. : "none",
  885. }}
  886. >
  887. <Refund data={this.props.data} id={this.props.id} />
  888. </div>
  889. </div>
  890. {this.props.processState === this.props.data.processState &&
  891. this.props.data.status != 5 ? (
  892. <div
  893. className="clearfix"
  894. style={{ display: "flex", justifyContent: "space-around" }}
  895. >
  896. {buttonData.map((item, index) => {
  897. return (
  898. <AgreeButton
  899. data={item}
  900. key={index}
  901. backData={this.props.data}
  902. processState={this.props.processState}
  903. onCancel={this.props.onCancel}
  904. />
  905. );
  906. })}
  907. </div>
  908. ) : (
  909. ""
  910. )}
  911. <ReactToPrint
  912. trigger={() => (
  913. <Button
  914. type="primary"
  915. style={{
  916. float: "right",
  917. marginTop: 10,
  918. position: "absolute",
  919. top: 0,
  920. right: 30,
  921. display:
  922. (this.props.data.processState == 8 ||
  923. this.props.data.processState == 9 ||
  924. this.props.data.processState == 10) &&
  925. this.props.data.status == 4
  926. ? "block"
  927. : "block",
  928. }}
  929. >
  930. 打印
  931. </Button>
  932. )}
  933. content={() => this.refs}
  934. />
  935. </div>
  936. );
  937. }
  938. }
  939. export { ChangeDetail };