orderDetail.jsx 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636
  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 });
  456. }}
  457. >
  458. <img
  459. alt=""
  460. style={{
  461. width: "100%",
  462. transform: `rotate(${this.state.rotateDeg}deg)`
  463. }}
  464. src={this.state.previewImage || ""}
  465. />
  466. <Button onClick={this.rotate}>旋转</Button>
  467. <Button onClick={this.upImg}>上一张</Button>
  468. <Button onClick={this.downImg}>下一张</Button>
  469. </Modal>
  470. <Button
  471. style={{
  472. float: "right",
  473. marginRight: "140px",
  474. marginTop: "20px"
  475. }}
  476. onClick={this.getOrderLog}
  477. >
  478. 查看订单日志
  479. </Button>
  480. </FormItem>
  481. </div>
  482. <div className="clearfix">
  483. <FormItem
  484. className="half-item"
  485. {...formItemLayout}
  486. label="合同编号"
  487. >
  488. <span>{theData.contractNo}</span>
  489. </FormItem>
  490. <FormItem
  491. className="half-item"
  492. {...formItemLayout}
  493. label="订单部门"
  494. >
  495. <span>{theData.depName}</span>
  496. </FormItem>
  497. </div>
  498. <div className="clearfix">
  499. <FormItem
  500. labelCol={{ span: 5 }}
  501. wrapperCol={{ span: 18 }}
  502. label="订单留言"
  503. >
  504. <p style={{ width: 500, wordWrap: "break-word" }}>
  505. {this.state.orderRemarks}
  506. </p>
  507. </FormItem>
  508. </div>
  509. <div className="clearfix">
  510. <FormItem
  511. labelCol={{ span: 5 }}
  512. wrapperCol={{ span: 18 }}
  513. label="收款节点"
  514. >
  515. {jsDate.map(item => {
  516. return (
  517. <p>
  518. {getjiedian(item.dunSubject)} -- {item.money} 万元
  519. </p>
  520. );
  521. })}
  522. </FormItem>
  523. </div>
  524. <div className="clearfix">
  525. <FormItem
  526. className="half-item"
  527. {...formItemLayout}
  528. label="订单负责人"
  529. >
  530. <span>{theData.salesmanName}</span>
  531. </FormItem>
  532. <FormItem
  533. className="half-item"
  534. {...formItemLayout}
  535. label="订单负责人电话"
  536. >
  537. <span>{theData.salesmanMobile}</span>
  538. </FormItem>
  539. <FormItem
  540. className="half-item"
  541. {...formItemLayout}
  542. label="当前财务负责人"
  543. >
  544. <span>{theData.nowFinance}</span>
  545. </FormItem>
  546. <FormItem
  547. className="half-item"
  548. {...formItemLayout}
  549. label="当前财务负责人电话"
  550. >
  551. <span>{theData.nowFinanceMobile}</span>
  552. </FormItem>
  553. <FormItem
  554. className="half-item"
  555. {...formItemLayout}
  556. style={{ opacity: ".5" }}
  557. label="原订单负责人"
  558. >
  559. <span>{theData.oldSalesmanName}</span>
  560. </FormItem>
  561. <FormItem
  562. className="half-item"
  563. {...formItemLayout}
  564. style={{ opacity: ".5" }}
  565. label="原订单负责人电话"
  566. >
  567. <span>{theData.oldSalesmanMobile}</span>
  568. </FormItem>
  569. <FormItem
  570. className="half-item"
  571. {...formItemLayout}
  572. style={{ opacity: ".5" }}
  573. label="实际财务操作人"
  574. >
  575. <span>{theData.financeName}</span>
  576. </FormItem>
  577. <FormItem
  578. className="half-item"
  579. {...formItemLayout}
  580. style={{ opacity: ".5" }}
  581. label="实际财务操作人电话"
  582. >
  583. <span>{theData.financeMobile}</span>
  584. </FormItem>
  585. </div>
  586. <Modal
  587. visible={this.state.avisible}
  588. className="admin-desc-content"
  589. width="800px"
  590. maskClosable={false}
  591. title="订单日志"
  592. footer={null}
  593. onCancel={this.closeOrderLog}
  594. >
  595. <div className="patent-table">
  596. <Spin spinning={this.state.loading}>
  597. <Table
  598. columns={this.state.columnsX}
  599. dataSource={this.state.dataSourceX}
  600. pagination={false}
  601. />
  602. </Spin>
  603. </div>
  604. </Modal>
  605. <div className="clearfix">
  606. <p style={{ fontSize: 18, marginLeft: 20 }}>项目业务</p>
  607. <div className="patent-table">
  608. <Spin spinning={this.state.loading}>
  609. <Table
  610. columns={this.state.columns}
  611. dataSource={this.state.dataSource}
  612. pagination={this.state.pagination}
  613. onRowClick={this.tableRowClick}
  614. />
  615. </Spin>
  616. </div>
  617. </div>
  618. </Spin>
  619. </Form>
  620. </div>
  621. );
  622. }
  623. }));
  624. export default OrderDetail;