orderDetail.jsx 22 KB

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