index.jsx 14 KB

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