managementDetaile.jsx 24 KB

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