receivable.jsx 9.4 KB

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