index.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385
  1. import React,{Component} from 'react';
  2. import $ from "jquery/src/ajax";
  3. import {
  4. Spin,
  5. Table,
  6. message,
  7. Tooltip, Tabs, Button,Modal
  8. } from "antd";
  9. import {ShowModal,getProjectStatus} from "@/tools";
  10. import FilterColumn from './filterColumn';
  11. import DetailsModal from './detailsModal/index';
  12. import OrderPaymentModal from './component/orderPaymentModal';
  13. import './index.less';
  14. import CheckProject from "../../../components/checkProject";
  15. import PayRecord from "../../../components/checkProject/payRecord";
  16. const { TabPane } = Tabs;
  17. class PayApplyReject extends Component{
  18. constructor(props) {
  19. super(props);
  20. this.state={
  21. loading: true,
  22. columns: [
  23. {
  24. title: "支付编号",
  25. dataIndex: "key",
  26. key: "key",
  27. },
  28. {
  29. title: "项目编号",
  30. dataIndex: "tid",
  31. key: "tid",
  32. },
  33. {
  34. title: "项目名称",
  35. dataIndex: "pname",
  36. key: "pname",
  37. },
  38. {
  39. title: "项目状态",
  40. dataIndex: "projectStatus",
  41. key: "projectStatus",
  42. render: (text) => {
  43. return getProjectStatus(text);
  44. },
  45. },
  46. {
  47. title: "分类名称",
  48. dataIndex: "cname",
  49. key: "cname",
  50. },
  51. {
  52. title: "合同编号",
  53. dataIndex: "contractNo",
  54. key: "contractNo",
  55. },
  56. {
  57. title: "订单编号",
  58. dataIndex: "orderNo",
  59. key: "orderNo",
  60. },
  61. {
  62. title: "客户名称",
  63. dataIndex: "userName",
  64. key: "userName",
  65. render: (text) => {
  66. return (
  67. <Tooltip placement="bottom" title={text && text.length > 9 ? text : ''}>
  68. {text && text.length > 9 ? text.substr(0, 9) + "..." : text}
  69. </Tooltip>
  70. )
  71. },
  72. },
  73. {
  74. title: "部门名称",
  75. dataIndex: "depName",
  76. key: "depName",
  77. render: (text) => {
  78. return (
  79. <Tooltip placement="bottom" title={text && text.length > 9 ? text : ''}>
  80. {text && text.length > 9 ? text.substr(0, 9) + "..." : text}
  81. </Tooltip>
  82. )
  83. },
  84. },
  85. // {
  86. // title: "实际总付款",
  87. // dataIndex: "costAmount",
  88. // key: "costAmount",
  89. // },
  90. {
  91. title: "付款类型",
  92. dataIndex: "chooseType",
  93. key: "chooseType",
  94. render: (text) => {
  95. return text == 0 ? '第三方成本' :
  96. text == 1 ? '催款节点' :'官费';
  97. },
  98. },
  99. {
  100. title: "本次申请金额",
  101. dataIndex: "applicationAmount",
  102. key: "applicationAmount",
  103. render: (text) => {
  104. return isNaN(parseFloat(text)) ? text : parseFloat(text);
  105. }
  106. },
  107. {
  108. title: "已支付",
  109. dataIndex: "paymentAmount",
  110. key: "paymentAmount",
  111. render: (text) => {
  112. return isNaN(parseFloat(text)) ? text : parseFloat(text);
  113. },
  114. },
  115. {
  116. title: "供应商",
  117. dataIndex: "companyName",
  118. key: "companyName",
  119. },
  120. {
  121. title: "申请人",
  122. dataIndex: "aname",
  123. key: "aname",
  124. },
  125. {
  126. title: "财务名称",
  127. dataIndex: "financeName",
  128. key: "financeName",
  129. },
  130. {
  131. title: "状态",
  132. dataIndex: "status",
  133. key: "status",
  134. render: (text) => {
  135. return text === 0 ? '审核' :
  136. text === 1 ? '待支付' :
  137. text === 2 ? '驳回' :
  138. text === 3 ? '已支付' :
  139. text === 4 ? '已取消' : '';
  140. },
  141. },
  142. {
  143. title: "创建时间",
  144. dataIndex: "createTime",
  145. key: "createTime",
  146. },
  147. {
  148. title: '操作',
  149. dataIndex: 'action',
  150. key: 'action',
  151. render: (text, record) => {
  152. return (
  153. <div style={{
  154. display:'flex',
  155. alignItems:'center',
  156. }}>
  157. <Button type="primary" size="small" onClick={(e) => {
  158. e.stopPropagation();
  159. this.setState({
  160. payRecordVisible: true,
  161. orderPaymentsId: record.id,
  162. tid: record.tid,
  163. projectType: record.projectType,
  164. })
  165. }}>
  166. {
  167. record.status === 0 ? '待审核' :
  168. record.status === 1 ? '待支付' :
  169. record.status === 2 ? '查看详情' : '查看详情'
  170. }
  171. </Button>
  172. <Button
  173. type="primary"
  174. style={{
  175. marginLeft: "10px",
  176. background: "orangered",
  177. border: "none"
  178. }}
  179. size="small"
  180. onClick={(e) => {
  181. e.stopPropagation();
  182. this.setState({
  183. paymentVisible: true,
  184. tid: record.tid,
  185. projectType: record.projectType,
  186. })
  187. }}>
  188. 付款记录
  189. </Button>
  190. </div>
  191. )
  192. }
  193. }
  194. ],
  195. dataSource: [],
  196. selectedRowKeys: [],
  197. pagination: {
  198. defaultCurrent: 1,
  199. defaultPageSize: 10,
  200. showQuickJumper: true,
  201. pageSize: 10,
  202. onChange: function (page) {
  203. this.loadData(page,this.state.searchInfor);
  204. }.bind(this),
  205. showTotal: function (total) {
  206. return "共" + total + "条数据";
  207. },
  208. },
  209. page: 1,
  210. selectInfor: {},
  211. visible: false,
  212. paymentVisible: false,
  213. tid: 0,
  214. projectType: 0,
  215. payRecordVisible: false,
  216. orderPaymentsId: 0,
  217. }
  218. }
  219. componentDidMount() {
  220. this.loadData()
  221. }
  222. loadData(pageNo,data={}) {
  223. this.setState({
  224. loading: true,
  225. });
  226. data.pageNo = pageNo || 1;
  227. data.pageSize = this.state.pagination.pageSize;
  228. data.status = 2; //驳回状态
  229. $.ajax({
  230. method: "get",
  231. dataType: "json",
  232. crossDomain: false,
  233. url: globalConfig.context + "/api/admin/company/selectPaymentList",
  234. data: data,
  235. success: function (data) {
  236. ShowModal(this);
  237. let theArr = [];
  238. if (data.error.length || data.data.list == "") {
  239. if (data.error && data.error.length) {
  240. message.warning(data.error[0].message);
  241. }
  242. } else {
  243. this.setState({
  244. page: data.data.pageNo
  245. });
  246. for (let i = 0; i < data.data.list.length; i++) {
  247. let thisdata = data.data.list[i];
  248. let obj = thisdata;
  249. obj.key = thisdata.id;
  250. theArr.push(obj);
  251. }
  252. this.state.pagination.total = data.data.totalCount;
  253. }
  254. if (data.data && data.data.list && !data.data.list.length) {
  255. this.state.pagination.total = 0;
  256. }
  257. this.setState({
  258. dataSource: theArr,
  259. pageNo: pageNo,
  260. pagination: this.state.pagination,
  261. });
  262. }.bind(this),
  263. }).always(
  264. function () {
  265. this.setState({
  266. loading: false,
  267. });
  268. }.bind(this)
  269. );
  270. }
  271. tableRowClick(record){
  272. this.setState({
  273. visible: true,
  274. selectInfor: record,
  275. })
  276. }
  277. render() {
  278. return (
  279. <div className="user-content">
  280. <div className="content-title">
  281. <span>付款驳回列表</span>
  282. </div>
  283. <div style={{paddingTop:'10px'}}>
  284. <FilterColumn
  285. {...this.props}
  286. onSearch={(data)=>{
  287. this.setState({
  288. searchInfor: data
  289. });
  290. this.loadData(1,data);
  291. }}
  292. onResetSearch={()=>{
  293. this.setState({
  294. searchInfor: {}
  295. });
  296. this.loadData();
  297. }}
  298. />
  299. </div>
  300. <div className="patent-table">
  301. <Spin spinning={this.state.loading}>
  302. <Table
  303. columns={this.state.columns}
  304. dataSource={this.state.dataSource}
  305. pagination={this.state.pagination}
  306. onRowClick={(record)=>{
  307. this.tableRowClick(record)
  308. }}
  309. scroll={{ x: "max-content", y: 0 }}
  310. bordered
  311. size="small"
  312. />
  313. </Spin>
  314. </div>
  315. {
  316. this.state.visible ?
  317. <DetailsModal
  318. tid={this.state.selectInfor.tid}
  319. orderNo={this.state.selectInfor.orderNo}
  320. projectType={this.state.selectInfor.projectType}
  321. projectStatus={this.state.selectInfor.projectStatus}
  322. taskName={this.state.selectInfor.pname}
  323. taskID={this.state.selectInfor.tid}
  324. visible={this.state.visible}
  325. refreshList={()=>{
  326. this.loadData(this.state.page,this.state.searchInfor);
  327. }}
  328. visitCancel={()=>{
  329. this.setState({
  330. visible: false
  331. })
  332. this.loadData(this.state.page,this.state.searchInfor);
  333. }}/> : <div/>
  334. }
  335. {this.state.paymentVisible ?
  336. <OrderPaymentModal
  337. tid={this.state.tid}
  338. visible={this.state.paymentVisible}
  339. projectType={this.state.projectType}
  340. onCancer={()=>{
  341. this.setState({
  342. paymentVisible: false,
  343. tid: 0,
  344. projectType: 0,
  345. });
  346. this.loadData(this.state.page,this.state.searchInfor);
  347. }}
  348. onSuccess={()=>{
  349. this.setState({
  350. paymentVisible: false,
  351. tid: 0,
  352. projectType: 0,
  353. });
  354. this.loadData(this.state.page,this.state.searchInfor);
  355. }}/> :
  356. <div/>
  357. }
  358. {this.state.payRecordVisible ? <PayRecord
  359. {...this.props}
  360. payId={this.state.orderPaymentsId}
  361. visible={this.state.payRecordVisible}
  362. tid={this.state.tid}
  363. projectType={this.state.projectType}
  364. changeVisible={()=>{
  365. this.loadData(this.state.page,this.state.searchInfor);
  366. this.setState({
  367. payRecordVisible: false,
  368. orderPaymentsId: 0,
  369. tid: 0,
  370. projectType: 0,
  371. })
  372. }}
  373. /> : <div/>}
  374. </div>
  375. );
  376. }
  377. }
  378. export default PayApplyReject