payRecord.js 29 KB

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