index.jsx 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607
  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. //0审核 1待支付 2驳回 3已支付 4取消
  291. operationJudgmentName(id) {
  292. if(this.props.isAuditPayment){ //财务
  293. return id === 0 ? '待审核' :
  294. id === 1 ? '待支付' :
  295. id === 2 ? '查看详情' : '查看详情'
  296. }else{
  297. return id === 0 ? '待审核' :
  298. id === 1 ? '待支付' :
  299. id === 2 ? '查看详情' : '查看详情'
  300. }
  301. }
  302. render() {
  303. return (
  304. <div className="App">
  305. <div className="projectType">
  306. <div className="typeTitle">
  307. <div className="required">*</div>
  308. <div>类型:</div>
  309. </div>
  310. {
  311. parseInt(this.props.startType) === 0 ?
  312. <div>
  313. <div>供应商信息(外包派单,不走总部)</div>
  314. <div className="tipsText">提示高于总部价格,费用个人承担</div>
  315. </div> :
  316. <div>供应商信息(普通单)</div>
  317. }
  318. <div style={{marginLeft:'auto'}}>
  319. <span style={{color:'#58a3ff'}}>项目状态:</span>{getProjectStatus(this.props.projectStatus)}
  320. </div>
  321. </div>
  322. <div className="thirdParty">
  323. <div>
  324. <span className="title">
  325. 第三方信息
  326. </span>
  327. </div>
  328. <div
  329. className="clearfix"
  330. >
  331. <Spin spinning={this.state.loading}>
  332. <Form layout="horizontal">
  333. <Table
  334. pagination={false}
  335. columns={this.state.ContactsListsNew}
  336. dataSource={this.props.thirdInfoList}
  337. onRowClick={this.tableRowClickOne}
  338. scroll={{ x: 'max-content', y: 0 }}
  339. bordered
  340. size="small"
  341. />
  342. <Col span={24} offset={9} style={{ marginTop: '15px' }}/>
  343. </Form>
  344. </Spin>
  345. </div>
  346. </div>
  347. <div className="thirdParty">
  348. <div>
  349. <span className="title">
  350. 付款节点
  351. </span>
  352. </div>
  353. <div
  354. className="clearfix"
  355. >
  356. <Spin spinning={this.state.loading}>
  357. <Form layout="horizontal">
  358. <Table
  359. pagination={false}
  360. columns={this.state.PayNodeTableColunms}
  361. dataSource={this.props.dataSource}
  362. onRowClick={this.payNodeTableRowClickOne}
  363. scroll={{ x: 'max-content', y: 0 }}
  364. bordered
  365. size="small"
  366. />
  367. <Col span={24} offset={9} style={{ marginTop: '15px' }}/>
  368. </Form>
  369. </Spin>
  370. </div>
  371. </div>
  372. <div
  373. style={{
  374. borderTop: '1px #000000 dashed',
  375. padding: '20px 20px 0px 20px',
  376. }}
  377. >
  378. <div>
  379. <div className="title">备注</div>
  380. <Input
  381. type="textarea"
  382. placeholder="请输入备注"
  383. rows={4}
  384. value={this.props.outsourceRemarks}
  385. />
  386. </div>
  387. <div style={{paddingTop:'20px'}}>
  388. <div className="title">合同/协议扫描件</div>
  389. <Upload
  390. className="demandDetailShow-upload"
  391. listType="picture-card"
  392. fileList={this.props.fileList}
  393. onPreview={(file) => {
  394. this.setState({
  395. previewImage: file.url || file.thumbUrl,
  396. previewVisible: true,
  397. })
  398. }}
  399. />
  400. <Modal
  401. maskClosable={false}
  402. footer={null}
  403. visible={this.state.previewVisible}
  404. onCancel={() => {
  405. this.setState({ previewVisible: false })
  406. }}
  407. >
  408. <img
  409. alt=""
  410. style={{ width: '100%' }}
  411. src={this.state.previewImage || ''}
  412. />
  413. </Modal>
  414. </div>
  415. </div>
  416. {parseInt(this.props.startType) !== 1 ? <div className="outsourceLogConent">
  417. <div className="title">外包状态</div>
  418. <div className="outsourceLogList">
  419. {
  420. this.state.outsourceLogs.map((value,index)=>(
  421. <div key={index} className="outsourceLogItem">
  422. <Row gutter={16}>
  423. <Col className="gutter-row" span={6}>
  424. <div className="gutter-box">
  425. {value.aname}
  426. </div>
  427. </Col>
  428. <Col className="gutter-row" span={6}>
  429. <div className="gutter-box">
  430. {
  431. value.status === 0 ? '发起外包审核' :
  432. value.status === 1 ? '通过' : '驳回'
  433. }
  434. </div>
  435. </Col>
  436. <Col className="gutter-row" span={6}>
  437. <div className="gutter-box" style={{
  438. wordBreak: 'break-all'
  439. }}>
  440. {value.remarks}
  441. </div>
  442. </Col>
  443. <Col className="gutter-row" span={6}>
  444. <div className="gutter-box">
  445. {value.createTimes}
  446. </div>
  447. </Col>
  448. </Row>
  449. </div>
  450. ))
  451. }
  452. </div>
  453. </div> : <div/>}
  454. <div className="outsourceLogConent">
  455. <div className="title">支付记录</div>
  456. <div className="outsourceLogItem" style={{
  457. fontWeight: 'bold',
  458. }}>
  459. <Row gutter={16}>
  460. <Col className="gutter-row" span={4}>
  461. <div className="gutter-box">
  462. 编号
  463. </div>
  464. </Col>
  465. {/*<Col className="gutter-row" span={5}>*/}
  466. {/* <div className="gutter-box">*/}
  467. {/* 订单编号*/}
  468. {/* </div>*/}
  469. {/*</Col>*/}
  470. <Col className="gutter-row" span={5}>
  471. <div className="gutter-box">
  472. 支付类型
  473. </div>
  474. </Col>
  475. <Col className="gutter-row" span={5}>
  476. <div className="gutter-box">
  477. 申请支付金额(万元)
  478. </div>
  479. </Col>
  480. <Col className="gutter-row" span={5}>
  481. <div className="gutter-box">
  482. 申请时间
  483. </div>
  484. </Col>
  485. <Col className="gutter-row" span={5}>
  486. <div className="gutter-box">
  487. 状态
  488. </div>
  489. </Col>
  490. </Row>
  491. </div>
  492. <div className="outsourceLogList" style={{paddingTop:'20px'}}>
  493. {
  494. this.state.selectOrderPayments.map((value,index)=>(
  495. <div key={index} className="orderPayItem">
  496. <Row gutter={16}>
  497. <Col className="gutter-row" span={4}>
  498. <div className="gutter-box">
  499. {index+1 < 10 ? '0'+(index+1) : index+1}
  500. </div>
  501. </Col>
  502. {/*<Col className="gutter-row" span={5}>*/}
  503. {/* <div className="gutter-box">*/}
  504. {/* 订单编号*/}
  505. {/* </div>*/}
  506. {/*</Col>*/}
  507. <Col className="gutter-row" span={5}>
  508. <div className="gutter-box">
  509. {value.paymentType === 0 ? '第三方' : '官费'}
  510. </div>
  511. </Col>
  512. <Col className="gutter-row" span={5}>
  513. <div className="gutter-box">
  514. {value.applicationAmount}
  515. </div>
  516. </Col>
  517. <Col className="gutter-row" span={5}>
  518. <div className="gutter-box">
  519. {value.createTimes}
  520. </div>
  521. </Col>
  522. <Col className="operationItem" span={5}>
  523. <div className="operation">
  524. {
  525. value.status === 0 ? '审核中' :
  526. value.status === 1 ? '审核通过' :
  527. value.status === 2 ? '已驳回' :
  528. value.status === 3 ? '支付完成' : '已取消'
  529. }
  530. </div>
  531. <Button type="primary" size='small' onClick={()=>{
  532. this.setState({
  533. payRecordVisible: true,
  534. orderPaymentsId: value.id,
  535. })
  536. }}>
  537. {this.operationJudgmentName(value.status)}
  538. </Button>
  539. </Col>
  540. </Row>
  541. </div>
  542. ))
  543. }
  544. </div>
  545. </div>
  546. {/*
  547. 申请付款
  548. tid:项目id
  549. nodeId: 付款节点id
  550. previewPayInfor: 项目或者节点信息
  551. */}
  552. <ApplyPaymentModal
  553. {...this.props}
  554. tid={this.props.tid}
  555. nodeId={this.state.nodeId}
  556. previewPayInfor={this.state.previewPayInfor}
  557. visible={this.state.previewPayVisible}
  558. onRefresh={()=>{
  559. this.props.onRefresh();
  560. this.getSelectOrderPayment();
  561. }}
  562. changeVisible={()=>{
  563. this.setState({
  564. previewPayVisible: false,
  565. nodeId: 0, //付款节点id
  566. previewPayInfor: {},
  567. })
  568. }}/>
  569. {/* 支付记录操作弹出 */}
  570. {this.state.payRecordVisible ? <PayRecord
  571. {...this.props}
  572. tid={this.props.tid}
  573. payId={this.state.orderPaymentsId}
  574. visible={this.state.payRecordVisible}
  575. isAuditPayment={this.props.isAuditPayment}
  576. onRefresh={()=>{
  577. this.props.onRefresh();
  578. this.getSelectOrderPayment();
  579. }}
  580. changeVisible={()=>{
  581. this.getSelectOrderPayment();
  582. this.setState({
  583. payRecordVisible: false,
  584. })
  585. }}
  586. /> : <div/>}
  587. </div>
  588. )
  589. }
  590. }
  591. export default CheckProject