changeDetailCwzy.js 16 KB

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