orderDetail.jsx 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717
  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:thisData.approval==0?thisData.approval.toString():thisData.approval,
  180. orderRemarks:thisData.orderRemarks,
  181. orgCodeUrl: thisData.contractPictureUrl ? splitUrl(thisData.contractPictureUrl, ',', globalConfig.avatarHost + '/upload') : [],
  182. orderNo:thisData.orderNo,//订单编号
  183. buyerId:thisData.buyerId,
  184. depName:thisData.depName,
  185. });
  186. }.bind(this),
  187. }).always(function () {
  188. this.setState({
  189. loading: false
  190. });
  191. }.bind(this));
  192. },
  193. jdDate(record){
  194. $.ajax({
  195. method: "get",
  196. dataType: "json",
  197. crossDomain: false,
  198. url: globalConfig.context + '/api/admin/newOrder/selectOrderDun',
  199. data: {
  200. orderNo:record?record.orderNo:this.props.data.orderNo
  201. },
  202. success: function (data) {
  203. let thisData = data.data;
  204. if (!thisData.length) {
  205. if (data.error && data.error.length) {
  206. message.warning(data.error[0].message);
  207. };
  208. thisData = {};
  209. }else{
  210. this.setState({
  211. jsDate:thisData
  212. })
  213. };
  214. }.bind(this),
  215. }).always(function () {
  216. this.setState({
  217. loading: false
  218. });
  219. }.bind(this));
  220. },
  221. rizhi(){
  222. this.setState({
  223. loading:true
  224. })
  225. $.ajax({
  226. method: "get",
  227. dataType: "json",
  228. crossDomain: false,
  229. url: '/api/admin/newOrder/selectOrderLog',
  230. data: {
  231. orderNo:this.props.data.orderNo
  232. },
  233. success: function (data) {
  234. let theArr = [];
  235. let thisData = data.data;
  236. if (!thisData.length) {
  237. if (data.error && data.error.length) {
  238. message.warning(data.error[0].message);
  239. };
  240. thisData = {};
  241. }else{
  242. for(let i = 0; i < data.data.length; i++) {
  243. let thisdata = data.data[i];
  244. theArr.push({
  245. processName:thisdata.processName,
  246. adminName:thisdata.adminName,
  247. createDate:thisdata.createDate,
  248. });
  249. };
  250. };
  251. this.setState({
  252. dataSourceX: theArr
  253. })
  254. }.bind(this),
  255. }).always(function () {
  256. this.setState({
  257. loading: false
  258. });
  259. }.bind(this));
  260. },
  261. getOrderLog(){
  262. this.setState({
  263. avisible:true
  264. })
  265. this.rizhi()
  266. },
  267. closeOrderLog(){
  268. this.setState({
  269. avisible:false
  270. })
  271. },
  272. getPictureUrl(e) {
  273. this.setState({ pictureUrl: e });
  274. },
  275. componentWillMount() {
  276. if (this.props.data.orderNo) {
  277. this.loadData();
  278. this.loadXmu();
  279. this.jdDate();
  280. } else {
  281. this.state.data = {};
  282. };
  283. },
  284. componentWillReceiveProps(nextProps) {
  285. if (!this.props.visible && nextProps.visible) {
  286. this.state.textFileList = [];
  287. this.state.videoFileList = [];
  288. if (nextProps.data.orderNo) {
  289. this.loadData(nextProps.data);
  290. this.loadXmu(nextProps.data);
  291. this.jdDate(nextProps.data);
  292. } else {
  293. this.state.data = {};
  294. this.state.pictureUrl = [];
  295. this.state.pictureUrlMin=[];
  296. };
  297. this.props.form.resetFields();
  298. };
  299. },
  300. downImg() {
  301. let num = 0;
  302. for (let i = 0; i < this.state.orgCodeUrl.length; i++) {
  303. if (this.state.orgCodeUrl[i].url == this.state.previewImage) {
  304. num = i;
  305. }
  306. }
  307. if (num == this.state.orgCodeUrl.length - 1) {
  308. return message.warning("已经是最后一张了哦");
  309. }
  310. this.state.previewImage = this.state.orgCodeUrl[num + 1].url;
  311. this.setState({
  312. previewImage: this.state.previewImage,
  313. rotateDeg: 0
  314. });
  315. },
  316. upImg() {
  317. let num = 0;
  318. for (let i = 0; i < this.state.orgCodeUrl.length; i++) {
  319. if (this.state.orgCodeUrl[i].url == this.state.previewImage) {
  320. num = i;
  321. }
  322. }
  323. if (num == 0) {
  324. return message.warning("已经是第一张了哦");
  325. }
  326. this.state.previewImage = this.state.orgCodeUrl[num - 1].url;
  327. this.setState({
  328. previewImage: this.state.previewImage,
  329. rotateDeg: 0
  330. });
  331. },
  332. rotate() {
  333. let rotateDeg = this.state.rotateDeg + 90;
  334. this.setState({
  335. rotateDeg
  336. });
  337. },
  338. render() {
  339. const theData = this.state.orderList || {};
  340. const FormItem = Form.Item
  341. const formItemLayout = {
  342. labelCol: { span: 10 },
  343. wrapperCol: { span: 12 },
  344. };
  345. const jsDate = this.state.jsDate || [];
  346. return (
  347. <div className="login">
  348. <Form layout="horizontal" id="demand-form">
  349. <Spin spinning={this.state.loading}>
  350. <div className="clearfix">
  351. <FormItem
  352. className="half-item"
  353. {...formItemLayout}
  354. label="订单编号"
  355. >
  356. <span>{theData.orderNo}</span>
  357. </FormItem>
  358. <FormItem
  359. className="half-item"
  360. {...formItemLayout}
  361. label="签单时间"
  362. >
  363. <span>{theData.signDate}</span>
  364. </FormItem>
  365. <FormItem
  366. className="half-item"
  367. {...formItemLayout}
  368. label="客户名称"
  369. >
  370. <span>{theData.userName}</span>
  371. </FormItem>
  372. <FormItem
  373. className="half-item"
  374. {...formItemLayout}
  375. label="流转状态"
  376. >
  377. <span>{getProcessStatus(theData.processStatus)}</span>
  378. </FormItem>
  379. <FormItem
  380. className="half-item"
  381. {...formItemLayout}
  382. label="订单类型"
  383. >
  384. <span>{getNewOrderType(theData.orderType)}</span>
  385. </FormItem>
  386. <FormItem
  387. className="half-item"
  388. {...formItemLayout}
  389. label="结算状态"
  390. >
  391. <span>
  392. {getLiquidationStatus(theData.liquidationStatus)}
  393. </span>
  394. </FormItem>
  395. <FormItem
  396. className="half-item"
  397. {...formItemLayout}
  398. label="签单总金额(万元)"
  399. >
  400. <span>{theData.totalAmount}</span>
  401. </FormItem>
  402. <FormItem
  403. className="half-item"
  404. {...formItemLayout}
  405. label="首付款(万元)"
  406. >
  407. <span>{theData.firstAmount}</span>
  408. </FormItem>
  409. <FormItem
  410. className="half-item"
  411. {...formItemLayout}
  412. label="已收款(万元)"
  413. >
  414. <span>{theData.settlementAmount}</span>
  415. </FormItem>
  416. <FormItem
  417. className="half-item"
  418. {...formItemLayout}
  419. label="是否特批"
  420. >
  421. <span>{getApproval(theData.approval)}</span>
  422. </FormItem>
  423. {this.props.data.orderStatus == "6" && (
  424. <FormItem
  425. className="half-item"
  426. {...formItemLayout}
  427. label="已退(万元)"
  428. >
  429. <span>{this.props.data.refundAmount}</span>
  430. </FormItem>
  431. )}
  432. </div>
  433. <div className="clearfix">
  434. <FormItem
  435. labelCol={{ span: 5 }}
  436. wrapperCol={{ span: 18 }}
  437. label="合同扫描件"
  438. >
  439. <Upload
  440. className="demandDetailShow-upload"
  441. listType="picture-card"
  442. fileList={this.state.orgCodeUrl}
  443. onPreview={file => {
  444. this.setState({
  445. previewImage: file.url || file.thumbUrl,
  446. previewVisible: true
  447. });
  448. }}
  449. ></Upload>
  450. <Modal
  451. maskClosable={false}
  452. footer={null}
  453. visible={this.state.previewVisible}
  454. onCancel={() => {
  455. this.setState({ previewVisible: false, rotateDeg: 0 });
  456. }}
  457. >
  458. <div
  459. onClick={this.upImg}
  460. className="up-btn"
  461. style={{
  462. cursor: "pointer",
  463. transition: "all .5s",
  464. opacity: ".2",
  465. width: "41px",
  466. height: "69px",
  467. backgroundColor: "rgba(0,0,0,.5)",
  468. position: "absolute",
  469. top: "50%",
  470. left: 16,
  471. transform: "translateY(-50%)",
  472. zIndex: 1
  473. }}
  474. >
  475. <span
  476. style={{
  477. position: "absolute",
  478. border: "1px solid #fff",
  479. width: "20px",
  480. height: "20px",
  481. left: "60%",
  482. top: "50%",
  483. transform: "translate(-50%, -50%) rotate(45deg)",
  484. borderTop: "none",
  485. borderRight: "none"
  486. }}
  487. ></span>
  488. </div>
  489. <div
  490. onClick={this.rotate}
  491. style={{
  492. textAlign: "center",
  493. lineHeight: "30px",
  494. color: "#000",
  495. cursor: "pointer",
  496. transition: "all .5s",
  497. width: "50px",
  498. height: "30px",
  499. backgroundColor: "white",
  500. position: "absolute",
  501. bottom: "-30",
  502. left: "50%",
  503. transform: "translateX(-50%)",
  504. zIndex: 1,
  505. borderRadius: "5px",
  506. border: "1px solid #ccc"
  507. }}
  508. >
  509. 旋转
  510. </div>
  511. <div
  512. onClick={this.downImg}
  513. className="up-btn"
  514. style={{
  515. cursor: "pointer",
  516. transition: "all .5s",
  517. opacity: ".2",
  518. width: "41px",
  519. height: "69px",
  520. backgroundColor: "rgba(0,0,0,.5)",
  521. position: "absolute",
  522. top: "50%",
  523. right: 16,
  524. transform: "translateY(-50%)",
  525. zIndex: 1
  526. }}
  527. >
  528. <span
  529. style={{
  530. position: "absolute",
  531. border: "1px solid #fff",
  532. width: "20px",
  533. height: "20px",
  534. left: "40%",
  535. top: "50%",
  536. transform: "translate(-50%, -50%) rotate(225deg)",
  537. borderTop: "none",
  538. borderRight: "none"
  539. }}
  540. ></span>
  541. </div>
  542. <img
  543. alt=""
  544. style={{
  545. width: "100%",
  546. transform: `rotate(${this.state.rotateDeg}deg)`
  547. }}
  548. src={this.state.previewImage || ""}
  549. />
  550. </Modal>
  551. <Button
  552. style={{
  553. float: "right",
  554. marginRight: "140px",
  555. marginTop: "20px"
  556. }}
  557. onClick={this.getOrderLog}
  558. >
  559. 查看订单日志
  560. </Button>
  561. </FormItem>
  562. </div>
  563. <div className="clearfix">
  564. <FormItem
  565. className="half-item"
  566. {...formItemLayout}
  567. label="合同编号"
  568. >
  569. <span>{theData.contractNo}</span>
  570. </FormItem>
  571. <FormItem
  572. className="half-item"
  573. {...formItemLayout}
  574. label="订单部门"
  575. >
  576. <span>{theData.depName}</span>
  577. </FormItem>
  578. </div>
  579. <div className="clearfix">
  580. <FormItem
  581. labelCol={{ span: 5 }}
  582. wrapperCol={{ span: 18 }}
  583. label="订单留言"
  584. >
  585. <p style={{ maxWidth: 500, wordWrap: "break-word" }}>
  586. {this.state.orderRemarks}
  587. </p>
  588. </FormItem>
  589. </div>
  590. <div className="clearfix">
  591. <FormItem
  592. labelCol={{ span: 5 }}
  593. wrapperCol={{ span: 18 }}
  594. label="收款节点"
  595. >
  596. {jsDate.map(item => {
  597. return (
  598. <p>
  599. {getjiedian(item.dunSubject)} -- {item.money} 万元
  600. </p>
  601. );
  602. })}
  603. </FormItem>
  604. </div>
  605. <div className="clearfix">
  606. <FormItem
  607. className="half-item"
  608. {...formItemLayout}
  609. label="订单负责人"
  610. >
  611. <span>{theData.salesmanName}</span>
  612. </FormItem>
  613. <FormItem
  614. className="half-item"
  615. {...formItemLayout}
  616. label="订单负责人电话"
  617. >
  618. <span>{theData.salesmanMobile}</span>
  619. </FormItem>
  620. <FormItem
  621. className="half-item"
  622. {...formItemLayout}
  623. label="当前财务负责人"
  624. >
  625. <span>{theData.nowFinance}</span>
  626. </FormItem>
  627. <FormItem
  628. className="half-item"
  629. {...formItemLayout}
  630. label="当前财务负责人电话"
  631. >
  632. <span>{theData.nowFinanceMobile}</span>
  633. </FormItem>
  634. <FormItem
  635. className="half-item"
  636. {...formItemLayout}
  637. style={{ opacity: ".5" }}
  638. label="原订单负责人"
  639. >
  640. <span>{theData.oldSalesmanName}</span>
  641. </FormItem>
  642. <FormItem
  643. className="half-item"
  644. {...formItemLayout}
  645. style={{ opacity: ".5" }}
  646. label="原订单负责人电话"
  647. >
  648. <span>{theData.oldSalesmanMobile}</span>
  649. </FormItem>
  650. <FormItem
  651. className="half-item"
  652. {...formItemLayout}
  653. style={{ opacity: ".5" }}
  654. label="实际财务操作人"
  655. >
  656. <span>{theData.financeName}</span>
  657. </FormItem>
  658. <FormItem
  659. className="half-item"
  660. {...formItemLayout}
  661. style={{ opacity: ".5" }}
  662. label="实际财务操作人电话"
  663. >
  664. <span>{theData.financeMobile}</span>
  665. </FormItem>
  666. </div>
  667. <Modal
  668. visible={this.state.avisible}
  669. className="admin-desc-content"
  670. width="800px"
  671. maskClosable={false}
  672. title="订单日志"
  673. footer={null}
  674. onCancel={this.closeOrderLog}
  675. >
  676. <div className="patent-table">
  677. <Spin spinning={this.state.loading}>
  678. <Table
  679. columns={this.state.columnsX}
  680. dataSource={this.state.dataSourceX}
  681. pagination={false}
  682. />
  683. </Spin>
  684. </div>
  685. </Modal>
  686. <div className="clearfix">
  687. <p style={{ fontSize: 18, marginLeft: 20 }}>项目业务</p>
  688. <div className="patent-table">
  689. <Spin spinning={this.state.loading}>
  690. <Table
  691. columns={this.state.columns}
  692. dataSource={this.state.dataSource}
  693. pagination={this.state.pagination}
  694. onRowClick={this.tableRowClick}
  695. />
  696. </Spin>
  697. </div>
  698. </div>
  699. </Spin>
  700. </Form>
  701. </div>
  702. );
  703. }
  704. }));
  705. export default OrderDetail;