orderDetail.jsx 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575
  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. visible: false,
  68. avisible:false,
  69. loading: false,
  70. jsDate:[],
  71. auditStatus: 0,
  72. textFileList: [],
  73. videoFileList: [],
  74. pictureUrl: [],
  75. pictureUrlMin:[],
  76. columns: [
  77. {
  78. title: '业务项目名称',
  79. dataIndex: 'commodityName',
  80. key: 'commodityName',
  81. render:text=>{
  82. return text&&text.length>6?<span title={text}>{text.substr(0,8)}...</span>:text
  83. }
  84. }, {
  85. title: '项目类别',
  86. dataIndex: 'cname',
  87. key: 'cname'
  88. }, {
  89. title: '项目数量(个)',
  90. dataIndex: 'commodityQuantity',
  91. key: 'commodityQuantity'
  92. },{
  93. title: '服务市价(万元)',
  94. dataIndex: 'commodityPrice',
  95. key: 'commodityPrice'
  96. }, {
  97. title: '项目状态',
  98. dataIndex: 'projectStatus',
  99. key: 'projectStatus',
  100. render:text=>{
  101. return getProjectStatus(text);
  102. }
  103. }, {
  104. title: '证书编号',
  105. dataIndex: 'certificateNumber',
  106. key: 'certificateNumber'
  107. }, {
  108. title: '是否主要项目',
  109. dataIndex: 'main',
  110. key: 'main',
  111. render:text=>{
  112. return text?'是':'否'
  113. }
  114. },{
  115. title: '项目说明',
  116. dataIndex: 'taskComment',
  117. key: 'taskComment',
  118. render:text=>{
  119. return text&&text.length>8?<span title={text}>{text.substr(0,8)}...</span>:text
  120. }
  121. }
  122. ],
  123. columnsX:[
  124. {
  125. title:'流程',
  126. dataIndex: 'processName',
  127. key: 'processName'
  128. },
  129. {
  130. title:'操作人',
  131. dataIndex: 'adminName',
  132. key: 'adminName'
  133. },{
  134. title:'时间',
  135. dataIndex: 'createDate',
  136. key: 'createDate'
  137. }
  138. ]
  139. };
  140. },
  141. loadData(record){
  142. this.state.orderList=[];
  143. $.ajax({
  144. method: "get",
  145. dataType: "json",
  146. crossDomain: false,
  147. url: globalConfig.context + '/api/admin/newOrder/getOrderNewDetail',
  148. data: {
  149. orderNo:record?record.orderNo:this.props.data.orderNo
  150. },
  151. success: function (data) {
  152. let thisData = data.data;
  153. if (!thisData) {
  154. if (data.error && data.error.length) {
  155. message.warning(data.error[0].message);
  156. };
  157. thisData = {};
  158. };
  159. this.setState({
  160. id:thisData.id,
  161. orderList:thisData,
  162. approval:thisData.approval==0?thisData.approval.toString():thisData.approval,
  163. orderRemarks:thisData.orderRemarks,
  164. orgCodeUrl: thisData.contractPictureUrl ? splitUrl(thisData.contractPictureUrl, ',', globalConfig.avatarHost + '/upload') : [],
  165. orderNo:thisData.orderNo,//订单编号
  166. buyerId:thisData.buyerId,
  167. depName:thisData.depName,
  168. });
  169. }.bind(this),
  170. }).always(function () {
  171. this.setState({
  172. loading: false
  173. });
  174. }.bind(this));
  175. },
  176. jdDate(record){
  177. $.ajax({
  178. method: "get",
  179. dataType: "json",
  180. crossDomain: false,
  181. url: globalConfig.context + '/api/admin/newOrder/selectOrderDun',
  182. data: {
  183. orderNo:record?record.orderNo:this.props.data.orderNo
  184. },
  185. success: function (data) {
  186. let thisData = data.data;
  187. if (!thisData.length) {
  188. if (data.error && data.error.length) {
  189. message.warning(data.error[0].message);
  190. };
  191. thisData = {};
  192. }else{
  193. this.setState({
  194. jsDate:thisData
  195. })
  196. };
  197. }.bind(this),
  198. }).always(function () {
  199. this.setState({
  200. loading: false
  201. });
  202. }.bind(this));
  203. },
  204. rizhi(){
  205. this.setState({
  206. loading:true
  207. })
  208. $.ajax({
  209. method: "get",
  210. dataType: "json",
  211. crossDomain: false,
  212. url: '/api/admin/newOrder/selectOrderLog',
  213. data: {
  214. orderNo:this.props.data.orderNo
  215. },
  216. success: function (data) {
  217. let theArr = [];
  218. let thisData = data.data;
  219. if (!thisData.length) {
  220. if (data.error && data.error.length) {
  221. message.warning(data.error[0].message);
  222. };
  223. thisData = {};
  224. }else{
  225. for(let i = 0; i < data.data.length; i++) {
  226. let thisdata = data.data[i];
  227. theArr.push({
  228. processName:thisdata.processName,
  229. adminName:thisdata.adminName,
  230. createDate:thisdata.createDate,
  231. });
  232. };
  233. };
  234. this.setState({
  235. dataSourceX: theArr
  236. })
  237. }.bind(this),
  238. }).always(function () {
  239. this.setState({
  240. loading: false
  241. });
  242. }.bind(this));
  243. },
  244. getOrderLog(){
  245. this.setState({
  246. avisible:true
  247. })
  248. this.rizhi()
  249. },
  250. closeOrderLog(){
  251. this.setState({
  252. avisible:false
  253. })
  254. },
  255. getPictureUrl(e) {
  256. this.setState({ pictureUrl: e });
  257. },
  258. componentWillMount() {
  259. if (this.props.data.orderNo) {
  260. this.loadData();
  261. this.loadXmu();
  262. this.jdDate();
  263. } else {
  264. this.state.data = {};
  265. };
  266. },
  267. componentWillReceiveProps(nextProps) {
  268. if (!this.props.visible && nextProps.visible) {
  269. this.state.textFileList = [];
  270. this.state.videoFileList = [];
  271. if (nextProps.data.orderNo) {
  272. this.loadData(nextProps.data);
  273. this.loadXmu(nextProps.data);
  274. this.jdDate(nextProps.data);
  275. } else {
  276. this.state.data = {};
  277. this.state.pictureUrl = [];
  278. this.state.pictureUrlMin=[];
  279. };
  280. this.props.form.resetFields();
  281. };
  282. },
  283. render() {
  284. const theData = this.state.orderList || {};
  285. const FormItem = Form.Item
  286. const formItemLayout = {
  287. labelCol: { span: 10 },
  288. wrapperCol: { span: 12 },
  289. };
  290. const jsDate = this.state.jsDate || [];
  291. return (
  292. <div className="login">
  293. <Form layout="horizontal" id="demand-form">
  294. <Spin spinning={this.state.loading}>
  295. <div className="clearfix">
  296. <FormItem
  297. className="half-item"
  298. {...formItemLayout}
  299. label="订单编号"
  300. >
  301. <span>{theData.orderNo}</span>
  302. </FormItem>
  303. <FormItem
  304. className="half-item"
  305. {...formItemLayout}
  306. label="签单时间"
  307. >
  308. <span>{theData.signDate}</span>
  309. </FormItem>
  310. <FormItem
  311. className="half-item"
  312. {...formItemLayout}
  313. label="客户名称"
  314. >
  315. <span>{theData.userName}</span>
  316. </FormItem>
  317. <FormItem
  318. className="half-item"
  319. {...formItemLayout}
  320. label="流转状态"
  321. >
  322. <span>{getProcessStatus(theData.processStatus)}</span>
  323. </FormItem>
  324. <FormItem
  325. className="half-item"
  326. {...formItemLayout}
  327. label="订单类型"
  328. >
  329. <span>{getNewOrderType(theData.orderType)}</span>
  330. </FormItem>
  331. <FormItem
  332. className="half-item"
  333. {...formItemLayout}
  334. label="结算状态"
  335. >
  336. <span>
  337. {getLiquidationStatus(theData.liquidationStatus)}
  338. </span>
  339. </FormItem>
  340. <FormItem
  341. className="half-item"
  342. {...formItemLayout}
  343. label="签单总金额(万元)"
  344. >
  345. <span>{theData.totalAmount}</span>
  346. </FormItem>
  347. <FormItem
  348. className="half-item"
  349. {...formItemLayout}
  350. label="首付款(万元)"
  351. >
  352. <span>{theData.firstAmount}</span>
  353. </FormItem>
  354. <FormItem
  355. className="half-item"
  356. {...formItemLayout}
  357. label="已收款(万元)"
  358. >
  359. <span>{theData.settlementAmount}</span>
  360. </FormItem>
  361. <FormItem
  362. className="half-item"
  363. {...formItemLayout}
  364. label="是否特批"
  365. >
  366. <span>{getApproval(theData.approval)}</span>
  367. </FormItem>
  368. {this.props.data.orderStatus == "6" && (
  369. <FormItem
  370. className="half-item"
  371. {...formItemLayout}
  372. label="已退(万元)"
  373. >
  374. <span>{this.props.data.refundAmount}</span>
  375. </FormItem>
  376. )}
  377. </div>
  378. <div className="clearfix">
  379. <FormItem
  380. labelCol={{ span: 5 }}
  381. wrapperCol={{ span: 18 }}
  382. label="合同扫描件"
  383. >
  384. <Upload
  385. className="demandDetailShow-upload"
  386. listType="picture-card"
  387. fileList={this.state.orgCodeUrl}
  388. onPreview={file => {
  389. this.setState({
  390. previewImage: file.url || file.thumbUrl,
  391. previewVisible: true
  392. });
  393. }}
  394. ></Upload>
  395. <Modal
  396. maskClosable={false}
  397. footer={null}
  398. visible={this.state.previewVisible}
  399. onCancel={() => {
  400. this.setState({ previewVisible: false });
  401. }}
  402. >
  403. <img
  404. alt=""
  405. style={{ width: "100%" }}
  406. src={this.state.previewImage || ""}
  407. />
  408. </Modal>
  409. <Button
  410. style={{
  411. float: "right",
  412. marginRight: "140px",
  413. marginTop: "20px"
  414. }}
  415. onClick={this.getOrderLog}
  416. >
  417. 查看订单日志
  418. </Button>
  419. </FormItem>
  420. </div>
  421. <div className="clearfix">
  422. <FormItem
  423. className="half-item"
  424. {...formItemLayout}
  425. label="合同编号"
  426. >
  427. <span>{theData.contractNo}</span>
  428. </FormItem>
  429. <FormItem
  430. className="half-item"
  431. {...formItemLayout}
  432. label="订单部门"
  433. >
  434. <span>{theData.depName}</span>
  435. </FormItem>
  436. </div>
  437. <div className="clearfix">
  438. <FormItem
  439. labelCol={{ span: 5 }}
  440. wrapperCol={{ span: 18 }}
  441. label="订单留言"
  442. >
  443. <p style={{ width: 500, wordWrap: "break-word" }}>
  444. {this.state.orderRemarks}
  445. </p>
  446. </FormItem>
  447. </div>
  448. <div className="clearfix">
  449. <FormItem
  450. labelCol={{ span: 5 }}
  451. wrapperCol={{ span: 18 }}
  452. label="收款节点"
  453. >
  454. {jsDate.map(item => {
  455. return (
  456. <p>
  457. {getjiedian(item.dunSubject)} -- {item.money} 万元
  458. </p>
  459. );
  460. })}
  461. </FormItem>
  462. </div>
  463. <div className="clearfix">
  464. <FormItem
  465. className="half-item"
  466. {...formItemLayout}
  467. label="订单负责人"
  468. >
  469. <span>{theData.salesmanName}</span>
  470. </FormItem>
  471. <FormItem
  472. className="half-item"
  473. {...formItemLayout}
  474. label="订单负责人电话"
  475. >
  476. <span>{theData.salesmanMobile}</span>
  477. </FormItem>
  478. <FormItem
  479. className="half-item"
  480. {...formItemLayout}
  481. label="当前财务负责人"
  482. >
  483. <span>{theData.nowFinance}</span>
  484. </FormItem>
  485. <FormItem
  486. className="half-item"
  487. {...formItemLayout}
  488. label="当前财务负责人电话"
  489. >
  490. <span>{theData.nowFinanceMobile}</span>
  491. </FormItem>
  492. <FormItem
  493. className="half-item"
  494. {...formItemLayout}
  495. style={{ opacity: ".5" }}
  496. label="原订单负责人"
  497. >
  498. <span>{theData.oldSalesmanName}</span>
  499. </FormItem>
  500. <FormItem
  501. className="half-item"
  502. {...formItemLayout}
  503. style={{ opacity: ".5" }}
  504. label="原订单负责人电话"
  505. >
  506. <span>{theData.oldSalesmanMobile}</span>
  507. </FormItem>
  508. <FormItem
  509. className="half-item"
  510. {...formItemLayout}
  511. style={{ opacity: ".5" }}
  512. label="实际财务操作人"
  513. >
  514. <span>{theData.financeName}</span>
  515. </FormItem>
  516. <FormItem
  517. className="half-item"
  518. {...formItemLayout}
  519. style={{ opacity: ".5" }}
  520. label="实际财务操作人电话"
  521. >
  522. <span>{theData.financeMobile}</span>
  523. </FormItem>
  524. </div>
  525. <Modal
  526. visible={this.state.avisible}
  527. className="admin-desc-content"
  528. width="800px"
  529. maskClosable={false}
  530. title="订单日志"
  531. footer={null}
  532. onCancel={this.closeOrderLog}
  533. >
  534. <div className="patent-table">
  535. <Spin spinning={this.state.loading}>
  536. <Table
  537. columns={this.state.columnsX}
  538. dataSource={this.state.dataSourceX}
  539. pagination={false}
  540. />
  541. </Spin>
  542. </div>
  543. </Modal>
  544. <div className="clearfix">
  545. <p style={{ fontSize: 18, marginLeft: 20 }}>项目业务</p>
  546. <div className="patent-table">
  547. <Spin spinning={this.state.loading}>
  548. <Table
  549. columns={this.state.columns}
  550. dataSource={this.state.dataSource}
  551. pagination={this.state.pagination}
  552. onRowClick={this.tableRowClick}
  553. />
  554. </Spin>
  555. </div>
  556. </div>
  557. </Spin>
  558. </Form>
  559. </div>
  560. );
  561. }
  562. }));
  563. export default OrderDetail;