index.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603
  1. import React, { Component } from 'react'
  2. import {
  3. Form,
  4. Spin,
  5. Table,
  6. Modal,
  7. Col,
  8. Upload,
  9. Input,
  10. Button, message,
  11. Row,
  12. } from 'antd'
  13. import {getProjectStatus,} from '@/tools'
  14. import { getMaterialStatus, getUrgentStatus } from '@/tools'
  15. import ApplyPaymentModal from './applyPaymentModal';
  16. import PayRecord from './payRecord';
  17. import './index.less'
  18. import $ from "jquery";
  19. class CheckProject extends Component {
  20. constructor(props) {
  21. super(props)
  22. this.state = {
  23. value: '',
  24. loading: false,
  25. previewImage: '',
  26. previewVisible: false,
  27. payRecordVisible: false,
  28. orderPaymentsId: 0,
  29. previewPayVisible: false,
  30. previewPayInfor: {}, //点击申请付款的第三方信息或者支付节点信息
  31. nodeId: 0,
  32. // 专利
  33. ContactsListsNew: [
  34. {
  35. title: '供应商名称',
  36. dataIndex: 'companyName',
  37. key: 'companyName',
  38. render: (text, record, index) => {
  39. if (text) {
  40. return <span>{text}</span>
  41. }
  42. },
  43. },
  44. {
  45. title: '单价(万元)',
  46. dataIndex: 'unitPrice',
  47. key: 'unitPrice',
  48. render: (text, record) => {
  49. if (text) {
  50. return <span>{text}</span>
  51. }
  52. },
  53. },
  54. {
  55. title: '数量',
  56. dataIndex: 'quantity',
  57. key: 'quantity',
  58. render: (text, record) => {
  59. if (text) {
  60. return <span>{text}</span>
  61. }
  62. },
  63. },
  64. {
  65. title: '总价(万元)',
  66. dataIndex: 'totalAmount',
  67. key: 'totalAmount',
  68. render: (text, record) => {
  69. if (text) {
  70. return <span>{text}</span>
  71. }
  72. },
  73. },
  74. {
  75. title: '已付(万元)',
  76. dataIndex: 'partyAmount',
  77. key: 'partyAmount',
  78. render: (text, record) => {
  79. return <span>{text}</span>
  80. },
  81. },
  82. {
  83. title: '材料',
  84. dataIndex: 'material',
  85. key: 'material',
  86. render: (text, record) => {
  87. return getMaterialStatus(text)
  88. },
  89. },
  90. {
  91. title: '加急',
  92. dataIndex: 'urgent',
  93. key: 'urgent',
  94. render: (text, record) => {
  95. return getUrgentStatus(text)
  96. },
  97. },
  98. {
  99. title: '操作',
  100. dataIndex: 'action',
  101. key: 'action',
  102. render: (text, record) => {
  103. return (
  104. <div>
  105. {/*外包审核通过后,咨询师/咨询经理可申请付款*/}
  106. {/*存在支付节点时不显示第三方的申请付款*/}
  107. {/*0-待审核 ,1-审核通过,2-审核拒绝 true [NULL]*/}
  108. {
  109. <Button disabled={
  110. !(this.props.isPreviewPay && (this.props.status === 1 || parseInt(this.props.startType) === 1) && this.props.dataSource.length === 0)
  111. } type="primary" onClick={() => {
  112. this.setState({
  113. previewPayVisible: true,
  114. previewPayInfor: record,
  115. })
  116. }}>
  117. 申请付款
  118. </Button>
  119. }
  120. </div>
  121. )
  122. },
  123. },
  124. ],
  125. //付款节点表头
  126. PayNodeTableColunms: [
  127. {
  128. title: '供应商名称',
  129. dataIndex: 'companyName',
  130. key: 'companyName',
  131. render: (text, record, index) => {
  132. if (text) {
  133. return <span>{text}</span>
  134. }
  135. },
  136. },
  137. {
  138. title: '付款科目',
  139. dataIndex: 'dunType',
  140. key: 'dunType',
  141. render: (text, record) => {
  142. if (text) {
  143. return <span>{text}</span>
  144. }
  145. },
  146. },
  147. {
  148. title: '付款时间',
  149. dataIndex: 'partyTimes',
  150. key: 'partyTimes',
  151. render: (text, record) => {
  152. if (text) {
  153. return <span>{text}</span>
  154. }
  155. },
  156. },
  157. {
  158. title: '数量',
  159. dataIndex: 'quantity',
  160. key: 'quantity',
  161. render: (text, record) => {
  162. if (text) {
  163. return <span>{text}</span>
  164. }
  165. },
  166. },
  167. {
  168. title: '总价(万元)',
  169. dataIndex: 'totalAmount',
  170. key: 'totalAmount',
  171. render: (text, record) => {
  172. if (text) {
  173. return <span>***</span>
  174. }
  175. },
  176. },
  177. {
  178. title: '已付(万元)',
  179. dataIndex: 'partyAmount',
  180. key: 'partyAmount',
  181. render: (text, record) => {
  182. if (text) {
  183. return <span>{text}</span>
  184. }
  185. },
  186. },
  187. {
  188. title: '操作',
  189. dataIndex: 'action',
  190. key: 'action',
  191. render: (text, record) => {
  192. return (
  193. <div>
  194. {/*外包审核通过后,咨询师/咨询经理可申请付款*/}
  195. {/*0-待审核 ,1-审核通过,2-审核拒绝 true [NULL]*/}
  196. <Button
  197. disabled={
  198. !(this.props.isPreviewPay && (this.props.status === 1 || parseInt(this.props.startType) === 1))
  199. }
  200. type="primary"
  201. onClick={() => {
  202. console.log(record)
  203. this.setState({
  204. previewPayVisible: true,
  205. nodeId: record.id, //付款节点id
  206. previewPayInfor: record,
  207. })
  208. }}>
  209. 申请付款
  210. </Button>
  211. </div>
  212. )
  213. },
  214. },
  215. ],
  216. outsourceLogs: [],//审核日志
  217. selectOrderPayments: [],//支付列表
  218. }
  219. }
  220. componentDidMount() {
  221. if(this.props.tid){
  222. setTimeout(()=>{
  223. this.getSelectOutsourceLog();
  224. this.getSelectOrderPayment();
  225. },500)
  226. }
  227. }
  228. componentDidUpdate(prevProps, prevState, snapshot) {
  229. }
  230. onChange() {
  231. this.setState({
  232. value: e.target.value,
  233. })
  234. }
  235. tableRowClickOne(record) {}
  236. //点击付款节点详情
  237. payNodeTableRowClickOne(record) {}
  238. //外包日志列表
  239. getSelectOutsourceLog(){
  240. $.ajax({
  241. method: 'get',
  242. dataType: 'json',
  243. crossDomain: false,
  244. url: globalConfig.context + '/api/admin/outsourceOrg/selectOutsourceLog',
  245. data: {
  246. tid: this.props.tid,
  247. },
  248. success: function (data) {
  249. if (data.error.length) {
  250. if (data.error && data.error.length) {
  251. message.warning(data.error[0].message);
  252. }
  253. } else {
  254. this.setState({
  255. outsourceLogs: data.data
  256. })
  257. }
  258. }.bind(this),
  259. }).always(
  260. function () {
  261. }.bind(this)
  262. )
  263. }
  264. //支付列表
  265. getSelectOrderPayment() {
  266. $.ajax({
  267. method: 'get',
  268. dataType: 'json',
  269. crossDomain: false,
  270. url: globalConfig.context + '/api/admin/company/selectOrderPayment',
  271. data: {
  272. id: this.props.tid,
  273. },
  274. success: function (data) {
  275. if (data.error.length) {
  276. if (data.error && data.error.length) {
  277. message.warning(data.error[0].message);
  278. }
  279. } else {
  280. this.setState({
  281. selectOrderPayments: data.data
  282. })
  283. }
  284. }.bind(this),
  285. }).always(
  286. function () {
  287. }.bind(this)
  288. )
  289. }
  290. operationJudgmentName(id) {
  291. if(this.props.isAuditPayment){ //财务
  292. return id === 0 ? '查看详情' :
  293. id === 1 ? '修改申请' :
  294. id === 2 ? '查看详情' : '查看详情'
  295. }else{
  296. return id === 0 ? '待审核' :
  297. id === 1 ? '查看详情' :
  298. id === 2 ? '待支付' : '查看详情'
  299. }
  300. }
  301. render() {
  302. return (
  303. <div className="App">
  304. <div className="projectType">
  305. <div className="typeTitle">
  306. <div className="required">*</div>
  307. <div>类型:</div>
  308. </div>
  309. {
  310. parseInt(this.props.startType) === 0 ?
  311. <div>
  312. <div>供应商信息(外包派单,不走总部)</div>
  313. <div className="tipsText">提示高于总部价格,费用个人承担</div>
  314. </div> :
  315. <div>供应商信息(普通单)</div>
  316. }
  317. <div style={{marginLeft:'auto'}}>
  318. <span style={{color:'#58a3ff'}}>项目状态:</span>{getProjectStatus(this.props.projectStatus)}
  319. </div>
  320. </div>
  321. <div className="thirdParty">
  322. <div>
  323. <span className="title">
  324. 第三方信息
  325. </span>
  326. </div>
  327. <div
  328. className="clearfix"
  329. >
  330. <Spin spinning={this.state.loading}>
  331. <Form layout="horizontal">
  332. <Table
  333. pagination={false}
  334. columns={this.state.ContactsListsNew}
  335. dataSource={this.props.thirdInfoList}
  336. onRowClick={this.tableRowClickOne}
  337. scroll={{ x: 'max-content', y: 0 }}
  338. bordered
  339. size="small"
  340. />
  341. <Col span={24} offset={9} style={{ marginTop: '15px' }}/>
  342. </Form>
  343. </Spin>
  344. </div>
  345. </div>
  346. <div className="thirdParty">
  347. <div>
  348. <span className="title">
  349. 付款节点
  350. </span>
  351. </div>
  352. <div
  353. className="clearfix"
  354. >
  355. <Spin spinning={this.state.loading}>
  356. <Form layout="horizontal">
  357. <Table
  358. pagination={false}
  359. columns={this.state.PayNodeTableColunms}
  360. dataSource={this.props.dataSource}
  361. onRowClick={this.payNodeTableRowClickOne}
  362. scroll={{ x: 'max-content', y: 0 }}
  363. bordered
  364. size="small"
  365. />
  366. <Col span={24} offset={9} style={{ marginTop: '15px' }}/>
  367. </Form>
  368. </Spin>
  369. </div>
  370. </div>
  371. <div
  372. style={{
  373. borderTop: '1px #000000 dashed',
  374. padding: '20px 20px 0px 20px',
  375. }}
  376. >
  377. <div>
  378. <div className="title">备注</div>
  379. <Input
  380. type="textarea"
  381. placeholder="请输入备注"
  382. rows={4}
  383. value={this.props.outsourceRemarks}
  384. />
  385. </div>
  386. <div style={{paddingTop:'20px'}}>
  387. <div className="title">合同/协议扫描件</div>
  388. <Upload
  389. className="demandDetailShow-upload"
  390. listType="picture-card"
  391. fileList={this.props.fileList}
  392. onPreview={(file) => {
  393. this.setState({
  394. previewImage: file.url || file.thumbUrl,
  395. previewVisible: true,
  396. })
  397. }}
  398. />
  399. <Modal
  400. maskClosable={false}
  401. footer={null}
  402. visible={this.state.previewVisible}
  403. onCancel={() => {
  404. this.setState({ previewVisible: false })
  405. }}
  406. >
  407. <img
  408. alt=""
  409. style={{ width: '100%' }}
  410. src={this.state.previewImage || ''}
  411. />
  412. </Modal>
  413. </div>
  414. </div>
  415. {parseInt(this.props.startType) !== 1 ? <div className="outsourceLogConent">
  416. <div className="title">外包状态</div>
  417. <div className="outsourceLogList">
  418. {
  419. this.state.outsourceLogs.map((value,index)=>(
  420. <div key={index} className="outsourceLogItem">
  421. <Row gutter={16}>
  422. <Col className="gutter-row" span={6}>
  423. <div className="gutter-box">
  424. {value.aname}
  425. </div>
  426. </Col>
  427. <Col className="gutter-row" span={6}>
  428. <div className="gutter-box">
  429. {
  430. value.status === 0 ? '发起外包审核' :
  431. value.status === 1 ? '通过' : '驳回'
  432. }
  433. </div>
  434. </Col>
  435. <Col className="gutter-row" span={6}>
  436. <div className="gutter-box" style={{
  437. wordBreak: 'break-all'
  438. }}>
  439. {value.remarks}
  440. </div>
  441. </Col>
  442. <Col className="gutter-row" span={6}>
  443. <div className="gutter-box">
  444. {value.createTimes}
  445. </div>
  446. </Col>
  447. </Row>
  448. </div>
  449. ))
  450. }
  451. </div>
  452. </div> : <div/>}
  453. <div className="outsourceLogConent">
  454. <div className="title">支付记录</div>
  455. <div className="outsourceLogItem" style={{
  456. fontWeight: 'bold',
  457. }}>
  458. <Row gutter={16}>
  459. <Col className="gutter-row" span={4}>
  460. <div className="gutter-box">
  461. 编号
  462. </div>
  463. </Col>
  464. {/*<Col className="gutter-row" span={5}>*/}
  465. {/* <div className="gutter-box">*/}
  466. {/* 订单编号*/}
  467. {/* </div>*/}
  468. {/*</Col>*/}
  469. <Col className="gutter-row" span={5}>
  470. <div className="gutter-box">
  471. 支付类型
  472. </div>
  473. </Col>
  474. <Col className="gutter-row" span={5}>
  475. <div className="gutter-box">
  476. 申请支付金额(万元)
  477. </div>
  478. </Col>
  479. <Col className="gutter-row" span={6}>
  480. <div className="gutter-box">
  481. 申请时间
  482. </div>
  483. </Col>
  484. <Col className="gutter-row" span={4}>
  485. <div className="gutter-box">
  486. 状态
  487. </div>
  488. </Col>
  489. </Row>
  490. </div>
  491. <div className="outsourceLogList" style={{paddingTop:'20px'}}>
  492. {
  493. this.state.selectOrderPayments.map((value,index)=>(
  494. <div key={index} className="orderPayItem">
  495. <Row gutter={16}>
  496. <Col className="gutter-row" span={4}>
  497. <div className="gutter-box">
  498. {index+1 < 10 ? '0'+(index+1) : index+1}
  499. </div>
  500. </Col>
  501. {/*<Col className="gutter-row" span={5}>*/}
  502. {/* <div className="gutter-box">*/}
  503. {/* 订单编号*/}
  504. {/* </div>*/}
  505. {/*</Col>*/}
  506. <Col className="gutter-row" span={5}>
  507. <div className="gutter-box">
  508. {value.paymentType === 0 ? '第三方' : '官费'}
  509. </div>
  510. </Col>
  511. <Col className="gutter-row" span={5}>
  512. <div className="gutter-box">
  513. {value.applicationAmount}
  514. </div>
  515. </Col>
  516. <Col className="gutter-row" span={6}>
  517. <div className="gutter-box">
  518. {value.createTimes}
  519. </div>
  520. </Col>
  521. <Col className="operationItem" span={4}>
  522. <div className="operation">
  523. {
  524. value.status === 0 ? '审核中' :
  525. value.status === 1 ? '已驳回' :
  526. value.status === 2 ? '待支付' : '支付完成'
  527. }
  528. </div>
  529. <Button type="primary" size='small' onClick={()=>{
  530. this.setState({
  531. payRecordVisible: true,
  532. orderPaymentsId: value.id,
  533. })
  534. }}>
  535. {this.operationJudgmentName(value.status)}
  536. </Button>
  537. </Col>
  538. </Row>
  539. </div>
  540. ))
  541. }
  542. </div>
  543. </div>
  544. {/*
  545. 申请付款
  546. tid:项目id
  547. nodeId: 付款节点id
  548. previewPayInfor: 项目或者节点信息
  549. */}
  550. <ApplyPaymentModal
  551. {...this.props}
  552. tid={this.props.tid}
  553. nodeId={this.state.nodeId}
  554. previewPayInfor={this.state.previewPayInfor}
  555. visible={this.state.previewPayVisible}
  556. onRefresh={()=>{
  557. this.props.onRefresh();
  558. this.getSelectOrderPayment();
  559. }}
  560. changeVisible={()=>{
  561. this.setState({
  562. previewPayVisible: false,
  563. nodeId: 0, //付款节点id
  564. previewPayInfor: {},
  565. })
  566. }}/>
  567. {/* 支付记录操作弹出 */}
  568. {this.state.payRecordVisible ? <PayRecord
  569. {...this.props}
  570. tid={this.props.tid}
  571. payId={this.state.orderPaymentsId}
  572. visible={this.state.payRecordVisible}
  573. isAuditPayment={this.props.isAuditPayment}
  574. onRefresh={()=>{
  575. this.props.onRefresh();
  576. this.getSelectOrderPayment();
  577. }}
  578. changeVisible={()=>{
  579. this.setState({
  580. payRecordVisible: false,
  581. })
  582. }}
  583. /> : <div/>}
  584. </div>
  585. )
  586. }
  587. }
  588. export default CheckProject