changeDetailCwzy.js 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497
  1. import React, { Component } from "react";
  2. import {
  3. Form,
  4. Upload,
  5. Modal,
  6. Input,
  7. DatePicker,
  8. Button,
  9. message,
  10. Select,
  11. Table,
  12. Popconfirm,
  13. } from "antd";
  14. import AgreeButton from "./agreeButton.js";
  15. import Rizhi from "./rizhi.js";
  16. import moment from "moment";
  17. import { getProcessStatusNew, moneyVerify } from "@/tools.js";
  18. import { shenghePeo, changeColor } from "@/tools.js";
  19. import $ from "jquery/src/ajax";
  20. import ReactToPrint from "react-to-print";
  21. import tongguo from "../../../../../../image/tongguo.png";
  22. import ProAndCuiList from "./proAndCuiList.jsx";
  23. const { RangePicker } = DatePicker;
  24. const formItemLayout = {
  25. labelCol: { span: 8 },
  26. wrapperCol: { span: 14 }
  27. };
  28. const changeType = [
  29. {
  30. value: "0",
  31. key: "退单退款"
  32. },
  33. {
  34. value: "1",
  35. key: "项目及金额变更"
  36. },
  37. {
  38. value: "2",
  39. key: "仅项目变更"
  40. },
  41. {
  42. value: "3",
  43. key: "仅金额变更"
  44. },
  45. {
  46. value: "4",
  47. key: "重报"
  48. },
  49. {
  50. value: "5",
  51. key: "赠送"
  52. }
  53. ];
  54. const getChangeType = function(e) {
  55. if (e || e == 0) {
  56. let str = e.toString();
  57. let theType = "";
  58. changeType.map(function(item) {
  59. if (item.value == str) {
  60. theType = item.key;
  61. }
  62. });
  63. return theType;
  64. }
  65. };
  66. class Itemlist extends Component {
  67. constructor(props) {
  68. super(props);
  69. }
  70. render() {
  71. let pageData = this.props.pageData;
  72. return (
  73. <div className="clearfix">
  74. <Form.Item
  75. label={pageData.labelA}
  76. {...pageData.formItemLayoutA}
  77. className="half-item"
  78. style={{ marginBottom: "-5px" }}
  79. >
  80. <p style={{ width: 731, wordWrap: "break-word" }}>{pageData.dataA}</p>
  81. </Form.Item>
  82. <Form.Item
  83. label={pageData.labelB}
  84. {...pageData.formItemLayoutB}
  85. className="half-item"
  86. style={{ marginBottom: "-5px" }}
  87. >
  88. <span>{pageData.dataB}</span>
  89. </Form.Item>
  90. </div>
  91. );
  92. }
  93. }
  94. class ItemInput extends Component {
  95. constructor(props) {
  96. super(props);
  97. this.state = {
  98. valueA: "",
  99. valueB: ""
  100. };
  101. }
  102. componentWillReceiveProps(nextProps) {
  103. if (!nextProps.reset) {
  104. this.reset();
  105. }
  106. }
  107. reset() {
  108. this.setState({
  109. valueA: "",
  110. valueB: ""
  111. });
  112. }
  113. render() {
  114. let pageData = this.props.pageData;
  115. return (
  116. <div className="clearfix">
  117. <Form.Item
  118. label={pageData.labelA}
  119. {...pageData.formItemLayoutA}
  120. className="half-item"
  121. >
  122. <Input
  123. value={this.state.valueA}
  124. placeholder={"请输入" + pageData.labelA}
  125. style={{ width: 160 }}
  126. onChange={e => {
  127. this.setState({ valueA: e.target.value });
  128. pageData.onChangeA(e.target.value);
  129. }}
  130. />
  131. </Form.Item>
  132. <Form.Item
  133. label={pageData.labelB}
  134. {...pageData.formItemLayoutB}
  135. className="half-item"
  136. >
  137. {pageData.mark ? (
  138. <Input
  139. value={this.state.valueB}
  140. placeholder={"请输入" + pageData.labelB}
  141. style={{ width: 160 }}
  142. onChange={e => {
  143. this.setState({ valueB: e.target.value });
  144. pageData.onChangeB(e.target.value);
  145. }}
  146. />
  147. ) : (
  148. ""
  149. )}
  150. </Form.Item>
  151. </div>
  152. );
  153. }
  154. }
  155. class ChangeDetail extends Component {
  156. constructor(props) {
  157. super(props);
  158. this.state = {
  159. rotateDeg: 0,
  160. previewVisible: false,
  161. buttonStatus: true,
  162. changeType: 2,
  163. dataSource: [],
  164. reason: "",
  165. // 累计回收退票
  166. refundInvoice: 0,
  167. // 退票数组
  168. contactList: [],
  169. rejectState: 0,
  170. // 收款信息
  171. proceedsData: [],
  172. proceedsTotal: this.props.proceedsTotal,
  173. // 开票信息
  174. invoiceData: [],
  175. invoiceTotal: this.props.invoiceTotal,
  176. cost: 10,
  177. refund: 8,
  178. // 测试添加退票
  179. contactList: this.props.contactList,
  180. ContactsLists: [
  181. {
  182. title: "金额(万元)",
  183. dataIndex: "amount",
  184. key: "amount",
  185. render: (text, record) => {
  186. return (
  187. <div>
  188. 实际回收退票(万元)
  189. <Input
  190. value={record.amount}
  191. placeholder="请输入金额(必填项)"
  192. disabled={record.load}
  193. key={record.id}
  194. required="required"
  195. onChange={e => {
  196. record.amount = e.target.value;
  197. this.setState({ contactList: this.state.contactList });
  198. }}
  199. style={{ width: "120px" }}
  200. />
  201. </div>
  202. );
  203. }
  204. },
  205. {
  206. title: "时间",
  207. dataIndex: "createTimes",
  208. key: "createTimes",
  209. render: (text, record) => {
  210. return (
  211. <div>
  212. {/* <DatePicker
  213. showTime
  214. placeholder="请输入退票时间"
  215. onChange={v => {
  216. record.time = v._d;
  217. this.setState({ contactList: this.state.contactList });
  218. }}
  219. onOk={v => {
  220. record.time = v._d;
  221. this.setState({ contactList: this.state.contactList });
  222. console.log(this.state);
  223. }}
  224. /> */}
  225. {record.createTimes}
  226. </div>
  227. );
  228. }
  229. },
  230. {
  231. title: "操作",
  232. dataIndex: "dels",
  233. key: "dels",
  234. render: (text, record, index) => {
  235. return (
  236. <div
  237. style={{
  238. display:
  239. (this.props.data.processState == 7 ||
  240. this.props.data.processState == 8) &&
  241. this.props.data.status == 4
  242. ? "none"
  243. : "block"
  244. }}
  245. >
  246. <Popconfirm
  247. title="是否删除?"
  248. onConfirm={() => {
  249. this.confirmDelet(record);
  250. }}
  251. okText="删除"
  252. cancelText="不删除"
  253. >
  254. <Button
  255. style={{
  256. marginRight: "10px",
  257. color: "#ffffff",
  258. background: "#f00",
  259. border: "none"
  260. }}
  261. >
  262. 删除
  263. </Button>
  264. </Popconfirm>
  265. {record.load != true ? (
  266. <Button
  267. type="primary"
  268. onClick={() => {
  269. this.contactSave(record);
  270. }}
  271. >
  272. 保存
  273. </Button>
  274. ) : (
  275. ""
  276. )}
  277. </div>
  278. );
  279. }
  280. }
  281. ]
  282. };
  283. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  284. this.changeButtonStatus = this.changeButtonStatus.bind(this);
  285. this.reset = this.reset.bind(this);
  286. this.addcontact = this.addcontact.bind(this);
  287. this.contactSave = this.contactSave.bind(this);
  288. this.confirmDelet = this.confirmDelet.bind(this);
  289. this.finish = this.finish.bind(this);
  290. this.reload = this.reLoad.bind(this);
  291. this.downImg = this.downImg.bind(this);
  292. this.upImg = this.upImg.bind(this);
  293. this.rotate = this.rotate.bind(this);
  294. this.moneyOld = this.moneyOld.bind(this);
  295. }
  296. componentWillReceiveProps(nextProps) {
  297. this.setState({
  298. paymentTimes: nextProps.data.paymentTimes,
  299. paymentAmount: nextProps.data.paymentAmount,
  300. invoiceTimes: nextProps.data.invoiceTimes,
  301. invoiceAmount: nextProps.data.invoiceAmount,
  302. cwCost: nextProps.data.cwCost,
  303. refundableAmount: nextProps.data.refundableAmount,
  304. cwRemarks: nextProps.data.cwRemarks,
  305. contactList: nextProps.contactList,
  306. refundInvoice: nextProps.data.refundInvoice
  307. });
  308. if (!nextProps.reset) {
  309. this.reset();
  310. }
  311. }
  312. moneyOld(str, money) {
  313. if (money) {
  314. return (
  315. <span style={{ color: "red", fontWeight: 900, fontSize: 16 }}>
  316. {str}(原合同金额{money}万元)
  317. </span>
  318. );
  319. } else {
  320. return (
  321. <span style={{ color: "red", fontWeight: 900, fontSize: 16 }}>
  322. {str}
  323. </span>
  324. );
  325. }
  326. }
  327. componentDidMount() {
  328. window.setTimeout(() => {
  329. const contactList = this.props.contactList;
  330. contactList.forEach(item => {
  331. item.load = true;
  332. });
  333. this.setState({
  334. contactList
  335. });
  336. }, 0);
  337. }
  338. // componentDidMount() {
  339. // console.log("--",this.props.dataSource[0].orderNo);
  340. // $.ajax({
  341. // method: "post",
  342. // dataType: "json",
  343. // crossDomain: false,
  344. // url:
  345. // globalConfig.context +
  346. // "/api/admin/orderChange/listOrderInvoiceAndBill",
  347. // data: {
  348. // orderNo: this.props.dataSource[0].orderNo,
  349. // },
  350. // success: function(data) {
  351. // console.log("看看",this.props);
  352. // }.bind(this)
  353. // });
  354. // }
  355. downImg() {
  356. let num = 0;
  357. for (let i = 0; i < this.props.pictureUrl.length; i++) {
  358. if (this.props.pictureUrl[i].url == this.state.previewImage) {
  359. num = i;
  360. }
  361. }
  362. if (num == this.props.pictureUrl.length - 1) {
  363. return message.warning("已经是最后一张了哦");
  364. }
  365. this.state.previewImage = this.props.pictureUrl[num + 1].url;
  366. this.setState({
  367. previewImage: this.state.previewImage,
  368. rotateDeg: 0
  369. });
  370. }
  371. upImg() {
  372. let num = 0;
  373. for (let i = 0; i < this.props.pictureUrl.length; i++) {
  374. if (this.props.pictureUrl[i].url == this.state.previewImage) {
  375. num = i;
  376. }
  377. }
  378. if (num == 0) {
  379. return message.warning("已经是第一张了哦");
  380. }
  381. this.state.previewImage = this.props.pictureUrl[num - 1].url;
  382. this.setState({
  383. previewImage: this.state.previewImage,
  384. rotateDeg: 0
  385. });
  386. }
  387. rotate() {
  388. let rotateDeg = this.state.rotateDeg + 90;
  389. this.setState({
  390. rotateDeg
  391. });
  392. }
  393. reset() {
  394. this.setState({
  395. paymentTimes: null,
  396. paymentAmount: "",
  397. invoiceTimes: null,
  398. invoiceAmount: "",
  399. cwCost: "",
  400. refundableAmount: "",
  401. cwRemarks: ""
  402. });
  403. }
  404. getOrgCodeUrl(e) {
  405. this.setState({
  406. orgCodeUrl: e
  407. });
  408. }
  409. // //查看催款节点
  410. // loaduserss(record) {
  411. // this.state.orderList = [];
  412. // this.setState({
  413. // orderNoss: record ? record.orderNo : this.props.datauser.orderNo
  414. // });
  415. // $.ajax({
  416. // method: "get",
  417. // dataType: "json",
  418. // crossDomain: false,
  419. // url: globalConfig.context + "/api/admin/newOrder/selectOrderDun",
  420. // data: {
  421. // orderNo: record ? record.orderNo : this.props.datauser.orderNo
  422. // },
  423. // success: function(data) {
  424. // let theArr = [];
  425. // let thisData = [];
  426. // if (!thisData) {
  427. // if (data.error && data.error.length) {
  428. // message.warning(data.error[0].message);
  429. // }
  430. // thisData = {};
  431. // } else {
  432. // for (let i = 0; i < data.data.length; i++) {
  433. // thisData = data.data[i];
  434. // theArr.push({
  435. // key: i,
  436. // dunSubject: thisData.dunSubject
  437. // ? thisData.dunSubject.toString()
  438. // : "", //催款科目
  439. // id: thisData.id, //节点Id
  440. // money: thisData.money, //催款金额
  441. // dunStatus: thisData.dunStatus, //催款状态
  442. // orderNo: record ? record.orderNo : this.props.datauser.orderNo
  443. // });
  444. // }
  445. // this.setState({
  446. // contactList: theArr
  447. // });
  448. // }
  449. // }.bind(this)
  450. // }).always(
  451. // function() {
  452. // this.setState({
  453. // loading: false
  454. // });
  455. // }.bind(this)
  456. // );
  457. // }
  458. timestampToTime(timestamp) {
  459. var date = new Date(timestamp); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
  460. var Y = date.getFullYear() + "-";
  461. var M =
  462. (date.getMonth() + 1 < 10
  463. ? "0" + (date.getMonth() + 1)
  464. : date.getMonth() + 1) + "-";
  465. var D = date.getDate() + " ";
  466. var h = date.getHours() + ":";
  467. var m = date.getMinutes() + ":";
  468. var s = date.getSeconds();
  469. return Y + M + D + h + m + s;
  470. }
  471. reLoad() {
  472. $.ajax({
  473. method: "get",
  474. dataType: "json",
  475. crossDomain: false,
  476. url:
  477. globalConfig.context + "/api/admin/orderChange/listOrderRefundInvoice",
  478. data: {
  479. orderNo: this.props.data.orderNo
  480. },
  481. success: data => {
  482. if (!data) return;
  483. data.data.forEach(item => {
  484. item.load = true;
  485. });
  486. this.setState({
  487. contactList: data.data
  488. });
  489. }
  490. });
  491. }
  492. // 完成订单
  493. finish() {
  494. $.ajax({
  495. url: globalConfig.context + "/api/admin/orderChange/completeOrderChange",
  496. method: "get",
  497. data: {
  498. orderNo: this.props.data.orderNo,
  499. type: this.props.data.type,
  500. id: this.props.data.id
  501. },
  502. success: data => {
  503. if (data) {
  504. message.success("保存成功!");
  505. window.location.reload();
  506. }
  507. }
  508. });
  509. }
  510. contactSave(index) {
  511. if (this.state.contactList) {
  512. let Data = this.state.contactList;
  513. for (var a = 0; a < Data.length; a++) {
  514. if (Data[a].amount == "") {
  515. message.warning("退票金额不能为空");
  516. // this.refs.signFirstPayment.focus();
  517. return false;
  518. }
  519. }
  520. }
  521. // this.setState({
  522. // loading: true
  523. // });
  524. $.ajax({
  525. url:
  526. globalConfig.context + "/api/admin/orderChange/addOrderRefundInvoice",
  527. method: "post",
  528. data: {
  529. orderNo: this.props.data.orderNo,
  530. amount: index.amount
  531. }
  532. }).done(
  533. function(data) {
  534. if (!data.error.length) {
  535. message.success("保存成功!");
  536. let num = 0;
  537. this.state.contactList.forEach(item => {
  538. num += +item.amount;
  539. // if (item.key == index.key) {
  540. // item.load = true;
  541. // let time = this.timestampToTime(new Date().getTime());
  542. // item.createTimes = time;
  543. // }
  544. });
  545. this.setState({
  546. contactList: this.state.contactList,
  547. refundInvoice: num
  548. });
  549. this.reLoad();
  550. console.log("bug", this.state);
  551. } else {
  552. message.warning(data.error[0].message);
  553. }
  554. }.bind(this)
  555. );
  556. }
  557. //点击新增催款节点
  558. addcontact() {
  559. // let key = this.state.contactList.length
  560. // if(key == 0) {
  561. // key
  562. // }
  563. this.state.contactList.push({
  564. key: this.state.contactList.length,
  565. amount: "",
  566. createTime: undefined
  567. // orderNo: this.state.orderNoss,
  568. // dunTarget: this.state.kehuId
  569. });
  570. this.setState({
  571. contactList: this.state.contactList
  572. });
  573. }
  574. //删除收款节点
  575. confirmDelet(index) {
  576. // if (index.id) {
  577. // this.state.contactList.splice(index.key, 1);
  578. // this.setState({
  579. // contactList: this.state.contactList
  580. // });
  581. // this.contactSave();
  582. // } else {
  583. // this.state.contactList.splice(index.key, 1);
  584. // this.setState({
  585. // contactList: this.state.contactList
  586. // });
  587. // }
  588. // if(this.state.contactList.length == 1) {
  589. // this.state.contactList = []
  590. // this.setState({
  591. // contactList: this.state.contactList
  592. // });
  593. // return
  594. // }
  595. // let num = index.key
  596. // if (this.state.contactList[num + 1].key) {
  597. // this.state.contactList[num + 1].key = index.key;
  598. // }
  599. if (index.key || !index.id) {
  600. let num = this.state.contactList.findIndex(item => item.key == index.key);
  601. this.state.contactList.splice(num, 1);
  602. let total = 0;
  603. this.state.contactList.forEach(item => {
  604. total += +item.amount;
  605. });
  606. this.setState({
  607. contactList: this.state.contactList,
  608. refundInvoice: total
  609. });
  610. } else {
  611. $.ajax({
  612. url:
  613. globalConfig.context +
  614. "/api/admin/orderChange/deleteOrderRefundInvoice",
  615. method: "post",
  616. data: {
  617. id: index.id
  618. }
  619. }).done(
  620. function(data) {
  621. if (!data.error.length) {
  622. message.success("删除成功!");
  623. this.reLoad();
  624. } else {
  625. message.warning(data.error[0].message);
  626. }
  627. }.bind(this)
  628. );
  629. }
  630. // console.log(this.state.contactList[num + 1].key);
  631. }
  632. // loadData() {
  633. // $.ajax({
  634. // method: "get",
  635. // dataType: "json",
  636. // async: false,
  637. // crossDomain: false,
  638. // url: globalConfig.context + "/api/admin/orderChange/orderChangeLogList",
  639. // data: {
  640. // changeId: this.props.data.id
  641. // },
  642. // success: function(data) {
  643. // if (data.error.length || data.data.list == "") {
  644. // if (data.error && data.error.length) {
  645. // message.warning(data.error[0].message);
  646. // }
  647. // } else {
  648. // this.setState({
  649. // dataSource: data.data
  650. // });
  651. // }
  652. // }.bind(this)
  653. // });
  654. // }
  655. //同意拒绝按钮的有无
  656. changeButtonStatus() {
  657. this.setState({
  658. buttonStatus: !this.state.buttonStatus
  659. });
  660. }
  661. onRef(ref) {
  662. this.fun = ref;
  663. }
  664. render() {
  665. const pageData = [
  666. {
  667. labelA: "客户名称",
  668. formItemLayoutA: formItemLayout,
  669. dataA: this.props.data.userName,
  670. labelB: "合同编号",
  671. formItemLayoutB: formItemLayout,
  672. dataB: this.props.data.contractNo
  673. },
  674. {
  675. labelA: "时间",
  676. formItemLayoutA: formItemLayout,
  677. dataA: this.props.data.createTimes,
  678. labelB: "发起人",
  679. formItemLayoutB: formItemLayout,
  680. dataB: this.props.data.applicant
  681. },
  682. {
  683. labelA: "当前进度",
  684. formItemLayoutA: formItemLayout,
  685. // 当前是咨询师以及咨询师经理时使用shenhePeo函数,其他流程正常显示
  686. dataA:
  687. this.props.data.processState == 2 || this.props.data.processState == 3
  688. ? shenghePeo(
  689. this.props.data.processState == 2
  690. ? this.props.data.consultantExamine
  691. : this.props.data.managerExamine,
  692. this.props.data.processState
  693. )
  694. : getProcessStatusNew(
  695. this.props.data.processState,
  696. this.props.data.status
  697. ),
  698. labelB: "变更类型",
  699. formItemLayoutB: formItemLayout,
  700. dataB: getChangeType(this.props.data.type)
  701. },
  702. {
  703. labelA: "合同额(万元)",
  704. formItemLayoutA: formItemLayout,
  705. dataA: this.moneyOld(this.props.data.totalAmount, this.props.money),
  706. labelB: "已收款(万元)",
  707. formItemLayoutB: formItemLayout,
  708. dataB: changeColor(this.props.data.settlementAmount)
  709. },
  710. {
  711. labelA: "欠款(万元)",
  712. formItemLayoutA: formItemLayout,
  713. dataA: changeColor(this.props.data.arrears),
  714. labelB: "申请退款(万元)",
  715. formItemLayoutB: formItemLayout,
  716. dataB: changeColor(this.props.data.changeAmount)
  717. },
  718. {
  719. labelA: "变更原因",
  720. formItemLayoutA: formItemLayout,
  721. dataA: this.props.data.remarks
  722. }
  723. ];
  724. const planData = [
  725. {
  726. labelA: "项目进度",
  727. formItemLayoutA: formItemLayout,
  728. dataA: this.props.data.projectState,
  729. onChangeA: value => {
  730. this.setState({
  731. projectState: value
  732. });
  733. },
  734. labelB: "发生成本费用(万元)",
  735. formItemLayoutB: formItemLayout,
  736. dataB: this.props.data.zxsCost,
  737. onChangeB: value => {
  738. this.setState({
  739. zxsCost: value
  740. });
  741. }
  742. },
  743. {
  744. labelA: "备注",
  745. formItemLayoutA: formItemLayout,
  746. dataA: this.props.data.zxsRemarks,
  747. onChangeA: value => {
  748. this.setState({
  749. zxsRemarks: value
  750. });
  751. }
  752. }
  753. ];
  754. const financeData = [
  755. {
  756. labelA: "发生成本(万元)",
  757. formItemLayoutA: formItemLayout,
  758. dataA: this.props.data.cwCost ? this.props.data.cwCost : "0",
  759. onChangeA: value => {
  760. this.setState({
  761. cwCost: value
  762. });
  763. },
  764. labelB: "应退金额(万元)",
  765. formItemLayoutB: formItemLayout,
  766. dataB: this.props.data.refundableAmount
  767. ? this.props.data.refundableAmount
  768. : "0",
  769. onChangeB: value => {
  770. this.setState({
  771. refundableAmount: value
  772. });
  773. },
  774. mark: true
  775. }
  776. // {
  777. // labelA: "备注",
  778. // formItemLayoutA: formItemLayout,
  779. // dataA: this.props.data.cwRemarks,
  780. // onChangeA: value => {
  781. // this.setState({
  782. // reason: value
  783. // });
  784. // },
  785. // mark: false
  786. // }
  787. ];
  788. const buttonData = [
  789. {
  790. name: "同意",
  791. title: "理由",
  792. placeholder: "请输入理由",
  793. type: "primary",
  794. status: 2,
  795. onChange: value => {
  796. this.setState({
  797. remarks: value
  798. });
  799. }
  800. },
  801. {
  802. name: "拒绝",
  803. title: "理由",
  804. placeholder: "请输入理由",
  805. type: "danger",
  806. status: 3,
  807. onChange: value => {
  808. this.setState({
  809. remarks: value
  810. });
  811. }
  812. }
  813. ];
  814. const orgCodeUrl = this.props.pictureUrl;
  815. return (
  816. <div className="clearfix changeDetail">
  817. <div
  818. className="clearfix"
  819. ref={e => {
  820. this.refs = e;
  821. }}
  822. >
  823. <div
  824. style={{
  825. borderRadius: "50%",
  826. width: 300,
  827. height: 300,
  828. position: "absolute",
  829. top: 230,
  830. left: 525,
  831. transform: "rotate(-5deg)",
  832. zIndex: 1,
  833. display:
  834. (this.props.data.processState == 7 ||
  835. this.props.data.processState == 8) &&
  836. this.props.data.status == 4
  837. ? "block"
  838. : "none"
  839. }}
  840. >
  841. {/* <span
  842. style={{
  843. fontSize: 29,
  844. position: "absolute",
  845. left: "50%",
  846. top: "50%",
  847. transform: "translate(-50%,-50%)",
  848. color: "red"
  849. }}
  850. >
  851. 通过
  852. </span> */}
  853. <img src={tongguo} style={{ width: "100%" }} />
  854. </div>
  855. <h2 style={{ textAlign: "center", marginBottom: 10, marginTop: 20 }}>
  856. 合同变更记录
  857. </h2>
  858. {pageData.map((item, index) => {
  859. return <Itemlist key={index} pageData={item} />;
  860. })}
  861. <Form.Item
  862. label="变更凭证"
  863. labelCol={{ span: 4 }}
  864. wrapperCol={{ span: 18 }}
  865. >
  866. <Upload
  867. className="demandDetailShow-upload"
  868. listType="picture-card"
  869. fileList={orgCodeUrl}
  870. onPreview={file => {
  871. this.setState({
  872. previewImage: file.url || file.thumbUrl,
  873. previewVisible: true
  874. });
  875. }}
  876. />
  877. <Modal
  878. maskClosable={false}
  879. footer={null}
  880. visible={this.state.previewVisible}
  881. onCancel={() => {
  882. this.setState({ previewVisible: false, rotateDeg: 0 }, () => {
  883. this.reset();
  884. });
  885. }}
  886. >
  887. <img
  888. alt=""
  889. style={{
  890. width: "100%",
  891. transform: `rotate(${this.state.rotateDeg}deg)`
  892. }}
  893. src={this.state.previewImage || ""}
  894. />
  895. <Button
  896. onClick={this.rotate}
  897. style={{
  898. position: "relative",
  899. left: "50%",
  900. transform: "translateX(-50%)"
  901. }}
  902. >
  903. 旋转
  904. </Button>
  905. <Button
  906. onClick={this.upImg}
  907. style={{
  908. position: "absolute",
  909. left: -81,
  910. top: "50%",
  911. transform: "translateY(-50%)"
  912. }}
  913. >
  914. 上一张
  915. </Button>
  916. <Button
  917. onClick={this.downImg}
  918. style={{
  919. position: "absolute",
  920. right: -81,
  921. top: "50%",
  922. transform: "translateY(-50%)"
  923. }}
  924. >
  925. 下一张
  926. </Button>
  927. </Modal>
  928. <Rizhi changeId={this.props.data.id} />
  929. </Form.Item>
  930. <ul
  931. style={{
  932. width: "868px",
  933. overflow: "hidden",
  934. paddingLeft: "90px",
  935. paddingTop: "10px",
  936. position: "relative",
  937. bottom: "20px",
  938. fontSize: "12px",
  939. color: "rgba(0, 0, 0, 0.65)"
  940. }}
  941. >
  942. {/* <span>操作人:</span> */}
  943. {this.props.dataSource.map((item, index) => {
  944. if (item.status == 0) {
  945. item.status = "发起";
  946. } else if (item.status == 1) {
  947. item.status = "审核中";
  948. } else if (item.status == 2) {
  949. item.status = "通过";
  950. } else if (item.status == 3) {
  951. item.status = "驳回";
  952. } else if (item.status == 4) {
  953. item.status = "完成";
  954. }
  955. return (
  956. <li
  957. key={index}
  958. style={{
  959. width: "100%",
  960. height: "auto",
  961. wordBreak: "break-all",
  962. marginBottom: "10px"
  963. }}
  964. >
  965. {item.aname + ":" + "(" + item.status + ")" + item.remarks}
  966. </li>
  967. );
  968. })}
  969. </ul>
  970. <ProAndCuiList id={this.props.id} />
  971. <div className="clearfix">
  972. <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
  973. 收款情况
  974. </h3>
  975. <div style={{ marginLeft: "90px" }}>
  976. <ul style={{ fontSize: "12px", color: "rgba(0, 0, 0, 0.65)" }}>
  977. {(this.props.proceedsData.bill || []).map((item, index) => (
  978. <li key={index}>
  979. {item.payTime +
  980. " " +
  981. item.aName +
  982. " 收款:" +
  983. item.transactionAmount +
  984. "万元"}
  985. </li>
  986. ))}
  987. </ul>
  988. <div>收款总计:{this.props.proceedsTotal}万元</div>
  989. </div>
  990. <br />
  991. <div style={{ marginLeft: "90px" }}>
  992. <ul style={{ fontSize: "12px", color: "rgba(0, 0, 0, 0.65)" }}>
  993. {(this.props.proceedsData.invoice || []).map((item, index) => (
  994. <li key={index}>
  995. {item.createTime + " " + " 开票:" + item.amount + "万元"}
  996. </li>
  997. ))}
  998. </ul>
  999. <div>开票总计:{this.props.invoiceTotal}万元</div>
  1000. </div>
  1001. <p style={{ marginLeft: "90px", color: "red" }}>
  1002. 系统预估 产生成本(万元):
  1003. {this.props.data.estimateCost
  1004. ? this.props.data.estimateCost
  1005. : "0"}{" "}
  1006. &nbsp;应退金额(万元):
  1007. {this.props.data.estimateRefundable
  1008. ? this.props.data.estimateRefundable
  1009. : "0"}
  1010. </p>
  1011. </div>
  1012. {/* {this.props.data.type === 0 ? (
  1013. <div>
  1014. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  1015. 当前项目进度(咨询师经理填写)
  1016. </h3>
  1017. {planData.map((item, index) => {
  1018. return <Itemlist key={index} pageData={item} />;
  1019. })}
  1020. </div>
  1021. ) : (
  1022. ""
  1023. )} */}
  1024. <div
  1025. style={{
  1026. display:
  1027. (this.props.data.processState == 8 ||
  1028. this.props.data.processState == 7) &&
  1029. (this.props.data.status == 2 || this.props.data.status == 4)
  1030. ? "block"
  1031. : "none"
  1032. }}
  1033. >
  1034. <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
  1035. 回收退票
  1036. </h3>
  1037. {/* {this.state.processStatus == 0 ? ( */}
  1038. <Button
  1039. type="primary"
  1040. onClick={this.addcontact}
  1041. style={{
  1042. float: "right",
  1043. marginRight: "50px",
  1044. marginBottom: "15px",
  1045. position: "relative",
  1046. zIndex: "999",
  1047. display:
  1048. (this.props.data.processState == 7 ||
  1049. this.props.data.processState == 8) &&
  1050. this.props.data.status == 4
  1051. ? "none"
  1052. : "block"
  1053. }}
  1054. >
  1055. 添加回收退票
  1056. </Button>
  1057. {/* ) : (
  1058. ""
  1059. )} */}
  1060. <Table
  1061. pagination={false}
  1062. bordered
  1063. columns={this.state.ContactsLists}
  1064. dataSource={this.state.contactList}
  1065. size="small"
  1066. />
  1067. </div>
  1068. {(this.props.data.processState > 5 &&
  1069. this.props.data.processState <= 8) ||
  1070. (this.props.data.processState === 9 &&
  1071. this.props.data.status === 4) ? (
  1072. <div>
  1073. <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
  1074. 当前财务状态(财务填写)
  1075. </h3>
  1076. {/* <div className="clearfix">
  1077. <Form.Item
  1078. className="half-item"
  1079. label="收款时间"
  1080. labelCol={{ span: 8 }}
  1081. wrapperCol={{ span: 14 }}
  1082. >
  1083. <span>{this.props.data.paymentTimes}</span>
  1084. </Form.Item>
  1085. <Form.Item
  1086. className="half-item"
  1087. label="收款金额(万元)"
  1088. labelCol={{ span: 8 }}
  1089. wrapperCol={{ span: 14 }}
  1090. >
  1091. <span>{this.props.data.paymentAmount}</span>
  1092. </Form.Item>
  1093. </div>
  1094. <div className="clearfix">
  1095. <Form.Item
  1096. className="half-item"
  1097. label="开票时间"
  1098. labelCol={{ span: 8 }}
  1099. wrapperCol={{ span: 14 }}
  1100. >
  1101. <span>{this.props.data.invoiceTimes}</span>
  1102. </Form.Item>
  1103. <Form.Item
  1104. className="half-item"
  1105. label="开票金额(万元)"
  1106. labelCol={{ span: 8 }}
  1107. wrapperCol={{ span: 14 }}
  1108. >
  1109. <span>{this.props.data.invoiceAmount}</span>
  1110. </Form.Item>
  1111. </div> */}
  1112. {financeData.map((item, index) => {
  1113. return <Itemlist key={index} pageData={item} />;
  1114. })}
  1115. </div>
  1116. ) : (
  1117. <div style={{ marginBottom: 10 }}>
  1118. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  1119. 当前财务状态(财务填写)
  1120. </h3>
  1121. <div className="clearfix">
  1122. {/* <Form.Item
  1123. className="half-item"
  1124. label="收款时间"
  1125. labelCol={{ span: 8 }}
  1126. wrapperCol={{ span: 14 }}
  1127. >
  1128. <DatePicker
  1129. style={{ width: 160 }}
  1130. value={
  1131. this.state.paymentTimes
  1132. ? moment(this.state.paymentTimes)
  1133. : null
  1134. }
  1135. onChange={(_data, dataString) => {
  1136. this.setState({
  1137. paymentTimes: dataString
  1138. });
  1139. }}
  1140. />
  1141. </Form.Item>
  1142. <Form.Item
  1143. className="half-item"
  1144. label="收款金额(万元)"
  1145. labelCol={{ span: 8 }}
  1146. wrapperCol={{ span: 14 }}
  1147. >
  1148. <Input
  1149. style={{ width: 160 }}
  1150. value={this.state.paymentAmount}
  1151. placeholder="请输入收款金额"
  1152. onChange={e => {
  1153. this.setState({
  1154. paymentAmount: e.target.value
  1155. });
  1156. }}
  1157. />
  1158. </Form.Item>
  1159. </div>
  1160. <div className="clearfix">
  1161. <Form.Item
  1162. className="half-item"
  1163. label="开票时间"
  1164. labelCol={{ span: 8 }}
  1165. wrapperCol={{ span: 14 }}
  1166. >
  1167. <DatePicker
  1168. style={{ width: 160 }}
  1169. value={
  1170. this.state.invoiceTimes
  1171. ? moment(this.state.invoiceTimes)
  1172. : null
  1173. }
  1174. onChange={(_data, dataString) => {
  1175. this.setState({
  1176. invoiceTimes: dataString
  1177. });
  1178. }}
  1179. />
  1180. </Form.Item>
  1181. <Form.Item
  1182. className="half-item"
  1183. label="开票金额(万元)"
  1184. labelCol={{ span: 8 }}
  1185. wrapperCol={{ span: 14 }}
  1186. >
  1187. <Input
  1188. style={{ width: 160 }}
  1189. value={this.state.invoiceAmount}
  1190. placeholder="请输入开票金额"
  1191. onChange={e => {
  1192. this.setState({
  1193. invoiceAmount: e.target.value
  1194. });
  1195. }}
  1196. />
  1197. </Form.Item> */}
  1198. <Form.Item
  1199. className="half-item"
  1200. label="发生成本(万元)"
  1201. labelCol={{ span: 8 }}
  1202. wrapperCol={{ span: 14 }}
  1203. >
  1204. <Input
  1205. style={{ width: 160 }}
  1206. value={this.state.cwCost}
  1207. placeholder="请输入发生成本"
  1208. onChange={e => {
  1209. this.setState({
  1210. cwCost: e.target.value
  1211. });
  1212. }}
  1213. />
  1214. </Form.Item>
  1215. <Form.Item
  1216. className="half-item"
  1217. label="应退金额(万元)"
  1218. labelCol={{ span: 8 }}
  1219. wrapperCol={{ span: 14 }}
  1220. >
  1221. <Input
  1222. style={{ width: 160 }}
  1223. value={this.state.refundableAmount}
  1224. placeholder="请输入应退金额"
  1225. onChange={e => {
  1226. this.setState({
  1227. refundableAmount: e.target.value
  1228. });
  1229. }}
  1230. />
  1231. </Form.Item>
  1232. </div>
  1233. <div
  1234. style={{
  1235. marginTop: "10px",
  1236. display:
  1237. this.props.data.processState == 5 &&
  1238. this.props.data.status == 2
  1239. ? "none"
  1240. : "block"
  1241. }}
  1242. >
  1243. <Form.Item
  1244. label="备注"
  1245. labelCol={{ span: 4 }}
  1246. wrapperCol={{ span: 14 }}
  1247. >
  1248. <Input.TextArea
  1249. rows={4}
  1250. value={this.state.reason}
  1251. placeholder="请输入补充资料/备注"
  1252. onChange={e => {
  1253. this.setState({
  1254. reason: e.target.value
  1255. });
  1256. }}
  1257. />
  1258. </Form.Item>
  1259. </div>
  1260. </div>
  1261. )}
  1262. <ul
  1263. style={{
  1264. margin: "10px 0 0 20px",
  1265. color: "red",
  1266. display:
  1267. (this.props.data.processState == 7 ||
  1268. this.props.data.processState == 8) &&
  1269. (this.props.data.status == 4 || this.props.data.status == 2)
  1270. ? "inline-block"
  1271. : "none"
  1272. }}
  1273. >
  1274. <li>
  1275. {"本次应收退票(万元):" +
  1276. (this.props.data.refundableAmount == null
  1277. ? 0
  1278. : this.props.data.refundableAmount)}
  1279. </li>
  1280. <li>
  1281. {"累计已回收退票(万元):" +
  1282. (this.state.refundInvoice == null
  1283. ? 0
  1284. : this.state.refundInvoice)}
  1285. </li>
  1286. </ul>
  1287. </div>
  1288. {!(
  1289. (this.props.data.processState > 5 &&
  1290. this.props.data.processState <= 8) ||
  1291. (this.props.data.processState === 9 && this.props.data.status === 4)
  1292. ) ? (
  1293. this.state.buttonStatus ? (
  1294. <div>
  1295. <div
  1296. className="clearfix"
  1297. style={{ display: "flex", justifyContent: "space-around" }}
  1298. >
  1299. {buttonData.map((item, index) => {
  1300. return (
  1301. <AgreeButton
  1302. data={item}
  1303. key={index}
  1304. backData={this.props.data}
  1305. processState={this.props.processState}
  1306. visible={this.changeButtonStatus}
  1307. ajaxData={this.state}
  1308. loadData={this.props.loadData}
  1309. rejectState={this.state.rejectState}
  1310. reason={this.state.reason}
  1311. onCancel={this.props.onCancel}
  1312. />
  1313. );
  1314. })}
  1315. </div>
  1316. <Select
  1317. defaultValue="0"
  1318. style={{
  1319. width: 120,
  1320. float: "left",
  1321. position: "relative",
  1322. bottom: "28px",
  1323. right: "-600px"
  1324. }}
  1325. onChange={val => {
  1326. this.setState({ rejectState: val });
  1327. // console.log(val, this.state.rejectState);
  1328. }}
  1329. >
  1330. <Option
  1331. value="0"
  1332. style={{
  1333. display: this.props.processState >= 1 ? "block" : "none"
  1334. }}
  1335. >
  1336. 营销员
  1337. </Option>
  1338. <Option
  1339. value="1"
  1340. style={{
  1341. display: this.props.processState >= 2 ? "block" : "none"
  1342. }}
  1343. >
  1344. 营销管理员
  1345. </Option>
  1346. <Option
  1347. value="2"
  1348. style={{
  1349. display: this.props.processState >= 3 ? "block" : "none"
  1350. }}
  1351. >
  1352. 咨询师
  1353. </Option>
  1354. <Option
  1355. value="3"
  1356. style={{
  1357. display: this.props.processState >= 4 ? "block" : "none"
  1358. }}
  1359. >
  1360. 咨询师经理
  1361. </Option>
  1362. <Option
  1363. value="4"
  1364. style={{
  1365. display: this.props.processState >= 5 ? "block" : "none"
  1366. }}
  1367. >
  1368. 咨询师总监
  1369. </Option>
  1370. <Option
  1371. value="5"
  1372. style={{
  1373. display: this.props.processState >= 6 ? "block" : "none"
  1374. }}
  1375. >
  1376. 财务专员(退单)
  1377. </Option>
  1378. <Option
  1379. value="6"
  1380. style={{
  1381. display: this.props.processState >= 7 ? "block" : "none"
  1382. }}
  1383. >
  1384. 财务总监
  1385. </Option>
  1386. <Option
  1387. value="7"
  1388. style={{
  1389. display: this.props.processState >= 8 ? "block" : "none"
  1390. }}
  1391. >
  1392. 总裁
  1393. </Option>
  1394. </Select>
  1395. </div>
  1396. ) : (
  1397. ""
  1398. )
  1399. ) : (
  1400. ""
  1401. )}
  1402. <Button
  1403. type="primary"
  1404. shape="round"
  1405. size="large"
  1406. style={{
  1407. position: "absolute",
  1408. left: "50%",
  1409. bottom: "0",
  1410. transform: "translateX(-50%)",
  1411. display:
  1412. (this.props.data.processState == 7 ||
  1413. this.props.data.processState == 8) &&
  1414. this.props.data.status == 2
  1415. ? "block"
  1416. : "none"
  1417. }}
  1418. onClick={this.finish}
  1419. >
  1420. 完成订单
  1421. </Button>
  1422. <ReactToPrint
  1423. trigger={() => (
  1424. <Button
  1425. type="primary"
  1426. style={{
  1427. float: "right",
  1428. marginTop: 10,
  1429. position: "absolute",
  1430. top: 0,
  1431. right: 30,
  1432. display:
  1433. (this.props.data.processState == 7 ||
  1434. this.props.data.processState == 8) &&
  1435. this.props.data.status == 4
  1436. ? "block"
  1437. : "block"
  1438. }}
  1439. >
  1440. 打印
  1441. </Button>
  1442. )}
  1443. content={() => this.refs}
  1444. />
  1445. </div>
  1446. );
  1447. }
  1448. }
  1449. export { ChangeDetail };