receivable.jsx 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  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. loadData(record) {
  9. this.state.data = [];
  10. this.setState({
  11. loading: true
  12. });
  13. $.ajax({
  14. method: "get",
  15. dataType: "json",
  16. crossDomain: false,
  17. url: globalConfig.context + '/api/admin/financial/selectOneOrderAllRefundFlow',
  18. data: {
  19. orderNo:record?record.orderNo:this.props.data.orderNo
  20. },
  21. success: function (data) {
  22. let thisdata = data.data;
  23. if (!thisdata.length) {
  24. if (data.error && data.error.length) {
  25. message.warning(data.error[0].message);
  26. };
  27. } else {
  28. this.setState({
  29. data:thisdata,
  30. });
  31. }
  32. }.bind(this),
  33. }).always(function () {
  34. this.setState({
  35. loading: false
  36. });
  37. }.bind(this));
  38. },
  39. getInitialState() {
  40. return {
  41. loading: false,
  42. visible:false,
  43. showDesc:false,
  44. data:{}
  45. };
  46. },
  47. //保存
  48. handleSubmit(e){
  49. e.preventDefault();
  50. if(!this.state.settlementAmount){
  51. message.warning('请填写金额');
  52. return false;
  53. }
  54. if(!this.state.transactionProject){
  55. message.warning('请选择流水科目');
  56. return false;
  57. }
  58. if(!this.state.transactionChannel){
  59. message.warning('请选择交易渠道');
  60. return false;
  61. }
  62. this.setState({
  63. loading: true
  64. });
  65. $.ajax({
  66. method: "post",
  67. dataType: "json",
  68. async:true,
  69. url: globalConfig.context + this.props.api,
  70. data: {
  71. orderNo: this.state.data.orderNo,
  72. payeeId:this.state.data.payeeId,
  73. payerId:this.state.data.payerId,
  74. transactionAmount: this.state.settlementAmount,
  75. transactionSubject: this.state.transactionProject,
  76. transactionChannel: this.state.transactionChannel,
  77. financialPayNo:this.state.financialPayNo,
  78. financialPayTimes:this.state.financialPayTimes,
  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. financialPayTimes:undefined,
  112. remarks:''
  113. })
  114. },
  115. componentWillReceiveProps(nextProps) {
  116. this.state.visible=nextProps.showDesc;
  117. if(nextProps.data.orderNo){
  118. this.loadData(nextProps.data);
  119. }
  120. this.setState({
  121. transactionProject:undefined,
  122. settlementAmount:undefined,
  123. transactionChannel:undefined,
  124. financialPayNo:'',
  125. financialPayTimes:undefined,
  126. remarks:''
  127. })
  128. },
  129. render() {
  130. const theData = this.state.data || {};
  131. const FormItem = Form.Item;
  132. const formItemLayout = {
  133. labelCol: { span: 8 },
  134. wrapperCol: { span: 12 },
  135. };
  136. return (
  137. <div className="user-content" >
  138. <Modal maskClosable={false} visible={this.state.visible}
  139. onOk={this.onShow} onCancel={this.onCancel}
  140. width='800px'
  141. title={this.props.title}
  142. footer=''
  143. className="admin-desc-content">
  144. <Form layout="horizontal" onSubmit={this.handleSubmit} >
  145. <Spin spinning={this.state.loading}>
  146. <div className="clearfix">
  147. <FormItem className="half-item" {...formItemLayout} label="付款方">
  148. <span>{theData.payerName}</span>
  149. </FormItem>
  150. <FormItem className="half-item" {...formItemLayout} label="收款方">
  151. <span>{theData.payeeName}</span>
  152. </FormItem>
  153. <FormItem className="half-item" {...formItemLayout} label={<span><strong style={{color:'#f00'}}>*</strong>金额</span>}>
  154. <InputNumber min={0} max={9999} placeholder="金额"
  155. value={this.state.settlementAmount}
  156. onChange={(e)=>{this.setState({settlementAmount:e})}}
  157. />
  158. <span style={{ marginLeft: '5px' }}>万元</span>
  159. </FormItem>
  160. <FormItem className="half-item" {...formItemLayout} label={<span><strong style={{color:'#f00'}}>*</strong>流水科目</span>}>
  161. <Select placeholder="流水科目"
  162. value={this.state.transactionProject}
  163. onChange={(e)=>{this.setState({transactionProject:e})}}
  164. >
  165. {
  166. transactionProject.map(function (item) {
  167. return <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  168. })
  169. }
  170. </Select>
  171. </FormItem>
  172. <FormItem className="half-item" {...formItemLayout} label={<span><strong style={{color:'#f00'}}>*</strong>交易渠道</span>}>
  173. <Select placeholder="交易渠道"
  174. value={this.state.transactionChannel}
  175. onChange={(e)=>{this.setState({transactionChannel:e})}}
  176. >
  177. {
  178. transactionChannel.map(function (item) {
  179. return <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  180. })
  181. }
  182. </Select>
  183. </FormItem>
  184. <FormItem className="half-item" {...formItemLayout} label="订单编号">
  185. <span>{theData.orderNo}</span>
  186. </FormItem>
  187. <FormItem className="half-item" {...formItemLayout} label="财务流水编号">
  188. <Input placeholder="财务流水编号"
  189. value={this.state.financialPayNo}
  190. onChange={(e) => { this.setState({ financialPayNo: e.target.value }); }} />
  191. </FormItem>
  192. <FormItem className="half-item" {...formItemLayout} label="财务流水时间">
  193. <DatePicker
  194. showTime
  195. format="YYYY-MM-DD HH:mm:ss"
  196. onOk={(e)=>{console.log(e)}}
  197. value={this.state.financialPayTimes ? moment(this.state.financialPayTimes) : null}
  198. onChange={(data, dataString) => { this.setState({ financialPayTimes: dataString }); }} />
  199. </FormItem>
  200. <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 16 }} label="备注">
  201. <Input
  202. type="textarea"
  203. rows={4}
  204. placeholder="请输入备注"
  205. value={this.state.remarks}
  206. onChange={(e) => {
  207. this.setState({ remarks: e.target.value });
  208. }}
  209. />
  210. </FormItem>
  211. <FormItem wrapperCol={{ span: 12, offset:5 }}>
  212. <Button type="primary" htmlType="submit" style={{marginRight:20}}>确认</Button>
  213. <Button type="default" onClick={()=>{this.onCancel()}}>取消</Button>
  214. </FormItem>
  215. </div>
  216. </Spin>
  217. </Form>
  218. </Modal>
  219. </div>
  220. );
  221. }
  222. });
  223. export default Form.create()(Receivable);