changeDetailCwzj.js 9.7 KB

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