orderDetail.jsx 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733
  1. import React from 'react';
  2. import $ from 'jquery/src/ajax';
  3. import {
  4. Modal,
  5. message,
  6. Spin,
  7. Upload,
  8. Button,
  9. Form,
  10. Table
  11. } from 'antd';
  12. import {getjiedian,splitUrl,getNewOrderType,getProcessStatus,getApproval,getLiquidationStatus,getProjectStatus} from '@/tools';
  13. const OrderDetail = Form.create()(React.createClass({
  14. loadXmu(record) {
  15. this.state.data = [];
  16. this.setState({
  17. loading: true
  18. });
  19. $.ajax({
  20. method: "get",
  21. dataType: "json",
  22. crossDomain: false,
  23. url: globalConfig.context + '/api/admin/newOrder/getOrderTask',
  24. data: {
  25. orderNo:record?record.orderNo:this.props.data.orderNo
  26. },
  27. success: function (data) {
  28. let theArr = [];
  29. if (!data.data) {
  30. if (data.error && data.error.length) {
  31. message.warning(data.error[0].message);
  32. };
  33. } else {
  34. for (let i = 0; i < data.data.length; i++) {
  35. let thisdata = data.data[i];
  36. theArr.push({
  37. key: i,
  38. id:thisdata.id,
  39. orderNo:thisdata.orderNo,
  40. commodityName:thisdata.commodityName,
  41. commodityPrice:thisdata.commodityPrice,
  42. commodityQuantity:thisdata.commodityQuantity,
  43. taskStatus:thisdata.taskStatus,
  44. taskComment:thisdata.taskComment,
  45. main:thisdata.main,
  46. contacts:thisdata.contacts,
  47. contactsMobile:thisdata.contactsMobile,
  48. cname:thisdata.cname,
  49. certificateNumber:thisdata.certificateNumber,
  50. projectStatus:thisdata.projectStatus
  51. });
  52. };
  53. }
  54. this.setState({
  55. dataSource: theArr,
  56. pagination: false,
  57. });
  58. }.bind(this),
  59. }).always(function () {
  60. this.setState({
  61. loading: false
  62. });
  63. }.bind(this));
  64. },
  65. getInitialState() {
  66. return {
  67. rotateDeg: 0,
  68. visible: false,
  69. avisible: false,
  70. loading: false,
  71. jsDate: [],
  72. auditStatus: 0,
  73. textFileList: [],
  74. videoFileList: [],
  75. pictureUrl: [],
  76. pictureUrlMin: [],
  77. columns: [
  78. {
  79. title: "业务项目名称",
  80. dataIndex: "commodityName",
  81. key: "commodityName",
  82. render: text => {
  83. return text && text.length > 6 ? (
  84. <span title={text}>{text.substr(0, 8)}...</span>
  85. ) : (
  86. text
  87. );
  88. }
  89. },
  90. {
  91. title: "项目类别",
  92. dataIndex: "cname",
  93. key: "cname"
  94. },
  95. {
  96. title: "项目数量(个)",
  97. dataIndex: "commodityQuantity",
  98. key: "commodityQuantity"
  99. },
  100. {
  101. title: "服务市价(万元)",
  102. dataIndex: "commodityPrice",
  103. key: "commodityPrice"
  104. },
  105. {
  106. title: "项目状态",
  107. dataIndex: "projectStatus",
  108. key: "projectStatus",
  109. render: text => {
  110. return getProjectStatus(text);
  111. }
  112. },
  113. {
  114. title: "证书编号",
  115. dataIndex: "certificateNumber",
  116. key: "certificateNumber"
  117. },
  118. {
  119. title: "是否主要项目",
  120. dataIndex: "main",
  121. key: "main",
  122. render: text => {
  123. return text ? "是" : "否";
  124. }
  125. },
  126. {
  127. title: "项目说明",
  128. dataIndex: "taskComment",
  129. key: "taskComment",
  130. render: text => {
  131. return text && text.length > 8 ? (
  132. <span title={text}>{text.substr(0, 8)}...</span>
  133. ) : (
  134. text
  135. );
  136. }
  137. }
  138. ],
  139. columnsX: [
  140. {
  141. title: "流程",
  142. dataIndex: "processName",
  143. key: "processName"
  144. },
  145. {
  146. title: "操作人",
  147. dataIndex: "adminName",
  148. key: "adminName"
  149. },
  150. {
  151. title: "时间",
  152. dataIndex: "createDate",
  153. key: "createDate"
  154. }
  155. ]
  156. };
  157. },
  158. loadData(record){
  159. this.state.orderList=[];
  160. $.ajax({
  161. method: "get",
  162. dataType: "json",
  163. crossDomain: false,
  164. url: globalConfig.context + '/api/admin/newOrder/getOrderNewDetail',
  165. data: {
  166. orderNo:record?record.orderNo:this.props.data.orderNo
  167. },
  168. success: function (data) {
  169. let thisData = data.data;
  170. if (!thisData) {
  171. if (data.error && data.error.length) {
  172. message.warning(data.error[0].message);
  173. };
  174. thisData = {};
  175. };
  176. this.setState({
  177. id: thisData.id,
  178. orderList: thisData,
  179. approval:
  180. thisData.approval == 0
  181. ? thisData.approval.toString()
  182. : thisData.approval,
  183. orderRemarks: thisData.orderRemarks,
  184. orgCodeUrl: thisData.contractPictureUrl
  185. ? splitUrl(
  186. thisData.contractPictureUrl,
  187. ",",
  188. globalConfig.avatarHost + "/upload"
  189. )
  190. : [],
  191. orderNo: thisData.orderNo, //订单编号
  192. buyerId: thisData.buyerId,
  193. depName: thisData.depName,
  194. outsource: thisData.outsource == 0 ? "否" : "是"
  195. });
  196. }.bind(this),
  197. }).always(function () {
  198. this.setState({
  199. loading: false
  200. });
  201. }.bind(this));
  202. },
  203. jdDate(record){
  204. $.ajax({
  205. method: "get",
  206. dataType: "json",
  207. crossDomain: false,
  208. url: globalConfig.context + '/api/admin/newOrder/selectOrderDun',
  209. data: {
  210. orderNo:record?record.orderNo:this.props.data.orderNo
  211. },
  212. success: function (data) {
  213. let thisData = data.data;
  214. if (!thisData.length) {
  215. if (data.error && data.error.length) {
  216. message.warning(data.error[0].message);
  217. };
  218. thisData = {};
  219. }else{
  220. this.setState({
  221. jsDate:thisData
  222. })
  223. };
  224. }.bind(this),
  225. }).always(function () {
  226. this.setState({
  227. loading: false
  228. });
  229. }.bind(this));
  230. },
  231. rizhi(){
  232. this.setState({
  233. loading:true
  234. })
  235. $.ajax({
  236. method: "get",
  237. dataType: "json",
  238. crossDomain: false,
  239. url: '/api/admin/newOrder/selectOrderLog',
  240. data: {
  241. orderNo:this.props.data.orderNo
  242. },
  243. success: function (data) {
  244. let theArr = [];
  245. let thisData = data.data;
  246. if (!thisData.length) {
  247. if (data.error && data.error.length) {
  248. message.warning(data.error[0].message);
  249. };
  250. thisData = {};
  251. }else{
  252. for(let i = 0; i < data.data.length; i++) {
  253. let thisdata = data.data[i];
  254. theArr.push({
  255. processName:thisdata.processName,
  256. adminName:thisdata.adminName,
  257. createDate:thisdata.createDate,
  258. });
  259. };
  260. };
  261. this.setState({
  262. dataSourceX: theArr
  263. })
  264. }.bind(this),
  265. }).always(function () {
  266. this.setState({
  267. loading: false
  268. });
  269. }.bind(this));
  270. },
  271. getOrderLog(){
  272. this.setState({
  273. avisible:true
  274. })
  275. this.rizhi()
  276. },
  277. closeOrderLog(){
  278. this.setState({
  279. avisible:false
  280. })
  281. },
  282. getPictureUrl(e) {
  283. this.setState({ pictureUrl: e });
  284. },
  285. componentWillMount() {
  286. if (this.props.data.orderNo) {
  287. this.loadData();
  288. this.loadXmu();
  289. this.jdDate();
  290. } else {
  291. this.state.data = {};
  292. };
  293. },
  294. componentWillReceiveProps(nextProps) {
  295. if (!this.props.visible && nextProps.visible) {
  296. this.state.textFileList = [];
  297. this.state.videoFileList = [];
  298. if (nextProps.data.orderNo) {
  299. this.loadData(nextProps.data);
  300. this.loadXmu(nextProps.data);
  301. this.jdDate(nextProps.data);
  302. } else {
  303. this.state.data = {};
  304. this.state.pictureUrl = [];
  305. this.state.pictureUrlMin=[];
  306. };
  307. this.props.form.resetFields();
  308. };
  309. },
  310. downImg() {
  311. let num = 0;
  312. for (let i = 0; i < this.state.orgCodeUrl.length; i++) {
  313. if (this.state.orgCodeUrl[i].url == this.state.previewImage) {
  314. num = i;
  315. }
  316. }
  317. if (num == this.state.orgCodeUrl.length - 1) {
  318. return message.warning("已经是最后一张了哦");
  319. }
  320. this.state.previewImage = this.state.orgCodeUrl[num + 1].url;
  321. this.setState({
  322. previewImage: this.state.previewImage,
  323. rotateDeg: 0
  324. });
  325. },
  326. upImg() {
  327. let num = 0;
  328. for (let i = 0; i < this.state.orgCodeUrl.length; i++) {
  329. if (this.state.orgCodeUrl[i].url == this.state.previewImage) {
  330. num = i;
  331. }
  332. }
  333. if (num == 0) {
  334. return message.warning("已经是第一张了哦");
  335. }
  336. this.state.previewImage = this.state.orgCodeUrl[num - 1].url;
  337. this.setState({
  338. previewImage: this.state.previewImage,
  339. rotateDeg: 0
  340. });
  341. },
  342. rotate() {
  343. let rotateDeg = this.state.rotateDeg + 90;
  344. this.setState({
  345. rotateDeg
  346. });
  347. },
  348. render() {
  349. const theData = this.state.orderList || {};
  350. const FormItem = Form.Item
  351. const formItemLayout = {
  352. labelCol: { span: 10 },
  353. wrapperCol: { span: 12 },
  354. };
  355. const jsDate = this.state.jsDate || [];
  356. return (
  357. <div className="login">
  358. <Form layout="horizontal" id="demand-form">
  359. <Spin spinning={this.state.loading}>
  360. <div className="clearfix">
  361. <FormItem
  362. className="half-item"
  363. {...formItemLayout}
  364. label="订单编号"
  365. >
  366. <span>{theData.orderNo}</span>
  367. </FormItem>
  368. <FormItem
  369. className="half-item"
  370. {...formItemLayout}
  371. label="签单时间"
  372. >
  373. <span>{theData.signDate}</span>
  374. </FormItem>
  375. <FormItem
  376. className="half-item"
  377. {...formItemLayout}
  378. label="客户名称"
  379. >
  380. <span>{theData.userName}</span>
  381. </FormItem>
  382. <FormItem
  383. className="half-item"
  384. {...formItemLayout}
  385. label="流转状态"
  386. >
  387. <span>{getProcessStatus(theData.processStatus)}</span>
  388. </FormItem>
  389. <FormItem
  390. className="half-item"
  391. {...formItemLayout}
  392. label="订单类型"
  393. >
  394. <span>{getNewOrderType(theData.orderType)}</span>
  395. </FormItem>
  396. <FormItem
  397. className="half-item"
  398. {...formItemLayout}
  399. label="结算状态"
  400. >
  401. <span>
  402. {getLiquidationStatus(theData.liquidationStatus)}
  403. </span>
  404. </FormItem>
  405. <FormItem
  406. className="half-item"
  407. {...formItemLayout}
  408. label="签单总金额(万元)"
  409. >
  410. <span>{theData.totalAmount}</span>
  411. </FormItem>
  412. <FormItem
  413. className="half-item"
  414. {...formItemLayout}
  415. label="首付款(万元)"
  416. >
  417. <span>{theData.firstAmount}</span>
  418. </FormItem>
  419. <FormItem
  420. className="half-item"
  421. {...formItemLayout}
  422. label="已收款(万元)"
  423. >
  424. <span>{theData.settlementAmount}</span>
  425. </FormItem>
  426. <FormItem
  427. className="half-item"
  428. {...formItemLayout}
  429. label="是否特批"
  430. >
  431. <span>{getApproval(theData.approval)}</span>
  432. </FormItem>
  433. <FormItem
  434. className="half-item"
  435. {...formItemLayout}
  436. label="是否外包"
  437. >
  438. <span>{this.state.outsource}</span>
  439. </FormItem>
  440. {this.props.data.orderStatus == "6" && (
  441. <FormItem
  442. className="half-item"
  443. {...formItemLayout}
  444. label="已退(万元)"
  445. >
  446. <span>{this.props.data.refundAmount}</span>
  447. </FormItem>
  448. )}
  449. </div>
  450. <div className="clearfix">
  451. <FormItem
  452. labelCol={{ span: 5 }}
  453. wrapperCol={{ span: 18 }}
  454. label="合同扫描件"
  455. >
  456. <Upload
  457. className="demandDetailShow-upload"
  458. listType="picture-card"
  459. fileList={this.state.orgCodeUrl}
  460. onPreview={file => {
  461. this.setState({
  462. previewImage: file.url || file.thumbUrl,
  463. previewVisible: true
  464. });
  465. }}
  466. ></Upload>
  467. <Modal
  468. maskClosable={false}
  469. footer={null}
  470. visible={this.state.previewVisible}
  471. onCancel={() => {
  472. this.setState({ previewVisible: false, rotateDeg: 0 });
  473. }}
  474. >
  475. <div
  476. onClick={this.upImg}
  477. className="up-btn"
  478. style={{
  479. cursor: "pointer",
  480. transition: "all .5s",
  481. opacity: ".2",
  482. width: "41px",
  483. height: "69px",
  484. backgroundColor: "rgba(0,0,0,.5)",
  485. position: "absolute",
  486. top: "50%",
  487. left: 16,
  488. transform: "translateY(-50%)",
  489. zIndex: 1
  490. }}
  491. >
  492. <span
  493. style={{
  494. position: "absolute",
  495. border: "1px solid #fff",
  496. width: "20px",
  497. height: "20px",
  498. left: "60%",
  499. top: "50%",
  500. transform: "translate(-50%, -50%) rotate(45deg)",
  501. borderTop: "none",
  502. borderRight: "none"
  503. }}
  504. ></span>
  505. </div>
  506. <div
  507. onClick={this.rotate}
  508. style={{
  509. textAlign: "center",
  510. lineHeight: "30px",
  511. color: "#000",
  512. cursor: "pointer",
  513. transition: "all .5s",
  514. width: "50px",
  515. height: "30px",
  516. backgroundColor: "white",
  517. position: "absolute",
  518. bottom: "-30",
  519. left: "50%",
  520. transform: "translateX(-50%)",
  521. zIndex: 1,
  522. borderRadius: "5px",
  523. border: "1px solid #ccc"
  524. }}
  525. >
  526. 旋转
  527. </div>
  528. <div
  529. onClick={this.downImg}
  530. className="up-btn"
  531. style={{
  532. cursor: "pointer",
  533. transition: "all .5s",
  534. opacity: ".2",
  535. width: "41px",
  536. height: "69px",
  537. backgroundColor: "rgba(0,0,0,.5)",
  538. position: "absolute",
  539. top: "50%",
  540. right: 16,
  541. transform: "translateY(-50%)",
  542. zIndex: 1
  543. }}
  544. >
  545. <span
  546. style={{
  547. position: "absolute",
  548. border: "1px solid #fff",
  549. width: "20px",
  550. height: "20px",
  551. left: "40%",
  552. top: "50%",
  553. transform: "translate(-50%, -50%) rotate(225deg)",
  554. borderTop: "none",
  555. borderRight: "none"
  556. }}
  557. ></span>
  558. </div>
  559. <img
  560. alt=""
  561. style={{
  562. width: "100%",
  563. transform: `rotate(${this.state.rotateDeg}deg)`
  564. }}
  565. src={this.state.previewImage || ""}
  566. />
  567. </Modal>
  568. <Button
  569. style={{
  570. float: "right",
  571. marginRight: "140px",
  572. marginTop: "20px"
  573. }}
  574. onClick={this.getOrderLog}
  575. >
  576. 查看订单日志
  577. </Button>
  578. </FormItem>
  579. </div>
  580. <div className="clearfix">
  581. <FormItem
  582. className="half-item"
  583. {...formItemLayout}
  584. label="合同编号"
  585. >
  586. <span>{theData.contractNo}</span>
  587. </FormItem>
  588. <FormItem
  589. className="half-item"
  590. {...formItemLayout}
  591. label="订单部门"
  592. >
  593. <span>{theData.depName}</span>
  594. </FormItem>
  595. </div>
  596. <div className="clearfix">
  597. <FormItem
  598. labelCol={{ span: 5 }}
  599. wrapperCol={{ span: 18 }}
  600. label="订单留言"
  601. >
  602. <p style={{ maxWidth: 500, wordWrap: "break-word" }}>
  603. {this.state.orderRemarks}
  604. </p>
  605. </FormItem>
  606. </div>
  607. <div className="clearfix">
  608. <FormItem
  609. labelCol={{ span: 5 }}
  610. wrapperCol={{ span: 18 }}
  611. label="收款节点"
  612. >
  613. {jsDate.map(item => {
  614. return (
  615. <p>
  616. {getjiedian(item.dunSubject)} -- {item.money} 万元
  617. </p>
  618. );
  619. })}
  620. </FormItem>
  621. </div>
  622. <div className="clearfix">
  623. <FormItem
  624. className="half-item"
  625. {...formItemLayout}
  626. label="订单负责人"
  627. >
  628. <span>{theData.salesmanName}</span>
  629. </FormItem>
  630. <FormItem
  631. className="half-item"
  632. {...formItemLayout}
  633. label="订单负责人电话"
  634. >
  635. <span>{theData.salesmanMobile}</span>
  636. </FormItem>
  637. <FormItem
  638. className="half-item"
  639. {...formItemLayout}
  640. label="当前财务负责人"
  641. >
  642. <span>{theData.nowFinance}</span>
  643. </FormItem>
  644. <FormItem
  645. className="half-item"
  646. {...formItemLayout}
  647. label="当前财务负责人电话"
  648. >
  649. <span>{theData.nowFinanceMobile}</span>
  650. </FormItem>
  651. <FormItem
  652. className="half-item"
  653. {...formItemLayout}
  654. style={{ opacity: ".5" }}
  655. label="原订单负责人"
  656. >
  657. <span>{theData.oldSalesmanName}</span>
  658. </FormItem>
  659. <FormItem
  660. className="half-item"
  661. {...formItemLayout}
  662. style={{ opacity: ".5" }}
  663. label="原订单负责人电话"
  664. >
  665. <span>{theData.oldSalesmanMobile}</span>
  666. </FormItem>
  667. <FormItem
  668. className="half-item"
  669. {...formItemLayout}
  670. style={{ opacity: ".5" }}
  671. label="实际财务操作人"
  672. >
  673. <span>{theData.financeName}</span>
  674. </FormItem>
  675. <FormItem
  676. className="half-item"
  677. {...formItemLayout}
  678. style={{ opacity: ".5" }}
  679. label="实际财务操作人电话"
  680. >
  681. <span>{theData.financeMobile}</span>
  682. </FormItem>
  683. </div>
  684. <Modal
  685. visible={this.state.avisible}
  686. className="admin-desc-content"
  687. width="800px"
  688. maskClosable={false}
  689. title="订单日志"
  690. footer={null}
  691. onCancel={this.closeOrderLog}
  692. >
  693. <div className="patent-table">
  694. <Spin spinning={this.state.loading}>
  695. <Table
  696. columns={this.state.columnsX}
  697. dataSource={this.state.dataSourceX}
  698. pagination={false}
  699. />
  700. </Spin>
  701. </div>
  702. </Modal>
  703. <div className="clearfix">
  704. <p style={{ fontSize: 18, marginLeft: 20 }}>项目业务</p>
  705. <div className="patent-table">
  706. <Spin spinning={this.state.loading}>
  707. <Table
  708. columns={this.state.columns}
  709. dataSource={this.state.dataSource}
  710. pagination={this.state.pagination}
  711. onRowClick={this.tableRowClick}
  712. />
  713. </Spin>
  714. </div>
  715. </div>
  716. </Spin>
  717. </Form>
  718. </div>
  719. );
  720. }
  721. }));
  722. export default OrderDetail;