approveOrderDetaile.jsx 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613
  1. import React from 'react';
  2. import { Icon, Table, Modal, message, Spin, Input, Select, Button, Form ,Upload,Popconfirm,AutoComplete} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import '../../userMangagement.less';
  6. import {getApprovedState,getPaymentState,getOrderState,getProjectState,getOrderChannel,getOrderType,getTransactionChannel ,getTransactionProject } from '../../../../tools.js';
  7. import OrderItemStatus from "../../../../common/orderItemStatus";
  8. //图片组件
  9. const PicturesWall = React.createClass({
  10. getInitialState() {
  11. return {
  12. previewVisible: false,
  13. previewImage: '',
  14. fileList: [],
  15. }
  16. },
  17. handleCancel() {
  18. this.setState({ previewVisible: false })
  19. },
  20. handlePreview(file) {
  21. this.setState({
  22. previewImage: file.url || file.thumbUrl,
  23. previewVisible: true,
  24. });
  25. },
  26. handleChange(info) {
  27. let fileList = info.fileList;
  28. this.setState({ fileList });
  29. this.props.fileList(fileList);
  30. },
  31. componentWillReceiveProps(nextProps) {
  32. this.state.fileList = nextProps.pictureUrl;
  33. },
  34. render() {
  35. const { previewVisible, previewImage, fileList } = this.state;
  36. const uploadButton = (
  37. <div>
  38. <Icon type="plus" />
  39. <div className="ant-upload-text">点击上传</div>
  40. </div>
  41. );
  42. return (
  43. <div style={{display:"inline-block"}}>
  44. <Upload
  45. action={globalConfig.context + "/api/admin/superviser/uploadAdminImg"}
  46. data={{ 'sign': this.props.pictureSign }}
  47. listType="picture-card"
  48. fileList={fileList}
  49. onPreview={this.handlePreview}
  50. onChange={this.handleChange} >
  51. {fileList.length >= 4 ? null : uploadButton}
  52. </Upload>
  53. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  54. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  55. </Modal>
  56. </div>
  57. );
  58. }
  59. });
  60. const ApproveOrderDetaile = Form.create()(React.createClass({
  61. loadData(record) {
  62. this.state.data = [];
  63. this.setState({
  64. loading: true
  65. });
  66. $.ajax({
  67. method: "get",
  68. dataType: "json",
  69. crossDomain: false,
  70. url: globalConfig.context + '/api/admin/order/getOrderCommodity',
  71. data: {
  72. orderNo:record?record.orderNo:this.props.datauser.orderNo
  73. },
  74. success: function (data) {
  75. let theArr = [];
  76. if (!data.data) {
  77. if (data.error && data.error.length) {
  78. message.warning(data.error[0].message);
  79. };
  80. } else {
  81. for (let i = 0; i < data.data.length; i++) {
  82. let thisdata = data.data[i];
  83. theArr.push({
  84. key: i,
  85. id:thisdata.id,
  86. orderNo:thisdata.orderNo,
  87. commodityName:thisdata.commodityName,
  88. commodityType:thisdata.commodityType,
  89. commodityMode:thisdata.commodityMode,
  90. commodityQuantity:thisdata.commodityQuantity,
  91. commodityPrice:thisdata.commodityPrice,
  92. discountPrice:thisdata.discountPrice,
  93. commodityFirstPayment:thisdata.commodityFirstPayment,
  94. createTimes:thisdata.createTimes,
  95. discountFirstPayment:thisdata.discountFirstPayment,
  96. remarks:thisdata.remarks,
  97. });
  98. };
  99. }
  100. this.setState({
  101. dataSource: theArr,
  102. });
  103. }.bind(this),
  104. }).always(function () {
  105. this.setState({
  106. loading: false
  107. });
  108. }.bind(this));
  109. },
  110. getInitialState() {
  111. return {
  112. loading: false,
  113. visible: false,
  114. lookState:true,
  115. orgCodeUrl:[],
  116. lookflowList:[],
  117. checkedKeys: [],
  118. columns: [
  119. {
  120. title: '业务项目名称',
  121. dataIndex: 'commodityName',
  122. key: 'commodityName'
  123. }, {
  124. title: '项目类别',
  125. dataIndex: 'commodityType',
  126. key: 'commodityType',
  127. render:(text)=>{
  128. return (getOrderType(text))
  129. }
  130. },{
  131. title: '项目数量',
  132. dataIndex: 'commodityQuantity',
  133. key: 'commodityQuantity'
  134. }, {
  135. title: '服务市价(万元)',
  136. dataIndex: 'commodityPrice',
  137. key: 'commodityPrice'
  138. }, {
  139. title: '实签价格(万元)',
  140. dataIndex: 'discountPrice',
  141. key: 'discountPrice'
  142. }, {
  143. title: '下单时间',
  144. dataIndex: 'createTimes',
  145. key: 'createTimes'
  146. }, {
  147. title: '项目说明',
  148. dataIndex: 'remarks',
  149. key: 'remarks',
  150. render:(text)=>{
  151. return (text&&text.length>8?text.substr(0,8)+'…':text)
  152. }
  153. }
  154. ],
  155. flowList:[
  156. {
  157. title: '平台流水号',
  158. dataIndex: 'billNo',
  159. key: 'billNo',
  160. }, {
  161. title: '平台流水时间',
  162. dataIndex: 'createTime',
  163. key: 'createTime'
  164. }, {
  165. title: '流水金额(万元)',
  166. dataIndex: 'transactionAmount',
  167. key: 'transactionAmount'
  168. },{
  169. title: '付款人名称',
  170. dataIndex: 'payerName',
  171. key: 'payerName'
  172. }, {
  173. title: '收款人名称',
  174. dataIndex: 'payeeName',
  175. key: 'payeeName'
  176. },
  177. {
  178. title: '流水科目',
  179. dataIndex: 'transactionSubject',
  180. key: 'transactionSubject',
  181. render:(text)=>{return getTransactionProject(text) }
  182. }, {
  183. title: '流水渠道',
  184. dataIndex: 'transactionChannel',
  185. key: 'transactionChannel',
  186. render:(text)=>{return getTransactionChannel(text) }
  187. },{
  188. title: '财务流水号',
  189. dataIndex: 'financialPayNo',
  190. key: 'financialPayNo',
  191. }, {
  192. title: '财务流水时间',
  193. dataIndex: 'financialPayTime',
  194. key: 'financialPayTime',
  195. }, {
  196. title: '流水确认',
  197. dataIndex: 'confirmSign',
  198. key: 'confirmSign',
  199. render:(text)=>{return text?'已确认':'待确认' }
  200. },{
  201. title: '确认时间',
  202. dataIndex: 'confirmTime',
  203. key: 'confirmTime',
  204. }
  205. ]
  206. };
  207. },
  208. //查看基本详情基本信息
  209. loaduser(record){
  210. if(record){
  211. this.state.orderList=[]
  212. $.ajax({
  213. method: "get",
  214. dataType: "json",
  215. crossDomain: false,
  216. url: globalConfig.context + '/api/admin/order/getServiceOrderDetail',
  217. data: {
  218. orderNo: record.orderNo
  219. },
  220. success: function (data) {
  221. let thisData = data.data;
  222. if (!thisData) {
  223. if (data.error && data.error.length) {
  224. message.warning(data.error[0].message);
  225. };
  226. thisData = {};
  227. };
  228. this.setState({
  229. id:thisData.id,
  230. orderList:thisData,
  231. orderAmount:thisData.orderAmount,
  232. firstPayment:thisData.firstPayment,
  233. signTotalAmount:thisData.signTotalAmount,
  234. signFirstPayment:thisData.signFirstPayment,
  235. approval:thisData.approval==0?thisData.approval.toString():thisData.approval,
  236. orderRemarks:thisData.orderRemarks,
  237. orgCodeUrl: thisData.orgCodeUrl ? splitUrl(thisData.orgCodeUrl, ',', globalConfig.avatarHost + '/upload') : [],
  238. //签单
  239. orderNo:thisData.orderNo,//订单编号
  240. buyerName:thisData.buyerName,
  241. });
  242. }.bind(this),
  243. }).always(function () {
  244. this.setState({
  245. loading: false
  246. });
  247. }.bind(this));
  248. }
  249. },
  250. handleOk(e) {
  251. this.setState({
  252. visible: false,
  253. });
  254. this.props.closeDesc(false, true);
  255. },
  256. handleCancel(e) {
  257. this.setState({
  258. visible: false,
  259. });
  260. this.props.closeDesc(false);
  261. },
  262. nextCancel() {
  263. this.setState({
  264. addnextVisible: false
  265. })
  266. },
  267. //订单详情
  268. xiangqings(record) {
  269. $.ajax({
  270. method: "get",
  271. dataType: "json",
  272. crossDomain: false,
  273. url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail",
  274. data: {
  275. orderNo: record?record.orderNo:this.props.datauser.orderNo,
  276. },
  277. success: function (data) {
  278. let thisdata = data.data;
  279. if (data.error.length || data.data.list == "") {
  280. if (data.error && data.error.length) {
  281. message.warning(data.error[0].message);
  282. }
  283. } else {
  284. this.setState({
  285. deleteSign:thisdata.deleteSign,
  286. });
  287. }
  288. }.bind(this),
  289. }).always(
  290. function () {
  291. }.bind(this)
  292. );
  293. },
  294. lookflow(){
  295. this.setState({
  296. loading: true,
  297. lookVisible:true,
  298. })
  299. this.state.lookSource=[];
  300. $.ajax({
  301. method: "get",
  302. dataType: "json",
  303. crossDomain: false,
  304. url: globalConfig.context +'/api/admin/order/getBillByOrderNo',
  305. data: {
  306. orderNo:this.props.datauser.orderNo,
  307. },
  308. success: function (data) {
  309. let theArr = [];
  310. if (!data.data) {
  311. if (data.error && data.error.length) {
  312. message.warning(data.error[0].message);
  313. };
  314. } else {
  315. for (let i = 0; i < data.data.length; i++) {
  316. let thisdata = data.data[i];
  317. theArr.push({
  318. key: i,
  319. billNo: thisdata.billNo,
  320. transactionAmount:thisdata.transactionAmount,
  321. createTime:thisdata.createTime,
  322. transactionAmount:thisdata.transactionAmount,
  323. payerName:thisdata.payerName,
  324. payeeName:thisdata.payeeName,
  325. transactionSubject:thisdata.transactionSubject,
  326. transactionChannel:thisdata.transactionChannel,
  327. financialPayNo:thisdata.financialPayNo,
  328. financialPayTime:thisdata.financialPayTime,
  329. orderNo:thisdata.orderNo,
  330. departmentName:thisdata.departmentName,
  331. salesmanName:thisdata.salesmanName,
  332. financeName:thisdata.financeName,
  333. confirmSign:thisdata.confirmSign,
  334. deleteSign:thisdata.deleteSign,
  335. confirmTime:thisdata.confirmTime
  336. });
  337. };
  338. };
  339. this.setState({
  340. lookflowList: theArr,
  341. });
  342. }.bind(this),
  343. }).always(function () {
  344. this.setState({
  345. loading: false
  346. });
  347. }.bind(this));
  348. },
  349. lookCancel(){
  350. this.setState({
  351. lookVisible:false
  352. })
  353. },
  354. tableRowClick(record, index) {
  355. this.setState({
  356. editFw:record,
  357. addnextVisible:true,
  358. });
  359. },
  360. componentWillMount() {
  361. },
  362. componentWillReceiveProps(nextProps) { //props改变时触发
  363. this.state.visible = nextProps.showDesc;
  364. if(nextProps.userDetaile && nextProps.showDesc ) {
  365. this.loaduser(nextProps.datauser);
  366. this.loadData(nextProps.datauser);
  367. this.xiangqings(nextProps.datauser)
  368. }
  369. },
  370. render() {
  371. const FormItem = Form.Item
  372. const formItemLayout = {
  373. labelCol: { span: 8 },
  374. wrapperCol: { span: 14 },
  375. };
  376. const editFws=this.state.editFw || [];
  377. const orderDetaiel=this.state.orderList || [];
  378. return(
  379. <div>
  380. <Modal maskClosable={false} visible={this.state.visible}
  381. onOk={this.handleOk} onCancel={this.handleCancel}
  382. width='1000px'
  383. title='订单详情'
  384. footer=''
  385. className="admin-desc-content">
  386. <Form layout="horizontal" id="demand-form" style={{paddingBottom:'40px'}} >
  387. <Spin spinning={this.state.loading}>
  388. <div className="clearfix">
  389. <div className="clearfix">
  390. <div style={{position:"absolute",top:'-52px',left:'81px',zIndex:10000}}>
  391. <OrderItemStatus deleteSign={this.state.deleteSign}/>
  392. </div>
  393. <FormItem className="half-item"
  394. {...formItemLayout}
  395. label="订单编号" >
  396. <span>{orderDetaiel.orderNo}</span>
  397. </FormItem>
  398. <FormItem className="half-item"
  399. {...formItemLayout}
  400. label="下单时间" >
  401. <span>{orderDetaiel.createTime}</span>
  402. </FormItem>
  403. <FormItem className="half-item"
  404. {...formItemLayout}
  405. label="客户名称" >
  406. <span>{orderDetaiel.buyerName}</span>
  407. </FormItem>
  408. <FormItem className="half-item"
  409. {...formItemLayout}
  410. label="订单类型" >
  411. <span>{getOrderType(orderDetaiel.orderType)}</span>
  412. </FormItem>
  413. <FormItem className="half-item"
  414. {...formItemLayout}
  415. label="订单渠道" >
  416. <span>{getOrderChannel(orderDetaiel.orderChannel)}</span>
  417. </FormItem>
  418. <FormItem className="half-item"
  419. {...formItemLayout}
  420. label="订单状态" >
  421. <span>{getOrderState(orderDetaiel.orderStatus)}</span>
  422. </FormItem>
  423. <FormItem className="half-item"
  424. {...formItemLayout}
  425. label="已收款项" >
  426. <span>{orderDetaiel.actuallyTotalAmount+'万元'}</span>
  427. </FormItem>
  428. <FormItem className="half-item"
  429. {...formItemLayout}
  430. label="结算状态" >
  431. <span>{getPaymentState(orderDetaiel.liquidationStatus)}</span>
  432. </FormItem>
  433. <FormItem className="half-item"
  434. {...formItemLayout}
  435. label="市价订单金额" >
  436. <span>{orderDetaiel.orderAmount+'万元'}</span>
  437. </FormItem>
  438. <FormItem className="half-item"
  439. {...formItemLayout}
  440. label="市价首款金额" >
  441. <span>{orderDetaiel.firstPayment+'万元'}</span>
  442. </FormItem>
  443. <div className='clearfix'>
  444. <FormItem className="half-item"
  445. {...formItemLayout}
  446. label="实签订单金额" >
  447. <span>{orderDetaiel.signTotalAmount+'万元'}</span>
  448. </FormItem>
  449. <FormItem className="half-item"
  450. {...formItemLayout}
  451. label="实签首款金额" >
  452. <span>{orderDetaiel.signFirstPayment+'万元'}</span>
  453. </FormItem>
  454. <FormItem className="half-item"
  455. {...formItemLayout}
  456. label="特批立项" >
  457. <span>{getApprovedState(orderDetaiel.approval)}</span>
  458. </FormItem>
  459. <FormItem className="half-item"
  460. {...formItemLayout}
  461. label="合同编号" >
  462. <span>{orderDetaiel.contractNo}</span>
  463. </FormItem>
  464. <div className='clearfix'>
  465. <FormItem
  466. labelCol={{ span: 4 }}
  467. wrapperCol={{ span: 16 }}
  468. label="订单留言" >
  469. <span>{orderDetaiel.orderRemarks}</span>
  470. </FormItem>
  471. </div>
  472. </div>
  473. </div>
  474. <div className='clearfix'>
  475. <FormItem className="half-item"
  476. {...formItemLayout}
  477. label="订单负责人" >
  478. <span>{orderDetaiel.salesmanName}</span>
  479. </FormItem>
  480. <FormItem className="half-item"
  481. {...formItemLayout}
  482. label="业务品类" >
  483. <span>{orderDetaiel.projectType}</span>
  484. </FormItem>
  485. </div>
  486. <div className='clearfix'>
  487. <FormItem className="half-item"
  488. {...formItemLayout}
  489. label="意向时间" >
  490. <span>{orderDetaiel.createTime}</span>
  491. </FormItem>
  492. <FormItem className="half-item"
  493. {...formItemLayout}
  494. label="签单时间" >
  495. <span>{orderDetaiel.signTime}</span>
  496. </FormItem>
  497. <FormItem className="half-item"
  498. {...formItemLayout}
  499. label="财务负责人" >
  500. <span>{orderDetaiel.financeName}</span>
  501. <Button onClick={this.lookflow} style={{float:'right'}}>查看流水</Button>
  502. </FormItem>
  503. <FormItem className="half-item"
  504. {...formItemLayout}
  505. label="项目负责人" >
  506. <span>{orderDetaiel.technicianName}</span>
  507. </FormItem>
  508. <FormItem className="half-item"
  509. {...formItemLayout}
  510. label="立项时间" >
  511. <span>{orderDetaiel.setUpTime}</span>
  512. </FormItem>
  513. <FormItem className="half-item"
  514. {...formItemLayout}
  515. label="项目状态" >
  516. <span>{getProjectState(orderDetaiel.projectStage)}</span>
  517. </FormItem>
  518. </div>
  519. <div>
  520. <span style={{marginLeft:'50px',fontSize:'20px'}}>业务项目</span>
  521. </div>
  522. <div className="patent-table">
  523. <Spin spinning={this.state.loading}>
  524. <Table size="middle" columns={this.state.columns}
  525. dataSource={this.state.dataSource}
  526. pagination={false}
  527. onRowClick={this.tableRowClick}
  528. />
  529. </Spin>
  530. </div>
  531. </div>
  532. </Spin>
  533. </Form >
  534. </Modal>
  535. <Modal maskClosable={false} visible={this.state.addnextVisible}
  536. onOk={this.nextCancel} onCancel={this.nextCancel}
  537. width='550px'
  538. title='查看项目详细'
  539. footer=''
  540. className="admin-desc-content">
  541. <Form layout="horizontal" id="demand-form">
  542. <Spin spinning={this.state.loading}>
  543. <div className="clearfix">
  544. <FormItem className="half-item"
  545. {...formItemLayout}
  546. label="业务项目名称" >
  547. <span>{editFws.commodityName}</span>
  548. </FormItem>
  549. <FormItem className="half-item"
  550. {...formItemLayout}
  551. label="服务市价" >
  552. <span>{editFws.commodityPrice+'万元'}</span>
  553. </FormItem>
  554. <FormItem className="half-item"
  555. {...formItemLayout}
  556. label="实签价格" >
  557. <span>{editFws.discountPrice+'万元'}</span>
  558. </FormItem>
  559. <FormItem className="half-item"
  560. {...formItemLayout}
  561. label="服务数量" >
  562. <span>{editFws.commodityQuantity}</span>
  563. </FormItem>
  564. <FormItem className="half-item"
  565. {...formItemLayout}
  566. label="市场首付金额" >
  567. <span>{editFws.commodityFirstPayment+'万元'}</span>
  568. </FormItem>
  569. <FormItem className="half-item"
  570. {...formItemLayout}
  571. label="签单首付金额" >
  572. <span>{editFws.discountFirstPayment+'万元'}</span>
  573. </FormItem>
  574. <div className='clearfix'>
  575. <FormItem
  576. labelCol={{ span: 4 }}
  577. wrapperCol={{ span: 16 }}
  578. label="项目说明" >
  579. <span>{editFws.remarks}</span>
  580. </FormItem>
  581. </div>
  582. </div>
  583. </Spin>
  584. </Form >
  585. </Modal>
  586. <Modal maskClosable={false} visible={this.state.lookVisible}
  587. onOk={this.lookCancel} onCancel={this.lookCancel}
  588. width='1300px'
  589. title= '查看流水'
  590. footer=''
  591. className="admin-desc-content">
  592. <Form layout="horizontal" id="demand-form">
  593. <Spin spinning={this.state.loading}>
  594. <div className="clearfix">
  595. <Table size="middle" columns={this.state.flowList}
  596. dataSource={this.state.lookflowList}
  597. pagination={false}
  598. />
  599. </div>
  600. </Spin>
  601. </Form >
  602. </Modal>
  603. </div>
  604. )
  605. }
  606. }));
  607. export default ApproveOrderDetaile;