receivable.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. import React from 'react';
  2. import ajax from 'jquery/src/ajax/xhr.js';
  3. import $ from 'jquery/src/ajax';
  4. import { Form,Radio, Icon, Button, Input, Select, Spin, Table, Switch,InputNumber, message, DatePicker, Modal, Upload ,Popconfirm} from 'antd';
  5. import {transactionProject,transactionChannel} from '@/dataDic.js';
  6. import {getOrderState,getOrderChannel,getPaymentState,getOrderType} from '@/tools.js';
  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 theArr = [];
  23. if (!data.data) {
  24. if (data.error && data.error.length) {
  25. message.warning(data.error[0].message);
  26. };
  27. } else {
  28. for (let i = 0; i < data.data.length; i++) {
  29. let thisdata = data.data[i];
  30. theArr.push({
  31. key: i,
  32. id:thisdata.id,
  33. orderNo:thisdata.orderNo,
  34. commodityName:thisdata.commodityName,
  35. commodityType:thisdata.commodityType,
  36. commodityMode:thisdata.commodityMode,
  37. commodityQuantity:thisdata.commodityQuantity,
  38. commodityPrice:thisdata.commodityPrice,
  39. discountPrice:thisdata.discountPrice,
  40. commodityFirstPayment:thisdata.commodityFirstPayment,
  41. createTimes:thisdata.createTimes,
  42. discountFirstPayment:thisdata.discountFirstPayment,
  43. remarks:thisdata.remarks,
  44. commodityId:thisdata.commodityId,
  45. });
  46. };
  47. }
  48. this.setState({
  49. dataSource: theArr,
  50. pagination: false,
  51. });
  52. }.bind(this),
  53. }).always(function () {
  54. this.setState({
  55. loading: false
  56. });
  57. }.bind(this));
  58. },
  59. getInitialState() {
  60. return {
  61. datauser:{},
  62. loading: false,
  63. visible:false,
  64. showDesc:false,
  65. };
  66. },
  67. //保存
  68. handleSubmit(e){
  69. e.preventDefault();
  70. if(!this.state.settlementAmount){
  71. message.warning('请填写金额');
  72. return false;
  73. }
  74. if(!this.state.transactionProject){
  75. message.warning('请选择流水科目');
  76. return false;
  77. }
  78. if(!this.state.transactionChannel){
  79. message.warning('请选择交易渠道');
  80. return false;
  81. }
  82. this.setState({
  83. loading: true
  84. });
  85. $.ajax({
  86. method: "post",
  87. dataType: "json",
  88. async:true,
  89. url: globalConfig.context + '/api/user/demand/apply',
  90. data: {
  91. id: this.props.data.id,
  92. settlementAmount: this.state.settlementAmount,
  93. transactionProject: this.state.transactionProject,
  94. transactionChannel: this.state.transactionChannel,
  95. remarks:this.state.remarks
  96. }
  97. }).done(function (data) {
  98. this.setState({
  99. loading: false
  100. });
  101. if (!data.error.length) {
  102. message.success('操作成功!');
  103. this.onShow();
  104. } else {
  105. message.warning(data.error[0].message);
  106. }
  107. }.bind(this));
  108. },
  109. onCancel(){
  110. this.setState({
  111. visible:false
  112. })
  113. this.props.closeDesc(false,false);
  114. },
  115. onShow() {
  116. this.setState({
  117. visible: false,
  118. });
  119. this.props.closeDesc(false, true);
  120. },
  121. componentWillMount() {
  122. this.loadData();
  123. this.setState({
  124. transactionProject:undefined,
  125. settlementAmount:undefined,
  126. transactionChannel:undefined,
  127. remarks:''
  128. })
  129. },
  130. componentWillReceiveProps(nextProps) {
  131. this.loadData(nextProps.data);
  132. this.state.visible=nextProps.showDesc;
  133. this.setState({
  134. transactionProject:undefined,
  135. settlementAmount:undefined,
  136. transactionChannel:undefined,
  137. remarks:''
  138. })
  139. },
  140. render() {
  141. const theData = this.state.data || {};
  142. const { getFieldDecorator,getFieldsValue } = this.props.form;
  143. const FormItem = Form.Item;
  144. const formItemLayout = {
  145. labelCol: { span: 10 },
  146. wrapperCol: { span: 12 },
  147. };
  148. return (
  149. <div className="user-content" >
  150. <Modal maskClosable={false} visible={this.state.visible}
  151. onOk={this.onShow} onCancel={this.onCancel}
  152. width='800px'
  153. title='添加收款记录'
  154. footer=''
  155. className="admin-desc-content">
  156. <Form layout="horizontal" onSubmit={this.handleSubmit} >
  157. <Spin spinning={this.state.loading}>
  158. <div className="clearfix">
  159. <FormItem className="half-item" {...formItemLayout} label="平台流水编号">
  160. <span>{theData.name}</span>
  161. </FormItem>
  162. <FormItem className="half-item" {...formItemLayout} label="平台流水时间">
  163. <span>{theData.releaseDate?(new Date(theData.releaseDate)).toLocaleString():''}</span>
  164. </FormItem>
  165. <FormItem className="half-item" {...formItemLayout} label={<span><strong style={{color:'#f00'}}>*</strong>金额</span>}>
  166. <InputNumber min={0} max={9999} placeholder="金额"
  167. value={this.state.settlementAmount}
  168. onChange={(e)=>{this.setState({settlementAmount:e})}}
  169. />
  170. <span style={{ marginLeft: '5px' }}>万元</span>
  171. </FormItem>
  172. <FormItem className="half-item" {...formItemLayout} label={<span><strong style={{color:'#f00'}}>*</strong>流水科目</span>}>
  173. <Select placeholder="流水科目"
  174. value={this.state.transactionProject}
  175. onChange={(e)=>{this.setState({transactionProject:e})}}
  176. >
  177. {
  178. transactionProject.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.name}</span>
  186. </FormItem>
  187. <FormItem className="half-item" {...formItemLayout} label="收款方">
  188. <span>{theData.name}</span>
  189. </FormItem>
  190. <FormItem className="half-item" {...formItemLayout} label={<span><strong style={{color:'#f00'}}>*</strong>交易渠道</span>}>
  191. <Select placeholder="交易渠道"
  192. value={this.state.transactionChannel}
  193. onChange={(e)=>{this.setState({transactionChannel:e})}}
  194. >
  195. {
  196. transactionChannel.map(function (item) {
  197. return <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  198. })
  199. }
  200. </Select>
  201. </FormItem>
  202. <FormItem className="half-item" {...formItemLayout} label="订单编号">
  203. <span>{theData.orderNo}</span>
  204. </FormItem>
  205. <FormItem className="half-item" {...formItemLayout} label="财务流水编号">
  206. <span>{theData.orderNo}</span>
  207. </FormItem>
  208. <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 16 }} label="备注">
  209. <Input
  210. type="textarea"
  211. rows={4}
  212. placeholder="请输入备注"
  213. value={this.state.remarks}
  214. onChange={(e) => {
  215. this.setState({ remarks: e.target.value });
  216. }}
  217. />
  218. </FormItem>
  219. <FormItem wrapperCol={{ span: 12, offset:5 }}>
  220. <Button type="primary" htmlType="submit" style={{marginRight:20}}>确认</Button>
  221. <Button type="default" onClick={()=>{this.onCancel()}}>取消</Button>
  222. </FormItem>
  223. </div>
  224. </Spin>
  225. </Form>
  226. </Modal>
  227. </div>
  228. );
  229. }
  230. });
  231. export default Form.create()(Receivable);