projectOrderDetaile.jsx 22 KB

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