receivable.jsx 8.4 KB

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