changeDetailCwzy.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638
  1. import React, { Component } from "react";
  2. import { Form, Upload, Modal, Input, DatePicker, Button } from "antd";
  3. import AgreeButton from "./agreeButton.js";
  4. import Rizhi from "./rizhi.js";
  5. import moment from "moment";
  6. import { getProcessStatusNew } from "@/tools.js";
  7. import ReactToPrint from "react-to-print";
  8. const formItemLayout = {
  9. labelCol: { span: 8 },
  10. wrapperCol: { span: 14 }
  11. };
  12. const changeType = [
  13. {
  14. value: "0",
  15. key: "退单退款"
  16. },
  17. {
  18. value: "1",
  19. key: "项目及金额变更"
  20. },
  21. {
  22. value: "2",
  23. key: "仅项目变更"
  24. },
  25. {
  26. value: "3",
  27. key: "仅金额变更"
  28. },
  29. {
  30. value: "4",
  31. key: "重报"
  32. },
  33. {
  34. value: "5",
  35. key: "赠送"
  36. }
  37. ];
  38. const getChangeType = function(e) {
  39. if (e || e == 0) {
  40. let str = e.toString();
  41. let theType = "";
  42. changeType.map(function(item) {
  43. if (item.value == str) {
  44. theType = item.key;
  45. }
  46. });
  47. return theType;
  48. }
  49. };
  50. class Itemlist extends Component {
  51. constructor(props) {
  52. super(props);
  53. }
  54. render() {
  55. let pageData = this.props.pageData;
  56. return (
  57. <div className="clearfix">
  58. <Form.Item
  59. label={pageData.labelA}
  60. {...pageData.formItemLayoutA}
  61. className="half-item"
  62. >
  63. <p style={{ width: 500, wordWrap: "break-word" }}>{pageData.dataA}</p>
  64. </Form.Item>
  65. <Form.Item
  66. label={pageData.labelB}
  67. {...pageData.formItemLayoutB}
  68. className="half-item"
  69. >
  70. <span>{pageData.dataB}</span>
  71. </Form.Item>
  72. </div>
  73. );
  74. }
  75. }
  76. class ItemInput extends Component {
  77. constructor(props) {
  78. super(props);
  79. this.state = {
  80. valueA: "",
  81. valueB: ""
  82. };
  83. }
  84. componentWillReceiveProps(nextProps) {
  85. if (!nextProps.reset) {
  86. this.reset();
  87. }
  88. }
  89. reset() {
  90. this.setState({
  91. valueA: "",
  92. valueB: ""
  93. });
  94. }
  95. render() {
  96. let pageData = this.props.pageData;
  97. return (
  98. <div className="clearfix">
  99. <Form.Item
  100. label={pageData.labelA}
  101. {...pageData.formItemLayoutA}
  102. className="half-item"
  103. >
  104. <Input
  105. value={this.state.valueA}
  106. placeholder={"请输入" + pageData.labelA}
  107. style={{ width: 160 }}
  108. onChange={e => {
  109. this.setState({ valueA: e.target.value });
  110. pageData.onChangeA(e.target.value);
  111. }}
  112. />
  113. </Form.Item>
  114. <Form.Item
  115. label={pageData.labelB}
  116. {...pageData.formItemLayoutB}
  117. className="half-item"
  118. >
  119. {pageData.mark ? (
  120. <Input
  121. value={this.state.valueB}
  122. placeholder={"请输入" + pageData.labelB}
  123. style={{ width: 160 }}
  124. onChange={e => {
  125. this.setState({ valueB: e.target.value });
  126. pageData.onChangeB(e.target.value);
  127. }}
  128. />
  129. ) : (
  130. ""
  131. )}
  132. </Form.Item>
  133. </div>
  134. );
  135. }
  136. }
  137. class ChangeDetail extends Component {
  138. constructor(props) {
  139. super(props);
  140. this.state = {
  141. previewVisible: false,
  142. buttonStatus: true,
  143. changeType: 2
  144. };
  145. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  146. this.changeButtonStatus = this.changeButtonStatus.bind(this);
  147. this.reset = this.reset.bind(this);
  148. }
  149. componentWillReceiveProps(nextProps) {
  150. this.setState({
  151. paymentTimes: nextProps.data.paymentTimes,
  152. paymentAmount: nextProps.data.paymentAmount,
  153. invoiceTimes: nextProps.data.invoiceTimes,
  154. invoiceAmount: nextProps.data.invoiceAmount,
  155. cwCost: nextProps.data.cwCost,
  156. refundableAmount: nextProps.data.refundableAmount,
  157. cwRemarks: nextProps.data.cwRemarks
  158. });
  159. if (!nextProps.reset) {
  160. this.reset();
  161. }
  162. }
  163. reset() {
  164. this.setState({
  165. paymentTimes: null,
  166. paymentAmount: "",
  167. invoiceTimes: null,
  168. invoiceAmount: "",
  169. cwCost: "",
  170. refundableAmount: "",
  171. cwRemarks: ""
  172. });
  173. }
  174. getOrgCodeUrl(e) {
  175. this.setState({
  176. orgCodeUrl: e
  177. });
  178. }
  179. //同意拒绝按钮的有无
  180. changeButtonStatus() {
  181. this.setState({
  182. buttonStatus: !this.state.buttonStatus
  183. });
  184. }
  185. onRef(ref) {
  186. this.fun = ref;
  187. }
  188. render() {
  189. const pageData = [
  190. {
  191. labelA: "客户名称",
  192. formItemLayoutA: formItemLayout,
  193. dataA: this.props.data.userName,
  194. labelB: "合同编号",
  195. formItemLayoutB: formItemLayout,
  196. dataB: this.props.data.contractNo
  197. },
  198. {
  199. labelA: "时间",
  200. formItemLayoutA: formItemLayout,
  201. dataA: this.props.data.createTimes,
  202. labelB: "发起人",
  203. formItemLayoutB: formItemLayout,
  204. dataB: this.props.data.applicant
  205. },
  206. {
  207. labelA: "当前进度",
  208. formItemLayoutA: formItemLayout,
  209. dataA:
  210. this.props.data.status !== 4
  211. ? getProcessStatusNew(this.props.data.processState) + "审核中"
  212. : getProcessStatusNew(this.props.data.processState) + "已完成",
  213. labelB: "变更类型",
  214. formItemLayoutB: formItemLayout,
  215. dataB: getChangeType(this.props.data.type)
  216. },
  217. {
  218. labelA: "合同额(万元)",
  219. formItemLayoutA: formItemLayout,
  220. dataA: this.props.data.totalAmount,
  221. labelB: "已收款(万元)",
  222. formItemLayoutB: formItemLayout,
  223. dataB: this.props.data.settlementAmount
  224. },
  225. {
  226. labelA: "欠款(万元)",
  227. formItemLayoutA: formItemLayout,
  228. dataA: this.props.data.arrears,
  229. labelB: "申请退款(万元)",
  230. formItemLayoutB: formItemLayout,
  231. dataB: this.props.data.changeAmount
  232. },
  233. {
  234. labelA: "备注",
  235. formItemLayoutA: formItemLayout,
  236. dataA: this.props.data.remarks
  237. }
  238. ];
  239. const planData = [
  240. {
  241. labelA: "项目进度",
  242. formItemLayoutA: formItemLayout,
  243. dataA: this.props.data.projectState,
  244. onChangeA: value => {
  245. this.setState({
  246. projectState: value
  247. });
  248. },
  249. labelB: "发生成本费用(万元)",
  250. formItemLayoutB: formItemLayout,
  251. dataB: this.props.data.zxsCost,
  252. onChangeB: value => {
  253. this.setState({
  254. zxsCost: value
  255. });
  256. }
  257. },
  258. {
  259. labelA: "备注",
  260. formItemLayoutA: formItemLayout,
  261. dataA: this.props.data.zxsRemarks,
  262. onChangeA: value => {
  263. this.setState({
  264. zxsRemarks: value
  265. });
  266. }
  267. }
  268. ];
  269. const financeData = [
  270. {
  271. labelA: "发生成本(万元)",
  272. formItemLayoutA: formItemLayout,
  273. dataA: this.props.data.cwCost,
  274. onChangeA: value => {
  275. this.setState({
  276. cwCost: value
  277. });
  278. },
  279. labelB: "应退金额(万元)",
  280. formItemLayoutB: formItemLayout,
  281. dataB: this.props.data.refundableAmount,
  282. onChangeB: value => {
  283. this.setState({
  284. refundableAmount: value
  285. });
  286. },
  287. mark: true
  288. },
  289. {
  290. labelA: "补充资料/备注",
  291. formItemLayoutA: formItemLayout,
  292. dataA: this.props.data.cwRemarks,
  293. onChangeA: value => {
  294. this.setState({
  295. cwRemarks: value
  296. });
  297. },
  298. mark: false
  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">
  330. <div
  331. className="clearfix"
  332. style={{ marginTop: 20 }}
  333. ref={e => {
  334. this.refs = e;
  335. }}
  336. >
  337. <h2 style={{ textAlign: "center", marginBottom: 10 }}>
  338. 合同变更记录
  339. </h2>
  340. {pageData.map((item, index) => {
  341. return <Itemlist key={index} pageData={item} />;
  342. })}
  343. <Form.Item
  344. label="变更凭证"
  345. labelCol={{ span: 4 }}
  346. wrapperCol={{ span: 18 }}
  347. >
  348. <Upload
  349. className="demandDetailShow-upload"
  350. listType="picture-card"
  351. fileList={orgCodeUrl}
  352. onPreview={file => {
  353. this.setState({
  354. previewImage: file.url || file.thumbUrl,
  355. previewVisible: true
  356. });
  357. }}
  358. />
  359. <Modal
  360. maskClosable={false}
  361. footer={null}
  362. visible={this.state.previewVisible}
  363. onCancel={() => {
  364. this.setState({ previewVisible: false }, () => {
  365. this.foo.reset();
  366. });
  367. }}
  368. >
  369. <img
  370. alt=""
  371. style={{ width: "100%" }}
  372. src={this.state.previewImage || ""}
  373. />
  374. </Modal>
  375. <Rizhi changeId={this.props.data.id} />
  376. </Form.Item>
  377. {this.props.data.type === 0 ? (
  378. <div>
  379. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  380. 当前项目进度(咨询师经理填写)
  381. </h3>
  382. {planData.map((item, index) => {
  383. return <Itemlist key={index} pageData={item} />;
  384. })}
  385. </div>
  386. ) : (
  387. ""
  388. )}
  389. {(this.props.data.processState > 5 &&
  390. this.props.data.processState <= 8) ||
  391. (this.props.data.processState === 9 &&
  392. this.props.data.status === 4) ? (
  393. <div>
  394. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  395. 当前财务状态(财务填写)
  396. </h3>
  397. <div className="clearfix">
  398. <Form.Item
  399. className="half-item"
  400. label="收款时间"
  401. labelCol={{ span: 8 }}
  402. wrapperCol={{ span: 14 }}
  403. >
  404. <span>{this.props.data.paymentTimes}</span>
  405. </Form.Item>
  406. <Form.Item
  407. className="half-item"
  408. label="收款金额(万元)"
  409. labelCol={{ span: 8 }}
  410. wrapperCol={{ span: 14 }}
  411. >
  412. <span>{this.props.data.paymentAmount}</span>
  413. </Form.Item>
  414. </div>
  415. <div className="clearfix">
  416. <Form.Item
  417. className="half-item"
  418. label="开票时间"
  419. labelCol={{ span: 8 }}
  420. wrapperCol={{ span: 14 }}
  421. >
  422. <span>{this.props.data.invoiceTimes}</span>
  423. </Form.Item>
  424. <Form.Item
  425. className="half-item"
  426. label="开票金额(万元)"
  427. labelCol={{ span: 8 }}
  428. wrapperCol={{ span: 14 }}
  429. >
  430. <span>{this.props.data.invoiceAmount}</span>
  431. </Form.Item>
  432. </div>
  433. {financeData.map((item, index) => {
  434. return <Itemlist key={index} pageData={item} />;
  435. })}
  436. </div>
  437. ) : (
  438. <div style={{ marginBottom: 10 }}>
  439. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  440. 当前财务状态(财务填写)
  441. </h3>
  442. <div className="clearfix">
  443. <Form.Item
  444. className="half-item"
  445. label="收款时间"
  446. labelCol={{ span: 8 }}
  447. wrapperCol={{ span: 14 }}
  448. >
  449. <DatePicker
  450. style={{ width: 160 }}
  451. value={
  452. this.state.paymentTimes
  453. ? moment(this.state.paymentTimes)
  454. : null
  455. }
  456. onChange={(_data, dataString) => {
  457. this.setState({
  458. paymentTimes: dataString
  459. });
  460. }}
  461. />
  462. </Form.Item>
  463. <Form.Item
  464. className="half-item"
  465. label="收款金额(万元)"
  466. labelCol={{ span: 8 }}
  467. wrapperCol={{ span: 14 }}
  468. >
  469. <Input
  470. style={{ width: 160 }}
  471. value={this.state.paymentAmount}
  472. placeholder="请输入收款金额"
  473. onChange={e => {
  474. this.setState({
  475. paymentAmount: e.target.value
  476. });
  477. }}
  478. />
  479. </Form.Item>
  480. </div>
  481. <div className="clearfix">
  482. <Form.Item
  483. className="half-item"
  484. label="开票时间"
  485. labelCol={{ span: 8 }}
  486. wrapperCol={{ span: 14 }}
  487. >
  488. <DatePicker
  489. style={{ width: 160 }}
  490. value={
  491. this.state.invoiceTimes
  492. ? moment(this.state.invoiceTimes)
  493. : null
  494. }
  495. onChange={(_data, dataString) => {
  496. this.setState({
  497. invoiceTimes: dataString
  498. });
  499. }}
  500. />
  501. </Form.Item>
  502. <Form.Item
  503. className="half-item"
  504. label="开票金额(万元)"
  505. labelCol={{ span: 8 }}
  506. wrapperCol={{ span: 14 }}
  507. >
  508. <Input
  509. style={{ width: 160 }}
  510. value={this.state.invoiceAmount}
  511. placeholder="请输入开票金额"
  512. onChange={e => {
  513. this.setState({
  514. invoiceAmount: e.target.value
  515. });
  516. }}
  517. />
  518. </Form.Item>
  519. <Form.Item
  520. className="half-item"
  521. label="发生成本(万元)"
  522. labelCol={{ span: 8 }}
  523. wrapperCol={{ span: 14 }}
  524. >
  525. <Input
  526. style={{ width: 160 }}
  527. value={this.state.cwCost}
  528. placeholder="请输入发生成本"
  529. onChange={e => {
  530. this.setState({
  531. cwCost: e.target.value
  532. });
  533. }}
  534. />
  535. </Form.Item>
  536. <Form.Item
  537. className="half-item"
  538. label="应退金额(万元)"
  539. labelCol={{ span: 8 }}
  540. wrapperCol={{ span: 14 }}
  541. >
  542. <Input
  543. style={{ width: 160 }}
  544. value={this.state.refundableAmount}
  545. placeholder="请输入应退金额"
  546. onChange={e => {
  547. this.setState({
  548. refundableAmount: e.target.value
  549. });
  550. }}
  551. />
  552. </Form.Item>
  553. </div>
  554. <div>
  555. <Form.Item
  556. label="补充资料/备注"
  557. labelCol={{ span: 4 }}
  558. wrapperCol={{ span: 14 }}
  559. >
  560. <Input.TextArea
  561. rows={4}
  562. value={this.state.cwRemarks}
  563. placeholder="请输入补充资料/备注"
  564. onChange={e => {
  565. this.setState({
  566. cwRemarks: e.target.value
  567. });
  568. }}
  569. />
  570. </Form.Item>
  571. </div>
  572. </div>
  573. )}
  574. </div>
  575. {!(
  576. (this.props.data.processState > 5 &&
  577. this.props.data.processState <= 8) ||
  578. (this.props.data.processState === 9 && this.props.data.status === 4)
  579. ) ? (
  580. this.state.buttonStatus ? (
  581. <div
  582. className="clearfix"
  583. style={{ display: "flex", justifyContent: "space-around" }}
  584. >
  585. {buttonData.map((item, index) => {
  586. return (
  587. <AgreeButton
  588. data={item}
  589. key={index}
  590. backData={this.props.data}
  591. processState={this.props.processState}
  592. visible={this.changeButtonStatus}
  593. ajaxData={this.state}
  594. loadData={this.props.loadData}
  595. />
  596. );
  597. })}
  598. </div>
  599. ) : (
  600. ""
  601. )
  602. ) : (
  603. ""
  604. )}
  605. <ReactToPrint
  606. trigger={() => (
  607. <div className="clearfix">
  608. <Button type="primary" style={{ float: "right", marginTop: 10 }}>
  609. 打印
  610. </Button>
  611. </div>
  612. )}
  613. content={() => this.refs}
  614. />
  615. </div>
  616. );
  617. }
  618. }
  619. export { ChangeDetail };