receivable.jsx 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. import React from 'react';
  2. import ajax from 'jquery/src/ajax/xhr.js';
  3. import $ from 'jquery/src/ajax';
  4. import { Form, Button, Input, Select, Spin,InputNumber, message, Modal } from 'antd';
  5. import {transactionProject,transactionChannel} from '@/dataDic.js';
  6. const Receivable=React.createClass({
  7. loadData(record) {
  8. this.state.data = {};
  9. this.setState({
  10. loading: true
  11. });
  12. $.ajax({
  13. method: "get",
  14. dataType: "json",
  15. crossDomain: false,
  16. url: globalConfig.context + '/api/admin/order/getOrderCommodity',
  17. data: {
  18. orderNo:record?record.orderNo:this.props.data.orderNo
  19. },
  20. success: function (data) {
  21. let thisData = data.data;
  22. if (!thisData) {
  23. if (data.error && data.error.length) {
  24. message.warning(data.error[0].message);
  25. };
  26. thisData = {};
  27. };
  28. this.setState({
  29. orderNo:thisData.orderNo,
  30. payeeId:thisData.payeeId,
  31. payerId:thisData.payerId,
  32. data: thisData,
  33. });
  34. }.bind(this),
  35. }).always(function () {
  36. this.setState({
  37. loading: false
  38. });
  39. }.bind(this));
  40. },
  41. getInitialState() {
  42. return {
  43. loading: false,
  44. visible:false,
  45. showDesc:false,
  46. };
  47. },
  48. //保存
  49. handleSubmit(e){
  50. e.preventDefault();
  51. if(!this.state.settlementAmount){
  52. message.warning('请填写金额');
  53. return false;
  54. }
  55. if(!this.state.transactionProject){
  56. message.warning('请选择流水科目');
  57. return false;
  58. }
  59. if(!this.state.transactionChannel){
  60. message.warning('请选择交易渠道');
  61. return false;
  62. }
  63. this.setState({
  64. loading: true
  65. });
  66. $.ajax({
  67. method: "post",
  68. dataType: "json",
  69. async:true,
  70. url: globalConfig.context + '/api/user/demand/apply',
  71. data: {
  72. orderNo: this.props.data.orderNo,
  73. payeeId:this.state.payeeId,
  74. payerId:this.state.payerId,
  75. transactionAmount: this.state.settlementAmount,
  76. transactionSubject: this.state.transactionProject,
  77. transactionChannel: this.state.transactionChannel,
  78. financialPayNo:this.state.financialPayNo,
  79. remarks:this.state.remarks
  80. }
  81. }).done(function (data) {
  82. this.setState({
  83. loading: false
  84. });
  85. if (!data.error.length) {
  86. message.success('操作成功!');
  87. this.onShow();
  88. } else {
  89. message.warning(data.error[0].message);
  90. }
  91. }.bind(this));
  92. },
  93. onCancel(){
  94. this.setState({
  95. visible:false
  96. })
  97. this.props.closeDesc(false,false);
  98. },
  99. onShow() {
  100. this.setState({
  101. visible: false,
  102. });
  103. this.props.closeDesc(false, true);
  104. },
  105. componentWillMount() {
  106. this.setState({
  107. transactionProject:undefined,
  108. settlementAmount:undefined,
  109. transactionChannel:undefined,
  110. financialPayNo:'',
  111. remarks:''
  112. })
  113. },
  114. componentWillReceiveProps(nextProps) {
  115. if(nextProps.data.orderNo){
  116. this.loadData(nextProps.data);
  117. }
  118. this.state.visible=nextProps.showDesc;
  119. this.setState({
  120. transactionProject:undefined,
  121. settlementAmount:undefined,
  122. transactionChannel:undefined,
  123. remarks:''
  124. })
  125. },
  126. render() {
  127. const theData = this.state.data || {};
  128. const { getFieldDecorator,getFieldsValue } = this.props.form;
  129. const FormItem = Form.Item;
  130. const formItemLayout = {
  131. labelCol: { span: 10 },
  132. wrapperCol: { span: 12 },
  133. };
  134. return (
  135. <div className="user-content" >
  136. <Modal maskClosable={false} visible={this.state.visible}
  137. onOk={this.onShow} onCancel={this.onCancel}
  138. width='800px'
  139. title='添加收款记录'
  140. footer=''
  141. className="admin-desc-content">
  142. <Form layout="horizontal" onSubmit={this.handleSubmit} >
  143. <Spin spinning={this.state.loading}>
  144. <div className="clearfix">
  145. <FormItem className="half-item" {...formItemLayout} label="付款方">
  146. <span>{theData.name}</span>
  147. </FormItem>
  148. <FormItem className="half-item" {...formItemLayout} label="收款方">
  149. <span>{theData.name}</span>
  150. </FormItem>
  151. <FormItem className="half-item" {...formItemLayout} label={<span><strong style={{color:'#f00'}}>*</strong>金额</span>}>
  152. <InputNumber min={0} max={9999} placeholder="金额"
  153. value={this.state.settlementAmount}
  154. onChange={(e)=>{this.setState({settlementAmount:e})}}
  155. />
  156. <span style={{ marginLeft: '5px' }}>万元</span>
  157. </FormItem>
  158. <FormItem className="half-item" {...formItemLayout} label={<span><strong style={{color:'#f00'}}>*</strong>流水科目</span>}>
  159. <Select placeholder="流水科目"
  160. value={this.state.transactionProject}
  161. onChange={(e)=>{this.setState({transactionProject:e})}}
  162. >
  163. {
  164. transactionProject.map(function (item) {
  165. return <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  166. })
  167. }
  168. </Select>
  169. </FormItem>
  170. <FormItem className="half-item" {...formItemLayout} label={<span><strong style={{color:'#f00'}}>*</strong>交易渠道</span>}>
  171. <Select placeholder="交易渠道"
  172. value={this.state.transactionChannel}
  173. onChange={(e)=>{this.setState({transactionChannel:e})}}
  174. >
  175. {
  176. transactionChannel.map(function (item) {
  177. return <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  178. })
  179. }
  180. </Select>
  181. </FormItem>
  182. <FormItem className="half-item" {...formItemLayout} label="订单编号">
  183. <span>{theData.orderNo}</span>
  184. </FormItem>
  185. <FormItem className="half-item" {...formItemLayout} label="财务流水编号">
  186. <Input placeholder="财务流水编号"
  187. value={this.state.financialPayNo}
  188. onChange={(e) => { this.setState({ financialPayNo: e.target.value }); }} />
  189. </FormItem>
  190. <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label="备注">
  191. <Input
  192. type="textarea"
  193. rows={4}
  194. placeholder="请输入备注"
  195. value={this.state.remarks}
  196. onChange={(e) => {
  197. this.setState({ remarks: e.target.value });
  198. }}
  199. />
  200. </FormItem>
  201. <FormItem wrapperCol={{ span: 12, offset:5 }}>
  202. <Button type="primary" htmlType="submit" style={{marginRight:20}}>确认</Button>
  203. <Button type="default" onClick={()=>{this.onCancel()}}>取消</Button>
  204. </FormItem>
  205. </div>
  206. </Spin>
  207. </Form>
  208. </Modal>
  209. </div>
  210. );
  211. }
  212. });
  213. export default Form.create()(Receivable);