orderInfor.jsx 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790
  1. import React, { Component } from "react";
  2. import { Button, Col, DatePicker, Form, Input, message, Modal, Select, Spin, Table, Tag, Tooltip } from "antd";
  3. import { getApprovedState, getLiquidationStatus, getProcessStatus, getProjectName, splitUrl } from "../../../../tools";
  4. import moment from "moment";
  5. import EnterpriseNameChange from "../../../../common/enterpriseNameChange";
  6. import PicturesWall from "../../../order/orderNew/changeComponent/picturesWall";
  7. import ImgList from "../../../../common/imgList";
  8. import OrderCoor from "../../../order/orderNew/changeComponent/orderCoor";
  9. import ContentUrl from "../../../order/orderNew/contentUrl";
  10. import $ from "jquery";
  11. const FormItem = Form.Item;
  12. const formItemLayout = {
  13. labelCol: { span: 8 },
  14. wrapperCol: { span: 14 },
  15. };
  16. class OrderInfor extends Component {
  17. constructor(props) {
  18. super(props);
  19. this.state = {
  20. contactList: [],
  21. columns: [
  22. {
  23. title: "业务项目名称",
  24. dataIndex: "commodityName",
  25. key: "commodityName",
  26. render: (text, record) => {
  27. return <span>{text}<span style={{ color: "red" }}>{record.patentTypeName}</span>{"-" + record.id}</span>
  28. }
  29. },
  30. {
  31. title: "项目类别",
  32. dataIndex: "cname",
  33. key: "cname",
  34. },
  35. {
  36. title: "项目数量",
  37. dataIndex: "commodityQuantity",
  38. key: "commodityQuantity",
  39. render: (text, record) => {
  40. if (record.splitStatus == 1) {
  41. return (
  42. <span>
  43. {text}{" "}
  44. <Tag
  45. color="#108ee9"
  46. onClick={(e) => {
  47. e.stopPropagation();
  48. this.showRes(record);
  49. }}
  50. >
  51. 已拆
  52. </Tag>
  53. </span>
  54. );
  55. } else {
  56. return text;
  57. }
  58. },
  59. },
  60. {
  61. title: "金额(万元)",
  62. dataIndex: "commodityPrice",
  63. key: "commodityPrice",
  64. },
  65. {
  66. title: "负责人",
  67. dataIndex: "contacts",
  68. key: "contacts",
  69. },
  70. {
  71. title: "负责人电话",
  72. dataIndex: "contactsMobile",
  73. key: "contactsMobile",
  74. },
  75. {
  76. title: "项目状态",
  77. dataIndex: "projectStatus",
  78. key: "projectStatus",
  79. render: (text) => {
  80. return getProjectName(text);
  81. },
  82. },
  83. {
  84. title: "主要项目",
  85. dataIndex: "main",
  86. key: "main",
  87. render: (text) => {
  88. return text ? "是" : "否";
  89. },
  90. },
  91. {
  92. title: "项目说明",
  93. dataIndex: "taskComment",
  94. key: "taskComment",
  95. render: (text) => {
  96. return (
  97. <Tooltip title={text}>
  98. <div style={{
  99. maxWidth: '100px',
  100. overflow: 'hidden',
  101. textOverflow: "ellipsis",
  102. whiteSpace: 'nowrap',
  103. }}>{text}</div>
  104. </Tooltip>
  105. );
  106. },
  107. },
  108. ]
  109. }
  110. this.loaduser = this.loaduser.bind(this);
  111. this.jiedian = this.jiedian.bind(this);
  112. this.loadData = this.loadData.bind(this);
  113. }
  114. componentDidMount() {
  115. this.loaduser();
  116. this.jiedian();
  117. this.loadData();
  118. }
  119. //查看项目列表
  120. loadData(record) {
  121. this.setState({
  122. loading: true,
  123. });
  124. $.ajax({
  125. method: "get",
  126. dataType: "json",
  127. crossDomain: false,
  128. url: globalConfig.context + "/api/admin/newOrder/getOrderTask",
  129. data: {
  130. orderNo: this.props.orderNo
  131. },
  132. success: function (data) {
  133. let theArr = [];
  134. if (!data.data) {
  135. if (data.error && data.error.length) {
  136. message.warning(data.error[0].message);
  137. }
  138. } else {
  139. for (let i = 0; i < data.data.length; i++) {
  140. let thisdata = data.data[i];
  141. thisdata.key = i;
  142. thisdata.sort = thisdata.cSort;
  143. thisdata.declarationBatch = thisdata.declarationBatch || undefined;//申报批次
  144. thisdata.ifCertificationFee = isNaN(parseInt(thisdata.ifCertificationFee)) ? undefined : thisdata.ifCertificationFee;//是否包含申报批次
  145. theArr.push(thisdata);
  146. }
  147. }
  148. this.setState({
  149. dataSource: theArr,
  150. });
  151. }.bind(this),
  152. }).always(
  153. function () {
  154. this.setState({
  155. loading: false,
  156. });
  157. }.bind(this)
  158. );
  159. }
  160. loaduser() {
  161. $.ajax({
  162. method: "get",
  163. dataType: "json",
  164. crossDomain: false,
  165. url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail",
  166. data: {
  167. orderNo: this.props.orderNo,
  168. },
  169. success: function (data) {
  170. let thisData = data.data;
  171. if (!thisData) {
  172. if (data.error && data.error.length) {
  173. message.warning(data.error[0].message);
  174. }
  175. thisData = {};
  176. }
  177. if (thisData.approval == 2) {
  178. thisData.approval = "特批通过";
  179. } else if (thisData.approval == 3) {
  180. thisData.approval = "特批驳回";
  181. }
  182. this.setState({
  183. id: thisData.id,
  184. kehuId: thisData.buyerId,
  185. orderNo: thisData.orderNo, //订单编号
  186. orderType: thisData.orderType, //订单类型
  187. firstAmount: thisData.firstAmount, //首付金额
  188. totalAmount: thisData.totalAmount, //总金额
  189. settlementAmount: thisData.settlementAmount, //结算金额
  190. liquidationStatus: thisData.liquidationStatus, //清算状态
  191. processStatus: thisData.processStatus, //流程状态
  192. orderRemarks: thisData.orderRemarks, //订单备注
  193. contractNo: thisData.contractNo, //合同编号
  194. contacts: thisData.contacts, //联系人
  195. contactMobile: thisData.contactMobile, //联系人电话
  196. legalPerson: thisData.legalPerson, //法人
  197. legalPersonTel: thisData.legalPersonTel, //法人电话
  198. orgCodeUrl: thisData.contractPictureUrl
  199. ? splitUrl(
  200. thisData.contractPictureUrl,
  201. ",",
  202. globalConfig.avatarHost + "/upload"
  203. )
  204. : [], //图片地址
  205. replenishUrl: thisData.agreementUrl
  206. ? splitUrl(
  207. thisData.agreementUrl,
  208. ",",
  209. globalConfig.avatarHost + "/upload"
  210. )
  211. : [], //图片地址
  212. contentUrl: thisData.serviceContent
  213. ? splitUrl(
  214. thisData.serviceContent,
  215. ",",
  216. globalConfig.avatarHost + "/upload"
  217. )
  218. : [], //图片地址
  219. signDate: thisData.signDate, //签单时间
  220. userName: thisData.userName, //客户名称
  221. salesmanName: thisData.salesmanName, //营销员名称
  222. salesmanMobile: thisData.salesmanMobile, //营销员电话
  223. oldSalesmanName: thisData.oldSalesmanName, //营销员名称
  224. oldSalesmanMobile: thisData.oldSalesmanMobile, //营销员电话
  225. financeName: thisData.financeName, //财务名称
  226. financeMobile: thisData.financeMobile, //财务电话
  227. nowFinanceMobile: thisData.nowFinanceMobile,
  228. nowFinance: thisData.nowFinance,
  229. approval:
  230. thisData.approval == 0
  231. ? thisData.approval.toString()
  232. : thisData.approval,
  233. organizationSearch: thisData.orderDep,
  234. depName: thisData.depName,
  235. status: thisData.status,
  236. outsource: thisData.outsource,
  237. deleteSign: thisData.deleteSign,
  238. orderUid: thisData.uid,
  239. });
  240. }.bind(this),
  241. }).always(
  242. function () {
  243. this.setState({
  244. loading: false,
  245. });
  246. }.bind(this)
  247. );
  248. }
  249. jiedian() {
  250. this.setState({
  251. loadData: true,
  252. });
  253. $.ajax({
  254. method: "get",
  255. dataType: "json",
  256. crossDomain: false,
  257. url: globalConfig.context + "/api/admin/newOrder/selectOrderDun",
  258. data: {
  259. orderNo: this.props.orderNo,
  260. },
  261. success: function (data) {
  262. let theArr = [];
  263. let thisData = [];
  264. if (data.error.length || data.data.list == "") {
  265. if (data.error && data.error.length) {
  266. message.warning(data.error[0].message);
  267. }
  268. } else {
  269. for (let i = 0; i < data.data.length; i++) {
  270. thisData = data.data[i];
  271. theArr.push({
  272. key: i,
  273. dunSubject: thisData.dunSubject
  274. ? thisData.dunSubject.toString()
  275. : "", //催款科目
  276. id: thisData.id, //节点Id
  277. money: thisData.money, //催款金额
  278. dunStatus: thisData.dunStatus, //催款状态
  279. orderNo: thisData.orderNo,
  280. });
  281. }
  282. this.setState({
  283. contactList: theArr,
  284. });
  285. }
  286. }.bind(this),
  287. }).always(
  288. function () {
  289. this.setState({
  290. loading: false,
  291. });
  292. }.bind(this)
  293. );
  294. }
  295. render() {
  296. const formItemList = [
  297. {
  298. label: "企业联系人",
  299. content: <span>{this.state.contacts}</span>,
  300. },
  301. {
  302. label: "客户名称",
  303. content: <span>
  304. {this.state.userName}
  305. <EnterpriseNameChange
  306. type='journal'
  307. style={{ marginLeft: 10 }}
  308. enterpriseId={this.state.orderUid} />
  309. </span>,
  310. },
  311. {
  312. label: "联系人电话",
  313. content: <span>{this.state.contactMobile}</span>,
  314. },
  315. {
  316. label: "企业法人",
  317. content: <span>{this.state.legalPerson}</span>,
  318. },
  319. {
  320. label: "法人电话",
  321. content: <span>{this.state.legalPersonTel}</span>,
  322. },
  323. ];
  324. return (
  325. <Modal
  326. maskClosable={false}
  327. visible={this.props.visible}
  328. onOk={this.props.onCancel}
  329. onCancel={this.props.onCancel}
  330. width={800}
  331. title='订单详情'
  332. footer=""
  333. className="admin-desc-content"
  334. >
  335. <div className="clearfix">
  336. <div className="clearfix">
  337. <FormItem
  338. className="half-item"
  339. {...formItemLayout}
  340. label="合同编号"
  341. >
  342. {<span>{this.state.contractNo}</span>}
  343. </FormItem>
  344. <FormItem
  345. className="half-item"
  346. {...formItemLayout}
  347. label="订单编号"
  348. >
  349. <span>{this.state.orderNo}</span>
  350. </FormItem>
  351. <FormItem
  352. className="half-item"
  353. {...formItemLayout}
  354. label="流程状态"
  355. >
  356. <span>
  357. {getProcessStatus(this.state.processStatus)}
  358. </span>
  359. </FormItem>
  360. <FormItem
  361. className="half-item"
  362. {...formItemLayout}
  363. label="结算状态"
  364. >
  365. <span>
  366. {getLiquidationStatus(
  367. this.state.liquidationStatus
  368. )}
  369. </span>
  370. </FormItem>
  371. <div className="clearfix">
  372. <FormItem
  373. className="half-item"
  374. {...formItemLayout}
  375. label="特批立项"
  376. >
  377. <span>
  378. {getApprovedState(this.state.approval)}
  379. </span>
  380. </FormItem>
  381. <FormItem
  382. className="half-item"
  383. {...formItemLayout}
  384. label="合同签订时间"
  385. >
  386. <span>{this.state.signDate}</span>
  387. </FormItem>
  388. <FormItem
  389. className="half-item"
  390. {...formItemLayout}
  391. label="订单部门"
  392. >
  393. <span>{this.state.depName}</span>
  394. </FormItem>
  395. <FormItem
  396. className="half-item"
  397. {...formItemLayout}
  398. label="是否外包"
  399. >
  400. <span>
  401. {this.state.outsource == 0 ? "否" : "是"}
  402. </span>
  403. </FormItem>
  404. </div>
  405. </div>
  406. <h3
  407. style={{
  408. marginLeft: 10,
  409. fontWeight: 800,
  410. marginBottom: 10,
  411. }}
  412. >
  413. 收款项目
  414. </h3>
  415. {this.state.processStatus === 0 ? (
  416. <div className="clearfix">
  417. <FormItem
  418. className="half-item"
  419. {...formItemLayout}
  420. label="签单金额(万元)"
  421. >
  422. <Input
  423. placeholder="签单金额"
  424. ref="totalAmountRef"
  425. value={this.state.totalAmount}
  426. onChange={(e) => {
  427. this.setState({
  428. totalAmount: e.target.value,
  429. });
  430. }}
  431. style={{ width: "240px" }}
  432. />
  433. </FormItem>
  434. <FormItem
  435. className="half-item"
  436. {...formItemLayout}
  437. label="首付金额(万元)"
  438. >
  439. <Input
  440. placeholder="请输入实签首款金额"
  441. ref="firstAmountRef"
  442. value={this.state.firstAmount}
  443. onChange={(e) => {
  444. this.setState({
  445. firstAmount: e.target.value,
  446. });
  447. }}
  448. style={{ width: "240px" }}
  449. />
  450. </FormItem>
  451. <FormItem
  452. className="half-item"
  453. {...formItemLayout}
  454. label="已收款项"
  455. >
  456. <span>
  457. {this.state.settlementAmount + "万元"}
  458. </span>
  459. </FormItem>
  460. </div>
  461. ) : (
  462. <div className="clearfix">
  463. <FormItem
  464. className="half-item"
  465. {...formItemLayout}
  466. label="签单金额(万元)"
  467. >
  468. <span>{this.state.totalAmount}</span>
  469. </FormItem>
  470. <FormItem
  471. className="half-item"
  472. {...formItemLayout}
  473. label="首付金额(万元)"
  474. >
  475. <span>{this.state.firstAmount}</span>
  476. </FormItem>
  477. <FormItem
  478. className="half-item"
  479. {...formItemLayout}
  480. label="已收款项"
  481. >
  482. <span>
  483. {this.state.settlementAmount + "万元"}
  484. </span>
  485. </FormItem>
  486. </div>
  487. )}
  488. <h3
  489. style={{
  490. marginLeft: 10,
  491. fontWeight: 800,
  492. marginBottom: 10,
  493. }}
  494. >
  495. 联系信息
  496. </h3>
  497. <div className="clearfix">
  498. {formItemList.map((data, index) => {
  499. return (
  500. <FormItem
  501. className="half-item"
  502. {...formItemLayout}
  503. key={index}
  504. label={data.label}
  505. >
  506. {data.content}
  507. </FormItem>
  508. );
  509. })}
  510. </div>
  511. <div className="clearfix">
  512. <div>
  513. <FormItem
  514. labelCol={{ span: 4 }}
  515. wrapperCol={{ span: 18 }}
  516. label="合同扫描件"
  517. >
  518. <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
  519. {this.state.orgCodeUrl && this.state.visible && this.state.activeKey === '1' ? <ImgList domId={'addService3'} fileList={this.state.orgCodeUrl} ItemWidth={'96px'} /> : <div />}
  520. </div>
  521. <Modal
  522. maskClosable={false}
  523. footer={null}
  524. width={"50%"}
  525. visible={this.state.previewVisible}
  526. onCancel={() => {
  527. this.setState({
  528. previewVisible: false,
  529. rotateDeg: 0,
  530. });
  531. }}
  532. >
  533. <img
  534. alt=""
  535. style={{
  536. width: "100%",
  537. transform: `rotate(${this.state.rotateDeg}deg)`,
  538. }}
  539. src={this.state.previewImage || ""}
  540. />
  541. <Button
  542. onClick={this.rotate}
  543. style={{
  544. position: "relative",
  545. left: "50%",
  546. transform: "translateX(-50%)",
  547. }}
  548. >
  549. 旋转
  550. </Button>
  551. <Button
  552. onClick={this.upImg}
  553. style={{
  554. position: "absolute",
  555. left: -81,
  556. top: "50%",
  557. transform: "translateY(-50%)",
  558. }}
  559. >
  560. 上一张
  561. </Button>
  562. <Button
  563. onClick={this.downImg}
  564. style={{
  565. position: "absolute",
  566. right: -81,
  567. top: "50%",
  568. transform: "translateY(-50%)",
  569. }}
  570. >
  571. 下一张
  572. </Button>
  573. </Modal>
  574. <Button
  575. style={{
  576. float: "right",
  577. marginRight: "140px",
  578. marginTop: "20px",
  579. }}
  580. onClick={this.getOrderLog}
  581. >
  582. 查看订单日志
  583. </Button>
  584. </FormItem>
  585. <FormItem
  586. labelCol={{ span: 4 }}
  587. wrapperCol={{ span: 18 }}
  588. label="补充协议"
  589. >
  590. {/*<Upload*/}
  591. {/* className="demandDetailShow-upload"*/}
  592. {/* listType="picture-card"*/}
  593. {/* fileList={this.state.replenishUrl}*/}
  594. {/* onPreview={(file) => {*/}
  595. {/* this.setState({*/}
  596. {/* previewImage: file.url || file.thumbUrl,*/}
  597. {/* previewVisibles: true,*/}
  598. {/* });*/}
  599. {/* }}*/}
  600. {/*/>*/}
  601. <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
  602. {
  603. this.state.visible && this.state.activeKey === '1' && this.state.replenishUrl ?
  604. <ImgList domId={'addService4'} fileList={this.state.replenishUrl} ItemWidth={'96px'} /> :
  605. <div />
  606. }
  607. </div>
  608. <Modal
  609. maskClosable={false}
  610. footer={null}
  611. width={"50%"}
  612. visible={this.state.previewVisibles}
  613. onCancel={() => {
  614. this.setState({
  615. previewVisibles: false,
  616. rotateDeg: 0,
  617. });
  618. }}
  619. >
  620. <img
  621. alt=""
  622. style={{
  623. width: "100%",
  624. transform: `rotate(${this.state.rotateDeg}deg)`,
  625. }}
  626. src={this.state.previewImage || ""}
  627. />
  628. <Button
  629. onClick={this.rotates}
  630. style={{
  631. position: "relative",
  632. left: "50%",
  633. transform: "translateX(-50%)",
  634. }}
  635. >
  636. 旋转
  637. </Button>
  638. <Button
  639. onClick={this.upImgs}
  640. style={{
  641. position: "absolute",
  642. left: -81,
  643. top: "50%",
  644. transform: "translateY(-50%)",
  645. }}
  646. >
  647. 上一张
  648. </Button>
  649. <Button
  650. onClick={this.downImgs}
  651. style={{
  652. position: "absolute",
  653. right: -81,
  654. top: "50%",
  655. transform: "translateY(-50%)",
  656. }}
  657. >
  658. 下一张
  659. </Button>
  660. </Modal>
  661. </FormItem>
  662. </div>
  663. </div>
  664. <ContentUrl
  665. processStatus={1}
  666. domId={"inforContents"}
  667. contentUrl={this.state.contentUrl}
  668. imgId={"inforContentsImg"}
  669. />
  670. <div className="clearfix">
  671. <FormItem
  672. labelCol={{ span: 4 }}
  673. wrapperCol={{ span: 16 }}
  674. label="订单留言"
  675. >
  676. <p
  677. style={{ width: 500, wordWrap: "break-word" }}
  678. >
  679. {this.state.orderRemarks}
  680. </p>
  681. </FormItem>
  682. </div>
  683. <div className="clearfix">
  684. <FormItem
  685. className="half-item"
  686. {...formItemLayout}
  687. label="订单负责人"
  688. >
  689. <span>{this.state.salesmanName}</span>
  690. </FormItem>
  691. <FormItem
  692. className="half-item"
  693. {...formItemLayout}
  694. label="订单负责人电话"
  695. >
  696. <span>{this.state.salesmanMobile}</span>
  697. </FormItem>
  698. </div>
  699. <div className="clearfix">
  700. <FormItem
  701. className="half-item"
  702. {...formItemLayout}
  703. label="当前财务负责人"
  704. >
  705. <span>{this.state.nowFinance}</span>
  706. </FormItem>
  707. <FormItem
  708. className="half-item"
  709. {...formItemLayout}
  710. label="当前财务负责人电话"
  711. >
  712. <span>{this.state.nowFinanceMobile}</span>
  713. </FormItem>
  714. </div>
  715. <div className="clearfix">
  716. <FormItem
  717. className="half-item"
  718. {...formItemLayout}
  719. style={{ opacity: ".5" }}
  720. label="原订单负责人"
  721. >
  722. <span>{this.state.oldSalesmanName}</span>
  723. </FormItem>
  724. <FormItem
  725. className="half-item"
  726. {...formItemLayout}
  727. style={{ opacity: ".5" }}
  728. label="原订单负责人电话"
  729. >
  730. <span>{this.state.oldSalesmanMobile}</span>
  731. </FormItem>
  732. </div>
  733. <div className="clearfix">
  734. <FormItem
  735. className="half-item"
  736. style={{ opacity: ".5" }}
  737. {...formItemLayout}
  738. label="实际财务操作人"
  739. >
  740. <span>{this.state.financeName}</span>
  741. </FormItem>
  742. <FormItem
  743. className="half-item"
  744. {...formItemLayout}
  745. style={{ opacity: ".5" }}
  746. label="实际财务操作人电话"
  747. >
  748. <span>{this.state.financeMobile}</span>
  749. </FormItem>
  750. </div>
  751. {/* 协单人员 */}
  752. <OrderCoor orderNo={this.props.orderNo} />
  753. <div>
  754. <span style={{ marginLeft: "50px", fontSize: "20px" }}>
  755. 项目业务
  756. </span>
  757. </div>
  758. <div
  759. className="patent-table"
  760. style={{ marginBottom: 10 }}
  761. >
  762. <Spin spinning={this.state.loading}>
  763. <Table
  764. columns={this.state.columns}
  765. scroll={{ x: "max-content", y: 0 }}
  766. dataSource={this.state.dataSource}
  767. pagination={false}
  768. onRowClick={this.tableRowClick}
  769. bordered
  770. size="small"
  771. />
  772. </Spin>
  773. </div>
  774. </div>
  775. </Modal>
  776. )
  777. }
  778. }
  779. export default OrderInfor;