orderDetail.js 18 KB

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