payRecord.js 26 KB

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