checkProject.jsx 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
  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. style={{
  315. borderTop: '1px #000000 dashed',
  316. paddingTop: '20px',
  317. }}
  318. >
  319. <Form.Item
  320. labelCol={{ span: 2 }}
  321. wrapperCol={{ span: 8 }}
  322. labelAlign="left"
  323. label="备注"
  324. >
  325. <Input
  326. type="textarea"
  327. placeholder="请输入备注"
  328. rows={4}
  329. value={this.props.outsourceRemarks}
  330. />
  331. </Form.Item>
  332. </div>
  333. <div className="clearfix">
  334. <FormItem
  335. labelCol={{ span: 3 }}
  336. wrapperCol={{ span: 18 }}
  337. label="合同/协议扫描件"
  338. labelAlign='left'
  339. >
  340. <Upload
  341. className="demandDetailShow-upload"
  342. listType="picture-card"
  343. fileList={this.props.fileList}
  344. onPreview={(file) => {
  345. this.setState({
  346. previewImage: file.url || file.thumbUrl,
  347. previewVisible: true,
  348. })
  349. }}
  350. />
  351. <Modal
  352. maskClosable={false}
  353. footer={null}
  354. visible={this.state.previewVisible}
  355. onCancel={() => {
  356. this.setState({ previewVisible: false })
  357. }}
  358. >
  359. <img
  360. alt=""
  361. style={{ width: '100%' }}
  362. src={this.state.previewImage || ''}
  363. />
  364. </Modal>
  365. </FormItem>
  366. </div>
  367. {/* 申请付款 */}
  368. <Modal
  369. maskClosable={false}
  370. footer={null}
  371. visible={this.state.previewPayVisible}
  372. onCancel={() => {
  373. this.setState({ previewPayVisible: false })
  374. }}
  375. >
  376. <div>
  377. <div>支付供应商费用</div>
  378. <Form
  379. {...layout}
  380. name="basic"
  381. initialValues={{
  382. remember: true,
  383. }}
  384. onSubmit={this.handleSubmit}
  385. >
  386. <Form.Item
  387. style={{
  388. display:'flex'
  389. }}
  390. label="付款单位/个人:"
  391. name="company"
  392. rules={[
  393. {
  394. required: true,
  395. message: '请输入付款单位/个人!',
  396. },
  397. ]}
  398. >
  399. <Input style={{ width: '200px' }} placeholder="请输入付款单位/个人"/>
  400. </Form.Item>
  401. <Form.Item
  402. style={{
  403. display:'flex'
  404. }}
  405. label="单价(万元):"
  406. name="unitPrice"
  407. rules={[
  408. {
  409. required: true,
  410. message: '请输入单价!',
  411. },
  412. ]}
  413. >
  414. <Input style={{ width: '200px' }} placeholder="请输入单价" type={'number'}/>
  415. </Form.Item>
  416. <Form.Item
  417. style={{
  418. display:'flex'
  419. }}
  420. label="数量:"
  421. name="num"
  422. rules={[
  423. {
  424. required: true,
  425. message: '请输入數量!',
  426. },
  427. ]}
  428. >
  429. <Input style={{ width: '200px' }} placeholder="请输入數量" type={'number'}/>
  430. </Form.Item>
  431. <Form.Item
  432. style={{
  433. display:'flex'
  434. }}
  435. label="总价(万元):"
  436. name="totalPrice"
  437. rules={[
  438. {
  439. required: true,
  440. message: '请输入总价!',
  441. },
  442. ]}
  443. >
  444. <Input style={{ width: '200px' }} placeholder="请输入总价" type={'number'}/>
  445. </Form.Item>
  446. <Form.Item
  447. style={{
  448. display:'flex'
  449. }}
  450. label="已付(万元):"
  451. name="paid"
  452. rules={[
  453. {
  454. required: true,
  455. message: '请输入已付金额!',
  456. },
  457. ]}
  458. >
  459. <Input style={{ width: '200px' }} placeholder="请输入已付金额" type={'number'}/>
  460. </Form.Item>
  461. <Form.Item
  462. style={{
  463. display:'flex'
  464. }}
  465. label="本次申请支付金额(万元):"
  466. name="payment"
  467. rules={[
  468. {
  469. required: true,
  470. message: '请输入本次申请支付金额!',
  471. },
  472. ]}
  473. >
  474. <Input style={{ width: '200px' }} placeholder="请输入本次申请支付金额(" type={'number'}/>
  475. </Form.Item>
  476. <Form.Item
  477. style={{
  478. display:'flex'
  479. }}
  480. label="备注:"
  481. name="remarks"
  482. rules={[
  483. {
  484. required: true,
  485. message: '请输入本次申请支付金额!',
  486. },
  487. ]}
  488. >
  489. <Input style={{ width: '200px' }} placeholder="请输入本次申请支付金额(" type={'textarea'}/>
  490. </Form.Item>
  491. <Form.Item>
  492. <Button type="primary" htmlType="submit">
  493. 确定申请支付
  494. </Button>
  495. </Form.Item>
  496. </Form>
  497. </div>
  498. </Modal>
  499. </div>
  500. )
  501. }
  502. }
  503. export default CheckProject