payRecord.js 23 KB

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