receivable.jsx 9.1 KB

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