changeDetailJsy.js 17 KB

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