approveOrderDetaile.jsx 24 KB

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