orderPaymentModal.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  1. import React, { Component } from 'react';
  2. import { Button, message, Modal, Spin, Table } from "antd";
  3. import $ from "jquery";
  4. import PayRecord from "../../../../components/checkProject/payRecord";
  5. class OrderPaymentModal extends Component {
  6. constructor(props) {
  7. super(props);
  8. this.state = {
  9. loading: false,
  10. selectOrderPayments: [],
  11. payRecordVisible: false,
  12. orderPaymentsId: 0,
  13. ContactsListsNew: [
  14. {
  15. title: '编号',
  16. dataIndex: 'id',
  17. key: 'id',
  18. },
  19. {
  20. title: '供应商名称',
  21. dataIndex: 'companyName',
  22. key: 'companyName',
  23. render: (text, record) => {
  24. return (
  25. <div>
  26. {
  27. record.status === 4 ? text : (
  28. record.chooseType === 2 ? text : (text + '-' + record.tpcId) +
  29. (text !== record.tpcName && record.tpcName ? '(' + record.tpcName + ')' : '')
  30. )
  31. }
  32. </div>
  33. )
  34. },
  35. },
  36. {
  37. title: '支付类型',
  38. dataIndex: 'chooseType',
  39. key: 'chooseType',
  40. render: (text, record) => {
  41. return (
  42. <div>
  43. {text === 0 ? '第三方' : text === 1 ? '催款' : '官费'}
  44. </div>
  45. )
  46. },
  47. },
  48. {
  49. title: '申请支付金额(万元)',
  50. dataIndex: 'applicationAmount',
  51. key: 'applicationAmount',
  52. render: (text, record) => {
  53. return (
  54. <div>
  55. {/*类型为官费时显示申请支付金额与申请支付数量*/}
  56. {/*{*/}
  57. {/* !(this.props.projectType === 2 || (this.props.projectType === 1 && record.patentType === 0)) || record.chooseType === 2 ?*/}
  58. {/* text :*/}
  59. {/* '/'*/}
  60. {/*}*/}
  61. {text}
  62. </div>
  63. )
  64. }
  65. },
  66. {
  67. title: '申请支付数量',
  68. dataIndex: 'quantity',
  69. key: 'quantity',
  70. render: (text, record) => {
  71. return (
  72. <div>
  73. {/*类型为官费时显示申请支付金额与申请支付数量*/}
  74. {/*{*/}
  75. {/* this.props.projectType === 2 || (this.props.projectType === 1 &&record.patentType === 0) || record.chooseType === 2?*/}
  76. {/* text :*/}
  77. {/* '/'*/}
  78. {/*}*/}
  79. {text}
  80. </div>
  81. )
  82. }
  83. },
  84. {
  85. title: '申请时间',
  86. dataIndex: 'createTimes',
  87. key: 'createTimes',
  88. },
  89. {
  90. title: '状态',
  91. dataIndex: 'status',
  92. key: 'status',
  93. render: (text, record) => {
  94. return (
  95. <div className="gutter-box" style={{
  96. width: '100%',
  97. display: 'flex',
  98. }}>
  99. <div className="operation">
  100. {(!!record.financeName && text === 0) ? record.financeName : ""}
  101. {
  102. text === 0 ? '审核中' :
  103. text === 1 ? '审核通过' :
  104. text === 2 ? '已驳回' :
  105. text === 3 ? '支付完成' :
  106. text === 4 ? '已取消' : ''
  107. }
  108. </div>
  109. <Button type="primary" size='small' style={{ marginLeft: '10px' }} onClick={() => {
  110. this.setState({
  111. payRecordVisible: true,
  112. orderPaymentsId: record.id,
  113. })
  114. }}>
  115. {this.operationJudgmentName(text)}
  116. </Button>
  117. </div>
  118. )
  119. },
  120. },
  121. ]
  122. }
  123. this.getSelectOrderPayment = this.getSelectOrderPayment.bind(this);
  124. }
  125. componentDidMount() {
  126. if (this.props.tid) {
  127. this.getSelectOrderPayment();
  128. }
  129. }
  130. //0审核 1待支付 2驳回 3已支付 4取消
  131. operationJudgmentName(id) {
  132. if (this.props.isAuditPayment) { //财务
  133. return id === 0 ? '待审核' :
  134. id === 1 ? '待支付' :
  135. id === 2 ? '查看详情' : '查看详情'
  136. } else {
  137. return id === 0 ? '待审核' :
  138. id === 1 ? '待支付' :
  139. id === 2 ? '查看详情' : '查看详情'
  140. }
  141. }
  142. //支付列表
  143. getSelectOrderPayment() {
  144. $.ajax({
  145. method: 'get',
  146. dataType: 'json',
  147. crossDomain: false,
  148. url: globalConfig.context + '/api/admin/company/selectOrderPayment',
  149. data: {
  150. id: this.props.tid,
  151. },
  152. success: function (data) {
  153. if (data.error.length) {
  154. if (data.error && data.error.length) {
  155. message.warning(data.error[0].message);
  156. }
  157. } else {
  158. this.setState({
  159. selectOrderPayments: data.data
  160. })
  161. }
  162. }.bind(this),
  163. }).always(
  164. function () {
  165. }.bind(this)
  166. )
  167. }
  168. render() {
  169. return (
  170. <Modal
  171. maskClosable={false}
  172. className="customeDetails"
  173. footer={false}
  174. title="支付记录"
  175. width="1200px"
  176. visible={this.props.visible}
  177. onOk={() => {
  178. this.props.onSuccess && this.props.onSuccess();
  179. }}
  180. onCancel={() => {
  181. this.props.onCancer && this.props.onCancer();
  182. }}
  183. >
  184. <Spin spinning={this.state.loading}>
  185. <Table
  186. pagination={false}
  187. columns={this.state.ContactsListsNew}
  188. dataSource={this.state.selectOrderPayments}
  189. onRowClick={this.tableRowClickOne}
  190. style={{
  191. cursor: 'pointer',
  192. }}
  193. scroll={{ x: 'max-content', y: 0 }}
  194. bordered
  195. size="small"
  196. />
  197. </Spin>
  198. {this.state.payRecordVisible ? <PayRecord
  199. {...this.props}
  200. payId={this.state.orderPaymentsId}
  201. visible={this.state.payRecordVisible}
  202. tid={this.props.tid}
  203. isAuditPayment={this.props.isAuditPayment}
  204. projectType={this.props.projectType}
  205. changeVisible={() => {
  206. this.getSelectOrderPayment();
  207. this.setState({
  208. payRecordVisible: false,
  209. orderPaymentsId: 0,
  210. })
  211. }}
  212. /> : <div />}
  213. </Modal>
  214. )
  215. }
  216. }
  217. export default OrderPaymentModal;