index.jsx 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652
  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, Popconfirm,
  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: (ext, record, index) => {
  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. <Popconfirm
  121. title="是否删除?"
  122. onConfirm={() => {
  123. this.confirmDeletNew(record)
  124. }}
  125. okText="删除"
  126. cancelText="不删除"
  127. >
  128. <Button
  129. onClick={(e) => {
  130. e.stopPropagation()
  131. }}
  132. style={{
  133. marginLeft: '10px',
  134. color: '#ffffff',
  135. background: '#f00',
  136. border: 'none',
  137. }}
  138. >
  139. 删除
  140. </Button>
  141. </Popconfirm>
  142. </div>
  143. )
  144. },
  145. },
  146. ],
  147. //付款节点表头
  148. PayNodeTableColunms: [
  149. {
  150. title: '供应商名称',
  151. dataIndex: 'companyName',
  152. key: 'companyName',
  153. render: (text, record, index) => {
  154. if (text) {
  155. return <span>{text}</span>
  156. }
  157. },
  158. },
  159. {
  160. title: '付款科目',
  161. dataIndex: 'dunType',
  162. key: 'dunType',
  163. render: (text, record) => {
  164. if (text) {
  165. return <span>{text}</span>
  166. }
  167. },
  168. },
  169. {
  170. title: '付款时间',
  171. dataIndex: 'partyTimes',
  172. key: 'partyTimes',
  173. render: (text, record) => {
  174. if (text) {
  175. return <span>{text}</span>
  176. }
  177. },
  178. },
  179. {
  180. title: '数量',
  181. dataIndex: 'quantity',
  182. key: 'quantity',
  183. render: (text, record) => {
  184. if (text) {
  185. return <span>{text}</span>
  186. }
  187. },
  188. },
  189. {
  190. title: '总价(万元)',
  191. dataIndex: 'totalAmount',
  192. key: 'totalAmount',
  193. render: (text, record) => {
  194. if (text) {
  195. return <span>***</span>
  196. }
  197. },
  198. },
  199. {
  200. title: '已付(万元)',
  201. dataIndex: 'partyAmount',
  202. key: 'partyAmount',
  203. render: (text, record) => {
  204. if (text) {
  205. return <span>{text}</span>
  206. }
  207. },
  208. },
  209. {
  210. title: '操作',
  211. dataIndex: 'action',
  212. key: 'action',
  213. render: (text, record) => {
  214. return (
  215. <div>
  216. {/*外包审核通过后,咨询师/咨询经理可申请付款*/}
  217. {/*0-待审核 ,1-审核通过,2-审核拒绝 true [NULL]*/}
  218. <Button
  219. disabled={
  220. !(this.props.isPreviewPay && (this.props.status === 1 || parseInt(this.props.startType) === 1))
  221. }
  222. type="primary"
  223. onClick={() => {
  224. console.log(record)
  225. this.setState({
  226. previewPayVisible: true,
  227. nodeId: record.id, //付款节点id
  228. previewPayInfor: record,
  229. })
  230. }}>
  231. 申请付款
  232. </Button>
  233. </div>
  234. )
  235. },
  236. },
  237. ],
  238. outsourceLogs: [],//审核日志
  239. selectOrderPayments: [],//支付列表
  240. }
  241. }
  242. componentDidMount() {
  243. if(this.props.tid){
  244. setTimeout(()=>{
  245. this.getSelectOutsourceLog();
  246. this.getSelectOrderPayment();
  247. },500)
  248. }
  249. }
  250. onChange() {
  251. this.setState({
  252. value: e.target.value,
  253. })
  254. }
  255. tableRowClickOne(record) {}
  256. //点击付款节点详情
  257. payNodeTableRowClickOne(record) {}
  258. //外包日志列表
  259. getSelectOutsourceLog(){
  260. $.ajax({
  261. method: 'get',
  262. dataType: 'json',
  263. crossDomain: false,
  264. url: globalConfig.context + '/api/admin/outsourceOrg/selectOutsourceLog',
  265. data: {
  266. tid: this.props.tid,
  267. },
  268. success: function (data) {
  269. if (data.error.length) {
  270. if (data.error && data.error.length) {
  271. message.warning(data.error[0].message);
  272. }
  273. } else {
  274. this.setState({
  275. outsourceLogs: data.data
  276. })
  277. }
  278. }.bind(this),
  279. }).always(
  280. function () {
  281. }.bind(this)
  282. )
  283. }
  284. //支付列表
  285. getSelectOrderPayment() {
  286. $.ajax({
  287. method: 'get',
  288. dataType: 'json',
  289. crossDomain: false,
  290. url: globalConfig.context + '/api/admin/company/selectOrderPayment',
  291. data: {
  292. id: this.props.tid,
  293. },
  294. success: function (data) {
  295. if (data.error.length) {
  296. if (data.error && data.error.length) {
  297. message.warning(data.error[0].message);
  298. }
  299. } else {
  300. this.setState({
  301. selectOrderPayments: data.data
  302. })
  303. }
  304. }.bind(this),
  305. }).always(
  306. function () {
  307. }.bind(this)
  308. )
  309. }
  310. //0审核 1待支付 2驳回 3已支付 4取消
  311. operationJudgmentName(id) {
  312. if(this.props.isAuditPayment){ //财务
  313. return id === 0 ? '待审核' :
  314. id === 1 ? '待支付' :
  315. id === 2 ? '查看详情' : '查看详情'
  316. }else{
  317. return id === 0 ? '待审核' :
  318. id === 1 ? '待支付' :
  319. id === 2 ? '查看详情' : '查看详情'
  320. }
  321. }
  322. // 删除供应商信息
  323. confirmDeletNew(index) {
  324. this.setState({
  325. loading: true,
  326. ThirdListVisible: false,
  327. })
  328. $.ajax({
  329. url: globalConfig.context + '/api/admin/company/deleteCompany',
  330. method: 'post',
  331. data: {
  332. id: index.id,
  333. },
  334. }).done(
  335. function (data) {
  336. this.setState({
  337. loading: false,
  338. })
  339. if (!data.error.length) {
  340. message.success('删除成功!')
  341. this.props.onRefresh()
  342. } else {
  343. message.warning(data.error[0].message)
  344. }
  345. }.bind(this)
  346. )
  347. }
  348. render() {
  349. return (
  350. <div className="App">
  351. <div className="projectType">
  352. <div className="typeTitle">
  353. <div className="required">*</div>
  354. <div>类型:</div>
  355. </div>
  356. {
  357. parseInt(this.props.startType) === 0 ?
  358. <div>
  359. <div>外包(外包派单,不走总部)</div>
  360. <div className="tipsText">提示高于总部价格,费用个人承担</div>
  361. </div> :
  362. <div>供应商信息(普通单)</div>
  363. }
  364. <div style={{marginLeft:'auto'}}>
  365. <span style={{color:'#58a3ff'}}>项目状态:</span>{getProjectStatus(this.props.projectStatus)}
  366. </div>
  367. </div>
  368. <div className="thirdParty">
  369. <div>
  370. <span className="title">
  371. 第三方信息
  372. </span>
  373. </div>
  374. <div
  375. className="clearfix"
  376. >
  377. <Spin spinning={this.state.loading}>
  378. <Form layout="horizontal">
  379. <Table
  380. pagination={false}
  381. columns={this.state.ContactsListsNew}
  382. dataSource={this.props.thirdInfoList}
  383. onRowClick={this.tableRowClickOne}
  384. scroll={{ x: 'max-content', y: 0 }}
  385. bordered
  386. size="small"
  387. />
  388. <Col span={24} offset={9} style={{ marginTop: '15px' }}/>
  389. </Form>
  390. </Spin>
  391. </div>
  392. </div>
  393. <div className="thirdParty">
  394. <div>
  395. <span className="title">
  396. 付款节点
  397. </span>
  398. </div>
  399. <div
  400. className="clearfix"
  401. >
  402. <Spin spinning={this.state.loading}>
  403. <Form layout="horizontal">
  404. <Table
  405. pagination={false}
  406. columns={this.state.PayNodeTableColunms}
  407. dataSource={this.props.dataSource}
  408. onRowClick={this.payNodeTableRowClickOne}
  409. scroll={{ x: 'max-content', y: 0 }}
  410. bordered
  411. size="small"
  412. />
  413. <Col span={24} offset={9} style={{ marginTop: '15px' }}/>
  414. </Form>
  415. </Spin>
  416. </div>
  417. </div>
  418. <div
  419. style={{
  420. borderTop: '1px #000000 dashed',
  421. padding: '20px 20px 0px 20px',
  422. }}
  423. >
  424. <div>
  425. <div className="title">备注</div>
  426. <Input
  427. type="textarea"
  428. placeholder="请输入备注"
  429. rows={4}
  430. value={this.props.outsourceRemarks}
  431. />
  432. </div>
  433. <div style={{paddingTop:'20px'}}>
  434. <div className="title">合同/协议扫描件</div>
  435. <Upload
  436. className="demandDetailShow-upload"
  437. listType="picture-card"
  438. fileList={this.props.fileList}
  439. onPreview={(file) => {
  440. this.setState({
  441. previewImage: file.url || file.thumbUrl,
  442. previewVisible: true,
  443. })
  444. }}
  445. />
  446. <Modal
  447. maskClosable={false}
  448. footer={null}
  449. visible={this.state.previewVisible}
  450. onCancel={() => {
  451. this.setState({ previewVisible: false })
  452. }}
  453. >
  454. <img
  455. alt=""
  456. style={{ width: '100%' }}
  457. src={this.state.previewImage || ''}
  458. />
  459. </Modal>
  460. </div>
  461. </div>
  462. {parseInt(this.props.startType) !== 1 ? <div className="outsourceLogConent">
  463. <div className="title">外包状态</div>
  464. <div className="outsourceLogList">
  465. {
  466. this.state.outsourceLogs.map((value,index)=>(
  467. <div key={index} className="outsourceLogItem">
  468. <Row gutter={16}>
  469. <Col className="gutter-row" span={6}>
  470. <div className="gutter-box">
  471. {value.aname}
  472. </div>
  473. </Col>
  474. <Col className="gutter-row" span={6}>
  475. <div className="gutter-box">
  476. {
  477. value.status === 0 ? '发起外包审核' :
  478. value.status === 1 ? '通过' : '驳回'
  479. }
  480. </div>
  481. </Col>
  482. <Col className="gutter-row" span={6}>
  483. <div className="gutter-box" style={{
  484. wordBreak: 'break-all'
  485. }}>
  486. {value.remarks}
  487. </div>
  488. </Col>
  489. <Col className="gutter-row" span={6}>
  490. <div className="gutter-box">
  491. {value.createTimes}
  492. </div>
  493. </Col>
  494. </Row>
  495. </div>
  496. ))
  497. }
  498. </div>
  499. </div> : <div/>}
  500. <div className="outsourceLogConent">
  501. <div className="title">支付记录</div>
  502. <div className="outsourceLogItem" style={{
  503. fontWeight: 'bold',
  504. }}>
  505. <Row gutter={16}>
  506. <Col className="gutter-row" span={4}>
  507. <div className="gutter-box">
  508. 编号
  509. </div>
  510. </Col>
  511. {/*<Col className="gutter-row" span={5}>*/}
  512. {/* <div className="gutter-box">*/}
  513. {/* 订单编号*/}
  514. {/* </div>*/}
  515. {/*</Col>*/}
  516. <Col className="gutter-row" span={5}>
  517. <div className="gutter-box">
  518. 支付类型
  519. </div>
  520. </Col>
  521. <Col className="gutter-row" span={5}>
  522. <div className="gutter-box">
  523. 申请支付金额(万元)
  524. </div>
  525. </Col>
  526. <Col className="gutter-row" span={5}>
  527. <div className="gutter-box">
  528. 申请时间
  529. </div>
  530. </Col>
  531. <Col className="gutter-row" span={5}>
  532. <div className="gutter-box">
  533. 状态
  534. </div>
  535. </Col>
  536. </Row>
  537. </div>
  538. <div className="outsourceLogList" style={{paddingTop:'20px'}}>
  539. {
  540. this.state.selectOrderPayments.map((value,index)=>(
  541. <div key={index} className="orderPayItem">
  542. <Row gutter={16}>
  543. <Col className="gutter-row" span={4}>
  544. <div className="gutter-box">
  545. {index+1 < 10 ? '0'+(index+1) : index+1}
  546. </div>
  547. </Col>
  548. {/*<Col className="gutter-row" span={5}>*/}
  549. {/* <div className="gutter-box">*/}
  550. {/* 订单编号*/}
  551. {/* </div>*/}
  552. {/*</Col>*/}
  553. <Col className="gutter-row" span={5}>
  554. <div className="gutter-box">
  555. {value.paymentType === 0 ? '第三方' : '官费'}
  556. </div>
  557. </Col>
  558. <Col className="gutter-row" span={5}>
  559. <div className="gutter-box">
  560. {value.applicationAmount}
  561. </div>
  562. </Col>
  563. <Col className="gutter-row" span={5}>
  564. <div className="gutter-box">
  565. {value.createTimes}
  566. </div>
  567. </Col>
  568. <Col className="operationItem" span={5}>
  569. <div className="operation">
  570. {
  571. value.status === 0 ? '审核中' :
  572. value.status === 1 ? '审核通过' :
  573. value.status === 2 ? '已驳回' :
  574. value.status === 3 ? '支付完成' : '已取消'
  575. }
  576. </div>
  577. <Button type="primary" size='small' onClick={()=>{
  578. this.setState({
  579. payRecordVisible: true,
  580. orderPaymentsId: value.id,
  581. })
  582. }}>
  583. {this.operationJudgmentName(value.status)}
  584. </Button>
  585. </Col>
  586. </Row>
  587. </div>
  588. ))
  589. }
  590. </div>
  591. </div>
  592. {/*
  593. 申请付款
  594. tid:项目id
  595. nodeId: 付款节点id
  596. previewPayInfor: 项目或者节点信息
  597. */}
  598. <ApplyPaymentModal
  599. {...this.props}
  600. tid={this.props.tid}
  601. nodeId={this.state.nodeId}
  602. previewPayInfor={this.state.previewPayInfor}
  603. visible={this.state.previewPayVisible}
  604. onRefresh={()=>{
  605. this.props.onRefresh();
  606. this.getSelectOrderPayment();
  607. }}
  608. changeVisible={()=>{
  609. this.setState({
  610. previewPayVisible: false,
  611. nodeId: 0, //付款节点id
  612. previewPayInfor: {},
  613. })
  614. }}/>
  615. {/* 支付记录操作弹出 */}
  616. {this.state.payRecordVisible ? <PayRecord
  617. {...this.props}
  618. tid={this.props.tid}
  619. payId={this.state.orderPaymentsId}
  620. visible={this.state.payRecordVisible}
  621. isAuditPayment={this.props.isAuditPayment}
  622. onRefresh={()=>{
  623. this.props.onRefresh();
  624. this.getSelectOrderPayment();
  625. }}
  626. changeVisible={()=>{
  627. this.getSelectOrderPayment();
  628. this.setState({
  629. payRecordVisible: false,
  630. })
  631. }}
  632. /> : <div/>}
  633. </div>
  634. )
  635. }
  636. }
  637. export default CheckProject