changeApply.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373
  1. import React, { Component } from "react";
  2. import { Form, Select, Input, Button, message } from "antd";
  3. import $ from "jquery/src/ajax";
  4. import PicturesWall from "./picturesWall";
  5. import Rizhi from "./rizhi";
  6. const FormItem = Form.Item;
  7. const formItemLayout = {
  8. labelCol: { span: 8 },
  9. wrapperCol: { span: 14 }
  10. };
  11. class ChangeApply extends Component {
  12. constructor(props) {
  13. super(props);
  14. this.state = {
  15. data: {},
  16. voucherUrl: [],
  17. dataSource: []
  18. };
  19. this.departmentList = this.departmentList.bind(this);
  20. this.changeApply = this.changeApply.bind(this);
  21. this.getVoucherUrl = this.getVoucherUrl.bind(this);
  22. }
  23. //变更申请
  24. changeApply() {
  25. let theorgCodeUrl = [];
  26. if (this.state.voucherUrl.length) {
  27. let picArr = [];
  28. this.state.voucherUrl.map(function(item) {
  29. if (item.response && item.response.data && item.response.data.length) {
  30. picArr.push(item.response.data);
  31. }
  32. });
  33. theorgCodeUrl = picArr.join(",");
  34. }
  35. Object.assign(this.state.data, {
  36. id: this.props.orderData.id, //订单编号
  37. changeType: 0,
  38. voucherUrl: theorgCodeUrl.length ? theorgCodeUrl : ""
  39. });
  40. $.ajax({
  41. method: "post",
  42. dataType: "json",
  43. crossDomain: false,
  44. url: globalConfig.context + "/api/admin/orderChange/updateOrderChange",
  45. data: this.state.data
  46. }).done(
  47. function(data) {
  48. this.setState({
  49. loading: false
  50. });
  51. if (!data.error.length) {
  52. message.success("变更成功!");
  53. this.props.visitCancel();
  54. } else {
  55. message.warning(data.error[0].message);
  56. }
  57. }.bind(this)
  58. );
  59. }
  60. // componentDidMount() {
  61. // window.setTimeout(() => {
  62. // this.loadDataChange();
  63. // }, 10);
  64. // }
  65. // loadDataChange() {
  66. // console.log(this.props);
  67. // $.ajax({
  68. // method: "get",
  69. // dataType: "json",
  70. // crossDomain: false,
  71. // url: globalConfig.context + "/api/admin/orderChange/orderChangeLogList",
  72. // data: {
  73. // changeId: this.props.data.id
  74. // },
  75. // success: function(data) {
  76. // if (data.error.length || data.data.list == "") {
  77. // if (data.error && data.error.length) {
  78. // message.warning(data.error[0].message);
  79. // }
  80. // } else {
  81. // this.setState({
  82. // dataSource: data.data
  83. // });
  84. // }
  85. // }.bind(this)
  86. // });
  87. // }
  88. departmentList() {
  89. $.ajax({
  90. method: "get",
  91. dataType: "json",
  92. crossDomain: false,
  93. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  94. data: {},
  95. success: function(data) {
  96. let thedata = data.data;
  97. let theArr = [];
  98. if (!thedata) {
  99. if (data.error && data.error.length) {
  100. message.warning(data.error[0].message);
  101. }
  102. } else {
  103. thedata.map(function(item, index) {
  104. theArr.push({
  105. key: index,
  106. name: item.name,
  107. id: item.id
  108. });
  109. });
  110. }
  111. this.setState({
  112. departmentArr: theArr
  113. });
  114. }.bind(this)
  115. });
  116. }
  117. getVoucherUrl(e) {
  118. this.setState({
  119. voucherUrl: e
  120. });
  121. }
  122. componentWillReceiveProps(nextProps) {
  123. this.setState({
  124. data: nextProps.orderData,
  125. voucherUrl: nextProps.voucherUrl
  126. });
  127. }
  128. componentWillMount() {
  129. this.departmentList();
  130. }
  131. render() {
  132. const { TextArea } = Input;
  133. const data = this.state.data;
  134. let departmentArr = this.state.departmentArr || [];
  135. return (
  136. <div>
  137. <div className="clearfix">
  138. <FormItem className="half-item" {...formItemLayout} label="客户名称">
  139. <span>{data.userName}</span>
  140. </FormItem>
  141. </div>
  142. <div className="clearfix">
  143. <FormItem className="half-item" {...formItemLayout} label="合同编号">
  144. <span>{data.contractNo}</span>
  145. </FormItem>
  146. </div>
  147. <div className="clearfix">
  148. <FormItem
  149. className="half-item"
  150. {...formItemLayout}
  151. label="申请变更部门"
  152. >
  153. <Select
  154. placeholder="请输入变更部门"
  155. style={{ width: 240 }}
  156. value={data.depName}
  157. onChange={e => {
  158. let data = this.state.data;
  159. data.depName = e;
  160. this.setState({ data });
  161. }}
  162. >
  163. {departmentArr.map(function(item) {
  164. return (
  165. <Select.Option key={item.id} value={item.name}>
  166. {item.name}
  167. </Select.Option>
  168. );
  169. })}
  170. </Select>
  171. </FormItem>
  172. <FormItem className="half-item" {...formItemLayout} label="申请人">
  173. <Input
  174. placeholder="请输入申请人"
  175. ref="signTotalAmount"
  176. value={data.applicant}
  177. onChange={e => {
  178. let data = this.state.data;
  179. data.applicant = e.target.value;
  180. this.setState({ data });
  181. }}
  182. style={{ width: "240px" }}
  183. />
  184. </FormItem>
  185. </div>
  186. <div className="clearfix">
  187. <FormItem
  188. labelCol={{ span: 4 }}
  189. wrapperCol={{ span: 18 }}
  190. label="变更类型"
  191. >
  192. <Select
  193. placeholder="选择合同变更类型"
  194. style={{ width: 200 }}
  195. onChange={e => {
  196. let data = this.state.data;
  197. data.type = e;
  198. this.setState({ data });
  199. }}
  200. value={data.type}
  201. >
  202. <Option value={0}>退单退款</Option>
  203. <Option value={1}>项目及金额变更</Option>
  204. <Option value={2}>仅项目变更</Option>
  205. <Option value={3}>仅金额变更</Option>
  206. <Option value={4}>重报</Option>
  207. <Option value={5}>赠送</Option>
  208. </Select>
  209. </FormItem>
  210. </div>
  211. <div className="clearfix">
  212. <FormItem
  213. labelCol={{ span: 4 }}
  214. wrapperCol={{ span: 18 }}
  215. label="合同额(万元)"
  216. >
  217. <Input
  218. placeholder="请输入合同额"
  219. ref="signTotalAmount"
  220. value={data.totalAmount}
  221. onChange={e => {
  222. let data = this.state.data;
  223. data.totalAmount = e.target.value;
  224. this.setState({ data });
  225. }}
  226. style={{ width: "240px" }}
  227. />
  228. </FormItem>
  229. <FormItem
  230. labelCol={{ span: 4 }}
  231. wrapperCol={{ span: 18 }}
  232. label="已收款(万元)"
  233. >
  234. <Input
  235. placeholder="请输入已收款"
  236. ref="signTotalAmount"
  237. value={data.settlementAmount}
  238. onChange={e => {
  239. let data = this.state.data;
  240. data.settlementAmount = e.target.value;
  241. this.setState({ data });
  242. }}
  243. style={{ width: "240px" }}
  244. />
  245. </FormItem>
  246. <FormItem
  247. labelCol={{ span: 4 }}
  248. wrapperCol={{ span: 18 }}
  249. label="申请退款(万元)"
  250. >
  251. <Input
  252. placeholder="请输入申请退款"
  253. ref="signTotalAmount"
  254. value={data.changeAmount}
  255. onChange={e => {
  256. let data = this.state.data;
  257. data.changeAmount = e.target.value;
  258. this.setState({ data });
  259. }}
  260. style={{ width: "240px" }}
  261. />
  262. </FormItem>
  263. </div>
  264. <div className="clearfix">
  265. <FormItem
  266. style={{ height: "auto" }}
  267. labelCol={{ span: 4 }}
  268. wrapperCol={{ span: 18 }}
  269. label="变更原因"
  270. >
  271. <TextArea
  272. rows={4}
  273. placeholder="因企业政府补助费用与营销员签单承诺费用不一"
  274. ref="signTotalAmount"
  275. style={{ width: "95%" }}
  276. value={data.remarks}
  277. onChange={e => {
  278. let data = this.state.data;
  279. data.remarks = e.target.value;
  280. this.setState({ data });
  281. }}
  282. />
  283. </FormItem>
  284. </div>
  285. {/* 备注 */}
  286. <div className="clearfix">
  287. <FormItem
  288. style={{ height: "auto" }}
  289. labelCol={{ span: 4 }}
  290. wrapperCol={{ span: 18 }}
  291. label="备注"
  292. >
  293. <TextArea
  294. rows={4}
  295. placeholder="请输入备注信息"
  296. ref="signTotalAmount"
  297. style={{ width: "95%" }}
  298. value={data.startRemarks}
  299. onChange={e => {
  300. let data = this.state.data;
  301. data.startRemarks = e.target.value;
  302. this.setState({ data });
  303. }}
  304. />
  305. </FormItem>
  306. </div>
  307. <div className="clearfix">
  308. <FormItem
  309. labelCol={{ span: 4 }}
  310. wrapperCol={{ span: 18 }}
  311. label="变更凭证"
  312. >
  313. <PicturesWall
  314. fileList={this.getVoucherUrl}
  315. pictureUrl={this.state.voucherUrl}
  316. url="/api/admin/orderChange/uploadFile"
  317. sign="order_change_file"
  318. />
  319. <Rizhi changeId={data.id} />
  320. <p>图片建议:要清晰。</p>
  321. </FormItem>
  322. </div>
  323. {/* <ul
  324. style={{
  325. width: "868px",
  326. overflow: "hidden",
  327. paddingLeft: "90px",
  328. marginBottom: "20px"
  329. }}
  330. >
  331. {this.state.dataSource.map((item, index) => (
  332. <li
  333. key={index}
  334. style={{
  335. width: "100%",
  336. height: "auto",
  337. wordBreak: "break-all",
  338. color: "black",
  339. marginBottom: "10px"
  340. }}
  341. >{`${item.aname}: ${item.remarks}`}</li>
  342. ))}
  343. </ul> */}
  344. <div className="clearfix">
  345. <Button
  346. type="primary"
  347. style={{ float: "right", marginRight: 40 }}
  348. onClick={this.changeApply}
  349. >
  350. 发起变更申请
  351. </Button>
  352. </div>
  353. </div>
  354. );
  355. }
  356. }
  357. export default ChangeApply;