changeDetailJsjl.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797
  1. import React, { Component } from "react";
  2. import { Form, Upload, Modal, Input, Button, message, Select, Table } 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 $ from "jquery/src/ajax";
  8. import tongguo from "../../../../../../image/tongguo.png";
  9. import ProAndCuiList from "./proAndCuiList.jsx";
  10. // import ReactToPrint from "react-to-print";
  11. const formItemLayout = {
  12. labelCol: { span: 8 },
  13. wrapperCol: { span: 14 }
  14. };
  15. const changeType = [
  16. {
  17. value: "0",
  18. key: "退单退款"
  19. },
  20. {
  21. value: "1",
  22. key: "项目及金额变更"
  23. },
  24. {
  25. value: "2",
  26. key: "仅项目变更"
  27. },
  28. {
  29. value: "3",
  30. key: "仅金额变更"
  31. },
  32. {
  33. value: "4",
  34. key: "重报"
  35. },
  36. {
  37. value: "5",
  38. key: "赠送"
  39. }
  40. ];
  41. const getChangeType = function(e) {
  42. if (e || e == 0) {
  43. let str = e.toString();
  44. let theType = "";
  45. changeType.map(function(item) {
  46. if (item.value == str) {
  47. theType = item.key;
  48. }
  49. });
  50. return theType;
  51. }
  52. };
  53. class Itemlist extends Component {
  54. constructor(props) {
  55. super(props);
  56. }
  57. render() {
  58. let pageData = this.props.pageData;
  59. return (
  60. <div className="clearfix">
  61. <Form.Item
  62. label={pageData.labelA}
  63. {...pageData.formItemLayoutA}
  64. className="half-item"
  65. >
  66. <p style={{ width: 500, wordWrap: "break-word" }}>{pageData.dataA}</p>
  67. </Form.Item>
  68. <Form.Item
  69. label={pageData.labelB}
  70. {...pageData.formItemLayoutB}
  71. className="half-item"
  72. >
  73. <span>{pageData.dataB}</span>
  74. </Form.Item>
  75. </div>
  76. );
  77. }
  78. }
  79. class ChangeDetail extends Component {
  80. constructor(props) {
  81. super(props);
  82. this.state = {
  83. previewVisible: false,
  84. buttonStatus: true,
  85. changeType: 1,
  86. dataSource: [],
  87. reason: "",
  88. // 累计回收退票
  89. refundInvoice: 0,
  90. // 退票数组
  91. contactList: [],
  92. rejectState: 0,
  93. // 收款信息
  94. proceedsData: [],
  95. proceedsTotal: this.props.proceedsTotal,
  96. // 开票信息
  97. invoiceData: [],
  98. invoiceTotal: this.props.invoiceTotal,
  99. cost: 10,
  100. refund: 8,
  101. // 测试添加退票
  102. contactList: this.props.contactList,
  103. ContactsLists: [
  104. {
  105. title: "金额(万元)",
  106. dataIndex: "amount",
  107. key: "amount",
  108. render: (text, record) => {
  109. return (
  110. <div>
  111. 实际回收退票(万元)
  112. <Input
  113. value={record.amount}
  114. placeholder="请输入金额(必填项)"
  115. disabled={record.load}
  116. key={record.id}
  117. required="required"
  118. onChange={e => {
  119. record.amount = e.target.value;
  120. this.setState({ contactList: this.state.contactList });
  121. }}
  122. style={{ width: "120px" }}
  123. />
  124. </div>
  125. );
  126. }
  127. },
  128. {
  129. title: "时间",
  130. dataIndex: "createTimes",
  131. key: "createTimes",
  132. render: (text, record) => {
  133. return <div>{record.createTimes}</div>;
  134. }
  135. }
  136. ]
  137. };
  138. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  139. this.changeButtonStatus = this.changeButtonStatus.bind(this);
  140. this.moneyOld = this.moneyOld.bind(this);
  141. }
  142. componentWillReceiveProps(nextProps) {
  143. this.setState({
  144. projectState: nextProps.data.projectState,
  145. zxsCost: nextProps.data.zxsCost,
  146. zxsRemarks: nextProps.data.zxsRemarks,
  147. paymentTimes: nextProps.data.paymentTimes,
  148. paymentAmount: nextProps.data.paymentAmount,
  149. invoiceTimes: nextProps.data.invoiceTimes,
  150. invoiceAmount: nextProps.data.invoiceAmount,
  151. cwCost: nextProps.data.cwCost,
  152. refundableAmount: nextProps.data.refundableAmount,
  153. cwRemarks: nextProps.data.cwRemarks,
  154. contactList: nextProps.contactList,
  155. refundInvoice: nextProps.data.refundInvoice
  156. });
  157. }
  158. getOrgCodeUrl(e) {
  159. this.setState({
  160. orgCodeUrl: e
  161. });
  162. }
  163. //同意拒绝按钮的有无
  164. changeButtonStatus() {
  165. this.setState({
  166. buttonStatus: !this.state.buttonStatus
  167. });
  168. window.setTimeout(() => {
  169. this.setState({
  170. reason: ""
  171. });
  172. }, 100);
  173. }
  174. // loadData() {
  175. // $.ajax({
  176. // method: "get",
  177. // dataType: "json",
  178. // async: false,
  179. // crossDomain: false,
  180. // url: globalConfig.context + "/api/admin/orderChange/orderChangeLogList",
  181. // data: {
  182. // changeId: this.props.data.id
  183. // },
  184. // success: function(data) {
  185. // if (data.error.length || data.data.list == "") {
  186. // if (data.error && data.error.length) {
  187. // message.warning(data.error[0].message);
  188. // }
  189. // } else {
  190. // this.setState({
  191. // dataSource: data.data
  192. // });
  193. // }
  194. // }.bind(this)
  195. // });
  196. // }
  197. // componentDidMount() {
  198. // // this.loadData();
  199. // window.setTimeout(() => {
  200. // this.loadData();
  201. // }, 10);
  202. // console.log(this.props.processState);
  203. // }
  204. moneyOld(str, money) {
  205. if (money) {
  206. return (
  207. <span style={{ color: "red", fontWeight: 900, fontSize: 16 }}>
  208. {str}(原合同金额{money}万元)
  209. </span>
  210. );
  211. } else {
  212. return (
  213. <span style={{ color: "red", fontWeight: 900, fontSize: 16 }}>
  214. {str}
  215. </span>
  216. );
  217. }
  218. }
  219. render() {
  220. const pageData = [
  221. {
  222. labelA: "客户名称",
  223. formItemLayoutA: formItemLayout,
  224. dataA: this.props.data.userName,
  225. labelB: "合同编号",
  226. formItemLayoutB: formItemLayout,
  227. dataB: this.props.data.contractNo
  228. },
  229. {
  230. labelA: "时间",
  231. formItemLayoutA: formItemLayout,
  232. dataA: this.props.data.createTimes,
  233. labelB: "发起人",
  234. formItemLayoutB: formItemLayout,
  235. dataB: this.props.data.applicant
  236. },
  237. {
  238. labelA: "当前进度",
  239. formItemLayoutA: formItemLayout,
  240. // 当前是咨询师以及咨询师经理时使用shenhePeo函数,其他流程正常显示
  241. dataA:
  242. this.props.data.processState == 2 || this.props.data.processState == 3
  243. ? shenghePeo(
  244. this.props.data.processState == 2
  245. ? this.props.data.consultantExamine
  246. : this.props.data.managerExamine,
  247. this.props.data.processState
  248. )
  249. : getProcessStatusNew(
  250. this.props.data.processState,
  251. this.props.data.status
  252. ),
  253. labelB: "变更类型",
  254. formItemLayoutB: formItemLayout,
  255. dataB: getChangeType(this.props.data.type)
  256. },
  257. {
  258. labelA: "合同额(万元)",
  259. formItemLayoutA: formItemLayout,
  260. dataA: this.moneyOld(this.props.data.totalAmount, this.props.money),
  261. labelB: "已收款(万元)",
  262. formItemLayoutB: formItemLayout,
  263. dataB: changeColor(this.props.data.settlementAmount)
  264. },
  265. {
  266. labelA: "欠款(万元)",
  267. formItemLayoutA: formItemLayout,
  268. dataA: changeColor(this.props.data.arrears),
  269. labelB: "申请退款(万元)",
  270. formItemLayoutB: formItemLayout,
  271. dataB: changeColor(this.props.data.changeAmount)
  272. },
  273. {
  274. labelA: "变更原因",
  275. formItemLayoutA: formItemLayout,
  276. dataA: this.props.data.remarks
  277. }
  278. ];
  279. const planData = [
  280. {
  281. labelA: "项目进度",
  282. formItemLayoutA: formItemLayout,
  283. dataA: this.props.data.projectState,
  284. onChangeA: value => {
  285. this.setState({
  286. projectState: value
  287. });
  288. },
  289. labelB: "发生成本费用(万元)",
  290. formItemLayoutB: formItemLayout,
  291. dataB: this.props.data.zxsCost,
  292. onChangeB: value => {
  293. this.setState({
  294. zxsCost: value
  295. });
  296. }
  297. },
  298. {
  299. labelA: "备注",
  300. formItemLayoutA: formItemLayout,
  301. dataA: this.props.data.zxsRemarks,
  302. onChangeA: value => {
  303. this.setState({
  304. zxsRemarks: value
  305. });
  306. }
  307. }
  308. ];
  309. const financeData = [
  310. {
  311. labelA: "发生成本(万元)",
  312. formItemLayoutA: formItemLayout,
  313. dataA: this.props.data.cwCost,
  314. labelB: "应退金额(万元)",
  315. formItemLayoutB: formItemLayout,
  316. dataB: this.props.data.refundableAmount
  317. }
  318. ];
  319. const buttonData = [
  320. {
  321. name: "同意",
  322. title: "理由",
  323. placeholder: "请输入理由",
  324. type: "primary",
  325. status: 2,
  326. onChange: value => {
  327. this.setState({
  328. remarks: value
  329. });
  330. }
  331. },
  332. {
  333. name: "拒绝",
  334. title: "理由",
  335. placeholder: "请输入理由",
  336. type: "danger",
  337. status: 3,
  338. onChange: value => {
  339. this.setState({
  340. remarks: value
  341. });
  342. }
  343. }
  344. ];
  345. const orgCodeUrl = this.props.pictureUrl;
  346. return (
  347. <div className="clearfix changeDetail">
  348. <div
  349. className="clearfix"
  350. ref={e => {
  351. this.refs = e;
  352. }}
  353. >
  354. <div
  355. style={{
  356. borderRadius: "50%",
  357. width: 300,
  358. height: 300,
  359. position: "absolute",
  360. top: 230,
  361. left: 525,
  362. transform: "rotate(-5deg)",
  363. zIndex: 1,
  364. display:
  365. (this.props.data.processState == 7 ||
  366. this.props.data.processState == 8) &&
  367. this.props.data.status == 4
  368. ? "block"
  369. : "none"
  370. }}
  371. >
  372. {/* <span
  373. style={{
  374. fontSize: 29,
  375. position: "absolute",
  376. left: "50%",
  377. top: "50%",
  378. transform: "translate(-50%,-50%)",
  379. color: "red"
  380. }}
  381. >
  382. 通过
  383. </span> */}
  384. <img src={tongguo} style={{ width: "100%" }} />
  385. </div>
  386. <h2 style={{ textAlign: "center", marginBottom: 10 }}>
  387. 合同变更记录
  388. </h2>
  389. {pageData.map((item, index) => {
  390. return <Itemlist key={index} pageData={item} />;
  391. })}
  392. <Form.Item
  393. label="变更凭证"
  394. labelCol={{ span: 4 }}
  395. wrapperCol={{ span: 18 }}
  396. >
  397. <Upload
  398. className="demandDetailShow-upload"
  399. listType="picture-card"
  400. fileList={orgCodeUrl}
  401. onPreview={file => {
  402. this.setState({
  403. previewImage: file.url || file.thumbUrl,
  404. previewVisible: true
  405. });
  406. }}
  407. />
  408. <Modal
  409. maskClosable={false}
  410. footer={null}
  411. visible={this.state.previewVisible}
  412. onCancel={() => {
  413. this.setState({ previewVisible: false });
  414. }}
  415. >
  416. <img
  417. alt=""
  418. style={{ width: "100%" }}
  419. src={this.state.previewImage || ""}
  420. />
  421. </Modal>
  422. <Rizhi changeId={this.props.data.id} />
  423. </Form.Item>
  424. <ul
  425. style={{
  426. width: "868px",
  427. overflow: "hidden",
  428. paddingLeft: "90px",
  429. position: "relative",
  430. bottom: "0px"
  431. }}
  432. >
  433. {/* <span>操作人:</span> */}
  434. {this.props.dataSource.map((item, index) => {
  435. if (item.status == 0) {
  436. item.status = "发起";
  437. } else if (item.status == 1) {
  438. item.status = "审核中";
  439. } else if (item.status == 2) {
  440. item.status = "通过";
  441. } else if (item.status == 3) {
  442. item.status = "驳回";
  443. } else if (item.status == 4) {
  444. item.status = "完成";
  445. }
  446. return (
  447. <li
  448. key={index}
  449. style={{
  450. width: "100%",
  451. height: "auto",
  452. wordBreak: "break-all",
  453. marginBottom: "10px"
  454. }}
  455. >
  456. {item.aname + ":" + "(" + item.status + ")" + item.remarks}
  457. </li>
  458. );
  459. })}
  460. </ul>
  461. <ProAndCuiList id={this.props.id} />
  462. <div className="clearfix">
  463. <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
  464. 收款情况
  465. </h3>
  466. <div style={{ marginLeft: "90px" }}>
  467. <ul>
  468. {(this.props.proceedsData.bill || []).map((item, index) => (
  469. <li key={index}>
  470. {item.payTime +
  471. " " +
  472. item.aName +
  473. " 收款:" +
  474. item.transactionAmount +
  475. "万元"}
  476. </li>
  477. ))}
  478. </ul>
  479. <div>收款总计:{this.props.proceedsTotal}万元</div>
  480. </div>
  481. <br />
  482. <div style={{ marginLeft: "90px" }}>
  483. <ul>
  484. {(this.props.proceedsData.invoice || []).map((item, index) => (
  485. <li key={index}>
  486. {item.createTime + " " + " 开票:" + item.amount + "万元"}
  487. </li>
  488. ))}
  489. </ul>
  490. <div>开票总计:{this.props.invoiceTotal}万元</div>
  491. </div>
  492. <p style={{ marginLeft: "90px", color: "red" }}>
  493. 系统预估 产生成本(万元):
  494. {this.props.data.estimateCost
  495. ? this.props.data.estimateCost
  496. : "0"}{" "}
  497. &nbsp;应退金额(万元):
  498. {this.props.data.estimateRefundable
  499. ? this.props.data.estimateRefundable
  500. : "0"}
  501. </p>
  502. </div>
  503. {/* {this.props.data.type === 0 ? (
  504. <div>
  505. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  506. 当前项目进度(咨询师经理填写)
  507. </h3>
  508. {planData.map((item, index) => {
  509. return <Itemlist key={index} pageData={item} />;
  510. })}
  511. </div>
  512. ) : (
  513. ""
  514. )} */}
  515. <div
  516. style={{
  517. display:
  518. (this.props.data.processState == 8 ||
  519. this.props.data.processState == 7) &&
  520. (this.props.data.status == 2 || this.props.data.status == 4)
  521. ? "block"
  522. : "none"
  523. }}
  524. >
  525. <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
  526. 回收退票
  527. </h3>
  528. <Table
  529. pagination={false}
  530. bordered
  531. columns={this.state.ContactsLists}
  532. dataSource={this.state.contactList}
  533. />
  534. </div>
  535. <div
  536. style={{
  537. display: this.props.data.processState > 5 ? "block" : "none"
  538. }}
  539. >
  540. <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
  541. 当前财务状态(财务填写)
  542. </h3>
  543. {financeData.map((item, index) => {
  544. return <Itemlist key={index} pageData={item} />;
  545. })}
  546. </div>
  547. {/*
  548. (
  549. <div>
  550. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  551. 当前项目进度(咨询师经理填写)
  552. </h3>
  553. {planData.map((item, index) => {
  554. return <Itemlist key={index} pageData={item} />;
  555. })}
  556. </div>
  557. )
  558. */}
  559. {/* {this.props.data.processState >= 4 ? (
  560. ""
  561. ) : (
  562. <div style={{ marginBottom: 10 }}>
  563. <div className="clearfix">
  564. <h3
  565. style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}
  566. >
  567. 当前项目进度(咨询师经理填写)
  568. </h3>
  569. <Form.Item
  570. className="half-item"
  571. label="项目进度"
  572. labelCol={{ span: 8 }}
  573. wrapperCol={{ span: 14 }}
  574. >
  575. <Input
  576. style={{ width: 160 }}
  577. value={this.state.projectState}
  578. placeholder="请输入项目进度"
  579. onChange={e => {
  580. this.setState({
  581. projectState: e.target.value
  582. });
  583. }}
  584. />
  585. </Form.Item>
  586. <Form.Item
  587. className="half-item"
  588. label="发生成本费用(万元)"
  589. labelCol={{ span: 8 }}
  590. wrapperCol={{ span: 14 }}
  591. >
  592. <Input
  593. style={{ width: 160 }}
  594. value={this.state.zxsCost}
  595. placeholder="请输入发生成本费用"
  596. onChange={e => {
  597. this.setState({
  598. zxsCost: e.target.value
  599. });
  600. }}
  601. />
  602. </Form.Item>
  603. </div>
  604. </div>
  605. )} */}
  606. {/* {this.props.data.processState >= 5 ? (
  607. <div>
  608. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  609. 当前财务状态(财务填写)
  610. </h3>
  611. {financeData.map((item, index) => {
  612. return <Itemlist key={index} pageData={item} />;
  613. })}
  614. </div>
  615. ) : (
  616. ""
  617. )} */}
  618. </div>
  619. {this.props.processState == this.props.data.processState ? (
  620. 1 ? (
  621. <div
  622. style={{
  623. display: this.props.data.isExamine == 0 ? "block" : "none"
  624. }}
  625. >
  626. <div style={{ marginBottom: "10px" }}>
  627. <Form.Item
  628. label="备注"
  629. labelCol={{ span: 4 }}
  630. wrapperCol={{ span: 14 }}
  631. >
  632. <Input.TextArea
  633. value={this.state.reason}
  634. rows={4}
  635. placeholder="请输入备注"
  636. onChange={e => {
  637. let reason = e.target.value;
  638. this.setState({ reason });
  639. }}
  640. />
  641. </Form.Item>
  642. </div>
  643. <div
  644. className="clearfix"
  645. style={{ display: "flex", justifyContent: "space-around" }}
  646. >
  647. {buttonData.map((item, index) => {
  648. return (
  649. <AgreeButton
  650. data={item}
  651. key={index}
  652. backData={this.props.data}
  653. processState={this.props.processState}
  654. visible={this.changeButtonStatus}
  655. loadData={this.props.loadData}
  656. reason={this.state.reason}
  657. ajaxData={this.state}
  658. rejectState={this.state.rejectState}
  659. onCancel={this.props.onCancel}
  660. />
  661. );
  662. })}
  663. </div>
  664. <Select
  665. defaultValue="0"
  666. style={{
  667. width: 120,
  668. float: "left",
  669. position: "relative",
  670. bottom: "28px",
  671. right: "-600px"
  672. }}
  673. onChange={val => {
  674. this.setState({ rejectState: val });
  675. }}
  676. >
  677. <Option
  678. value="0"
  679. style={{
  680. display: this.props.processState >= 1 ? "block" : "none"
  681. }}
  682. >
  683. 营销员
  684. </Option>
  685. <Option
  686. value="1"
  687. style={{
  688. display: this.props.processState >= 2 ? "block" : "none"
  689. }}
  690. >
  691. 营销管理员
  692. </Option>
  693. <Option
  694. value="2"
  695. style={{
  696. display: this.props.processState >= 3 ? "block" : "none"
  697. }}
  698. >
  699. 咨询师
  700. </Option>
  701. <Option
  702. value="3"
  703. style={{
  704. display: this.props.processState >= 4 ? "block" : "none"
  705. }}
  706. >
  707. 咨询师经理
  708. </Option>
  709. <Option
  710. value="4"
  711. style={{
  712. display: this.props.processState >= 5 ? "block" : "none"
  713. }}
  714. >
  715. 咨询师总监
  716. </Option>
  717. <Option
  718. value="5"
  719. style={{
  720. display: this.props.processState >= 6 ? "block" : "none"
  721. }}
  722. >
  723. 财务专员(退单)
  724. </Option>
  725. <Option
  726. value="6"
  727. style={{
  728. display: this.props.processState >= 7 ? "block" : "none"
  729. }}
  730. >
  731. 财务总监
  732. </Option>
  733. <Option
  734. value="7"
  735. style={{
  736. display: this.props.processState >= 8 ? "block" : "none"
  737. }}
  738. >
  739. 总裁
  740. </Option>
  741. </Select>
  742. </div>
  743. ) : (
  744. ""
  745. )
  746. ) : (
  747. ""
  748. )}
  749. {/* <ReactToPrint
  750. trigger={() => (
  751. <div className="clearfix">
  752. <Button type="primary" style={{ float: "right", marginTop: 10 }}>
  753. 打印
  754. </Button>
  755. </div>
  756. )}
  757. content={() => this.refs}
  758. /> */}
  759. </div>
  760. );
  761. }
  762. }
  763. export { ChangeDetail };