changeDetailYxy.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343
  1. import React, { Component } from "react";
  2. import { Form, Upload, Modal, 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. };
  81. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  82. }
  83. getOrgCodeUrl(e) {
  84. this.setState({
  85. orgCodeUrl: e
  86. });
  87. }
  88. render() {
  89. const pageData = [
  90. {
  91. labelA: "客户名称",
  92. formItemLayoutA: formItemLayout,
  93. dataA: this.props.data.userName,
  94. labelB: "合同编号",
  95. formItemLayoutB: formItemLayout,
  96. dataB: this.props.data.contractNo
  97. },
  98. {
  99. labelA: "时间",
  100. formItemLayoutA: formItemLayout,
  101. dataA: this.props.data.createTimes,
  102. labelB: "发起人",
  103. formItemLayoutB: formItemLayout,
  104. dataB: this.props.data.applicant
  105. },
  106. {
  107. labelA: "当前进度",
  108. formItemLayoutA: formItemLayout,
  109. dataA:
  110. this.props.data.status !== 4
  111. ? getProcessStatusNew(this.props.data.processState) + "审核中"
  112. : getProcessStatusNew(this.props.data.processState) + "已完成",
  113. labelB: "变更类型",
  114. formItemLayoutB: formItemLayout,
  115. dataB: getChangeType(this.props.data.type)
  116. },
  117. {
  118. labelA: "合同额(万元)",
  119. formItemLayoutA: formItemLayout,
  120. dataA: this.props.data.totalAmount,
  121. labelB: "已收款(万元)",
  122. formItemLayoutB: formItemLayout,
  123. dataB: this.props.data.settlementAmount
  124. },
  125. {
  126. labelA: "欠款(万元)",
  127. formItemLayoutA: formItemLayout,
  128. dataA: this.props.data.arrears,
  129. labelB: "申请退款(万元)",
  130. formItemLayoutB: formItemLayout,
  131. dataB: this.props.data.changeAmount
  132. },
  133. {
  134. labelA: "备注",
  135. formItemLayoutA: formItemLayout,
  136. dataA: this.props.data.remarks
  137. }
  138. ];
  139. const planData = [
  140. {
  141. labelA: "项目进度",
  142. formItemLayoutA: formItemLayout,
  143. dataA: this.props.data.projectState,
  144. labelB: "发生成本费用(万元)",
  145. formItemLayoutB: formItemLayout,
  146. dataB: this.props.data.zxsCost
  147. },
  148. {
  149. labelA: "备注",
  150. formItemLayoutA: formItemLayout,
  151. dataA: this.props.data.zxsRemarks
  152. }
  153. ];
  154. const financeData = [
  155. {
  156. labelA: "收款时间",
  157. formItemLayoutA: formItemLayout,
  158. dataA: this.props.data.paymentTimes,
  159. labelB: "收款金额(万元)",
  160. formItemLayoutB: formItemLayout,
  161. dataB: this.props.data.paymentAmount
  162. },
  163. {
  164. labelA: "开票时间",
  165. formItemLayoutA: formItemLayout,
  166. dataA: this.props.data.invoiceTimes,
  167. labelB: "已开票金额(万元)",
  168. formItemLayoutB: formItemLayout,
  169. dataB: this.props.data.invoiceAmount
  170. },
  171. {
  172. labelA: "发生成本(万元)",
  173. formItemLayoutA: formItemLayout,
  174. dataA: this.props.data.cwCost,
  175. labelB: "应退金额(万元)",
  176. formItemLayoutB: formItemLayout,
  177. dataB: this.props.data.refundableAmount
  178. },
  179. {
  180. labelA: "补充资料/备注",
  181. formItemLayoutA: formItemLayout,
  182. dataA: this.props.data.cwRemarks
  183. }
  184. ];
  185. const buttonData = [
  186. {
  187. name: "同意",
  188. title: "理由",
  189. placeholder: "请输入理由",
  190. type: "primary",
  191. status: 2,
  192. onChange: value => {
  193. this.setState({
  194. remarks: value
  195. });
  196. }
  197. },
  198. {
  199. name: "拒绝",
  200. title: "理由",
  201. placeholder: "请输入理由",
  202. type: "danger",
  203. status: 3,
  204. onChange: value => {
  205. this.setState({
  206. remarks: value
  207. });
  208. }
  209. }
  210. ];
  211. const orgCodeUrl = this.props.pictureUrl;
  212. return (
  213. <div className="clearfix">
  214. <div
  215. className="clearfix"
  216. style={{ marginTop: 20 }}
  217. ref={e => {
  218. this.refs = e;
  219. }}
  220. >
  221. <h2 style={{ textAlign: "center", marginBottom: 10 }}>
  222. 合同变更记录
  223. </h2>
  224. {pageData.map((item, index) => {
  225. return <Itemlist key={index} pageData={item} />;
  226. })}
  227. <Form.Item
  228. label="变更凭证"
  229. labelCol={{ span: 4 }}
  230. wrapperCol={{ span: 18 }}
  231. >
  232. <Upload
  233. className="demandDetailShow-upload"
  234. listType="picture-card"
  235. fileList={orgCodeUrl}
  236. onPreview={file => {
  237. this.setState({
  238. previewImage: file.url || file.thumbUrl,
  239. previewVisible: true
  240. });
  241. }}
  242. />
  243. <Modal
  244. maskClosable={false}
  245. footer={null}
  246. visible={this.state.previewVisible}
  247. onCancel={() => {
  248. this.setState({ previewVisible: false });
  249. }}
  250. >
  251. <img
  252. alt=""
  253. style={{ width: "100%" }}
  254. src={this.state.previewImage || ""}
  255. />
  256. </Modal>
  257. <Rizhi changeId={this.props.data.id} />
  258. </Form.Item>
  259. {this.props.data.type === 0 && this.props.data.processState >= 2 ? (
  260. <div>
  261. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  262. 当前项目进度(咨询师经理填写)
  263. </h3>
  264. {planData.map((item, index) => {
  265. return <Itemlist key={index} pageData={item} />;
  266. })}
  267. </div>
  268. ) : (
  269. ""
  270. )}
  271. {this.props.data.type === 0 ? (
  272. this.props.data.processState >= 5 ? (
  273. <div>
  274. <h3
  275. style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}
  276. >
  277. 当前财务状态(财务填写)
  278. </h3>
  279. {financeData.map((item, index) => {
  280. return <Itemlist key={index} pageData={item} />;
  281. })}
  282. </div>
  283. ) : (
  284. ""
  285. )
  286. ) : this.props.data.status === 4 ? (
  287. <div>
  288. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  289. 当前财务状态(财务填写)
  290. </h3>
  291. {financeData.map((item, index) => {
  292. return <Itemlist key={index} pageData={item} />;
  293. })}
  294. </div>
  295. ) : (
  296. ""
  297. )}
  298. </div>
  299. {this.props.processState === this.props.data.processState ? (
  300. <div
  301. className="clearfix"
  302. style={{ display: "flex", justifyContent: "space-around" }}
  303. >
  304. {buttonData.map((item, index) => {
  305. return (
  306. <AgreeButton
  307. data={item}
  308. key={index}
  309. backData={this.props.data}
  310. processState={this.props.processState}
  311. />
  312. );
  313. })}
  314. </div>
  315. ) : (
  316. ""
  317. )}
  318. {/* <ReactToPrint
  319. trigger={() => (
  320. <div className="clearfix">
  321. <Button type="primary" style={{ float: "right", marginTop: 10 }}>
  322. 打印
  323. </Button>
  324. </div>
  325. )}
  326. content={() => this.refs}
  327. /> */}
  328. </div>
  329. );
  330. }
  331. }
  332. export { ChangeDetail };