approveOrderDetaile.jsx 25 KB

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