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