payRecord.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416
  1. import React,{Component} from 'react';
  2. import {Button, Form, Input, message, Modal, Spin} from "antd";
  3. import $ from "jquery/src/ajax";
  4. const layout = {
  5. labelCol: {
  6. span: 8,
  7. },
  8. wrapperCol: {
  9. span: 16,
  10. },
  11. };
  12. const formItemLayout = {
  13. labelCol: { span: 8 },
  14. wrapperCol: { span: 14 },
  15. };
  16. class PayRecord extends Component{
  17. constructor(props) {
  18. super(props);
  19. this.state={
  20. loading: false,
  21. paymentLogs: [],
  22. paymentDetails: {},
  23. financialPaymentList: [],
  24. }
  25. this.examineOperation = this.examineOperation.bind(this);
  26. this.noExamineOperation = this.noExamineOperation.bind(this);
  27. }
  28. componentDidMount() {
  29. this.getSelectPaymentLog(); //付款日志
  30. this.getPaymentDetails(); //支付详情
  31. this.getSelectfinancialPayment(); //财务付款列表
  32. }
  33. //付款日志
  34. getSelectPaymentLog(){
  35. this.setState({
  36. loading: true
  37. });
  38. $.ajax({
  39. type: 'get',
  40. cache: false,
  41. url: globalConfig.context + "/api/admin/company/selectPaymentLog",
  42. dataType: "json",
  43. data: {
  44. id: this.props.payId
  45. },
  46. success: function (data) {
  47. this.setState({
  48. loading: false
  49. });
  50. if (!data.data) {
  51. if (data.error && data.error.length) {
  52. message.warning(data.error[0].message);
  53. };
  54. } else {
  55. this.setState({
  56. paymentLogs: data.data
  57. })
  58. };
  59. }.bind(this),
  60. }).always(function () {
  61. this.setState({
  62. loading: false
  63. });
  64. }.bind(this));
  65. }
  66. //支付详情
  67. getPaymentDetails(){
  68. this.setState({
  69. loading: true
  70. });
  71. $.ajax({
  72. type: 'get',
  73. cache: false,
  74. url: globalConfig.context + "/api/admin/company/OrderPaymentDetails",
  75. dataType: "json",
  76. data: {
  77. id: this.props.payId
  78. },
  79. success: function (data) {
  80. this.setState({
  81. loading: false
  82. });
  83. if (!data.data) {
  84. if (data.error && data.error.length) {
  85. message.warning(data.error[0].message);
  86. };
  87. } else {
  88. this.setState({
  89. paymentDetails: data.data
  90. })
  91. };
  92. }.bind(this),
  93. }).always(function () {
  94. this.setState({
  95. loading: false
  96. });
  97. }.bind(this));
  98. }
  99. //财务付款列表
  100. getSelectfinancialPayment(){
  101. this.setState({
  102. loading: true
  103. });
  104. $.ajax({
  105. type: 'get',
  106. cache: false,
  107. url: globalConfig.context + "/api/admin/company/selectfinancialPayment",
  108. dataType: "json",
  109. data: {
  110. id: this.props.payId
  111. },
  112. success: function (data) {
  113. this.setState({
  114. loading: false
  115. });
  116. if (!data.data) {
  117. if (data.error && data.error.length) {
  118. message.warning(data.error[0].message);
  119. };
  120. } else {
  121. this.setState({
  122. financialPaymentList: data.data
  123. })
  124. };
  125. }.bind(this),
  126. }).always(function () {
  127. this.setState({
  128. loading: false
  129. });
  130. }.bind(this));
  131. }
  132. handleSubmit(e,status = 0){
  133. e.preventDefault();
  134. this.props.form.validateFieldsAndScroll((err, values) => {
  135. if (err) {
  136. return;
  137. }
  138. const { paymentDetails } = this.state;
  139. this.setState({
  140. loading: true
  141. })
  142. let data = {
  143. id: this.props.payId,
  144. paymentAmount: paymentDetails.paymentAmount,
  145. paymentStatus: paymentDetails.paymentStatus,
  146. status: status,//0 发起 1通过 2驳回(0重新发起,1通过审核,2驳回)
  147. }
  148. Object.assign(data,values)
  149. $.ajax({
  150. type: 'post',
  151. url: globalConfig.context + "/api/admin/company/updateOrderPayment",
  152. dataType: "json",
  153. data: data,
  154. }).done((res) => {
  155. if (res.error && res.error.length) {
  156. message.error(res.error[0].message);
  157. } else {
  158. message.success("重新申请成功");
  159. }
  160. }).always(() => {
  161. this.setState({
  162. loading: false
  163. })
  164. });
  165. })
  166. }
  167. //新增财务付款
  168. addfinancialPayment(e) {
  169. e.preventDefault();
  170. this.props.form.validateFieldsAndScroll((err, values) => {
  171. if (err) {
  172. return;
  173. }
  174. const { paymentDetails } = this.state;
  175. this.setState({
  176. loading: true
  177. })
  178. let data = {
  179. pid: this.props.payId,
  180. partyAmount: values.partyAmount,
  181. paymentTimes: values.paymentTimes
  182. }
  183. $.ajax({
  184. type: 'post',
  185. url: globalConfig.context + "/api/admin/company/addfinancialPayment",
  186. dataType: "json",
  187. data: data,
  188. }).done((res) => {
  189. if (res.error && res.error.length) {
  190. message.error(res.error[0].message);
  191. } else {
  192. message.success("新增成功");
  193. }
  194. }).always(() => {
  195. this.setState({
  196. loading: false
  197. })
  198. });
  199. })
  200. }
  201. //0审核 1驳回 2待支付 3已支付 4取消
  202. noExamineOperation(){
  203. return (
  204. this.state.paymentDetails.status === 1 ? <Form.Item>
  205. <Button type="primary" htmlType="submit">
  206. 重新发起申请
  207. </Button>
  208. </Form.Item> : <div/>
  209. )
  210. }
  211. examineOperation() {
  212. const { getFieldDecorator } = this.props.form;
  213. return (
  214. this.state.paymentDetails.status === 0 ? <Form.Item>
  215. {getFieldDecorator('remarks', {
  216. rules: [{ required: true, message: '请输入备注!' }],
  217. })(
  218. <Input style={{ width: '200px' }} placeholder="请输入备注" type={'textarea'}/>
  219. )}
  220. <Button type="primary" onClick={(e)=>{
  221. this.handleSubmit(e,2);
  222. }}>
  223. 驳回
  224. </Button>
  225. <Button type="primary" onClick={(e)=>{
  226. this.handleSubmit(e,1);
  227. }}>
  228. 通过
  229. </Button>
  230. </Form.Item> : this.state.paymentDetails.status === 2 ?
  231. <div>
  232. <Form.Item label="付款时间:">
  233. {getFieldDecorator('remarks', {
  234. rules: [{ required: true, message: '请输入付款时间!' }],
  235. })(
  236. <Input style={{ width: '100px' }} placeholder="请输入付款时间" type={'number'}/>
  237. )}
  238. </Form.Item>
  239. <Form.Item label="付款金额(万元):">
  240. {getFieldDecorator('remarks', {
  241. rules: [{ required: true, message: '请输入付款金额!' }],
  242. })(
  243. <Input style={{ width: '100px' }} placeholder="请输入付款金额" type={'time'}/>
  244. )}
  245. </Form.Item>
  246. <Button type="primary" onClick={(e)=>{
  247. this.addfinancialPayment(e)
  248. }}>
  249. 保存
  250. </Button>
  251. </div> : <div/>
  252. )
  253. }
  254. render() {
  255. const { getFieldDecorator } = this.props.form;
  256. const { paymentLogs,paymentDetails,financialPaymentList } = this.state;
  257. return(
  258. <Modal
  259. maskClosable={false}
  260. footer={null}
  261. visible={this.props.visible}
  262. onCancel={() => {
  263. this.props.changeVisible();
  264. }}
  265. >
  266. <Spin spinning={this.state.loading}>
  267. <div>
  268. <div>申请支付外包费用</div>
  269. <Form
  270. {...layout}
  271. name="basic"
  272. initialValues={{
  273. remember: true,
  274. }}
  275. onSubmit={(e)=>{
  276. this.handleSubmit(e)
  277. }}
  278. >
  279. <Form.Item
  280. {...formItemLayout}
  281. style={{
  282. display:'flex'
  283. }}
  284. label="付款单位/个人:"
  285. >
  286. <div>{paymentDetails.companyName}</div>
  287. </Form.Item>
  288. <Form.Item
  289. {...formItemLayout}
  290. style={{
  291. display:'flex'
  292. }}
  293. label="单价(万元):"
  294. >
  295. <div>{paymentDetails.nodeUnitPrice}</div>
  296. </Form.Item>
  297. <Form.Item
  298. {...formItemLayout}
  299. style={{
  300. display:'flex'
  301. }}
  302. label="数量:"
  303. >
  304. {getFieldDecorator('quantity', {
  305. initialValue: parseInt(paymentDetails.quantity),
  306. rules: [{ required: false, message: '请输入數量!' }],
  307. })(
  308. <Input disabled={paymentDetails.quantity <= 1 || this.state.paymentDetails.status > 1} style={{ width: '200px' }} placeholder="请输入數量" type={'number'}/>
  309. )}
  310. </Form.Item>
  311. <Form.Item
  312. {...formItemLayout}
  313. style={{
  314. display:'flex'
  315. }}
  316. label="总价(万元):"
  317. >
  318. <div>{paymentDetails.nodeTotalAmount}</div>
  319. </Form.Item>
  320. <Form.Item
  321. {...formItemLayout}
  322. style={{
  323. display:'flex'
  324. }}
  325. label="已付(万元):"
  326. >
  327. <div>{paymentDetails.nodePartyAmount}</div>
  328. </Form.Item>
  329. <Form.Item
  330. {...formItemLayout}
  331. style={{
  332. display:'flex'
  333. }}
  334. label="本次申请支付金额(万元):"
  335. >
  336. {getFieldDecorator('applicationAmount', {
  337. initialValue: paymentDetails.applicationAmount,
  338. rules: [{ required: true, message: '请输入本次申请支付金额!' }],
  339. })(
  340. <Input disabled={this.state.paymentDetails.status > 1} style={{ width: '200px' }} placeholder="请输入本次申请支付金额" type={'number'}/>
  341. )}
  342. </Form.Item>
  343. <Form.Item
  344. {...formItemLayout}
  345. style={{
  346. display:'flex'
  347. }}
  348. label="备注:"
  349. >
  350. <div>{paymentDetails.remarks}</div>
  351. </Form.Item>
  352. <div className='payStateList'>
  353. <div className='listTitle'>
  354. 支付状态
  355. </div>
  356. <div className='payList'>
  357. {
  358. paymentLogs.map((value,key)=>(
  359. <div key={key} className='payitem' style={{color:key === 0 ? '#f00' : '#000'}}>
  360. {value.aname+':'}
  361. {
  362. value.status === 0 ? '(发起)'+value.remarks :
  363. value.status === 1 ? '(通过)'+value.remarks : '(驳回)'+value.remarks
  364. }
  365. {
  366. value.createTimes
  367. }
  368. </div>
  369. ))
  370. }
  371. </div>
  372. </div>
  373. {paymentDetails.status === 2 || paymentDetails.status === 3 || paymentDetails.status === 4 ?<div className='payStateList'>
  374. <div className='listTitle' style={{display:'block',fontSize:'15px'}}>
  375. 上传付费凭证-财务
  376. <span style={{fontSize:'10px',paddingLeft:'10px'}}>实际付款(万元): {paymentDetails.paymentAmount}</span>
  377. </div>
  378. <div className='payList'>
  379. {
  380. financialPaymentList.map((value,key)=>(
  381. <div key={key} className='payitem' style={{color:key === 0 ? '#f00' : '#000'}}>
  382. 付款时间: {value.paymentTimes}
  383. <span style={{paddingLeft:'25px'}}>付款金额(万元): {value.partyAmount}</span>
  384. </div>
  385. ))
  386. }
  387. </div>
  388. </div> : <div/>}
  389. {
  390. this.props.isAuditPayment ? this.examineOperation() : this.noExamineOperation()
  391. }
  392. </Form>
  393. </div>
  394. </Spin>
  395. </Modal>
  396. )
  397. }
  398. }
  399. const WrappedNormalLoginForm = Form.create()(PayRecord);
  400. export default WrappedNormalLoginForm