checkProject.jsx 14 KB

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