changeDetailJsjl.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428
  1. import React, { Component } from "react";
  2. import { Form, Upload, Modal, Input, Button } from "antd";
  3. import AgreeButton from "./agreeButton.js";
  4. import Rizhi from "./rizhi.js";
  5. import { getProcessStatusNew } from "@/tools.js";
  6. import ReactToPrint from "react-to-print";
  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. <p style={{ width: 500, wordWrap: "break-word" }}>{pageData.dataA}</p>
  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 ChangeDetail extends Component {
  76. constructor(props) {
  77. super(props);
  78. this.state = {
  79. previewVisible: false,
  80. buttonStatus: true,
  81. changeType: 1
  82. };
  83. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  84. this.changeButtonStatus = this.changeButtonStatus.bind(this);
  85. }
  86. componentWillReceiveProps(nextProps) {
  87. this.setState({
  88. projectState: nextProps.data.projectState,
  89. zxsCost: nextProps.data.zxsCost,
  90. zxsRemarks: nextProps.data.zxsRemarks
  91. });
  92. }
  93. getOrgCodeUrl(e) {
  94. this.setState({
  95. orgCodeUrl: e
  96. });
  97. }
  98. //同意拒绝按钮的有无
  99. changeButtonStatus() {
  100. this.setState({
  101. buttonStatus: !this.state.buttonStatus
  102. });
  103. }
  104. render() {
  105. const pageData = [
  106. {
  107. labelA: "客户名称",
  108. formItemLayoutA: formItemLayout,
  109. dataA: this.props.data.userName,
  110. labelB: "合同编号",
  111. formItemLayoutB: formItemLayout,
  112. dataB: this.props.data.contractNo
  113. },
  114. {
  115. labelA: "时间",
  116. formItemLayoutA: formItemLayout,
  117. dataA: this.props.data.createTimes,
  118. labelB: "发起人",
  119. formItemLayoutB: formItemLayout,
  120. dataB: this.props.data.applicant
  121. },
  122. {
  123. labelA: "当前进度",
  124. formItemLayoutA: formItemLayout,
  125. dataA:
  126. this.props.data.status !== 4
  127. ? getProcessStatusNew(this.props.data.processState) + "审核中"
  128. : getProcessStatusNew(this.props.data.processState) + "已完成",
  129. labelB: "变更类型",
  130. formItemLayoutB: formItemLayout,
  131. dataB: getChangeType(this.props.data.type)
  132. },
  133. {
  134. labelA: "合同额(万元)",
  135. formItemLayoutA: formItemLayout,
  136. dataA: this.props.data.totalAmount,
  137. labelB: "已收款(万元)",
  138. formItemLayoutB: formItemLayout,
  139. dataB: this.props.data.settlementAmount
  140. },
  141. {
  142. labelA: "欠款(万元)",
  143. formItemLayoutA: formItemLayout,
  144. dataA: this.props.data.arrears,
  145. labelB: "申请退款(万元)",
  146. formItemLayoutB: formItemLayout,
  147. dataB: this.props.data.changeAmount
  148. },
  149. {
  150. labelA: "备注",
  151. formItemLayoutA: formItemLayout,
  152. dataA: this.props.data.remarks
  153. }
  154. ];
  155. const planData = [
  156. {
  157. labelA: "项目进度",
  158. formItemLayoutA: formItemLayout,
  159. dataA: this.props.data.projectState,
  160. onChangeA: value => {
  161. this.setState({
  162. projectState: value
  163. });
  164. },
  165. labelB: "发生成本费用(万元)",
  166. formItemLayoutB: formItemLayout,
  167. dataB: this.props.data.zxsCost,
  168. onChangeB: value => {
  169. this.setState({
  170. zxsCost: value
  171. });
  172. }
  173. },
  174. {
  175. labelA: "备注",
  176. formItemLayoutA: formItemLayout,
  177. dataA: this.props.data.zxsRemarks,
  178. onChangeA: value => {
  179. this.setState({
  180. zxsRemarks: value
  181. });
  182. }
  183. }
  184. ];
  185. const financeData = [
  186. {
  187. labelA: "收款时间",
  188. formItemLayoutA: formItemLayout,
  189. dataA: this.props.data.paymentTimes,
  190. labelB: "收款金额(万元)",
  191. formItemLayoutB: formItemLayout,
  192. dataB: this.props.data.paymentAmount
  193. },
  194. {
  195. labelA: "开票时间",
  196. formItemLayoutA: formItemLayout,
  197. dataA: this.props.data.invoiceTimes,
  198. labelB: "已开票金额(万元)",
  199. formItemLayoutB: formItemLayout,
  200. dataB: this.props.data.invoiceAmount
  201. },
  202. {
  203. labelA: "发生成本(万元)",
  204. formItemLayoutA: formItemLayout,
  205. dataA: this.props.data.cwCost,
  206. labelB: "应退金额(万元)",
  207. formItemLayoutB: formItemLayout,
  208. dataB: this.props.data.refundableAmount
  209. },
  210. {
  211. labelA: "补充资料/备注",
  212. formItemLayoutA: formItemLayout,
  213. dataA: this.props.data.cwRemarks
  214. }
  215. ];
  216. const buttonData = [
  217. {
  218. name: "同意",
  219. title: "理由",
  220. placeholder: "请输入理由",
  221. type: "primary",
  222. status: 2,
  223. onChange: value => {
  224. this.setState({
  225. remarks: value
  226. });
  227. }
  228. },
  229. {
  230. name: "拒绝",
  231. title: "理由",
  232. placeholder: "请输入理由",
  233. type: "danger",
  234. status: 3,
  235. onChange: value => {
  236. this.setState({
  237. remarks: value
  238. });
  239. }
  240. }
  241. ];
  242. const orgCodeUrl = this.props.pictureUrl;
  243. return (
  244. <div className="clearfix">
  245. <div
  246. className="clearfix"
  247. style={{ marginTop: 20 }}
  248. ref={e => {
  249. this.refs = e;
  250. }}
  251. >
  252. <h2 style={{ textAlign: "center", marginBottom: 10 }}>
  253. 合同变更记录
  254. </h2>
  255. {pageData.map((item, index) => {
  256. return <Itemlist key={index} pageData={item} />;
  257. })}
  258. <Form.Item
  259. label="变更凭证"
  260. labelCol={{ span: 4 }}
  261. wrapperCol={{ span: 18 }}
  262. >
  263. <Upload
  264. className="demandDetailShow-upload"
  265. listType="picture-card"
  266. fileList={orgCodeUrl}
  267. onPreview={file => {
  268. this.setState({
  269. previewImage: file.url || file.thumbUrl,
  270. previewVisible: true
  271. });
  272. }}
  273. />
  274. <Modal
  275. maskClosable={false}
  276. footer={null}
  277. visible={this.state.previewVisible}
  278. onCancel={() => {
  279. this.setState({ previewVisible: false });
  280. }}
  281. >
  282. <img
  283. alt=""
  284. style={{ width: "100%" }}
  285. src={this.state.previewImage || ""}
  286. />
  287. </Modal>
  288. <Rizhi changeId={this.props.data.id} />
  289. </Form.Item>
  290. {this.props.data.processState >= 4 ? (
  291. <div>
  292. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  293. 当前项目进度(咨询师经理填写)
  294. </h3>
  295. {planData.map((item, index) => {
  296. return <Itemlist key={index} pageData={item} />;
  297. })}
  298. </div>
  299. ) : (
  300. <div style={{ marginBottom: 10 }}>
  301. <div className="clearfix">
  302. <h3
  303. style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}
  304. >
  305. 当前项目进度(咨询师经理填写)
  306. </h3>
  307. <Form.Item
  308. className="half-item"
  309. label="项目进度"
  310. labelCol={{ span: 8 }}
  311. wrapperCol={{ span: 14 }}
  312. >
  313. <Input
  314. style={{ width: 160 }}
  315. value={this.state.projectState}
  316. placeholder="请输入项目进度"
  317. onChange={e => {
  318. this.setState({
  319. projectState: e.target.value
  320. });
  321. }}
  322. />
  323. </Form.Item>
  324. <Form.Item
  325. className="half-item"
  326. label="发生成本费用(万元)"
  327. labelCol={{ span: 8 }}
  328. wrapperCol={{ span: 14 }}
  329. >
  330. <Input
  331. style={{ width: 160 }}
  332. value={this.state.zxsCost}
  333. placeholder="请输入发生成本费用"
  334. onChange={e => {
  335. this.setState({
  336. zxsCost: e.target.value
  337. });
  338. }}
  339. />
  340. </Form.Item>
  341. </div>
  342. <div>
  343. <Form.Item
  344. label="备注"
  345. labelCol={{ span: 4 }}
  346. wrapperCol={{ span: 14 }}
  347. >
  348. <Input.TextArea
  349. value={this.state.zxsRemarks}
  350. rows={4}
  351. placeholder="请输入备注"
  352. onChange={e => {
  353. this.setState({
  354. zxsRemarks: e.target.value
  355. });
  356. }}
  357. />
  358. </Form.Item>
  359. </div>
  360. </div>
  361. )}
  362. {this.props.data.processState >= 5 ? (
  363. <div>
  364. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  365. 当前财务状态(财务填写)
  366. </h3>
  367. {financeData.map((item, index) => {
  368. return <Itemlist key={index} pageData={item} />;
  369. })}
  370. </div>
  371. ) : (
  372. ""
  373. )}
  374. </div>
  375. {this.props.processState === this.props.data.processState ? (
  376. this.state.buttonStatus ? (
  377. <div
  378. className="clearfix"
  379. style={{ display: "flex", justifyContent: "space-around" }}
  380. >
  381. {buttonData.map((item, index) => {
  382. return (
  383. <AgreeButton
  384. data={item}
  385. key={index}
  386. backData={this.props.data}
  387. processState={this.props.processState}
  388. visible={this.changeButtonStatus}
  389. ajaxData={this.state}
  390. loadData={this.props.loadData}
  391. />
  392. );
  393. })}
  394. </div>
  395. ) : (
  396. ""
  397. )
  398. ) : (
  399. ""
  400. )}
  401. <ReactToPrint
  402. trigger={() => (
  403. <div className="clearfix">
  404. <Button type="primary" style={{ float: "right", marginTop: 10 }}>
  405. 打印
  406. </Button>
  407. </div>
  408. )}
  409. content={() => this.refs}
  410. />
  411. </div>
  412. );
  413. }
  414. }
  415. export { ChangeDetail };