payRecord.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547
  1. import React,{Component} from 'react';
  2. import {Button, DatePicker, Form, Input, message, Modal, Spin} from "antd";
  3. import $ from "jquery/src/ajax";
  4. import moment from "moment";
  5. const layout = {
  6. labelCol: {
  7. span: 8,
  8. },
  9. wrapperCol: {
  10. span: 16,
  11. },
  12. };
  13. const formItemLayout = {
  14. labelCol: { span: 8 },
  15. wrapperCol: { span: 14 },
  16. };
  17. class PayRecord extends Component{
  18. constructor(props) {
  19. super(props);
  20. this.state={
  21. loading: false,
  22. paymentLogs: [],
  23. paymentDetails: {},
  24. financialPaymentList: [],
  25. }
  26. this.examineOperation = this.examineOperation.bind(this);
  27. this.noExamineOperation = this.noExamineOperation.bind(this);
  28. }
  29. componentDidMount() {
  30. this.getSelectPaymentLog(); //付款日志
  31. this.getPaymentDetails(); //支付详情
  32. this.getSelectfinancialPayment(); //财务付款列表
  33. }
  34. //付款日志
  35. getSelectPaymentLog(){
  36. this.setState({
  37. loading: true
  38. });
  39. $.ajax({
  40. type: 'get',
  41. cache: false,
  42. url: globalConfig.context + "/api/admin/company/selectPaymentLog",
  43. dataType: "json",
  44. data: {
  45. id: this.props.payId
  46. },
  47. success: function (data) {
  48. this.setState({
  49. loading: false
  50. });
  51. if (!data.data) {
  52. if (data.error && data.error.length) {
  53. message.warning(data.error[0].message);
  54. };
  55. } else {
  56. this.setState({
  57. paymentLogs: data.data
  58. })
  59. };
  60. }.bind(this),
  61. }).always(function () {
  62. this.setState({
  63. loading: false
  64. });
  65. }.bind(this));
  66. }
  67. //支付详情
  68. getPaymentDetails(){
  69. this.setState({
  70. loading: true
  71. });
  72. $.ajax({
  73. type: 'get',
  74. cache: false,
  75. url: globalConfig.context + "/api/admin/company/OrderPaymentDetails",
  76. dataType: "json",
  77. data: {
  78. id: this.props.payId
  79. },
  80. success: function (data) {
  81. this.setState({
  82. loading: false
  83. });
  84. if (!data.data) {
  85. if (data.error && data.error.length) {
  86. message.warning(data.error[0].message);
  87. };
  88. } else {
  89. this.setState({
  90. paymentDetails: data.data
  91. })
  92. };
  93. }.bind(this),
  94. }).always(function () {
  95. this.setState({
  96. loading: false
  97. });
  98. }.bind(this));
  99. }
  100. //财务付款列表
  101. getSelectfinancialPayment(){
  102. this.setState({
  103. loading: true
  104. });
  105. $.ajax({
  106. type: 'get',
  107. cache: false,
  108. url: globalConfig.context + "/api/admin/company/selectfinancialPayment",
  109. dataType: "json",
  110. data: {
  111. id: this.props.payId
  112. },
  113. success: function (data) {
  114. this.setState({
  115. loading: false
  116. });
  117. if (!data.data) {
  118. if (data.error && data.error.length) {
  119. message.warning(data.error[0].message);
  120. };
  121. } else {
  122. this.setState({
  123. financialPaymentList: data.data
  124. })
  125. };
  126. }.bind(this),
  127. }).always(function () {
  128. this.setState({
  129. loading: false
  130. });
  131. }.bind(this));
  132. }
  133. handleSubmit(e,status = 0){
  134. //0审核 1待支付 2驳回 3已支付 4取消(0重新发起,1通过审核,2驳回)
  135. e.preventDefault();
  136. this.props.form.validateFieldsAndScroll((err, values) => {
  137. if (err) {
  138. return;
  139. }
  140. const { paymentDetails } = this.state;
  141. this.setState({
  142. loading: true
  143. })
  144. let data = {
  145. id: this.props.payId,
  146. paymentAmount: paymentDetails.paymentAmount,
  147. // paymentStatus: paymentDetails.paymentStatus, //支付状态 0半款 1全款
  148. status: status,//0 发起 1通过 2驳回(0重新发起,1通过审核,2驳回)
  149. }
  150. Object.assign(data,values)
  151. $.ajax({
  152. type: 'post',
  153. url: globalConfig.context + "/api/admin/company/updateOrderPayment",
  154. dataType: "json",
  155. data: data,
  156. }).done((res) => {
  157. if (res.error && res.error.length) {
  158. message.error(res.error[0].message);
  159. } else {
  160. message.success(
  161. status === 0 ? "重新申请成功" :
  162. status === 1 ? "通过审核操作成功" :
  163. status === 2 ? "驳回操作成功" :
  164. status === 3 ? "支付操作成功" :
  165. status === 4 ? "取消操作成功" :''
  166. );
  167. this.props.changeVisible();
  168. }
  169. }).always(() => {
  170. this.setState({
  171. loading: false
  172. })
  173. });
  174. })
  175. }
  176. //新增财务付款
  177. addfinancialPayment(e,index) {
  178. e.preventDefault();
  179. let financialPaymentList = this.state.financialPaymentList.concat();
  180. if(!financialPaymentList[index].partyAmount){
  181. message.error('请填写正确的付款金额 ');
  182. return;
  183. }
  184. if(!financialPaymentList[index].paymentTimes){
  185. message.error('请选择时间 ');
  186. return;
  187. }
  188. let time = moment(financialPaymentList[index].paymentTimes).format('YYYY-MM-DD HH:mm:ss');
  189. this.setState({
  190. loading: true
  191. })
  192. let data = {
  193. pid: this.props.payId,
  194. partyAmount: financialPaymentList[index]['partyAmount'],
  195. paymentTimes: time,
  196. }
  197. $.ajax({
  198. type: 'post',
  199. url: globalConfig.context + "/api/admin/company/addfinancialPayment",
  200. dataType: "json",
  201. data: data,
  202. }).done((res) => {
  203. if (res.error && res.error.length) {
  204. message.error(res.error[0].message);
  205. } else {
  206. message.success("新增成功");
  207. let arr = this.state.financialPaymentList.concat();
  208. arr[index].isSave= true;
  209. arr[index].id= res.data;
  210. this.setState({
  211. financialPaymentList: arr
  212. });
  213. // this.getSelectfinancialPayment();
  214. }
  215. }).always(() => {
  216. this.setState({
  217. loading: false
  218. })
  219. });
  220. }
  221. //删除财务付款
  222. deleteFinancialPayment(e,index){
  223. e.preventDefault();
  224. if(!this.state.financialPaymentList[index]['id']){
  225. let arr = this.state.financialPaymentList.concat();
  226. arr.splice(index,1);
  227. this.setState({
  228. financialPaymentList: arr
  229. });
  230. return;
  231. }
  232. this.setState({
  233. loading: true
  234. })
  235. $.ajax({
  236. type: 'post',
  237. url: globalConfig.context + "/api/admin/company/deleteFinancialPayment",
  238. dataType: "json",
  239. data: {
  240. id: this.state.financialPaymentList[index]['id']
  241. },
  242. }).done((res) => {
  243. if (res.error && res.error.length) {
  244. message.error(res.error[0].message);
  245. } else {
  246. let arr = this.state.financialPaymentList.concat();
  247. arr.splice(index,1);
  248. this.setState({
  249. financialPaymentList: arr
  250. });
  251. message.success("删除成功");
  252. }
  253. }).always(() => {
  254. this.setState({
  255. loading: false
  256. })
  257. });
  258. }
  259. //0审核 1驳回 2待支付 3已支付 4取消
  260. noExamineOperation(){
  261. return (
  262. this.state.paymentDetails.status === 2 ? <Form.Item>
  263. <Button type="primary" htmlType="submit">
  264. 重新发起申请
  265. </Button>
  266. <Button type="danger" style={{float:'right'}} onClick={(e)=>{
  267. this.handleSubmit(e,4);
  268. }}>
  269. 删除
  270. </Button>
  271. </Form.Item> : <div/>
  272. )
  273. }
  274. examineOperation() {
  275. const { getFieldDecorator } = this.props.form;
  276. return (
  277. this.state.paymentDetails.status === 0 ? <Form.Item>
  278. {getFieldDecorator('auditNotes', {
  279. rules: [{ required: true, message: '请输入备注!' }],
  280. })(
  281. <Input style={{ width: '200px' }} placeholder="请输入备注" type={'textarea'}/>
  282. )}
  283. <Button type="primary" style={{marginLeft:'15px'}} onClick={(e)=>{
  284. this.handleSubmit(e,2);
  285. }}>
  286. 驳回
  287. </Button>
  288. <Button type="primary" style={{marginLeft:'15px'}} onClick={(e)=>{
  289. this.handleSubmit(e,1);
  290. }}>
  291. 通过
  292. </Button>
  293. </Form.Item> : this.state.paymentDetails.status === 1 ?
  294. this.state.financialPaymentList.map((value,index)=>(
  295. <div key={index} style={{display:'flex',flexFlow:'row nowrap',alignItems:'center',paddingTop:'15px'}}>
  296. <Form.Item label="付款时间:" style={{marginBottom:'0px !important',display:'flex',flexFlow:'row nowrap',alignItems:'center'}}>
  297. <DatePicker
  298. showTime
  299. disabled={value.isSave || value.id}
  300. format="YYYY-MM-DD HH:mm:ss"
  301. style={{ width: '200px' }}
  302. placeholder="请选择付款时间"
  303. value={value.paymentTimes && moment(value.paymentTimes, 'YYYY-MM-DD HH:mm:ss')}
  304. defaultValue={value.paymentTimes && moment(value.paymentTimes, 'YYYY-MM-DD HH:mm:ss')}
  305. onChange={(value)=>{
  306. let arr = this.state.financialPaymentList.concat();
  307. arr[index].paymentTimes = value;
  308. this.setState({
  309. financialPaymentList:arr
  310. })
  311. }}
  312. />
  313. </Form.Item>
  314. <Form.Item label="付款金额(万元):" style={{paddingLeft:'20px',marginBottom:'0px !important',display:'flex',flexFlow:'row nowrap',alignItems:'center'}}>
  315. <Input
  316. disabled={value.isSave || value.id}
  317. style={{ width: '100px' }}
  318. placeholder="请输入付款金额"
  319. type={'number'}
  320. value={value.partyAmount && value.partyAmount}
  321. defaultValue={value.partyAmount && value.partyAmount}
  322. onChange={(e)=>{
  323. let arr = this.state.financialPaymentList.concat();
  324. arr[index].partyAmount = e.target.value;
  325. this.setState({
  326. financialPaymentList:arr
  327. })
  328. }}
  329. />
  330. </Form.Item>
  331. {value.id ? false : !value.isSave ? <Button style={{marginLeft:'20px',}} type="primary" onClick={(e)=>{
  332. this.addfinancialPayment(e,index)
  333. }}>
  334. 保存
  335. </Button> : <div/>}
  336. <Button type="primary" style={{marginLeft:'20px',}} onClick={(e)=>{
  337. this.deleteFinancialPayment(e,index);
  338. }}>
  339. 删除
  340. </Button>
  341. </div>
  342. )) : <div/>
  343. )
  344. }
  345. render() {
  346. const { getFieldDecorator } = this.props.form;
  347. const { paymentLogs,paymentDetails,financialPaymentList } = this.state;
  348. return(
  349. <Modal
  350. width={700}
  351. maskClosable={false}
  352. footer={null}
  353. visible={this.props.visible}
  354. onCancel={() => {
  355. this.props.changeVisible();
  356. }}
  357. >
  358. <Spin spinning={this.state.loading}>
  359. <div>
  360. <div>申请支付外包费用</div>
  361. <Form
  362. {...layout}
  363. name="basic"
  364. initialValues={{
  365. remember: true,
  366. }}
  367. onSubmit={(e)=>{
  368. this.handleSubmit(e)
  369. }}
  370. >
  371. <Form.Item
  372. {...formItemLayout}
  373. style={{
  374. display:'flex'
  375. }}
  376. label="付款单位/个人:"
  377. >
  378. <div>{paymentDetails.companyName}</div>
  379. </Form.Item>
  380. <Form.Item
  381. {...formItemLayout}
  382. style={{
  383. display:'flex'
  384. }}
  385. label="单价(万元):"
  386. >
  387. <div>{paymentDetails.nodeUnitPrice}</div>
  388. </Form.Item>
  389. <Form.Item
  390. {...formItemLayout}
  391. style={{
  392. display:'flex'
  393. }}
  394. label="数量:"
  395. >
  396. {getFieldDecorator('quantity', {
  397. initialValue: parseInt(paymentDetails.quantity),
  398. rules: [{ required: false, message: '请输入數量!' }],
  399. })(
  400. <Input disabled={true} style={{ width: '200px' }} placeholder="请输入數量" type={'number'}/>
  401. )}
  402. </Form.Item>
  403. <Form.Item
  404. {...formItemLayout}
  405. style={{
  406. display:'flex'
  407. }}
  408. label="总价(万元):"
  409. >
  410. <div>{paymentDetails.nodeTotalAmount}</div>
  411. </Form.Item>
  412. <Form.Item
  413. {...formItemLayout}
  414. style={{
  415. display:'flex'
  416. }}
  417. label="已付(万元):"
  418. >
  419. <div>{paymentDetails.nodePartyAmount}</div>
  420. </Form.Item>
  421. <Form.Item
  422. {...formItemLayout}
  423. style={{
  424. display:'flex'
  425. }}
  426. label="本次申请支付金额(万元):"
  427. >
  428. {getFieldDecorator('applicationAmount', {
  429. initialValue: paymentDetails.applicationAmount,
  430. rules: [{ required: true, message: '请输入本次申请支付金额!' }],
  431. })(
  432. <Input
  433. type={'number'}
  434. style={{ width: '200px' }}
  435. disabled={ this.props.isAuditPayment ? this.state.paymentDetails.status !== 0 : this.state.paymentDetails.status !== 2}
  436. placeholder="请输入本次申请支付金额"/>
  437. )}
  438. </Form.Item>
  439. <Form.Item
  440. {...formItemLayout}
  441. style={{
  442. display:'flex'
  443. }}
  444. label="备注:"
  445. >
  446. {
  447. (!this.props.isAuditPayment && this.state.paymentDetails.status === 2) ?
  448. getFieldDecorator('remarks', {
  449. initialValue: paymentDetails.remarks,
  450. rules: [{ required: true, message: '请输入备注!' }],
  451. })(
  452. <Input style={{ width: '200px' }} placeholder="请输入备注" type={'textarea'}/>
  453. ) : <div>{paymentDetails.remarks}</div>
  454. }
  455. </Form.Item>
  456. <div className='payStateList'>
  457. <div className='listTitle' style={{color:'#F00'}}>
  458. 支付状态:
  459. <span style={{paddingLeft:'20px'}}>
  460. {
  461. //0审核 1待支付 2驳回 3已支付 4取消
  462. paymentDetails.status === 0 ? '待'+paymentDetails.financeName+'审核' :
  463. paymentDetails.status === 1 ? '待'+paymentDetails.financeName+'支付' :
  464. paymentDetails.status === 2 ? '待重新提交' :
  465. paymentDetails.status === 3 ? '待'+paymentDetails.financeName+'审核' : '已取消'
  466. }
  467. </span>
  468. </div>
  469. <div className='payList'>
  470. {
  471. paymentLogs.map((value,key)=>(
  472. <div key={key} className='payitem'>
  473. {value.aname+':'}
  474. <span style={{paddingLeft:'15px',paddingRight:'15px'}}>
  475. {
  476. value.status === 0 ? '(发起)' :
  477. value.status === 1 ? '(通过)': '(驳回)'
  478. }
  479. {value.remarks}
  480. </span>
  481. {
  482. value.createTimes
  483. }
  484. </div>
  485. ))
  486. }
  487. </div>
  488. </div>
  489. {paymentDetails.status === 1 || paymentDetails.status === 3 || paymentDetails.status === 4 ?<div style={{ borderTop: '1px #000 dashed'}}>
  490. <div className='listTitle' style={{display:'block',fontSize:'15px'}}>
  491. 上传付费凭证-财务
  492. <span style={{fontSize:'10px',paddingLeft:'10px'}}>实际付款(万元): {paymentDetails.paymentAmount}</span>
  493. {paymentDetails.status === 1 && this.props.isAuditPayment ?
  494. <Button style={{marginLeft:'20px'}} type="primary" onClick={()=>{
  495. let arr = this.state.financialPaymentList.concat();
  496. arr.push({});
  497. this.setState({
  498. financialPaymentList: arr
  499. })
  500. }}>
  501. 增加付款凭证
  502. </Button> : <div/>
  503. }
  504. </div>
  505. {!(paymentDetails.status === 1 && this.props.isAuditPayment) ? <div className='payList'>
  506. {
  507. financialPaymentList.map((value,key)=>(
  508. <div key={key} className='payitem'>
  509. 付款时间: {value.paymentTimes}
  510. <span style={{paddingLeft:'25px'}}>付款金额(万元): {value.partyAmount}</span>
  511. </div>
  512. ))
  513. }
  514. </div> : <div/>}
  515. </div> : <div/>}
  516. {
  517. this.props.isAuditPayment ? this.examineOperation() : this.noExamineOperation()
  518. }
  519. {this.props.isAuditPayment && paymentDetails.status === 1 ? <Button style={{marginLeft:'20px'}} type="primary" onClick={(e)=>{
  520. this.handleSubmit(e,3);
  521. }}>
  522. 确定提交
  523. </Button> : <div/>}
  524. </Form>
  525. </div>
  526. </Spin>
  527. </Modal>
  528. )
  529. }
  530. }
  531. const WrappedNormalLoginForm = Form.create()(PayRecord);
  532. export default WrappedNormalLoginForm