dunningRecord.jsx 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. import React,{Component} from "react";
  2. import TabelContent from "../../../common/tabelContent";
  3. import {Button, Modal, Tag, Form, DatePicker, Input, message} from "antd";
  4. import ImgList from "../../../common/imgList";
  5. import $ from "jquery/src/ajax";
  6. const { TextArea } = Input;
  7. const formItemLayout = {
  8. labelCol: {
  9. xs: { span: 24 },
  10. sm: { span: 6 },
  11. },
  12. wrapperCol: {
  13. xs: { span: 24 },
  14. sm: { span: 14 },
  15. },
  16. }
  17. class DunningRecord extends Component{
  18. constructor(props) {
  19. super(props);
  20. this.state={
  21. columns:[
  22. {
  23. title: "序号",
  24. dataIndex: "key",
  25. key: "key",
  26. width: 45,
  27. },
  28. {
  29. title: "操作人名称",
  30. dataIndex: "contractNo",
  31. key: "contractNo",
  32. width: 140,
  33. },
  34. {
  35. title: "客户名称",
  36. dataIndex: "contractNo",
  37. key: "contractNo",
  38. width: 140,
  39. },
  40. {
  41. title: "催款时间",
  42. dataIndex: "contractNo",
  43. key: "contractNo",
  44. width: 140,
  45. },
  46. {
  47. title: "情况",
  48. dataIndex: "contractNo",
  49. key: "contractNo",
  50. width: 140,
  51. },
  52. {
  53. title: "操作时间",
  54. dataIndex: "contractNo",
  55. key: "contractNo",
  56. width: 140,
  57. },
  58. {
  59. title: "操作",
  60. dataIndex: "id",
  61. key: "id",
  62. width: 250,
  63. render: (text, record) => {
  64. return(
  65. <Button
  66. type="primary"
  67. onClick={e => {
  68. e.stopPropagation();
  69. }}
  70. >
  71. 下载凭证
  72. </Button>
  73. )
  74. }
  75. }
  76. ],
  77. visible:false
  78. }
  79. this.addDunOrder = this.addDunOrder.bind(this);
  80. }
  81. addDunOrder(){
  82. if (this.state.fileList){
  83. message.warning('请上传凭证');
  84. return;
  85. }
  86. if (this.state.date){
  87. message.warning('请');
  88. return;
  89. }
  90. this.setState({
  91. addDunOrderLoading: true
  92. });
  93. $.ajax({
  94. method: "post",
  95. dataType: "json",
  96. crossDomain: false,
  97. url:
  98. globalConfig.context + "/api/admin/lagalAffairs/addDunOrder",
  99. data: {
  100. orderNo:this.props.dataInfor.orderNo
  101. },
  102. success: function (data) {
  103. if(data.error.length){
  104. message.warning(data.error[0].message);
  105. }else{
  106. message.success('新增成功');
  107. this.tabelContentRef && this.tabelContentRef.onRefresh();
  108. }
  109. }.bind(this)
  110. }).done(
  111. function () {
  112. this.setState({
  113. addDunOrderLoading: false
  114. });
  115. }.bind(this)
  116. );
  117. }
  118. onCancel(){
  119. this.setState({
  120. visible:false
  121. })
  122. }
  123. render() {
  124. return (
  125. <Modal
  126. maskClosable={false}
  127. visible={this.props.visible}
  128. onOk={this.props.onCancel}
  129. onCancel={this.props.onCancel}
  130. width='900px'
  131. title={
  132. <span style={{
  133. display: 'flex',
  134. alignItems: 'center',
  135. justifyContent:'space-between',
  136. paddingRight:'10px'
  137. }}>
  138. <span>
  139. <span style={{marginRight:'5px'}}>催款记录列表</span>
  140. <Tag color="pink">初始客户名称:{this.props.dataInfor.buyerName}</Tag>
  141. </span>
  142. <Button
  143. type="primary"
  144. onClick={e => {
  145. e.stopPropagation();
  146. this.setState({
  147. visible:true
  148. })
  149. }}
  150. >
  151. 添加催款记录
  152. </Button>
  153. </span>
  154. }
  155. footer=''
  156. className="admin-desc-content">
  157. <TabelContent
  158. ref={ref => this.tabelContentRef = ref}
  159. columns={this.state.columns}
  160. tabelApi={'/api/admin/lagalAffairs/dunOrderList'}
  161. query={{orderNo:this.props.dataInfor.orderNo}}
  162. dataProcessing={(data)=>{
  163. let theArr = [];
  164. for (let i = 0; i < data.data.length; i++) {
  165. let thisdata = data.data[i];
  166. thisdata.key=i + 1;
  167. theArr.push(thisdata);
  168. }
  169. return theArr;
  170. }}
  171. />
  172. <Modal
  173. maskClosable={false}
  174. visible={this.state.visible}
  175. onOk={this.onCancel}
  176. onCancel={this.onCancel}
  177. width='900px'
  178. title='新增催款记录'
  179. footer=''
  180. className="admin-desc-content">
  181. <Form onSubmit={this.handleSubmit}>
  182. <Form.Item
  183. {...formItemLayout}
  184. label="催款时间"
  185. hasFeedback
  186. >
  187. <DatePicker onChange={(date, dateString)=>{
  188. this.setState({
  189. date:dateString
  190. })
  191. }} />
  192. </Form.Item>
  193. <Form.Item
  194. {...formItemLayout}
  195. label="催款情况"
  196. hasFeedback
  197. >
  198. <TextArea rows={4} onChange={(v)=>{
  199. this.setState({
  200. remarks:v
  201. })
  202. }}/>
  203. </Form.Item>
  204. <Form.Item
  205. {...formItemLayout}
  206. label="催款附件"
  207. hasFeedback
  208. >
  209. <ImgList
  210. accept='application/pdf,image/png,application/msword'
  211. domId='nowProjectStatus'
  212. uploadConfig={{
  213. action:globalConfig.context + "/api/admin/newOrder/uploadDunLogFile",
  214. data:{ 'sign': "dun_log_attachment"},
  215. multiple:true,
  216. listType:"text",
  217. }}
  218. onChange={(info)=>{
  219. let fileList = info.fileList;
  220. this.setState({ fileList });
  221. }}
  222. fileList={this.state.fileList}
  223. />
  224. </Form.Item>
  225. <div style={{display:'flex'}}>
  226. <Button type="primary" onClick={this.addDunOrder}>提交</Button>
  227. <Button type="dashed" style={{marginLeft:'15px'}} onClick={this.onCancel}>取消</Button>
  228. </div>
  229. </Form>
  230. </Modal>
  231. </Modal>
  232. )
  233. }
  234. }
  235. export default DunningRecord;