changeDetailJszj.js 19 KB

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