projectOrderDetaile.jsx 23 KB

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