changeDetailCwzj.js 33 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088
  1. import React, { Component } from "react";
  2. import { Form, Upload, Modal, Button, message, Input, Select, Table, Tooltip } 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 { typeList } from '@/dataDic.js'
  8. import $ from "jquery/src/ajax";
  9. import "../../../../../../css/changeDetail.less"
  10. import quxiao from "../../../../../../image/quxiao.png";
  11. import tongguo from "../../../../../../image/tongguo.png";
  12. import ProAndCuiList from "./proAndCuiList.jsx";
  13. import "./xButton.less";
  14. // import ReactToPrint from "react-to-print";
  15. const FormItem = Form.Item;
  16. import Refund from "./refund.js"
  17. import ImgList from "../../../../common/imgList";
  18. import EnterpriseNameChange from "../../../../common/enterpriseNameChange";
  19. const { TextArea } = Input;
  20. const formItemLayout = {
  21. labelCol: { span: 8 },
  22. wrapperCol: { span: 14 }
  23. };
  24. const getChangeType = function (e) {
  25. if (e || e == 0) {
  26. let str = e.toString();
  27. let theType = "";
  28. typeList.map(function (item) {
  29. if (item.value == str) {
  30. theType = item.key;
  31. }
  32. });
  33. return theType;
  34. }
  35. };
  36. class Itemlist extends Component {
  37. constructor(props) {
  38. super(props);
  39. }
  40. render() {
  41. let pageData = this.props.pageData;
  42. return (
  43. <div className="clearfix">
  44. <Form.Item
  45. label={pageData.labelA}
  46. {...pageData.formItemLayoutA}
  47. className="half-item"
  48. >
  49. {pageData.labelA === '变更原因' ? <Tooltip placement="topLeft" title={pageData.dataA}>
  50. <div style={{
  51. width: '150px !important',
  52. whiteSpace: 'nowrap',
  53. wordBreak: 'break-all',
  54. overflow: 'hidden',
  55. textOverflow: 'ellipsis',
  56. }}>{pageData.dataA}</div>
  57. </Tooltip> : pageData.dataA}
  58. {pageData.labelA === '客户名称' ? <EnterpriseNameChange
  59. type='journal'
  60. style={{ marginLeft: 10 }}
  61. enterpriseId={this.props.orderUid} /> : null}
  62. </Form.Item>
  63. <Form.Item
  64. label={pageData.labelB}
  65. {...pageData.formItemLayoutB}
  66. className="half-item"
  67. >
  68. <span>{pageData.dataB}</span>
  69. </Form.Item>
  70. </div>
  71. );
  72. }
  73. }
  74. class ChangeDetail extends Component {
  75. constructor(props) {
  76. super(props);
  77. this.state = {
  78. previewVisible: false,
  79. buttonStatus: true,
  80. dataSource: [],
  81. reason: "",
  82. rejectState: 0,
  83. rotateDeg: 0,
  84. contactList: [],
  85. ContactsLists: [
  86. {
  87. title: "金额(万元)",
  88. dataIndex: "amount",
  89. key: "amount",
  90. render: (text, record) => {
  91. return (
  92. <div>
  93. 实际回收退票(万元)
  94. <Input
  95. value={record.amount}
  96. placeholder="请输入金额(必填项)"
  97. disabled={record.load}
  98. key={record.id}
  99. required="required"
  100. onChange={e => {
  101. record.amount = e.target.value;
  102. this.setState({ contactList: this.state.contactList });
  103. }}
  104. style={{ width: "120px" }}
  105. />
  106. </div>
  107. );
  108. }
  109. },
  110. {
  111. title: "时间",
  112. dataIndex: "createTimes",
  113. key: "createTimes",
  114. render: (text, record) => {
  115. return (
  116. <div>
  117. {/* <DatePicker
  118. showTime
  119. placeholder="请输入退票时间"
  120. onChange={v => {
  121. record.time = v._d;
  122. this.setState({ contactList: this.state.contactList });
  123. }}
  124. onOk={v => {
  125. record.time = v._d;
  126. this.setState({ contactList: this.state.contactList });
  127. console.log(this.state);
  128. }}
  129. /> */}
  130. {record.createTimes}
  131. </div>
  132. );
  133. }
  134. }
  135. // {
  136. // title: "操作",
  137. // dataIndex: "dels",
  138. // key: "dels",
  139. // render: (text, record, index) => {
  140. // return (
  141. // <div style={{ display:
  142. // (this.props.data.processState == 7 ||
  143. // this.props.data.processState == 8) &&
  144. // this.props.data.status == 4
  145. // ? "none"
  146. // : "block"}}>
  147. // <Popconfirm
  148. // title="是否删除?"
  149. // onConfirm={() => {
  150. // this.confirmDelet(record);
  151. // }}
  152. // okText="删除"
  153. // cancelText="不删除"
  154. // >
  155. // <Button
  156. // style={{
  157. // marginRight: "10px",
  158. // color: "#ffffff",
  159. // background: "#f00",
  160. // border: "none"
  161. // }}
  162. // >
  163. // 删除
  164. // </Button>
  165. // </Popconfirm>
  166. // {record.load != true ? (
  167. // <Button
  168. // type="primary"
  169. // onClick={() => {
  170. // this.contactSave(record);
  171. // }}
  172. // >
  173. // 保存
  174. // </Button>
  175. // ) : (
  176. // ""
  177. // )}
  178. // </div>
  179. // );
  180. // }
  181. // }
  182. ]
  183. };
  184. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  185. this.changeButtonStatus = this.changeButtonStatus.bind(this);
  186. this.downImg = this.downImg.bind(this);
  187. this.upImg = this.upImg.bind(this);
  188. this.rotate = this.rotate.bind(this);
  189. this.moneyOld = this.moneyOld.bind(this);
  190. }
  191. getOrgCodeUrl(e) {
  192. this.setState({
  193. orgCodeUrl: e
  194. });
  195. }
  196. downImg() {
  197. let num = 0;
  198. for (let i = 0; i < this.props.pictureUrl.length; i++) {
  199. if (this.props.pictureUrl[i].url == this.state.previewImage) {
  200. num = i;
  201. }
  202. }
  203. if (num == this.props.pictureUrl.length - 1) {
  204. return message.warning("已经是最后一张了哦");
  205. }
  206. this.state.previewImage = this.props.pictureUrl[num + 1].url;
  207. this.setState({
  208. previewImage: this.state.previewImage,
  209. rotateDeg: 0
  210. });
  211. }
  212. upImg() {
  213. let num = 0;
  214. for (let i = 0; i < this.props.pictureUrl.length; i++) {
  215. if (this.props.pictureUrl[i].url == this.state.previewImage) {
  216. num = i;
  217. }
  218. }
  219. if (num == 0) {
  220. return message.warning("已经是第一张了哦");
  221. }
  222. this.state.previewImage = this.props.pictureUrl[num - 1].url;
  223. this.setState({
  224. previewImage: this.state.previewImage,
  225. rotateDeg: 0
  226. });
  227. }
  228. rotate() {
  229. let rotateDeg = this.state.rotateDeg + 90;
  230. this.setState({
  231. rotateDeg
  232. });
  233. }
  234. moneyOld(str, money) {
  235. if (money) {
  236. return (
  237. <span style={{ color: "red", fontWeight: 900, fontSize: 16 }}>
  238. {str}(原合同金额{money}万元)
  239. </span>
  240. );
  241. } else {
  242. return <span style={{ color: "red", fontWeight: 900, fontSize: 16 }}>{str}</span>;
  243. }
  244. }
  245. componentDidMount() {
  246. window.setTimeout(() => {
  247. const contactList = this.props.contactList;
  248. // console.log("看看props", this.props);
  249. contactList.forEach(item => {
  250. item.load = true;
  251. });
  252. this.setState({
  253. contactList
  254. });
  255. }, 0);
  256. }
  257. // loadDataChange() {
  258. // $.ajax({
  259. // method: "get",
  260. // dataType: "json",
  261. // crossDomain: false,
  262. // url: globalConfig.context + "/api/admin/orderChange/orderChangeLogList",
  263. // data: {
  264. // changeId: this.props.data.id
  265. // },
  266. // success: function(data) {
  267. // if (data.error.length || data.data.list == "") {
  268. // if (data.error && data.error.length) {
  269. // message.warning(data.error[0].message);
  270. // }
  271. // } else {
  272. // this.setState({
  273. // dataSource: data.data
  274. // });
  275. // }
  276. // }.bind(this)
  277. // });
  278. // }
  279. // componentDidMount() {
  280. // window.setTimeout(() => {
  281. // console.log(this.props);
  282. // },2000)
  283. // }
  284. //同意拒绝按钮的有无
  285. changeButtonStatus() {
  286. this.setState({
  287. buttonStatus: !this.state.buttonStatus
  288. });
  289. }
  290. componentWillReceiveProps(nextProps) {
  291. this.setState({
  292. paymentTimes: nextProps.data.paymentTimes,
  293. paymentAmount: nextProps.data.paymentAmount,
  294. invoiceTimes: nextProps.data.invoiceTimes,
  295. invoiceAmount: nextProps.data.invoiceAmount,
  296. cwCost: nextProps.data.cwCost,
  297. refundableAmount: nextProps.data.refundableAmount,
  298. cwRemarks: nextProps.data.cwRemarks,
  299. contactList: nextProps.contactList,
  300. refundInvoice: nextProps.data.refundInvoice
  301. });
  302. // if (!nextProps.reset) {
  303. // this.reset();
  304. // }
  305. }
  306. onRef(ref) {
  307. this.fun = ref;
  308. }
  309. render() {
  310. const pageData = [
  311. {
  312. labelA: "客户名称",
  313. formItemLayoutA: formItemLayout,
  314. dataA: this.props.data.userName,
  315. labelB: "合同编号",
  316. formItemLayoutB: formItemLayout,
  317. dataB: this.props.data.contractNo
  318. },
  319. {
  320. labelA: "时间",
  321. formItemLayoutA: formItemLayout,
  322. dataA: this.props.data.createTimes,
  323. labelB: "发起人",
  324. formItemLayoutB: formItemLayout,
  325. dataB: this.props.data.applicant
  326. },
  327. {
  328. labelA: "当前进度",
  329. formItemLayoutA: formItemLayout,
  330. // 当前是咨询师以及咨询师经理时使用shenhePeo函数,其他流程正常显示
  331. dataA:
  332. this.props.data.processState == 2 || this.props.data.processState == 3
  333. ? shenghePeo(this.props.data.examineName, this.props.data.processState)
  334. : getProcessStatusNew(
  335. this.props.data.examineName,
  336. this.props.data.processState,
  337. this.props.data.status
  338. ),
  339. labelB: "变更类型",
  340. formItemLayoutB: formItemLayout,
  341. dataB: getChangeType(this.props.data.type)
  342. },
  343. {
  344. labelA: "合同额(万元)",
  345. formItemLayoutA: formItemLayout,
  346. dataA: this.moneyOld(this.props.data.totalAmount, this.props.money),
  347. labelB: "已收款(万元)",
  348. formItemLayoutB: formItemLayout,
  349. dataB: changeColor(this.props.data.settlementAmount)
  350. },
  351. {
  352. labelA: "欠款(万元)",
  353. formItemLayoutA: formItemLayout,
  354. dataA: changeColor(this.props.data.arrears),
  355. labelB: "申请退款(万元)",
  356. formItemLayoutB: formItemLayout,
  357. dataB: changeColor(this.props.data.changeAmount)
  358. },
  359. {
  360. labelA: "首付款(万元)",
  361. formItemLayoutA: formItemLayout,
  362. dataA:changeColor(this.props.data.firstAmount),
  363. },
  364. {
  365. labelA: "变更原因",
  366. formItemLayoutA: formItemLayout,
  367. dataA: this.props.data.remarks
  368. }
  369. ];
  370. const planData = [
  371. {
  372. labelA: "项目进度",
  373. formItemLayoutA: formItemLayout,
  374. dataA: this.props.data.projectState,
  375. onChangeA: value => {
  376. this.setState({
  377. projectState: value
  378. });
  379. },
  380. labelB: "发生成本费用(万元)",
  381. formItemLayoutB: formItemLayout,
  382. dataB: this.props.data.zxsCost,
  383. onChangeB: value => {
  384. this.setState({
  385. zxsCost: value
  386. });
  387. }
  388. },
  389. {
  390. labelA: "备注",
  391. formItemLayoutA: formItemLayout,
  392. dataA: this.props.data.zxsRemarks,
  393. onChangeA: value => {
  394. this.setState({
  395. zxsRemarks: value
  396. });
  397. }
  398. }
  399. ];
  400. const financeData = [
  401. // {
  402. // labelA: "收款时间",
  403. // formItemLayoutA: formItemLayout,
  404. // dataA: this.props.data.paymentTimes,
  405. // labelB: "收款金额(万元)",
  406. // formItemLayoutB: formItemLayout,
  407. // dataB: this.props.data.paymentAmount
  408. // },
  409. // {
  410. // labelA: "开票时间",
  411. // formItemLayoutA: formItemLayout,
  412. // dataA: this.props.data.invoiceTimes,
  413. // labelB: "已开票金额(万元)",
  414. // formItemLayoutB: formItemLayout,
  415. // dataB: this.props.data.invoiceAmount
  416. // },
  417. {
  418. labelA: "发生成本(万元)",
  419. formItemLayoutA: formItemLayout,
  420. dataA: this.props.data.cwCost,
  421. labelB: "应退金额(万元)",
  422. formItemLayoutB: formItemLayout,
  423. dataB: this.props.data.refundableAmount
  424. }
  425. // {
  426. // labelA: "补充资料/备注",
  427. // formItemLayoutA: formItemLayout,
  428. // dataA: this.props.data.cwRemarks
  429. // }
  430. ];
  431. const buttonData = [
  432. {
  433. name: "同意",
  434. title: "理由",
  435. placeholder: "请输入理由",
  436. type: "primary",
  437. status: 2,
  438. onChange: value => {
  439. this.setState({
  440. remarks: value
  441. });
  442. }
  443. },
  444. {
  445. name: "拒绝",
  446. title: "理由",
  447. placeholder: "请输入理由",
  448. type: "danger",
  449. status: 3,
  450. onChange: value => {
  451. this.setState({
  452. remarks: value
  453. });
  454. }
  455. }
  456. ];
  457. const orgCodeUrl = this.props.pictureUrl;
  458. const attachment = this.props.attachment
  459. return (
  460. <div className="clearfix changeDetail">
  461. <div
  462. className="clearfix"
  463. ref={(e) => {
  464. this.refs = e;
  465. }}
  466. >
  467. <div
  468. style={{
  469. borderRadius: "50%",
  470. width: 300,
  471. height: 300,
  472. position: "absolute",
  473. top: 230,
  474. left: 525,
  475. transform: "rotate(-5deg)",
  476. zIndex: 1,
  477. display:
  478. (this.props.data.processState == 7 ||
  479. this.props.data.processState == 8) &&
  480. this.props.data.status == 4
  481. ? "block"
  482. : "none",
  483. }}
  484. >
  485. {/* <span
  486. style={{
  487. fontSize: 29,
  488. position: "absolute",
  489. left: "50%",
  490. top: "50%",
  491. transform: "translate(-50%,-50%)",
  492. color: "red"
  493. }}
  494. >
  495. 通过
  496. </span> */}
  497. <img src={tongguo} style={{ width: "100%" }} />
  498. </div>
  499. <div
  500. style={{
  501. borderRadius: "50%",
  502. width: 300,
  503. height: 300,
  504. position: "absolute",
  505. top: 284,
  506. left: 586,
  507. transform: "rotate(-5deg)",
  508. zIndex: 1,
  509. display: this.props.data.status == 5 ? "block" : "none",
  510. }}
  511. >
  512. <img src={quxiao} style={{ width: "63%" }} />
  513. </div>
  514. <h2 style={{ textAlign: "center", marginBottom: 10, marginTop: 20 }}>
  515. 合同变更记录
  516. </h2>
  517. {pageData.map((item, index) => {
  518. return <Itemlist key={index} pageData={item} orderUid={this.props.orderUid} />;
  519. })}
  520. <Form.Item
  521. label="变更凭证"
  522. labelCol={{ span: 4 }}
  523. wrapperCol={{ span: 18 }}
  524. >
  525. {/*<Upload*/}
  526. {/* className="demandDetailShow-upload"*/}
  527. {/* listType="picture-card"*/}
  528. {/* fileList={orgCodeUrl}*/}
  529. {/* onPreview={(file) => {*/}
  530. {/* this.setState({*/}
  531. {/* previewImage: file.url || file.thumbUrl,*/}
  532. {/* previewVisible: true,*/}
  533. {/* });*/}
  534. {/* }}*/}
  535. {/*/>*/}
  536. <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
  537. {orgCodeUrl ? <ImgList domId={'changeDetailCwzj' + this.props.id} fileList={orgCodeUrl} /> : <div />}
  538. </div>
  539. <Modal
  540. maskClosable={false}
  541. footer={null}
  542. width={"50%"}
  543. visible={this.state.previewVisible}
  544. onCancel={() => {
  545. this.setState({ previewVisible: false }, () => { });
  546. }}
  547. >
  548. <img
  549. alt=""
  550. style={{
  551. width: "100%",
  552. transform: `rotate(${this.state.rotateDeg}deg)`,
  553. }}
  554. src={this.state.previewImage || ""}
  555. />
  556. <Button
  557. onClick={this.rotate}
  558. style={{
  559. position: "relative",
  560. left: "50%",
  561. transform: "translateX(-50%)",
  562. }}
  563. >
  564. 旋转
  565. </Button>
  566. <Button
  567. onClick={this.upImg}
  568. style={{
  569. position: "absolute",
  570. left: -81,
  571. top: "50%",
  572. transform: "translateY(-50%)",
  573. }}
  574. >
  575. 上一张
  576. </Button>
  577. <Button
  578. onClick={this.downImg}
  579. style={{
  580. position: "absolute",
  581. right: -81,
  582. top: "50%",
  583. transform: "translateY(-50%)",
  584. }}
  585. >
  586. 下一张
  587. </Button>
  588. </Modal>
  589. <Rizhi changeId={this.props.id} />
  590. </Form.Item>
  591. {
  592. this.props.contractPictureUrl && this.props.contractPictureUrl.length != 0 &&
  593. <div className="clearfix">
  594. <Form.Item
  595. labelCol={{ span: 4 }}
  596. wrapperCol={{ span: 18 }}
  597. label="最新合同"
  598. >
  599. <div style={{ paddingTop: 10 }}>
  600. <ImgList
  601. fileList={
  602. this.props.contractPictureUrl
  603. }
  604. ItemWidth={"96px"}
  605. />
  606. </div>
  607. </Form.Item>
  608. </div>
  609. }
  610. {/* <h2 style={{ textAlign: "center", marginBottom: 0 }}>变更日志</h2> */}
  611. <ul
  612. style={{
  613. width: "868px",
  614. overflow: "hidden",
  615. paddingLeft: "90px",
  616. paddingTop: "10px",
  617. position: "relative",
  618. bottom: "20px",
  619. }}
  620. >
  621. {/* <span>操作人:</span> */}
  622. {this.props.dataSource.map((item, index) => {
  623. if (item.status == 0) {
  624. item.status = "发起";
  625. } else if (item.status == 1) {
  626. item.status = "审核中";
  627. } else if (item.status == 2) {
  628. item.status = "通过";
  629. } else if (item.status == 3) {
  630. item.status = "驳回";
  631. } else if (item.status == 4) {
  632. item.status = "完成";
  633. }
  634. return (
  635. <li
  636. key={index}
  637. style={{
  638. width: "100%",
  639. height: "auto",
  640. wordBreak: "break-all",
  641. marginBottom: "10px",
  642. }}
  643. >
  644. {item.aname + ":" + "(" + item.status + ")" + item.remarks}
  645. </li>
  646. );
  647. })}
  648. </ul>
  649. <ProAndCuiList id={this.props.id} />
  650. {/* 收款情况 */}
  651. <div className="clearfix">
  652. <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
  653. 收款情况
  654. </h3>
  655. <div style={{ marginLeft: "90px" }}>
  656. <ul>
  657. {(this.props.proceedsData.bill || []).map((item, index) => (
  658. <li key={index}>
  659. {item.payTime +
  660. " " +
  661. item.aName +
  662. " 收款:" +
  663. item.transactionAmount +
  664. "万元"}
  665. </li>
  666. ))}
  667. </ul>
  668. <div>收款总计:{this.props.proceedsTotal}万元</div>
  669. </div>
  670. <br />
  671. <div style={{ marginLeft: "90px" }}>
  672. <ul>
  673. {(this.props.proceedsData.invoice || []).map((item, index) => (
  674. <li key={index}>
  675. {item.createTime + " " + " 开票:" + item.amount + "万元"}
  676. </li>
  677. ))}
  678. </ul>
  679. <div>开票总计:{this.props.invoiceTotal}万元</div>
  680. </div>
  681. <p style={{ marginLeft: "90px", color: "red" }}>
  682. 系统预估 产生成本(万元):
  683. {this.props.data.estimateCost
  684. ? this.props.data.estimateCost
  685. : "0"}{" "}
  686. &nbsp;应退金额(万元):
  687. {this.props.data.estimateRefundable
  688. ? this.props.data.estimateRefundable
  689. : "0"}
  690. </p>
  691. </div>
  692. {/* 当前财务状态 */}
  693. {this.props.data.processState > 5 &&
  694. (this.props.data.status == 1 || this.props.data.status == 3) &&
  695. this.props.processState == this.props.data.processState ? (
  696. // this.state.buttonStatus ? (
  697. <div>
  698. <div style={{ marginBottom: 10 }}>
  699. <div className="clearfix">
  700. <div>
  701. <h3
  702. style={{
  703. marginLeft: 10,
  704. fontWeight: 800,
  705. marginBottom: 10,
  706. }}
  707. >
  708. 当前财务状态(财务填写)
  709. </h3>
  710. {financeData.map((item, index) => {
  711. return <Itemlist key={index} pageData={item} orderUid={this.props.orderUid} />;
  712. })}
  713. </div>
  714. </div>
  715. <div
  716. style={{
  717. marginTop: "10px",
  718. display:
  719. this.props.processState == this.props.data.processState
  720. ? "block"
  721. : "none",
  722. }}
  723. >
  724. <Form.Item
  725. label="备注"
  726. labelCol={{ span: 4 }}
  727. wrapperCol={{ span: 14 }}
  728. >
  729. <Input.TextArea
  730. rows={4}
  731. value={this.state.reason}
  732. placeholder="请输入补充资料/备注"
  733. onChange={(e) => {
  734. this.setState({
  735. reason: e.target.value,
  736. });
  737. }}
  738. />
  739. </Form.Item>
  740. </div>
  741. </div>
  742. <div
  743. className="clearfix"
  744. style={{ display: "flex", justifyContent: "space-around" }}
  745. >
  746. {buttonData.map((item, index) => {
  747. return (
  748. <AgreeButton
  749. data={item}
  750. key={index}
  751. backData={this.props.data}
  752. processState={this.props.processState}
  753. visible={this.changeButtonStatus}
  754. ajaxData={this.state}
  755. loadData={this.props.loadData}
  756. reason={this.state.reason}
  757. rejectState={this.state.rejectState}
  758. onCancel={this.props.onCancel}
  759. />
  760. );
  761. })}
  762. </div>
  763. <Select
  764. defaultValue="0"
  765. style={{
  766. width: 120,
  767. float: "left",
  768. position: "relative",
  769. bottom: "28px",
  770. right: "-600px",
  771. }}
  772. onChange={(val) => {
  773. this.setState({ rejectState: val });
  774. }}
  775. >
  776. <Option
  777. value="0"
  778. style={{
  779. display: this.props.processState >= 1 ? "block" : "none",
  780. }}
  781. >
  782. 营销员
  783. </Option>
  784. <Option
  785. value="1"
  786. style={{
  787. display: this.props.processState >= 2 ? "block" : "none",
  788. }}
  789. >
  790. 营销管理员
  791. </Option>
  792. <Option
  793. value="2"
  794. style={{
  795. display: this.props.processState >= 3 ? "block" : "none",
  796. }}
  797. >
  798. 咨询师
  799. </Option>
  800. <Option
  801. value="3"
  802. style={{
  803. display: this.props.processState >= 4 ? "block" : "none",
  804. }}
  805. >
  806. 咨询师经理
  807. </Option>
  808. <Option
  809. value="4"
  810. style={{
  811. display: this.props.processState >= 5 ? "block" : "none",
  812. }}
  813. >
  814. 咨询师总监
  815. </Option>
  816. <Option
  817. value="5"
  818. style={{
  819. display: this.props.processState >= 6 ? "block" : "none",
  820. }}
  821. >
  822. 财务专员(退单)
  823. </Option>
  824. <Option
  825. value="6"
  826. style={{
  827. display: this.props.processState >= 7 ? "block" : "none",
  828. }}
  829. >
  830. 财务总监
  831. </Option>
  832. <Option
  833. value="7"
  834. style={{
  835. display: this.props.processState >= 8 ? "block" : "none",
  836. }}
  837. >
  838. 总裁
  839. </Option>
  840. </Select>
  841. </div>
  842. ) : (
  843. <div>
  844. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  845. 当前财务状态(财务填写)
  846. </h3>
  847. {financeData.map((item, index) => {
  848. return <Itemlist key={index} pageData={item} orderUid={this.props.orderUid} />;
  849. })}
  850. </div>
  851. )}
  852. {/* 回收退票 */}
  853. <div
  854. style={{
  855. display:
  856. (this.props.data.processState == 8 ||
  857. this.props.data.processState == 7) &&
  858. (this.props.data.status == 2 || this.props.data.status == 4 || this.props.data.status == 3 || this.props.data.status == 6)
  859. ? "block"
  860. : "none",
  861. }}
  862. >
  863. <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
  864. 回收退票
  865. </h3>
  866. {/* {this.state.processStatus == 0 ? ( */}
  867. <Button
  868. type="primary"
  869. onClick={this.addcontact}
  870. style={{
  871. float: "right",
  872. marginRight: "50px",
  873. marginBottom: "15px",
  874. position: "relative",
  875. zIndex: "999",
  876. display: "none",
  877. }}
  878. >
  879. 添加回收退票
  880. </Button>
  881. {/* ) : (
  882. ""
  883. )} */}
  884. <Table
  885. size="middle"
  886. pagination={false}
  887. bordered
  888. columns={this.state.ContactsLists}
  889. dataSource={this.state.contactList}
  890. />
  891. </div>
  892. {/* 完成审核,上传附件 */}
  893. <div style={{
  894. position: "relative",
  895. display:
  896. (this.props.data.processState == 7 ||
  897. this.props.data.processState == 8) &&
  898. this.props.data.status == 2 || this.props.data.status == 4 || this.props.data.status == 3 || this.props.data.status == 6
  899. ? "block"
  900. : "none",
  901. marginTop: 10,
  902. }}
  903. >
  904. <hr
  905. style={{
  906. marginTop: 12,
  907. marginBottom: 10,
  908. backgroundColor: "black",
  909. height: 1,
  910. border: "none",
  911. }}
  912. />
  913. <h3
  914. style={{
  915. marginLeft: 20,
  916. fontWeight: 800,
  917. marginBottom: 10,
  918. display: "inline-block",
  919. }}
  920. >
  921. 完成审核,上传附件{" "}
  922. <span
  923. style={{ fontSize: 12, fontWeight: "normal", color: "red" }}
  924. >
  925. (注:由营销员上传变更后附件,全变更流程完成。)
  926. </span>
  927. </h3>
  928. <div>
  929. <Form.Item
  930. label="变更附件"
  931. labelCol={{ span: 4 }}
  932. wrapperCol={{ span: 18 }}
  933. >
  934. <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
  935. {attachment.length > 0 ? <ImgList domId={this.props.domId + 2 ? this.props.domId + 2 : 'changeDetailCwzj1'} fileList={attachment} ItemWidth={'96px'} /> : '无附件'}
  936. </div>
  937. <Modal
  938. maskClosable={false}
  939. footer={null}
  940. width={"50%"}
  941. visible={this.state.previewVisible}
  942. onCancel={() => {
  943. this.setState({ previewVisible: false, rotateDeg: 0 }, () => {
  944. // this.reset();
  945. });
  946. }}
  947. >
  948. <img
  949. alt=""
  950. style={{
  951. width: "100%",
  952. transform: `rotate(${this.state.rotateDeg}deg)`,
  953. }}
  954. src={this.state.previewImage || ""}
  955. />
  956. <Button
  957. onClick={this.rotate}
  958. style={{
  959. position: "relative",
  960. left: "50%",
  961. transform: "translateX(-50%)",
  962. }}
  963. >
  964. 旋转
  965. </Button>
  966. <Button
  967. onClick={this.upImg}
  968. style={{
  969. position: "absolute",
  970. left: -81,
  971. top: "50%",
  972. transform: "translateY(-50%)",
  973. }}
  974. >
  975. 上一张
  976. </Button>
  977. <Button
  978. onClick={this.downImg}
  979. style={{
  980. position: "absolute",
  981. right: -81,
  982. top: "50%",
  983. transform: "translateY(-50%)",
  984. }}
  985. >
  986. 下一张
  987. </Button>
  988. </Modal>
  989. {/* <Rizhi changeId={this.props.id} /> */}
  990. </Form.Item>
  991. </div>
  992. </div>
  993. {/* {this.props.data.type === 0 && this.props.data.processState >= 4 ? (
  994. <div>
  995. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  996. 当前项目进度(咨询师经理填写)
  997. </h3>
  998. {planData.map((item, index) => {
  999. return <Itemlist key={index} pageData={item} />;
  1000. })}
  1001. </div>
  1002. ) : (
  1003. ""
  1004. )} */}
  1005. {/* {this.props.data.type === 0 ? (
  1006. this.props.data.processState >= 5 ? (
  1007. <div>
  1008. <h3
  1009. style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}
  1010. >
  1011. 当前财务状态(财务填写)
  1012. </h3>
  1013. {financeData.map((item, index) => {
  1014. return <Itemlist key={index} pageData={item} />;
  1015. })}
  1016. </div>
  1017. ) : (
  1018. ""
  1019. )
  1020. ) : this.props.data.status === 4 ? (
  1021. <div>
  1022. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  1023. 当前财务状态(财务填写)
  1024. </h3>
  1025. {financeData.map((item, index) => {
  1026. return <Itemlist key={index} pageData={item} />;
  1027. })}
  1028. </div>
  1029. ) : (
  1030. ""
  1031. )} */}
  1032. </div>
  1033. <div
  1034. style={{
  1035. display:
  1036. (this.props.data.processState == 7 ||
  1037. this.props.data.processState == 8) &&
  1038. this.props.data.status == 4 &&
  1039. this.props.data.refundStatus
  1040. ? "block"
  1041. : "none",
  1042. }}
  1043. >
  1044. <Refund data={this.props.data} id={this.props.id} />
  1045. </div>
  1046. {/* <ReactToPrint
  1047. trigger={() => (
  1048. <div className="clearfix">
  1049. <Button type="primary" style={{ float: "right", marginTop: 10 }}>
  1050. 打印
  1051. </Button>
  1052. </div>
  1053. )}
  1054. content={() => this.refs}
  1055. /> */}
  1056. </div>
  1057. );
  1058. }
  1059. }
  1060. export { ChangeDetail };