index.jsx 17 KB

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