orderPaymentModal.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  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. {
  101. text === 0 ? '审核中' :
  102. text === 1 ? '审核通过' :
  103. text === 2 ? '已驳回' :
  104. text === 3 ? '支付完成' :
  105. text === 4 ? '已取消' : ''
  106. }
  107. </div>
  108. <Button type="primary" size='small' style={{marginLeft:'10px'}} onClick={()=>{
  109. this.setState({
  110. payRecordVisible: true,
  111. orderPaymentsId: record.id,
  112. })
  113. }}>
  114. {this.operationJudgmentName(text)}
  115. </Button>
  116. </div>
  117. )
  118. },
  119. },
  120. ]
  121. }
  122. this.getSelectOrderPayment = this.getSelectOrderPayment.bind(this);
  123. }
  124. componentDidMount() {
  125. if(this.props.tid){
  126. this.getSelectOrderPayment();
  127. }
  128. }
  129. //0审核 1待支付 2驳回 3已支付 4取消
  130. operationJudgmentName(id) {
  131. if(this.props.isAuditPayment){ //财务
  132. return id === 0 ? '待审核' :
  133. id === 1 ? '待支付' :
  134. id === 2 ? '查看详情' : '查看详情'
  135. }else{
  136. return id === 0 ? '待审核' :
  137. id === 1 ? '待支付' :
  138. id === 2 ? '查看详情' : '查看详情'
  139. }
  140. }
  141. //支付列表
  142. getSelectOrderPayment() {
  143. $.ajax({
  144. method: 'get',
  145. dataType: 'json',
  146. crossDomain: false,
  147. url: globalConfig.context + '/api/admin/company/selectOrderPayment',
  148. data: {
  149. id: this.props.tid,
  150. },
  151. success: function (data) {
  152. if (data.error.length) {
  153. if (data.error && data.error.length) {
  154. message.warning(data.error[0].message);
  155. }
  156. } else {
  157. this.setState({
  158. selectOrderPayments: data.data
  159. })
  160. }
  161. }.bind(this),
  162. }).always(
  163. function () {
  164. }.bind(this)
  165. )
  166. }
  167. render() {
  168. return(
  169. <Modal
  170. maskClosable={false}
  171. className="customeDetails"
  172. footer={false}
  173. title="支付记录"
  174. width="900px"
  175. visible={this.props.visible}
  176. onOk={()=>{
  177. this.props.onSuccess && this.props.onSuccess();
  178. }}
  179. onCancel={()=>{
  180. this.props.onCancer && this.props.onCancer();
  181. }}
  182. >
  183. <Spin spinning={this.state.loading}>
  184. <Table
  185. pagination={false}
  186. columns={this.state.ContactsListsNew}
  187. dataSource={this.state.selectOrderPayments}
  188. onRowClick={this.tableRowClickOne}
  189. style={{
  190. cursor: 'pointer',
  191. }}
  192. scroll={{ x: 'max-content', y: 0 }}
  193. bordered
  194. size="small"
  195. />
  196. </Spin>
  197. {this.state.payRecordVisible ? <PayRecord
  198. {...this.props}
  199. payId={this.state.orderPaymentsId}
  200. visible={this.state.payRecordVisible}
  201. tid={this.props.tid}
  202. isAuditPayment={this.props.isAuditPayment}
  203. projectType={this.props.projectType}
  204. changeVisible={()=>{
  205. this.getSelectOrderPayment();
  206. this.setState({
  207. payRecordVisible: false,
  208. orderPaymentsId: 0,
  209. })
  210. }}
  211. /> : <div/>}
  212. </Modal>
  213. )
  214. }
  215. }
  216. export default OrderPaymentModal;