changeApply.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  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. };
  18. this.departmentList = this.departmentList.bind(this);
  19. this.changeApply = this.changeApply.bind(this);
  20. this.getVoucherUrl = this.getVoucherUrl.bind(this);
  21. }
  22. //变更申请
  23. changeApply() {
  24. let theorgCodeUrl = [];
  25. if (this.state.voucherUrl.length) {
  26. let picArr = [];
  27. this.state.voucherUrl.map(function(item) {
  28. if (item.response && item.response.data && item.response.data.length) {
  29. picArr.push(item.response.data);
  30. }
  31. });
  32. theorgCodeUrl = picArr.join(",");
  33. }
  34. Object.assign(this.state.data, {
  35. id: this.props.orderData.id, //订单编号
  36. changeType: 0,
  37. voucherUrl: theorgCodeUrl.length ? theorgCodeUrl : ""
  38. });
  39. $.ajax({
  40. method: "post",
  41. dataType: "json",
  42. crossDomain: false,
  43. url: globalConfig.context + "/api/admin/orderChange/updateOrderChange",
  44. data: this.state.data
  45. }).done(
  46. function(data) {
  47. this.setState({
  48. loading: false
  49. });
  50. if (!data.error.length) {
  51. message.success("变更成功!");
  52. this.props.visitCancel();
  53. } else {
  54. message.warning(data.error[0].message);
  55. }
  56. }.bind(this)
  57. );
  58. }
  59. departmentList() {
  60. $.ajax({
  61. method: "get",
  62. dataType: "json",
  63. crossDomain: false,
  64. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  65. data: {},
  66. success: function(data) {
  67. let thedata = data.data;
  68. let theArr = [];
  69. if (!thedata) {
  70. if (data.error && data.error.length) {
  71. message.warning(data.error[0].message);
  72. }
  73. } else {
  74. thedata.map(function(item, index) {
  75. theArr.push({
  76. key: index,
  77. name: item.name,
  78. id: item.id
  79. });
  80. });
  81. }
  82. this.setState({
  83. departmentArr: theArr
  84. });
  85. }.bind(this)
  86. });
  87. }
  88. getVoucherUrl(e) {
  89. this.setState({
  90. voucherUrl: e
  91. });
  92. }
  93. componentWillReceiveProps(nextProps) {
  94. this.setState({
  95. data: nextProps.orderData,
  96. voucherUrl: nextProps.voucherUrl
  97. });
  98. }
  99. componentWillMount() {
  100. this.departmentList();
  101. }
  102. render() {
  103. const { TextArea } = Input;
  104. const data = this.state.data;
  105. let departmentArr = this.state.departmentArr || [];
  106. return (
  107. <div>
  108. <div className="clearfix">
  109. <FormItem className="half-item" {...formItemLayout} label="客户名称">
  110. <span>{data.userName}</span>
  111. </FormItem>
  112. </div>
  113. <div className="clearfix">
  114. <FormItem className="half-item" {...formItemLayout} label="合同编号">
  115. <span>{data.contractNo}</span>
  116. </FormItem>
  117. </div>
  118. <div className="clearfix">
  119. <FormItem
  120. className="half-item"
  121. {...formItemLayout}
  122. label="申请变更部门"
  123. >
  124. <Select
  125. placeholder="请输入变更部门"
  126. style={{ width: 240 }}
  127. value={data.depName}
  128. onChange={e => {
  129. let data = this.state.data;
  130. data.depName = e;
  131. this.setState({ data });
  132. }}
  133. >
  134. {departmentArr.map(function(item) {
  135. return (
  136. <Select.Option key={item.id} value={item.name}>
  137. {item.name}
  138. </Select.Option>
  139. );
  140. })}
  141. </Select>
  142. </FormItem>
  143. <FormItem className="half-item" {...formItemLayout} label="申请人">
  144. <Input
  145. placeholder="请输入申请人"
  146. ref="signTotalAmount"
  147. value={data.applicant}
  148. onChange={e => {
  149. let data = this.state.data;
  150. data.applicant = e.target.value;
  151. this.setState({ data });
  152. }}
  153. style={{ width: "240px" }}
  154. />
  155. </FormItem>
  156. </div>
  157. <div className="clearfix">
  158. <FormItem
  159. labelCol={{ span: 4 }}
  160. wrapperCol={{ span: 18 }}
  161. label="变更类型"
  162. >
  163. <Select
  164. placeholder="选择合同变更类型"
  165. style={{ width: 200 }}
  166. onChange={e => {
  167. let data = this.state.data;
  168. data.type = e;
  169. this.setState({ data });
  170. }}
  171. value={data.type}
  172. >
  173. <Option value={0}>退单退款</Option>
  174. <Option value={1}>项目及金额变更</Option>
  175. <Option value={2}>仅项目变更</Option>
  176. <Option value={3}>仅金额变更</Option>
  177. <Option value={4}>重报</Option>
  178. <Option value={5}>赠送</Option>
  179. </Select>
  180. </FormItem>
  181. </div>
  182. <div className="clearfix">
  183. <FormItem
  184. labelCol={{ span: 4 }}
  185. wrapperCol={{ span: 18 }}
  186. label="合同额(万元)"
  187. >
  188. <Input
  189. placeholder="请输入合同额"
  190. ref="signTotalAmount"
  191. value={data.totalAmount}
  192. onChange={e => {
  193. let data = this.state.data;
  194. data.totalAmount = e.target.value;
  195. this.setState({ data });
  196. }}
  197. style={{ width: "240px" }}
  198. />
  199. </FormItem>
  200. <FormItem
  201. labelCol={{ span: 4 }}
  202. wrapperCol={{ span: 18 }}
  203. label="已收款(万元)"
  204. >
  205. <Input
  206. placeholder="请输入已收款"
  207. ref="signTotalAmount"
  208. value={data.settlementAmount}
  209. onChange={e => {
  210. let data = this.state.data;
  211. data.settlementAmount = e.target.value;
  212. this.setState({ data });
  213. }}
  214. style={{ width: "240px" }}
  215. />
  216. </FormItem>
  217. <FormItem
  218. labelCol={{ span: 4 }}
  219. wrapperCol={{ span: 18 }}
  220. label="申请退款(万元)"
  221. >
  222. <Input
  223. placeholder="请输入申请退款"
  224. ref="signTotalAmount"
  225. value={data.changeAmount}
  226. onChange={e => {
  227. let data = this.state.data;
  228. data.changeAmount = e.target.value;
  229. this.setState({ data });
  230. }}
  231. style={{ width: "240px" }}
  232. />
  233. </FormItem>
  234. </div>
  235. <div className="clearfix">
  236. <FormItem
  237. style={{ height: "auto" }}
  238. labelCol={{ span: 4 }}
  239. wrapperCol={{ span: 18 }}
  240. label="备注"
  241. >
  242. <TextArea
  243. rows={4}
  244. placeholder="因企业政府补助费用与营销员签单承诺费用不一"
  245. ref="signTotalAmount"
  246. style={{ width: "95%" }}
  247. value={data.remarks}
  248. onChange={e => {
  249. let data = this.state.data;
  250. data.remarks = e.target.value;
  251. this.setState({ data });
  252. }}
  253. />
  254. </FormItem>
  255. </div>
  256. <div className="clearfix">
  257. <FormItem
  258. labelCol={{ span: 4 }}
  259. wrapperCol={{ span: 18 }}
  260. label="变更凭证"
  261. >
  262. <PicturesWall
  263. fileList={this.getVoucherUrl}
  264. pictureUrl={this.state.voucherUrl}
  265. url="/api/admin/orderChange/uploadFile"
  266. sign="order_change_file"
  267. />
  268. <Rizhi changeId={data.id} />
  269. <p>图片建议:要清晰。</p>
  270. </FormItem>
  271. </div>
  272. <div className="clearfix">
  273. <Button
  274. type="primary"
  275. style={{ float: "right", marginRight: 40 }}
  276. onClick={this.changeApply}
  277. >
  278. 发起变更申请
  279. </Button>
  280. </div>
  281. </div>
  282. );
  283. }
  284. }
  285. export default ChangeApply;