changeDetailCwzy.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773
  1. import React, { Component } from "react";
  2. import { Form, Upload, Modal, Input, DatePicker, Button, message, Select } 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 $ 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 ItemInput extends Component {
  78. constructor(props) {
  79. super(props);
  80. this.state = {
  81. valueA: "",
  82. valueB: ""
  83. };
  84. }
  85. componentWillReceiveProps(nextProps) {
  86. if (!nextProps.reset) {
  87. this.reset();
  88. }
  89. }
  90. reset() {
  91. this.setState({
  92. valueA: "",
  93. valueB: ""
  94. });
  95. }
  96. render() {
  97. let pageData = this.props.pageData;
  98. return (
  99. <div className="clearfix">
  100. <Form.Item
  101. label={pageData.labelA}
  102. {...pageData.formItemLayoutA}
  103. className="half-item"
  104. >
  105. <Input
  106. value={this.state.valueA}
  107. placeholder={"请输入" + pageData.labelA}
  108. style={{ width: 160 }}
  109. onChange={e => {
  110. this.setState({ valueA: e.target.value });
  111. pageData.onChangeA(e.target.value);
  112. }}
  113. />
  114. </Form.Item>
  115. <Form.Item
  116. label={pageData.labelB}
  117. {...pageData.formItemLayoutB}
  118. className="half-item"
  119. >
  120. {pageData.mark ? (
  121. <Input
  122. value={this.state.valueB}
  123. placeholder={"请输入" + pageData.labelB}
  124. style={{ width: 160 }}
  125. onChange={e => {
  126. this.setState({ valueB: e.target.value });
  127. pageData.onChangeB(e.target.value);
  128. }}
  129. />
  130. ) : (
  131. ""
  132. )}
  133. </Form.Item>
  134. </div>
  135. );
  136. }
  137. }
  138. class ChangeDetail extends Component {
  139. constructor(props) {
  140. super(props);
  141. this.state = {
  142. previewVisible: false,
  143. buttonStatus: true,
  144. changeType: 2,
  145. dataSource: [],
  146. reason: ""
  147. };
  148. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  149. this.changeButtonStatus = this.changeButtonStatus.bind(this);
  150. this.reset = this.reset.bind(this);
  151. }
  152. componentWillReceiveProps(nextProps) {
  153. this.setState({
  154. paymentTimes: nextProps.data.paymentTimes,
  155. paymentAmount: nextProps.data.paymentAmount,
  156. invoiceTimes: nextProps.data.invoiceTimes,
  157. invoiceAmount: nextProps.data.invoiceAmount,
  158. cwCost: nextProps.data.cwCost,
  159. refundableAmount: nextProps.data.refundableAmount,
  160. cwRemarks: nextProps.data.cwRemarks
  161. });
  162. if (!nextProps.reset) {
  163. this.reset();
  164. }
  165. }
  166. reset() {
  167. this.setState({
  168. paymentTimes: null,
  169. paymentAmount: "",
  170. invoiceTimes: null,
  171. invoiceAmount: "",
  172. cwCost: "",
  173. refundableAmount: "",
  174. cwRemarks: ""
  175. });
  176. }
  177. getOrgCodeUrl(e) {
  178. this.setState({
  179. orgCodeUrl: e
  180. });
  181. }
  182. loadData() {
  183. $.ajax({
  184. method: "get",
  185. dataType: "json",
  186. async: false,
  187. crossDomain: false,
  188. url: globalConfig.context + "/api/admin/orderChange/orderChangeLogList",
  189. data: {
  190. changeId: this.props.data.id
  191. },
  192. success: function(data) {
  193. if (data.error.length || data.data.list == "") {
  194. if (data.error && data.error.length) {
  195. message.warning(data.error[0].message);
  196. }
  197. } else {
  198. this.setState({
  199. dataSource: data.data
  200. });
  201. }
  202. }.bind(this)
  203. });
  204. }
  205. componentDidMount() {
  206. // this.loadData();
  207. window.setTimeout(() => {
  208. this.loadData();
  209. }, 10);
  210. }
  211. //同意拒绝按钮的有无
  212. changeButtonStatus() {
  213. this.setState({
  214. buttonStatus: !this.state.buttonStatus
  215. });
  216. }
  217. onRef(ref) {
  218. this.fun = ref;
  219. }
  220. render() {
  221. const pageData = [
  222. {
  223. labelA: "客户名称",
  224. formItemLayoutA: formItemLayout,
  225. dataA: this.props.data.userName,
  226. labelB: "合同编号",
  227. formItemLayoutB: formItemLayout,
  228. dataB: this.props.data.contractNo
  229. },
  230. {
  231. labelA: "时间",
  232. formItemLayoutA: formItemLayout,
  233. dataA: this.props.data.createTimes,
  234. labelB: "发起人",
  235. formItemLayoutB: formItemLayout,
  236. dataB: this.props.data.applicant
  237. },
  238. {
  239. labelA: "当前进度",
  240. formItemLayoutA: formItemLayout,
  241. dataA:
  242. this.props.data.status !== 4
  243. ? getProcessStatusNew(this.props.data.processState) + "审核中"
  244. : getProcessStatusNew(this.props.data.processState) + "已完成",
  245. labelB: "变更类型",
  246. formItemLayoutB: formItemLayout,
  247. dataB: getChangeType(this.props.data.type)
  248. },
  249. {
  250. labelA: "合同额(万元)",
  251. formItemLayoutA: formItemLayout,
  252. dataA: this.props.data.totalAmount,
  253. labelB: "已收款(万元)",
  254. formItemLayoutB: formItemLayout,
  255. dataB: this.props.data.settlementAmount
  256. },
  257. {
  258. labelA: "欠款(万元)",
  259. formItemLayoutA: formItemLayout,
  260. dataA: this.props.data.arrears,
  261. labelB: "申请退款(万元)",
  262. formItemLayoutB: formItemLayout,
  263. dataB: this.props.data.changeAmount
  264. },
  265. {
  266. labelA: "变更原因",
  267. formItemLayoutA: formItemLayout,
  268. dataA: this.props.data.remarks
  269. }
  270. ];
  271. const planData = [
  272. {
  273. labelA: "项目进度",
  274. formItemLayoutA: formItemLayout,
  275. dataA: this.props.data.projectState,
  276. onChangeA: value => {
  277. this.setState({
  278. projectState: value
  279. });
  280. },
  281. labelB: "发生成本费用(万元)",
  282. formItemLayoutB: formItemLayout,
  283. dataB: this.props.data.zxsCost,
  284. onChangeB: value => {
  285. this.setState({
  286. zxsCost: value
  287. });
  288. }
  289. },
  290. {
  291. labelA: "备注",
  292. formItemLayoutA: formItemLayout,
  293. dataA: this.props.data.zxsRemarks,
  294. onChangeA: value => {
  295. this.setState({
  296. zxsRemarks: value
  297. });
  298. }
  299. }
  300. ];
  301. const financeData = [
  302. {
  303. labelA: "发生成本(万元)",
  304. formItemLayoutA: formItemLayout,
  305. dataA: this.props.data.cwCost,
  306. onChangeA: value => {
  307. this.setState({
  308. cwCost: value
  309. });
  310. },
  311. labelB: "应退金额(万元)",
  312. formItemLayoutB: formItemLayout,
  313. dataB: this.props.data.refundableAmount,
  314. onChangeB: value => {
  315. this.setState({
  316. refundableAmount: value
  317. });
  318. },
  319. mark: true
  320. },
  321. {
  322. labelA: "备注",
  323. formItemLayoutA: formItemLayout,
  324. dataA: this.props.data.cwRemarks,
  325. onChangeA: value => {
  326. this.setState({
  327. reason: value
  328. });
  329. },
  330. mark: false
  331. }
  332. ];
  333. const buttonData = [
  334. {
  335. name: "同意",
  336. title: "理由",
  337. placeholder: "请输入理由",
  338. type: "primary",
  339. status: 2,
  340. onChange: value => {
  341. this.setState({
  342. remarks: value
  343. });
  344. }
  345. },
  346. {
  347. name: "拒绝",
  348. title: "理由",
  349. placeholder: "请输入理由",
  350. type: "danger",
  351. status: 3,
  352. onChange: value => {
  353. this.setState({
  354. remarks: value
  355. });
  356. }
  357. }
  358. ];
  359. const orgCodeUrl = this.props.pictureUrl;
  360. return (
  361. <div className="clearfix">
  362. <div
  363. className="clearfix"
  364. style={{ marginTop: 20 }}
  365. ref={e => {
  366. this.refs = e;
  367. }}
  368. >
  369. <h2 style={{ textAlign: "center", marginBottom: 10 }}>
  370. 合同变更记录
  371. </h2>
  372. {pageData.map((item, index) => {
  373. return <Itemlist key={index} pageData={item} />;
  374. })}
  375. <Form.Item
  376. label="变更凭证"
  377. labelCol={{ span: 4 }}
  378. wrapperCol={{ span: 18 }}
  379. >
  380. <Upload
  381. className="demandDetailShow-upload"
  382. listType="picture-card"
  383. fileList={orgCodeUrl}
  384. onPreview={file => {
  385. this.setState({
  386. previewImage: file.url || file.thumbUrl,
  387. previewVisible: true
  388. });
  389. }}
  390. />
  391. <Modal
  392. maskClosable={false}
  393. footer={null}
  394. visible={this.state.previewVisible}
  395. onCancel={() => {
  396. this.setState({ previewVisible: false }, () => {
  397. this.foo.reset();
  398. });
  399. }}
  400. >
  401. <img
  402. alt=""
  403. style={{ width: "100%" }}
  404. src={this.state.previewImage || ""}
  405. />
  406. </Modal>
  407. <Rizhi changeId={this.props.data.id} />
  408. </Form.Item>
  409. <ul
  410. style={{ width: "868px", overflow: "hidden", paddingLeft: "90px" }}
  411. >
  412. {/* <span>操作人:</span> */}
  413. {this.state.dataSource.map((item, index) => (
  414. <li
  415. key={index}
  416. style={{
  417. width: "100%",
  418. height: "auto",
  419. wordBreak: "break-all",
  420. color: "black",
  421. marginBottom: "10px"
  422. }}
  423. >{`${item.aname}: ${item.remarks}`}</li>
  424. ))}
  425. </ul>
  426. {/* {this.props.data.type === 0 ? (
  427. <div>
  428. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  429. 当前项目进度(咨询师经理填写)
  430. </h3>
  431. {planData.map((item, index) => {
  432. return <Itemlist key={index} pageData={item} />;
  433. })}
  434. </div>
  435. ) : (
  436. ""
  437. )} */}
  438. {(this.props.data.processState > 5 &&
  439. this.props.data.processState <= 8) ||
  440. (this.props.data.processState === 9 &&
  441. this.props.data.status === 4) ? (
  442. <div>
  443. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  444. 当前财务状态(财务填写)
  445. </h3>
  446. <div className="clearfix">
  447. <Form.Item
  448. className="half-item"
  449. label="收款时间"
  450. labelCol={{ span: 8 }}
  451. wrapperCol={{ span: 14 }}
  452. >
  453. <span>{this.props.data.paymentTimes}</span>
  454. </Form.Item>
  455. <Form.Item
  456. className="half-item"
  457. label="收款金额(万元)"
  458. labelCol={{ span: 8 }}
  459. wrapperCol={{ span: 14 }}
  460. >
  461. <span>{this.props.data.paymentAmount}</span>
  462. </Form.Item>
  463. </div>
  464. <div className="clearfix">
  465. <Form.Item
  466. className="half-item"
  467. label="开票时间"
  468. labelCol={{ span: 8 }}
  469. wrapperCol={{ span: 14 }}
  470. >
  471. <span>{this.props.data.invoiceTimes}</span>
  472. </Form.Item>
  473. <Form.Item
  474. className="half-item"
  475. label="开票金额(万元)"
  476. labelCol={{ span: 8 }}
  477. wrapperCol={{ span: 14 }}
  478. >
  479. <span>{this.props.data.invoiceAmount}</span>
  480. </Form.Item>
  481. </div>
  482. {financeData.map((item, index) => {
  483. return <Itemlist key={index} pageData={item} />;
  484. })}
  485. </div>
  486. ) : (
  487. <div style={{ marginBottom: 10 }}>
  488. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  489. 当前财务状态(财务填写)
  490. </h3>
  491. <div className="clearfix">
  492. <Form.Item
  493. className="half-item"
  494. label="收款时间"
  495. labelCol={{ span: 8 }}
  496. wrapperCol={{ span: 14 }}
  497. >
  498. <DatePicker
  499. style={{ width: 160 }}
  500. value={
  501. this.state.paymentTimes
  502. ? moment(this.state.paymentTimes)
  503. : null
  504. }
  505. onChange={(_data, dataString) => {
  506. this.setState({
  507. paymentTimes: dataString
  508. });
  509. }}
  510. />
  511. </Form.Item>
  512. <Form.Item
  513. className="half-item"
  514. label="收款金额(万元)"
  515. labelCol={{ span: 8 }}
  516. wrapperCol={{ span: 14 }}
  517. >
  518. <Input
  519. style={{ width: 160 }}
  520. value={this.state.paymentAmount}
  521. placeholder="请输入收款金额"
  522. onChange={e => {
  523. this.setState({
  524. paymentAmount: e.target.value
  525. });
  526. }}
  527. />
  528. </Form.Item>
  529. </div>
  530. <div className="clearfix">
  531. <Form.Item
  532. className="half-item"
  533. label="开票时间"
  534. labelCol={{ span: 8 }}
  535. wrapperCol={{ span: 14 }}
  536. >
  537. <DatePicker
  538. style={{ width: 160 }}
  539. value={
  540. this.state.invoiceTimes
  541. ? moment(this.state.invoiceTimes)
  542. : null
  543. }
  544. onChange={(_data, dataString) => {
  545. this.setState({
  546. invoiceTimes: dataString
  547. });
  548. }}
  549. />
  550. </Form.Item>
  551. <Form.Item
  552. className="half-item"
  553. label="开票金额(万元)"
  554. labelCol={{ span: 8 }}
  555. wrapperCol={{ span: 14 }}
  556. >
  557. <Input
  558. style={{ width: 160 }}
  559. value={this.state.invoiceAmount}
  560. placeholder="请输入开票金额"
  561. onChange={e => {
  562. this.setState({
  563. invoiceAmount: e.target.value
  564. });
  565. }}
  566. />
  567. </Form.Item>
  568. <Form.Item
  569. className="half-item"
  570. label="发生成本(万元)"
  571. labelCol={{ span: 8 }}
  572. wrapperCol={{ span: 14 }}
  573. >
  574. <Input
  575. style={{ width: 160 }}
  576. value={this.state.cwCost}
  577. placeholder="请输入发生成本"
  578. onChange={e => {
  579. this.setState({
  580. cwCost: e.target.value
  581. });
  582. }}
  583. />
  584. </Form.Item>
  585. <Form.Item
  586. className="half-item"
  587. label="应退金额(万元)"
  588. labelCol={{ span: 8 }}
  589. wrapperCol={{ span: 14 }}
  590. >
  591. <Input
  592. style={{ width: 160 }}
  593. value={this.state.refundableAmount}
  594. placeholder="请输入应退金额"
  595. onChange={e => {
  596. this.setState({
  597. refundableAmount: e.target.value
  598. });
  599. }}
  600. />
  601. </Form.Item>
  602. </div>
  603. <div>
  604. <Form.Item
  605. label="备注"
  606. labelCol={{ span: 4 }}
  607. wrapperCol={{ span: 14 }}
  608. >
  609. <Input.TextArea
  610. rows={4}
  611. value={this.state.reason}
  612. placeholder="请输入补充资料/备注"
  613. onChange={e => {
  614. this.setState({
  615. reason: e.target.value
  616. });
  617. }}
  618. />
  619. </Form.Item>
  620. </div>
  621. </div>
  622. )}
  623. </div>
  624. {!(
  625. (this.props.data.processState > 5 &&
  626. this.props.data.processState <= 8) ||
  627. (this.props.data.processState === 9 && this.props.data.status === 4)
  628. ) ? (
  629. this.state.buttonStatus ? (
  630. <div
  631. className="clearfix"
  632. style={{ display: "flex", justifyContent: "space-around" }}
  633. >
  634. {buttonData.map((item, index) => {
  635. return (
  636. <AgreeButton
  637. data={item}
  638. key={index}
  639. backData={this.props.data}
  640. processState={this.props.processState}
  641. visible={this.changeButtonStatus}
  642. ajaxData={this.state}
  643. loadData={this.props.loadData}
  644. rejectState={this.state.rejectState}
  645. reason={this.state.reason}
  646. />
  647. );
  648. })}
  649. <Select
  650. defaultValue="0"
  651. style={{
  652. width: 120,
  653. float: "left",
  654. position: "relative",
  655. bottom: "28px",
  656. right: "-600px"
  657. }}
  658. onChange={val => {
  659. this.setState({ rejectState: val });
  660. console.log(val, this.state.rejectState);
  661. }}
  662. >
  663. <Option
  664. value="0"
  665. style={{
  666. display: this.props.processState >= 1 ? "block" : "none"
  667. }}
  668. >
  669. 营销员
  670. </Option>
  671. <Option
  672. value="1"
  673. style={{
  674. display: this.props.processState >= 2 ? "block" : "none"
  675. }}
  676. >
  677. 营销管理员
  678. </Option>
  679. <Option
  680. value="2"
  681. style={{
  682. display: this.props.processState >= 3 ? "block" : "none"
  683. }}
  684. >
  685. 技术员
  686. </Option>
  687. <Option
  688. value="3"
  689. style={{
  690. display: this.props.processState >= 4 ? "block" : "none"
  691. }}
  692. >
  693. 技术经理
  694. </Option>
  695. <Option
  696. value="4"
  697. style={{
  698. display: this.props.processState >= 5 ? "block" : "none"
  699. }}
  700. >
  701. 技术总监
  702. </Option>
  703. <Option
  704. value="5"
  705. style={{
  706. display: this.props.processState >= 6 ? "block" : "none"
  707. }}
  708. >
  709. 财务专员(退单)
  710. </Option>
  711. <Option
  712. value="6"
  713. style={{
  714. display: this.props.processState >= 7 ? "block" : "none"
  715. }}
  716. >
  717. 财务总监
  718. </Option>
  719. <Option
  720. value="7"
  721. style={{
  722. display: this.props.processState >= 8 ? "block" : "none"
  723. }}
  724. >
  725. 总裁
  726. </Option>
  727. </Select>
  728. </div>
  729. ) : (
  730. ""
  731. )
  732. ) : (
  733. ""
  734. )}
  735. {/* <ReactToPrint
  736. trigger={() => (
  737. <div className="clearfix">
  738. <Button type="primary" style={{ float: "right", marginTop: 10 }}>
  739. 打印
  740. </Button>
  741. </div>
  742. )}
  743. content={() => this.refs}
  744. /> */}
  745. </div>
  746. );
  747. }
  748. }
  749. export { ChangeDetail };