orderPaymentModal.js 8.1 KB

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