myService.jsx 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645
  1. import React from 'react';
  2. import ReactDom from 'react-dom';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import { Form,Radio, Icon, Button, Input, Select, Spin, Table, Switch, message, DatePicker, Checkbox ,Modal, Upload ,Popconfirm,Tabs} from 'antd';
  6. import NewService from "./addService.jsx";
  7. import moment from 'moment';
  8. import '../../userMangagement.less';
  9. import {intentProgress,transactionProgress,contractProgress,projectProgress,orderType, orderStage, orderState,paymentState,specially,specialBatchState, projectState,orderChannel, approvedState, lock,paymentMethod,transactionChannel} from '../../../../dataDic.js';
  10. import {
  11. getIntentProgress,
  12. getTransactionProgress,
  13. getProjectState,
  14. getContractProgress,
  15. getProjectProgress,
  16. splitUrl,
  17. getOrderType,
  18. getOrderStage,
  19. getOrderState,
  20. getPaymentState,
  21. getOrderChannel,
  22. getApprovedState,
  23. getLock,
  24. getPaymentMethod,
  25. getTransactionChannel,
  26. ShowModal
  27. } from "../../../../tools.js";
  28. import ShowModalDiv from "@/showModal.jsx";
  29. const {TabPane} = Tabs
  30. const MyService=Form.create()(React.createClass({
  31. loadData(pageNo) {
  32. this.state.data = [];
  33. this.setState({
  34. loading: true
  35. });
  36. $.ajax({
  37. method: "post",
  38. dataType: "json",
  39. crossDomain: false,
  40. url: globalConfig.context + '/api/admin/order/listServiceOrder',
  41. data: {
  42. pageNo: pageNo || 1,
  43. pageSize: this.state.pagination.pageSize,
  44. buyerName:this.state.customerName,
  45. orderNo:this.state.orderNo,
  46. startDate: this.state.releaseDate[0],
  47. endDate: this.state.releaseDate[1],
  48. projectStage:this.state.projectProgress,
  49. liquidationStatus:this.state.settlementState, //结算
  50. orderStatus:this.state.orderStatusSearch,
  51. approval:this.state.approval,
  52. orderChannel:this.state.orderChannelSearch,
  53. intention:this.state.intentOrder?1:0,
  54. formal:this.state.formalOrder?1:0,
  55. },
  56. success: function (data) {
  57. ShowModal(this);
  58. let theArr = [];
  59. if (!data.data) {
  60. if (data.error && data.error.length) {
  61. message.warning(data.error[0].message);
  62. };
  63. } else {
  64. for (let i = 0; i < data.data.list.length; i++) {
  65. let thisdata = data.data.list[i];
  66. theArr.push({
  67. key: i,
  68. id: thisdata.id,
  69. orderNo: thisdata.orderNo,//订单编号
  70. orderType:thisdata.orderType,//订单类型
  71. orderStatus:thisdata.orderStatus,
  72. liquidationStatus:thisdata.liquidationStatus,
  73. createTime:thisdata.createTime,
  74. buyerName:thisdata.buyerName,
  75. signTotalAmount:thisdata.signTotalAmount,
  76. projectStage:thisdata.projectStage,
  77. approval:thisdata.approval,
  78. orderChannel:thisdata.orderChannel,
  79. salesmanName:thisdata.salesmanName,
  80. active:thisdata.active,
  81. signTime:thisdata.signTime,
  82. financeName:thisdata.financeName
  83. });
  84. };
  85. this.state.pagination.current = data.data.pageNo;
  86. this.state.pagination.total = data.data.totalCount;
  87. };
  88. if(!data.data.list.length){
  89. this.state.pagination.current=0
  90. this.state.pagination.total=0
  91. }
  92. this.setState({
  93. pageNo:pageNo,
  94. dataSource: theArr,
  95. pagination: this.state.pagination,
  96. selectedRowKeys:[],
  97. });
  98. }.bind(this),
  99. }).always(function () {
  100. this.setState({
  101. loading: false
  102. });
  103. }.bind(this));
  104. },
  105. getInitialState() {
  106. return {
  107. datauser:{},
  108. selectedRowKeys: [],
  109. releaseDate: [],
  110. signBillState:false,
  111. signBillVisible:false,
  112. selectedRows: [],
  113. searchMore: true,
  114. loading: false,
  115. intentOrder:true,
  116. formalOrder:true,
  117. pagination: {
  118. defaultCurrent: 1,
  119. defaultPageSize: 10,
  120. showQuickJumper: true,
  121. pageSize: 10,
  122. onChange: function (page) {
  123. this.loadData(page);
  124. }.bind(this),
  125. showTotal: function (total) {
  126. return '共' + total + '条数据';
  127. }
  128. },
  129. columns: [
  130. {
  131. title: '订单编号',
  132. dataIndex: 'orderNo',
  133. key: 'orderNo'
  134. }, {
  135. title: '订单类型',
  136. dataIndex: 'orderType',
  137. key: 'orderType',
  138. render:text=>{return getOrderType(text)}
  139. }, {
  140. title: '下单时间',
  141. dataIndex: 'createTime',
  142. key: 'createTime'
  143. },{
  144. title: '签单时间',
  145. dataIndex: 'signTime',
  146. key: 'signTime'
  147. },{
  148. title: '订单客户',
  149. dataIndex: 'buyerName',
  150. key: 'buyerName',
  151. render:(text)=>{
  152. return (text&&text.length>8?text.substr(0,8)+'...':text)
  153. }
  154. }, {
  155. title: '实际下单金额(万元)',
  156. dataIndex: 'signTotalAmount',
  157. key: 'signTotalAmount'
  158. },{
  159. title: '结算状态',
  160. dataIndex: 'liquidationStatus',
  161. key: 'liquidationStatus',
  162. render:text=>{return getPaymentState(text)}
  163. }, {
  164. title: '订单状态',
  165. dataIndex: 'orderStatus',
  166. key: 'orderStatus',
  167. render:text=>{return getOrderState(text)}
  168. }, {
  169. title: '项目状态',
  170. dataIndex: 'projectStage',
  171. key: 'projectStage',
  172. render:text=>{return getProjectState(text)}
  173. }, {
  174. title: '是否特批',
  175. dataIndex: 'approval',
  176. key: 'approval',
  177. render:text=>{return getApprovedState(text)}
  178. },{
  179. title: '订单渠道',
  180. dataIndex: 'orderChannel',
  181. key: 'orderChannel',
  182. render:text=>{return getOrderChannel(text)}
  183. },{
  184. title: '订单负责人',
  185. dataIndex: 'salesmanName',
  186. key: 'salesmanName'
  187. },{
  188. title: '财务负责人',
  189. dataIndex: 'financeName',
  190. key: 'financeName'
  191. },
  192. {
  193. title: '操作',
  194. dataIndex: 'active',
  195. key: 'active',
  196. render: (text, record, index) => {
  197. return <div>
  198. {text.confirmIntention&&<Popconfirm title={'请确认您是否受理来自【'+record.buyerName+'】发起的服务意向订单?'} onConfirm={(e)=>{this.admissibleOrderOk(record)}} onCancel={(e)=>{this.admissibleOrderCancel(record)}} okText="同意" cancelText="拒绝">
  199. <Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation()}} type="primary">受理意向</Button>
  200. </Popconfirm>}
  201. {/*{text.applySign&&<Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation(),this.signBill(record)}} type="primary">签单</Button> } */}
  202. {text.applyForCancel&&<Popconfirm title={'请确认您是否取消客户【'+record.buyerName+'】的服务订单,订单取消将导致业务终止!'} onConfirm={(e)=>{this.cancelOrder(record)}} okText="确认" cancelText="取消">
  203. <Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation()}} type="danger">取消订单</Button>
  204. </Popconfirm>}
  205. {text.applyRevoke&&<Popconfirm title={'请确认您是否作废客户【'+record.buyerName+'】的服务订单,订单作废将导致订单失效!'} onConfirm={(e)=>{this.scrapOrder(record)}} okText="确认" cancelText="取消">
  206. <Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation()}} type="danger">作废</Button>
  207. </Popconfirm>}
  208. {text.applyLock &&<Popconfirm title={'请确认您是否锁定客户【'+record.buyerName+'】的服务订单,订单锁定将导致订单暂停!'} onConfirm={(e)=>{this.lockOrder(record)}} okText="确认" cancelText="取消">
  209. <Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation()}} type="danger">锁定<Icon type="lock" /></Button>
  210. </Popconfirm>}
  211. {text.agreeRefund &&<Popconfirm title={'请确认您是否同意客户【'+record.buyerName+'】的退款?'} onConfirm={(e)=>{this.refundOk(record)}} okText="确认" cancelText="取消">
  212. <Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation()}} type="primary">同意退款</Button>
  213. </Popconfirm>}
  214. {text.refuseRefund &&<Popconfirm title={'请确认您是否拒绝客户【'+record.buyerName+'】的退款?'} onConfirm={(e)=>{this.refundCancel(record)}} okText="确认" cancelText="取消">
  215. <Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation()}} type="danger">拒绝退款</Button>
  216. </Popconfirm>}
  217. {text.applyUnLock&&<Popconfirm title={'请确认您是否解锁客户【'+record.buyerName+'】的服务订单,订单解锁将导致订单正常!'} onConfirm={(e)=>{this.unlockOrder(record)}} okText="确认" cancelText="取消">
  218. <Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation()}} type="primary">解锁<Icon type="unlock" /></Button>
  219. </Popconfirm>}
  220. </div>
  221. }
  222. }
  223. ],
  224. dataSource: [],
  225. };
  226. },
  227. //是否退款
  228. refundCancel(record){
  229. this.refund(record,0)
  230. },
  231. refundOk(record){
  232. this.refund(record,1)
  233. },
  234. refund(record,index){
  235. this.setState({
  236. signBillVisible:false,
  237. selectedRowKeys: [],
  238. loading: true,
  239. userDetaile:false
  240. });
  241. $.ajax({
  242. method: "get",
  243. dataType: "json",
  244. crossDomain: false,
  245. url: globalConfig.context + '/api/admin/order/confirmRefund',
  246. data: {
  247. orderNo:record.orderNo,
  248. confirm:index
  249. }
  250. }).done(function (data) {
  251. if (!data.error.length) {
  252. message.success('操作成功!');
  253. this.setState({
  254. loading: false,
  255. showDesc:false
  256. });
  257. }
  258. this.loadData(this.state.pageNo);
  259. }.bind(this));
  260. },
  261. //受理订单
  262. admissibleOrderOk(e){
  263. this.admissibleOrder(e,true)
  264. },
  265. admissibleOrderCancel(e){
  266. this.admissibleOrder(e,false)
  267. },
  268. admissibleOrder(record,index) {
  269. this.setState({
  270. signBillVisible:false,
  271. selectedRowKeys: [],
  272. loading: true,
  273. userDetaile:false
  274. });
  275. $.ajax({
  276. method: "POST",
  277. dataType: "json",
  278. crossDomain: false,
  279. url: globalConfig.context + '/api/admin/order/confirmIntention',
  280. data: {
  281. orderNo:record.orderNo,
  282. confirm:index
  283. }
  284. }).done(function (data) {
  285. if (!data.error.length) {
  286. message.success('操作成功!');
  287. this.setState({
  288. loading: false,
  289. showDesc:false
  290. });
  291. } else {
  292. message.warning(data.error[0].message);
  293. this.setState({
  294. showDesc:true
  295. })
  296. };
  297. this.loadData(this.state.pageNo);
  298. }.bind(this));
  299. },
  300. //取消订单
  301. cancelOrder(e){
  302. this.operation(e,3)
  303. },
  304. //作废订单
  305. scrapOrder(e){
  306. this.operation(e,2)
  307. },
  308. //锁定订单
  309. lockOrder(e){
  310. this.operation(e,0)
  311. },
  312. //解锁订单
  313. unlockOrder(e){
  314. this.operation(e,1)
  315. },
  316. //签单
  317. signBill(ids){
  318. this.setState({
  319. uid:ids,
  320. signBillVisible:true
  321. })
  322. },
  323. componentWillMount() {
  324. this.loadData();
  325. let data=localStorage.getItem('newData');
  326. if(data!='{}'&&data){
  327. var newData = JSON.parse(data);
  328. this.tableRowClick(newData);
  329. };
  330. },
  331. tableRowClick(record, index) {
  332. this.state.userDetaile=true;
  333. this.state.datauser = record;
  334. this.setState({
  335. signBillVisible:false,
  336. signBillState:true,
  337. showDesc: true
  338. });
  339. localStorage.setItem('newData','{}');
  340. },
  341. //列表各种骚操作
  342. operation(record,index) {
  343. this.setState({
  344. selectedRowKeys: [],
  345. loading: true,
  346. showDesc:false
  347. });
  348. $.ajax({
  349. method: "get",
  350. dataType: "json",
  351. crossDomain: false,
  352. url: globalConfig.context + '/api/admin/order/lockOrRevokeOrder',
  353. data: {
  354. orderNo:record.orderNo,
  355. operatorType:index
  356. }
  357. }).done(function (data) {
  358. if (!data.error.length) {
  359. message.success('操作成功!');
  360. this.setState({
  361. loading: false,
  362. });
  363. } else {
  364. message.warning(data.error[0].message);
  365. };
  366. this.loadData(this.state.pageNo);
  367. }.bind(this));
  368. },
  369. addClick() {
  370. this.state.userDetaile=false;
  371. this.setState({
  372. signBillVisible:false,
  373. showDesc: true
  374. });
  375. },
  376. closeDesc(e, s) {
  377. this.state.userDetaile=false;
  378. this.state.signBillVisible=false;
  379. this.state.showDesc = e;
  380. if (s) {
  381. this.loadData(this.state.pageNo);
  382. };
  383. },
  384. searchSwitch() {
  385. this.setState({
  386. signBillVisible:false,
  387. searchMore: !this.state.searchMore
  388. });
  389. },
  390. search() {
  391. this.setState({
  392. signBillVisible:false
  393. })
  394. this.loadData();
  395. },
  396. reset() {
  397. this.setState({
  398. signBillVisible:false
  399. })
  400. this.state.orderNo='';
  401. this.state.customerName='';
  402. this.state.releaseDate[0] = undefined;
  403. this.state.releaseDate[1] = undefined;
  404. this.state.projectProgress = undefined;
  405. this.state.settlementState = undefined;
  406. this.state.orderStatusSearch = undefined;
  407. this.state.orderChannelSearch = undefined;
  408. this.state.approval= undefined;
  409. this.state.formalOrder=true;
  410. this.state.intentOrder=true;
  411. this.loadData();
  412. },
  413. render() {
  414. const FormItem = Form.Item;
  415. const formItemLayout = {
  416. labelCol: { span: 8 },
  417. wrapperCol: { span: 14 },
  418. };
  419. const rowSelection = {
  420. selectedRowKeys: this.state.selectedRowKeys,
  421. onChange: (selectedRowKeys, selectedRows) => {
  422. this.setState({
  423. selectedRows: selectedRows.slice(-1),
  424. selectedRowKeys: selectedRowKeys.slice(-1)
  425. });
  426. },
  427. onSelectAll: (selected, selectedRows, changeRows) => {
  428. this.setState({
  429. selectedRowKeys:[]
  430. })
  431. },
  432. };
  433. const hasSelected = this.state.selectedRowKeys.length > 0;
  434. const { RangePicker } = DatePicker;
  435. return (
  436. <div className="user-content">
  437. <ShowModalDiv ShowModal={this.state.showModal} />
  438. <div className="content-title">
  439. <span style={{ fontSize: "16px" }}>科技服务订单</span>
  440. <Tabs
  441. defaultActiveKey="1"
  442. onChange={this.callback}
  443. className="test">
  444. <TabPane tab="搜索" key="1">
  445. <div className="user-search">
  446. <Input
  447. placeholder="客户名称"
  448. style={{ width: "150px",marginLeft:10}}
  449. value={this.state.customerName}
  450. onChange={e => {
  451. this.setState({ customerName: e.target.value });
  452. }}
  453. />
  454. <Input
  455. placeholder="订单编号"
  456. style={{ width: "150px" }}
  457. value={this.state.orderNo}
  458. onChange={e => {
  459. this.setState({ orderNo: e.target.value });
  460. }}
  461. />
  462. <RangePicker
  463. value={[
  464. this.state.releaseDate[0]
  465. ? moment(this.state.releaseDate[0])
  466. : null,
  467. this.state.releaseDate[1]
  468. ? moment(this.state.releaseDate[1])
  469. : null
  470. ]}
  471. onChange={(data, dataString) => {
  472. this.setState({ releaseDate: dataString });
  473. }}
  474. />
  475. <Select
  476. placeholder="特批筛选"
  477. style={{ width: 150, marginLeft: "10px" }}
  478. value={this.state.approval}
  479. onChange={e => {
  480. this.setState({ approval: e });
  481. }}
  482. >
  483. {specially.map(function(item) {
  484. return (
  485. <Select.Option key={item.value}>{item.key}</Select.Option>
  486. );
  487. })}
  488. </Select>
  489. <Button
  490. type="primary"
  491. onClick={this.search}
  492. style={{ marginLeft: "10px" }}
  493. >
  494. 搜索
  495. <Icon type="search" />
  496. </Button>
  497. <Button onClick={this.reset}>
  498. 重置 <Icon type="reload" />
  499. </Button>
  500. <span style={{ marginLeft: "10px", marginRight: "20px" }}>
  501. 更多搜索
  502. <Switch defaultChecked={false} onChange={this.searchSwitch} />
  503. </span>
  504. </div>
  505. <div className="clearfix" style={{ marginTop: "5px",marginLeft:10 }}>
  506. <div
  507. className="search-more"
  508. style={this.state.searchMore ? { display: "none" } : {}}
  509. >
  510. <Checkbox
  511. checked={this.state.intentOrder}
  512. onChange={e => {
  513. this.setState({ intentOrder: !this.state.intentOrder });
  514. }}
  515. >
  516. 意向订单
  517. </Checkbox>
  518. <Checkbox
  519. checked={this.state.formalOrder}
  520. onChange={e => {
  521. this.setState({ formalOrder: !this.state.formalOrder });
  522. }}
  523. >
  524. 正式订单
  525. </Checkbox>
  526. <Select
  527. placeholder="订单状态"
  528. style={{
  529. width: 150,
  530. marginRight: "10px",
  531. marginBottom: "10px"
  532. }}
  533. value={this.state.orderStatusSearch}
  534. onChange={e => {
  535. this.setState({ orderStatusSearch: e });
  536. }}
  537. >
  538. {orderState.map(function(item) {
  539. return (
  540. <Select.Option key={item.value}>
  541. {item.key}
  542. </Select.Option>
  543. );
  544. })}
  545. </Select>
  546. <Select
  547. placeholder="结算状态"
  548. style={{ width: 150, marginRight: "10px" }}
  549. value={this.state.settlementState}
  550. onChange={e => {
  551. this.setState({ settlementState: e });
  552. }}
  553. >
  554. {paymentState.map(function(item) {
  555. return (
  556. <Select.Option key={item.value}>
  557. {item.key}
  558. </Select.Option>
  559. );
  560. })}
  561. </Select>
  562. <Select
  563. placeholder="项目进度"
  564. style={{ width: 150, marginRight: "10px" }}
  565. value={this.state.projectProgress}
  566. onChange={e => {
  567. this.setState({ projectProgress: e });
  568. }}
  569. >
  570. {projectState.map(function(item) {
  571. return (
  572. <Select.Option key={item.value}>
  573. {item.key}
  574. </Select.Option>
  575. );
  576. })}
  577. </Select>
  578. <Select
  579. placeholder="订单渠道"
  580. style={{ width: 150 }}
  581. value={this.state.orderChannelSearch}
  582. onChange={e => {
  583. this.setState({ orderChannelSearch: e });
  584. }}
  585. >
  586. {orderChannel.map(function(item) {
  587. return (
  588. <Select.Option key={item.value}>
  589. {item.key}
  590. </Select.Option>
  591. );
  592. })}
  593. </Select>
  594. </div>
  595. </div>
  596. </TabPane>
  597. <TabPane tab="开单" key="2">
  598. <Button
  599. type="primary"
  600. className="addButton"
  601. style={{margin:10,float:"left"}}
  602. onClick={this.addClick}
  603. >
  604. 开单
  605. <Icon type="plus" />
  606. </Button>
  607. </TabPane>
  608. </Tabs>
  609. <div className="patent-table">
  610. <Spin spinning={this.state.loading}>
  611. <Table
  612. columns={this.state.columns}
  613. dataSource={this.state.dataSource}
  614. rowSelection={rowSelection}
  615. pagination={this.state.pagination}
  616. onRowClick={this.tableRowClick}
  617. bordered
  618. size="small"
  619. />
  620. </Spin>
  621. </div>
  622. <NewService
  623. uid={this.state.uid}
  624. signBillVisible={this.state.signBillVisible}
  625. signBillState={this.state.signBillState}
  626. operation={this.operation}
  627. admissibleOrder={this.admissibleOrder}
  628. userDetaile={this.state.userDetaile}
  629. datauser={this.state.datauser}
  630. showDesc={this.state.showDesc}
  631. closeDesc={this.closeDesc}
  632. />
  633. </div>
  634. </div>
  635. );
  636. }
  637. }));
  638. export default MyService;