orderDetail.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664
  1. import React, { Component } from "react";
  2. import { Form, Upload, Modal, Button, Table, Col, message } from "antd";
  3. import {
  4. splitUrl,
  5. getProcessStatus,
  6. getjiedian,
  7. getLiquidationStatus,
  8. getboutique,
  9. getCuikuan,
  10. getApprovedState,
  11. getProjectStatus
  12. } from "@/tools.js";
  13. import img from "./img.png"
  14. const FormItem = Form.Item;
  15. class OrderDetail extends Component {
  16. constructor(props) {
  17. super(props);
  18. this.state = {
  19. newContactsLists: [
  20. {
  21. title: "项目名称",
  22. dataIndex: "commodityName",
  23. key: "commodityName",
  24. render: text => {
  25. return <span>{text}</span>;
  26. }
  27. },
  28. {
  29. title: "项目分类",
  30. dataIndex: "projectType",
  31. key: "projectType",
  32. render: text => {
  33. let arr = this.props.dataSourceX || [];
  34. let str = "";
  35. for (let i = 0; i < arr.length; i++) {
  36. if (this.props.dataSourceX[i].sort == text) {
  37. str = this.props.dataSourceX[i].cname;
  38. return <span>{str}</span>;
  39. }
  40. }
  41. }
  42. },
  43. {
  44. title: "催款科目",
  45. dataIndex: "dunTypeName",
  46. key: "dunTypeName",
  47. render: text => {
  48. return <span>{text}</span>;
  49. }
  50. },
  51. {
  52. title: "时间",
  53. dataIndex: "waitDay",
  54. key: "waitDay",
  55. render: (text, record) => {
  56. if (record.dunTypeName) {
  57. return <span>{text}</span>;
  58. }
  59. }
  60. },
  61. {
  62. title: "金额(万元)",
  63. dataIndex: "money",
  64. key: "money",
  65. render: (text, record) => {
  66. if (record.dunTypeName) {
  67. if (record.appropriationRatio && !record.money) {
  68. return <span>{record.appropriationRatio}(拨款比例)</span>;
  69. } else if (record.appropriationRatio && record.money) {
  70. return (
  71. <span>
  72. {text}(比例:{record.appropriationRatio})
  73. </span>
  74. );
  75. } else {
  76. return <span>{text}</span>;
  77. }
  78. }
  79. }
  80. },
  81. {
  82. title: "服务年限",
  83. dataIndex: "startDate",
  84. key: "startDate",
  85. render: (text, record) => {
  86. if (record.dunTypeName) {
  87. return <span>{text}</span>;
  88. }
  89. }
  90. },
  91. {
  92. title: "催款状态",
  93. dataIndex: "status",
  94. key: "status",
  95. render: text => {
  96. return <span>{text == 1 ? "已启动" : "未启动"}</span>;
  97. }
  98. }
  99. ],
  100. ContactsLists: [
  101. {
  102. title: "催款科目",
  103. dataIndex: "dunSubject",
  104. key: "dunSubject",
  105. render: text => {
  106. return getjiedian(text);
  107. }
  108. },
  109. {
  110. title: "金额(万元)",
  111. dataIndex: "money",
  112. key: "money"
  113. },
  114. {
  115. title: "催款状态",
  116. dataIndex: "dunStatus",
  117. key: "dunStatus",
  118. render: text => {
  119. return getCuikuan(text);
  120. }
  121. }
  122. ],
  123. columnsX: [
  124. {
  125. title: "业务项目名称",
  126. dataIndex: "commodityName",
  127. key: "commodityName"
  128. },
  129. {
  130. title: "项目类别",
  131. dataIndex: "cname",
  132. key: "cname"
  133. },
  134. {
  135. title: "项目数量",
  136. dataIndex: "commodityQuantity",
  137. key: "commodityQuantity"
  138. },
  139. {
  140. title: "金额(万元)",
  141. dataIndex: "commodityPrice",
  142. key: "commodityPrice",
  143. render: text => {
  144. return this.props.processState === 2 ? "***" : text;
  145. }
  146. },
  147. {
  148. title: "负责人",
  149. dataIndex: "contacts",
  150. key: "contacts"
  151. },
  152. {
  153. title: "负责人电话",
  154. dataIndex: "contactsMobile",
  155. key: "contactsMobile"
  156. },
  157. {
  158. title: "项目状态",
  159. dataIndex: "projectStatus",
  160. key: "projectStatus",
  161. render: text => {
  162. return getProjectStatus(text);
  163. }
  164. },
  165. {
  166. title: "主要项目",
  167. dataIndex: "main",
  168. key: "main",
  169. render: text => {
  170. return text ? "是" : "否";
  171. }
  172. },
  173. {
  174. title: "项目说明",
  175. dataIndex: "taskComment",
  176. key: "taskComment",
  177. render: text => {
  178. return text && text.length > 8 ? text.substr(0, 8) + "…" : text;
  179. }
  180. }
  181. ],
  182. rotateDeg: 0
  183. };
  184. this.tableRowClickX = this.tableRowClickX.bind(this);
  185. this.nextCancel = this.nextCancel.bind(this);
  186. this.rotate = this.rotate.bind(this);
  187. this.downImg = this.downImg.bind(this);
  188. this.upImg = this.upImg.bind(this);
  189. }
  190. rotate() {
  191. let rotateDeg = this.state.rotateDeg + 90;
  192. this.setState({
  193. rotateDeg
  194. });
  195. }
  196. //项目详情关闭
  197. nextCancel() {
  198. this.setState({
  199. visible: false
  200. });
  201. }
  202. //点击打卡项目详情
  203. tableRowClickX(record) {
  204. this.setState({
  205. jid: record.id, //项目ID
  206. kid: record.commodityId, //商品ID
  207. commodityName: record.commodityName, //金额
  208. commodityPrice: record.commodityPrice, //金额
  209. commodityQuantity: record.commodityQuantity, //数量
  210. taskComment: record.taskComment, //备注
  211. main: record.main.toString(), //是否为主要
  212. visible: true,
  213. addState: 0
  214. });
  215. }
  216. downImg() {
  217. console.log(this.props.pictureUrl);
  218. const data = this.props.orderData;
  219. let num = 0;
  220. for (
  221. let i = 0;
  222. i <
  223. splitUrl(
  224. data.contractPictureUrl,
  225. ",",
  226. globalConfig.avatarHost + "/upload"
  227. ).length;
  228. i++
  229. ) {
  230. if (
  231. splitUrl(
  232. data.contractPictureUrl,
  233. ",",
  234. globalConfig.avatarHost + "/upload"
  235. )[i].url == this.state.previewImage
  236. ) {
  237. num = i;
  238. }
  239. }
  240. if (
  241. num ==
  242. splitUrl(
  243. data.contractPictureUrl,
  244. ",",
  245. globalConfig.avatarHost + "/upload"
  246. ).length -
  247. 1
  248. ) {
  249. return message.warning("已经是最后一张了哦");
  250. }
  251. this.state.previewImage = splitUrl(
  252. data.contractPictureUrl,
  253. ",",
  254. globalConfig.avatarHost + "/upload"
  255. )[num + 1].url;
  256. this.setState({
  257. previewImage: this.state.previewImage,
  258. rotateDeg: 0
  259. });
  260. }
  261. upImg() {
  262. const data = this.props.orderData;
  263. let num = 0;
  264. for (
  265. let i = 0;
  266. i <
  267. splitUrl(
  268. data.contractPictureUrl,
  269. ",",
  270. globalConfig.avatarHost + "/upload"
  271. ).length;
  272. i++
  273. ) {
  274. if (
  275. splitUrl(
  276. data.contractPictureUrl,
  277. ",",
  278. globalConfig.avatarHost + "/upload"
  279. )[i].url == this.state.previewImage
  280. ) {
  281. num = i;
  282. }
  283. }
  284. if (num == 0) {
  285. return message.warning("已经是第一张了哦");
  286. }
  287. this.state.previewImage = splitUrl(
  288. data.contractPictureUrl,
  289. ",",
  290. globalConfig.avatarHost + "/upload"
  291. )[num - 1].url;
  292. this.setState({
  293. previewImage: this.state.previewImage,
  294. rotateDeg: 0
  295. });
  296. }
  297. render() {
  298. const formItemLayout = {
  299. labelCol: { span: 8 },
  300. wrapperCol: { span: 14 }
  301. };
  302. const data = this.props.orderData;
  303. const propsList = this.props.contactList || [];
  304. return (
  305. <div
  306. className="clearfix"
  307. ref={e => {
  308. this.refs = e;
  309. }}
  310. >
  311. <FormItem className="half-item" {...formItemLayout} label="订单编号">
  312. <span>{this.props.orderNo}</span>
  313. </FormItem>
  314. <FormItem className="half-item" {...formItemLayout} label="合同编号">
  315. <span>{data.contractNo}</span>
  316. </FormItem>
  317. <FormItem className="half-item" {...formItemLayout} label="客户名称">
  318. <span>{data.userName}</span>
  319. </FormItem>
  320. <FormItem
  321. className="half-item"
  322. {...formItemLayout}
  323. label="合同签订时间"
  324. >
  325. <span>{data.signDate}</span>
  326. </FormItem>
  327. <FormItem className="half-item" {...formItemLayout} label="流程状态">
  328. <span>{getProcessStatus(data.processStatus)}</span>
  329. </FormItem>
  330. <FormItem className="half-item" {...formItemLayout} label="结算状态">
  331. <span>{getLiquidationStatus(data.liquidationStatus)}</span>
  332. </FormItem>
  333. <FormItem className="half-item" {...formItemLayout} label="企业联系人">
  334. {/* <span>{data.contacts}</span> */}
  335. <span>{this.props.isCaiWu ? "***" : data.contacts}</span>
  336. </FormItem>
  337. <FormItem className="half-item" {...formItemLayout} label="联系人电话">
  338. {/* <span>{data.contactMobile}</span> */}
  339. <span>{this.props.isCaiWu ? "***" : data.contactMobile}</span>
  340. </FormItem>
  341. <FormItem className="half-item" {...formItemLayout} label="企业法人">
  342. <span>{this.props.isCaiWu ? "***" : data.legalPerson}</span>
  343. </FormItem>
  344. <FormItem className="half-item" {...formItemLayout} label="法人电话">
  345. {/* <span>{data.legalPersonTel}</span> */}
  346. <span>{this.props.isCaiWu ? "***" : data.legalPersonTel}</span>
  347. </FormItem>
  348. <FormItem
  349. className="half-item"
  350. {...formItemLayout}
  351. label="签单金额(万元)"
  352. >
  353. <span>
  354. {this.props.processState === 2 ? "***" : data.totalAmount}
  355. </span>
  356. </FormItem>
  357. <FormItem
  358. className="half-item"
  359. {...formItemLayout}
  360. label="首付金额(万元)"
  361. >
  362. <span>
  363. {this.props.processState === 2 ? "***" : data.firstAmount}
  364. </span>
  365. </FormItem>
  366. <FormItem className="half-item" {...formItemLayout} label="特批立项">
  367. <span>{getApprovedState(data.approval)}</span>
  368. </FormItem>
  369. <FormItem
  370. className="half-item"
  371. {...formItemLayout}
  372. label="已收款项(万元)"
  373. >
  374. <span>
  375. {this.props.processState === 2 ? "***" : data.settlementAmount}
  376. </span>
  377. </FormItem>
  378. <FormItem className="half-item" {...formItemLayout} label="订单部门">
  379. <span>{data.depName}</span>
  380. </FormItem>
  381. <FormItem className="half-item" {...formItemLayout} label="是否外包">
  382. {data.outsource == 0 ? "否" : "是"}
  383. </FormItem>
  384. <div className="clearfix">
  385. <FormItem
  386. labelCol={{ span: 4 }}
  387. wrapperCol={{ span: 16 }}
  388. label="订单留言"
  389. >
  390. <p style={{ width: 500, wordWrap: "break-word" }}>
  391. {data.orderRemarks}
  392. </p>
  393. </FormItem>
  394. </div>
  395. <div className="clearfix">
  396. <FormItem
  397. labelCol={{ span: 4 }}
  398. wrapperCol={{ span: 18 }}
  399. label="合同扫描件"
  400. >
  401. <Upload
  402. className="demandDetailShow-upload"
  403. listType="picture-card"
  404. fileList={
  405. data.contractPictureUrl
  406. ? splitUrl(
  407. data.contractPictureUrl,
  408. ",",
  409. globalConfig.avatarHost + "/upload"
  410. )
  411. : []
  412. }
  413. onPreview={file => {
  414. this.setState({
  415. previewImage: file.url || file.thumbUrl,
  416. previewVisible: true
  417. });
  418. }}
  419. />
  420. <Modal
  421. maskClosable={false}
  422. footer={null}
  423. visible={this.state.previewVisible}
  424. onCancel={() => {
  425. this.state.rotateDeg = 0;
  426. this.setState({
  427. previewVisible: false,
  428. rotateDeg: this.state.rotateDeg
  429. });
  430. }}
  431. >
  432. <img
  433. alt=""
  434. style={{
  435. width: "100%",
  436. transform: `rotate(${this.state.rotateDeg}deg)`
  437. }}
  438. src={this.state.previewImage || ""}
  439. />
  440. <Button
  441. onClick={this.rotate}
  442. style={{
  443. position: "relative",
  444. left: "50%",
  445. transform: "translateX(-50%)"
  446. }}
  447. >
  448. 旋转
  449. </Button>
  450. <Button
  451. onClick={this.upImg}
  452. style={{
  453. position: "absolute",
  454. left: -81,
  455. top: "50%",
  456. transform: "translateY(-50%)"
  457. }}
  458. >
  459. 上一张
  460. </Button>
  461. <Button
  462. onClick={this.downImg}
  463. style={{
  464. position: "absolute",
  465. right: -81,
  466. top: "50%",
  467. transform: "translateY(-50%)"
  468. }}
  469. >
  470. 下一张
  471. </Button>
  472. </Modal>
  473. <Button
  474. style={{
  475. float: "right",
  476. marginRight: "140px",
  477. marginTop: "20px"
  478. }}
  479. onClick={() => {
  480. this.props.getOrderLog(data.orderNo);
  481. }}
  482. >
  483. 查看订单日志
  484. </Button>
  485. </FormItem>
  486. </div>
  487. <div className="clearfix">
  488. <FormItem
  489. className="half-item"
  490. {...formItemLayout}
  491. label="订单负责人"
  492. >
  493. <span>{data.salesmanName}</span>
  494. </FormItem>
  495. <FormItem
  496. className="half-item"
  497. {...formItemLayout}
  498. label="订单负责人电话"
  499. >
  500. <span>{data.salesmanMobile}</span>
  501. </FormItem>
  502. </div>
  503. <div className="clearfix">
  504. <FormItem
  505. className="half-item"
  506. {...formItemLayout}
  507. label="当前财务负责人"
  508. >
  509. <span>{data.nowFinance}</span>
  510. </FormItem>
  511. <FormItem
  512. className="half-item"
  513. {...formItemLayout}
  514. label="当前财务负责人电话"
  515. >
  516. <span>{data.nowFinanceMobile}</span>
  517. </FormItem>
  518. </div>
  519. <div className="clearfix">
  520. <FormItem
  521. className="half-item"
  522. {...formItemLayout}
  523. style={{ opacity: ".5" }}
  524. label="原订单负责人"
  525. >
  526. <span>{data.oldSalesmanName}</span>
  527. </FormItem>
  528. <FormItem
  529. className="half-item"
  530. {...formItemLayout}
  531. style={{ opacity: ".5" }}
  532. label="原订单负责人电话"
  533. >
  534. <span>{data.oldSalesmanMobile}</span>
  535. </FormItem>
  536. </div>
  537. <div className="clearfix">
  538. <FormItem
  539. className="half-item"
  540. style={{ opacity: ".5" }}
  541. {...formItemLayout}
  542. label="实际财务操作人"
  543. >
  544. <span>{data.financeName}</span>
  545. </FormItem>
  546. <FormItem
  547. className="half-item"
  548. {...formItemLayout}
  549. style={{ opacity: ".5" }}
  550. label="实际财务操作人电话"
  551. >
  552. <span>{data.financeMobile}</span>
  553. </FormItem>
  554. </div>
  555. <div>
  556. <span style={{ marginLeft: "50px", fontSize: "20px" }}>项目业务</span>
  557. </div>
  558. <div className="patent-table">
  559. <Table
  560. columns={this.state.columnsX}
  561. pagination={false}
  562. dataSource={this.props.dataSourceX}
  563. onRowClick={this.tableRowClickX}
  564. bordered
  565. size="small"
  566. />
  567. </div>
  568. <div>
  569. <span style={{ marginLeft: "50px", fontSize: "20px" }}>催款节点</span>
  570. <span
  571. style={{
  572. display: propsList.length ? "none" : "inline-block",
  573. marginLeft: 10,
  574. color: "red"
  575. }}
  576. >
  577. 金额总计(万元): {this.props.totalCui}
  578. </span>
  579. </div>
  580. <div className="clearfix">
  581. <Form layout="horizontal" id="demand-form">
  582. <Table
  583. pagination={false}
  584. bordered
  585. size="small"
  586. // columns={this.state.ContactsLists}
  587. columns={
  588. propsList.length
  589. ? this.state.ContactsLists
  590. : this.state.newContactsLists
  591. }
  592. dataSource={
  593. propsList.length
  594. ? this.props.contactList
  595. : this.props.contactListNew
  596. }
  597. />
  598. <Col span={24} offset={9} style={{ marginTop: "15px" }}></Col>
  599. </Form>
  600. </div>
  601. <Modal
  602. maskClosable={false}
  603. visible={this.state.visible}
  604. onOk={this.nextCancel}
  605. onCancel={this.nextCancel}
  606. width="800px"
  607. title={"项目任务详情"}
  608. footer=""
  609. className="admin-desc-content"
  610. >
  611. <Form layout="horizontal" id="demand-form">
  612. <div className="clearfix">
  613. <FormItem
  614. className="half-item"
  615. {...formItemLayout}
  616. label="项目名称"
  617. >
  618. <span>{this.state.commodityName}</span>
  619. </FormItem>
  620. <FormItem
  621. className="half-item"
  622. {...formItemLayout}
  623. label="项目数量"
  624. >
  625. <span>{this.state.commodityQuantity}</span>
  626. </FormItem>
  627. <FormItem
  628. className="half-item"
  629. {...formItemLayout}
  630. label="金额(万元)"
  631. >
  632. <span>{this.state.commodityPrice}</span>
  633. </FormItem>
  634. <FormItem
  635. className="half-item"
  636. {...formItemLayout}
  637. label="主要项目"
  638. >
  639. <span>{getboutique(this.state.main)}</span>
  640. </FormItem>
  641. <div className="clearfix">
  642. <FormItem
  643. labelCol={{ span: 4 }}
  644. wrapperCol={{ span: 16 }}
  645. label="服务说明"
  646. >
  647. <span>{this.state.taskComment}</span>
  648. </FormItem>
  649. </div>
  650. </div>
  651. </Form>
  652. </Modal>
  653. </div>
  654. );
  655. }
  656. }
  657. export default OrderDetail;