mySettlementDetaile.jsx 24 KB

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