changeDetailJsy.js 18 KB

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