changeDetailJsjl.js 22 KB

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