changeDetailCwzj.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356
  1. import React, { Component } from "react";
  2. import { Form, Upload, Modal, Input } from "antd";
  3. import AgreeButton from "./agreeButton.js";
  4. import Rizhi from "./rizhi.js";
  5. import { getProcessStatusNew } from "@/tools.js";
  6. const formItemLayout = {
  7. labelCol: { span: 8 },
  8. wrapperCol: { span: 14 }
  9. };
  10. const changeType = [
  11. {
  12. value: "0",
  13. key: "退单退款"
  14. },
  15. {
  16. value: "1",
  17. key: "项目及金额变更"
  18. },
  19. {
  20. value: "2",
  21. key: "仅项目变更"
  22. },
  23. {
  24. value: "3",
  25. key: "仅金额变更"
  26. },
  27. {
  28. value: "4",
  29. key: "重报"
  30. },
  31. {
  32. value: "5",
  33. key: "赠送"
  34. }
  35. ];
  36. const getChangeType = function(e) {
  37. if (e || e == 0) {
  38. let str = e.toString();
  39. let theType = "";
  40. changeType.map(function(item) {
  41. if (item.value == str) {
  42. theType = item.key;
  43. }
  44. });
  45. return theType;
  46. }
  47. };
  48. class Itemlist extends Component {
  49. constructor(props) {
  50. super(props);
  51. }
  52. render() {
  53. let pageData = this.props.pageData;
  54. return (
  55. <div className="clearfix">
  56. <Form.Item
  57. label={pageData.labelA}
  58. {...pageData.formItemLayoutA}
  59. className="half-item"
  60. >
  61. <p style={{ width: 500, wordWrap: "break-word" }}>{pageData.dataA}</p>
  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. };
  81. this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
  82. this.changeButtonStatus = this.changeButtonStatus.bind(this);
  83. }
  84. getOrgCodeUrl(e) {
  85. this.setState({
  86. orgCodeUrl: e
  87. });
  88. }
  89. //同意拒绝按钮的有无
  90. changeButtonStatus() {
  91. this.setState({
  92. buttonStatus: !this.state.buttonStatus
  93. });
  94. }
  95. onRef(ref) {
  96. this.fun = ref;
  97. }
  98. render() {
  99. const pageData = [
  100. {
  101. labelA: "客户名称",
  102. formItemLayoutA: formItemLayout,
  103. dataA: this.props.data.userName,
  104. labelB: "合同编号",
  105. formItemLayoutB: formItemLayout,
  106. dataB: this.props.data.contractNo
  107. },
  108. {
  109. labelA: "时间",
  110. formItemLayoutA: formItemLayout,
  111. dataA: this.props.data.createTimes,
  112. labelB: "发起人",
  113. formItemLayoutB: formItemLayout,
  114. dataB: this.props.data.applicant
  115. },
  116. {
  117. labelA: "当前进度",
  118. formItemLayoutA: formItemLayout,
  119. dataA:
  120. this.props.data.status !== 4
  121. ? getProcessStatusNew(this.props.data.processState) + "审核中"
  122. : getProcessStatusNew(this.props.data.processState) + "已完成",
  123. labelB: "变更类型",
  124. formItemLayoutB: formItemLayout,
  125. dataB: getChangeType(this.props.data.type)
  126. },
  127. {
  128. labelA: "合同额(万元)",
  129. formItemLayoutA: formItemLayout,
  130. dataA: this.props.data.totalAmount,
  131. labelB: "已收款(万元)",
  132. formItemLayoutB: formItemLayout,
  133. dataB: this.props.data.settlementAmount
  134. },
  135. {
  136. labelA: "欠款(万元)",
  137. formItemLayoutA: formItemLayout,
  138. dataA: this.props.data.arrears,
  139. labelB: "申请退款(万元)",
  140. formItemLayoutB: formItemLayout,
  141. dataB: this.props.data.changeAmount
  142. },
  143. {
  144. labelA: "备注",
  145. formItemLayoutA: formItemLayout,
  146. dataA: this.props.data.remarks
  147. }
  148. ];
  149. const planData = [
  150. {
  151. labelA: "项目进度",
  152. formItemLayoutA: formItemLayout,
  153. dataA: this.props.data.projectState,
  154. onChangeA: value => {
  155. this.setState({
  156. projectState: value
  157. });
  158. },
  159. labelB: "发生成本费用(万元)",
  160. formItemLayoutB: formItemLayout,
  161. dataB: this.props.data.zxsCost,
  162. onChangeB: value => {
  163. this.setState({
  164. zxsCost: value
  165. });
  166. }
  167. },
  168. {
  169. labelA: "备注",
  170. formItemLayoutA: formItemLayout,
  171. dataA: this.props.data.zxsRemarks,
  172. onChangeA: value => {
  173. this.setState({
  174. zxsRemarks: value
  175. });
  176. }
  177. }
  178. ];
  179. const financeData = [
  180. {
  181. labelA: "收款时间",
  182. formItemLayoutA: formItemLayout,
  183. dataA: this.props.data.paymentTimes,
  184. labelB: "收款金额(万元)",
  185. formItemLayoutB: formItemLayout,
  186. dataB: this.props.data.paymentAmount
  187. },
  188. {
  189. labelA: "开票时间",
  190. formItemLayoutA: formItemLayout,
  191. dataA: this.props.data.invoiceTimes,
  192. labelB: "已开票金额(万元)",
  193. formItemLayoutB: formItemLayout,
  194. dataB: this.props.data.invoiceAmount
  195. },
  196. {
  197. labelA: "发生成本(万元)",
  198. formItemLayoutA: formItemLayout,
  199. dataA: this.props.data.cwCost,
  200. labelB: "应退金额(万元)",
  201. formItemLayoutB: formItemLayout,
  202. dataB: this.props.data.refundableAmount
  203. },
  204. {
  205. labelA: "补充资料/备注",
  206. formItemLayoutA: formItemLayout,
  207. dataA: this.props.data.cwRemarks
  208. }
  209. ];
  210. const buttonData = [
  211. {
  212. name: "同意",
  213. title: "理由",
  214. placeholder: "请输入理由",
  215. type: "primary",
  216. status: 2,
  217. onChange: value => {
  218. this.setState({
  219. remarks: value
  220. });
  221. }
  222. },
  223. {
  224. name: "拒绝",
  225. title: "理由",
  226. placeholder: "请输入理由",
  227. type: "danger",
  228. status: 3,
  229. onChange: value => {
  230. this.setState({
  231. remarks: value
  232. });
  233. }
  234. }
  235. ];
  236. const orgCodeUrl = this.props.pictureUrl;
  237. return (
  238. <div>
  239. {pageData.map((item, index) => {
  240. return <Itemlist key={index} pageData={item} />;
  241. })}
  242. <Form.Item
  243. label="变更凭证"
  244. labelCol={{ span: 4 }}
  245. wrapperCol={{ span: 18 }}
  246. >
  247. <Upload
  248. className="demandDetailShow-upload"
  249. listType="picture-card"
  250. fileList={orgCodeUrl}
  251. onPreview={file => {
  252. this.setState({
  253. previewImage: file.url || file.thumbUrl,
  254. previewVisible: true
  255. });
  256. }}
  257. />
  258. <Modal
  259. maskClosable={false}
  260. footer={null}
  261. visible={this.state.previewVisible}
  262. onCancel={() => {
  263. this.setState({ previewVisible: false }, () => {
  264. this.foo.reset();
  265. });
  266. }}
  267. >
  268. <img
  269. alt=""
  270. style={{ width: "100%" }}
  271. src={this.state.previewImage || ""}
  272. />
  273. </Modal>
  274. <Rizhi changeId={this.props.data.id} />
  275. </Form.Item>
  276. {this.props.data.type === 0 && this.props.data.processState >= 4 ? (
  277. <div>
  278. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  279. 当前项目进度(咨询师经理填写)
  280. </h3>
  281. {planData.map((item, index) => {
  282. return <Itemlist key={index} pageData={item} />;
  283. })}
  284. </div>
  285. ) : (
  286. ""
  287. )}
  288. {this.props.data.type === 0 ? (
  289. this.props.data.processState >= 5 ? (
  290. <div>
  291. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  292. 当前财务状态(财务填写)
  293. </h3>
  294. {financeData.map((item, index) => {
  295. return <Itemlist key={index} pageData={item} />;
  296. })}
  297. </div>
  298. ) : (
  299. ""
  300. )
  301. ) : this.props.data.status === 4 ? (
  302. <div>
  303. <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
  304. 当前财务状态(财务填写)
  305. </h3>
  306. {financeData.map((item, index) => {
  307. return <Itemlist key={index} pageData={item} />;
  308. })}
  309. </div>
  310. ) : (
  311. ""
  312. )}
  313. {this.props.data.status !== 4 ? (
  314. this.state.buttonStatus ? (
  315. <div
  316. className="clearfix"
  317. style={{ display: "flex", justifyContent: "space-around" }}
  318. >
  319. {buttonData.map((item, index) => {
  320. return (
  321. <AgreeButton
  322. data={item}
  323. key={index}
  324. backData={this.props.data}
  325. processState={this.props.processState}
  326. visible={this.changeButtonStatus}
  327. loadData={this.props.loadData}
  328. />
  329. );
  330. })}
  331. </div>
  332. ) : (
  333. ""
  334. )
  335. ) : (
  336. ""
  337. )}
  338. </div>
  339. );
  340. }
  341. }
  342. export { ChangeDetail };