payRecord.js 28 KB

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