projectOrderDetaile.jsx 23 KB

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