managementDetaile.jsx 24 KB

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