mySettlement.jsx 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604
  1. "use strict";
  2. import React from 'react';
  3. import ReactDom from 'react-dom';
  4. import ajax from 'jquery/src/ajax/xhr.js';
  5. import $ from 'jquery/src/ajax';
  6. import { Form,Radio, Icon, Button, Input, Select, Spin, Table, Switch, message, DatePicker, Modal, Upload ,Popconfirm} from 'antd';
  7. import MySettlementDetaile from "./mySettlementDetaile.jsx";
  8. import moment from 'moment';
  9. import '../../userMangagement.less';
  10. import {paymentState ,orderChannel,orderState} from '../../../../dataDic.js';
  11. import {getProjectState,getOrderChannel,getOrderType,getOrderState,getPaymentState,getApprovedState} from '../../../../tools.js';
  12. const MySettlement=Form.create()(React.createClass({
  13. loadData(pageNo,depart) {
  14. this.state.data = [];
  15. this.setState({
  16. loading: true
  17. });
  18. $.ajax({
  19. method: "post",
  20. dataType: "json",
  21. crossDomain: false,
  22. url: globalConfig.context + '/api/admin/order/listMySettlement',
  23. data: {
  24. pageNo: pageNo || 1,
  25. pageSize: this.state.pagination.pageSize,
  26. buyerName:this.state.buyerNameSearch,
  27. depId:this.state.departmenttSearch,//部门
  28. salesmanName:this.state.salesmanNameSearch,//负责人
  29. startDate: this.state.releaseDate[0],
  30. endDate: this.state.releaseDate[1],
  31. liquidationStatus:this.state.liquidationStatusSearch, //结算
  32. approval:this.state.orderChannelSearch,//特批
  33. orderNo:this.state.orderNoSearch,
  34. orderStatus:this.state.orderStatusSearch,
  35. },
  36. success: function (data) {
  37. let theArr = [];
  38. if (!data.data) {
  39. if (data.error && data.error.length) {
  40. message.warning(data.error[0].message);
  41. };
  42. } else {
  43. for (let i = 0; i < data.data.list.length; i++) {
  44. let thisdata = data.data.list[i];
  45. theArr.push({
  46. key: i,
  47. id: thisdata.id,
  48. orderNo: thisdata.orderNo,//订单编号
  49. orderType:thisdata.orderType,//订单类型
  50. orderStatus:thisdata.orderStatus,
  51. liquidationStatus:thisdata.liquidationStatus,
  52. createTime:thisdata.createTime,
  53. buyerName:thisdata.buyerName,
  54. signTotalAmount:thisdata.signTotalAmount,
  55. projectStage:thisdata.projectStage,
  56. approval:thisdata.approval,
  57. orderChannel:thisdata.orderChannel,
  58. salesmanName:thisdata.salesmanName,
  59. active:thisdata.active,
  60. departmentName:thisdata.departmentName,
  61. salesmanName:thisdata.salesmanName,
  62. financeName:thisdata.financeName,
  63. technicianName:thisdata.technicianName,
  64. });
  65. };
  66. this.state.pagination.current = data.data.pageNo;
  67. this.state.pagination.total = data.data.totalCount;
  68. };
  69. if(!data.data.list.length){
  70. this.state.pagination.current=0
  71. this.state.pagination.total=0
  72. }
  73. this.setState({
  74. pageNo:pageNo,
  75. dataSource: theArr,
  76. pagination: this.state.pagination,
  77. selectedRowKeys:[],
  78. signBillVisible:false
  79. });
  80. }.bind(this),
  81. }).always(function () {
  82. this.setState({
  83. loading: false
  84. });
  85. }.bind(this));
  86. },
  87. //部门
  88. departmentList() {
  89. this.setState({
  90. loading: true
  91. });
  92. $.ajax({
  93. method: "post",
  94. dataType: "json",
  95. crossDomain: false,
  96. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  97. data: {
  98. },
  99. success: function(data) {
  100. let thedata = data.data;
  101. let theArr=[];
  102. if(!thedata) {
  103. if(data.error && data.error.length) {
  104. message.warning(data.error[0].message);
  105. };
  106. thedata = {};
  107. }else{
  108. thedata.map(function(item,index){
  109. theArr.push({
  110. key:index,
  111. name:item.name,
  112. id:item.id,
  113. })
  114. })
  115. }
  116. this.setState({
  117. departmentArr:theArr,
  118. })
  119. this.loadData('1',theArr);
  120. }.bind(this),
  121. }).always(function() {
  122. this.setState({
  123. loading: false
  124. });
  125. }.bind(this));
  126. },
  127. getInitialState() {
  128. return {
  129. datauser:{},
  130. selectedRowKeys: [],
  131. releaseDate: [],
  132. departmentArr:[],
  133. selectedRows: [],
  134. searchMore: true,
  135. loading: false,
  136. visible:false,
  137. showDesc:false,
  138. pagination: {
  139. defaultCurrent: 1,
  140. defaultPageSize: 10,
  141. showQuickJumper: true,
  142. pageSize: 10,
  143. onChange: function (page) {
  144. this.loadData(page);
  145. }.bind(this),
  146. showTotal: function (total) {
  147. return '共' + total + '条数据';
  148. }
  149. },
  150. columns: [
  151. {
  152. title: '订单编号',
  153. dataIndex: 'orderNo',
  154. key: 'orderNo'
  155. }, {
  156. title: '订单类型',
  157. dataIndex: 'orderType',
  158. key: 'orderType',
  159. render:text=>{return getOrderType(text)}
  160. }, {
  161. title: '下单时间',
  162. dataIndex: 'createTime',
  163. key: 'createTime'
  164. },{
  165. title: '订单客户',
  166. dataIndex: 'buyerName',
  167. key: 'buyerName',
  168. render:(text)=>{
  169. return (text&&text.length>9?text.substr(0,9)+'...':text)
  170. }
  171. }, {
  172. title: '实际下单金额(万元)',
  173. dataIndex: 'signTotalAmount',
  174. key: 'signTotalAmount'
  175. }, {
  176. title: '订单状态',
  177. dataIndex: 'orderStatus',
  178. key: 'orderStatus',
  179. render:(text)=>{return getOrderState(text) }
  180. },{
  181. title: '项目进度',
  182. dataIndex: 'projectStage',
  183. key: 'projectStage',
  184. render:(text)=>{return getProjectState(text) }
  185. }, {
  186. title: '结算状态',
  187. dataIndex: 'liquidationStatus',
  188. key: 'liquidationStatus',
  189. render:text=>{return getPaymentState(text)}
  190. },{
  191. title: '是否特批',
  192. dataIndex: 'approval',
  193. key: 'approval',
  194. render:text=>{return getApprovedState(text)}
  195. },{
  196. title: '订单负责人',
  197. dataIndex: 'salesmanName',
  198. key: 'salesmanName',
  199. },
  200. {
  201. title: '操作',
  202. dataIndex: 'zhifu',
  203. key: 'zhifu',
  204. render:(text,record)=>{
  205. return <div>
  206. <Button onClick={(e) =>{ e.stopPropagation(),this.paymentMoney(record)}} type="primary">支付</Button>
  207. <Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation(),this.confirmDelet(record)}} type="primary">转交</Button>
  208. </div>
  209. }
  210. }
  211. ],
  212. userList:[
  213. {
  214. title: '编号',
  215. dataIndex: 'userNo',
  216. key: 'userNo'
  217. }, {
  218. title: '姓名',
  219. dataIndex: 'name',
  220. key: 'name'
  221. },{
  222. title: '部门机构',
  223. dataIndex: 'departmentName',
  224. key: 'departmentName'
  225. }, {
  226. title: '职务',
  227. dataIndex: 'position',
  228. key: 'position'
  229. },{
  230. title: '联系手机',
  231. dataIndex: 'mobile',
  232. key: 'mobile'
  233. }, {
  234. title: '操作',
  235. dataIndex: 'abc',
  236. key: 'abc',
  237. render:(text,record,index)=>{
  238. return (
  239. <Popconfirm title={'您确认将订单 【'+ this.state.orderNot+'】 转交给【'+record.departmentName+'-'+record.name+'】进行业务跟进?'} onConfirm={(e)=>{this.confirmSelect(record)}} okText="确认" cancelText="取消">
  240. <Button style={{marginRight:'5px'}} type="primary">转交</Button>
  241. </Popconfirm>
  242. )
  243. }
  244. }
  245. ],
  246. dataSource: [],
  247. };
  248. },
  249. //测试用支付
  250. //支付
  251. paymentMoney(record){
  252. this.setState({
  253. kid:record.orderNo,
  254. payment:'',
  255. paymentVisible:true
  256. })
  257. },
  258. paymentCancel(){
  259. this.setState({
  260. paymentVisible:false
  261. })
  262. },
  263. //支付保存
  264. payment(){
  265. if(!this.state.payment){
  266. message.warning('请输入支付金额!');
  267. return;
  268. };
  269. this.setState({
  270. selectedRowKeys: [],
  271. loading: true,
  272. showDesc:false
  273. });
  274. $.ajax({
  275. method: "POST",
  276. dataType: "json",
  277. crossDomain: false,
  278. url: globalConfig.context + '/api/admin/order/testPay',
  279. data: {
  280. orderNo:this.state.kid,
  281. payAmount:this.state.payment
  282. }
  283. }).done(function (data) {
  284. if (!data.error.length) {
  285. message.success('支付成功!');
  286. this.paymentCancel();
  287. this.loadData(this.state.pageNo);
  288. this.setState({
  289. loading: false,
  290. });
  291. } else {
  292. message.warning(data.error[0].message);
  293. };
  294. }.bind(this));
  295. },
  296. componentWillMount() {
  297. this.departmentList();
  298. },
  299. tableRowClick(record, index) {
  300. this.state.userDetaile=true;
  301. this.state.datauser = record;
  302. this.setState({
  303. showDesc: true
  304. });
  305. },
  306. closeDesc(e, s) {
  307. this.state.userDetaile=false;
  308. this.state.showDesc = e;
  309. if (s) {
  310. this.loadData();
  311. };
  312. },
  313. searchSwitch() {
  314. this.setState({
  315. searchMore: !this.state.searchMore
  316. });
  317. },
  318. search() {
  319. this.loadData();
  320. },
  321. //分配时搜索
  322. searchOrder() {
  323. this.contactList();
  324. },
  325. //分配时重置
  326. resetOrder() {
  327. this.setState({
  328. departmenttList:undefined,
  329. financeNameSearch:''
  330. })
  331. },
  332. //操作分配
  333. confirmDelet(index){
  334. this.setState({
  335. orderNot:index.orderNo,
  336. userDetaile:false,
  337. distributionVisible:true
  338. });
  339. },
  340. distributionCancel(){
  341. this.setState({
  342. distributionVisible:false
  343. })
  344. },
  345. distributionOk(){
  346. this.setState({
  347. distributionVisible:false
  348. })
  349. },
  350. //分配对象列表
  351. contactList(){
  352. $.ajax({
  353. method: "get",
  354. dataType: "json",
  355. crossDomain: false,
  356. url: globalConfig.context + '/api/admin/superviser/adminList',
  357. data: {
  358. pageNo: 1,
  359. pageSize: 99,
  360. departmentId:this.state.departmenttList,
  361. name:this.state.financeNameSearch,
  362. },
  363. success: function (data) {
  364. let theArr = [];
  365. if (!data.data) {
  366. if (data.error && data.error.length) {
  367. message.warning(data.error[0].message);
  368. };
  369. } else {
  370. for (let i = 0; i < data.data.list.length; i++) {
  371. let thisdata = data.data.list[i];
  372. theArr.push({
  373. key: i,
  374. id: thisdata.id,
  375. userNo: thisdata.userNo,
  376. name:thisdata.name,
  377. departmentName:thisdata.departmentName,
  378. departmentId:thisdata.departmentId,
  379. position:thisdata.position,
  380. mobile:thisdata.mobile,
  381. });
  382. };
  383. };
  384. this.setState({
  385. distributionList: theArr,
  386. });
  387. }.bind(this),
  388. }).always(function () {
  389. this.setState({
  390. loading: false
  391. });
  392. }.bind(this));
  393. },
  394. //选定对象
  395. confirmSelect(record){
  396. this.setState({
  397. loading: true
  398. });
  399. $.ajax({
  400. method: "POST",
  401. dataType: "json",
  402. crossDomain: false,
  403. url: globalConfig.context + "/api/admin/order/transferOrder",
  404. data: {
  405. orderNo:this.state.orderNot,
  406. aid:record.id,
  407. targetType:1
  408. }
  409. }).done(function (data) {
  410. if (!data.error.length) {
  411. message.success('转交成功!');
  412. this.setState({
  413. loading: false,
  414. });
  415. this.distributionOk();
  416. } else {
  417. message.warning(data.error[0].message);
  418. };
  419. this.loadData(this.state.pageNo);
  420. }.bind(this));
  421. },
  422. reset() {
  423. this.state.buyerNameSearch='';
  424. this.state.orderNoSearch='';
  425. this.state.releaseDate[0] = undefined;
  426. this.state.releaseDate[1] = undefined;
  427. this.state.orderStatusSearch = undefined;
  428. this.state.orderChannelSearch = undefined;
  429. this.state.liquidationStatusSearch = undefined;
  430. this.state.salesmanNameSearch = undefined;
  431. this.state.departmenttSearch = undefined;
  432. this.state.approved = undefined;
  433. this.state.orderChannel = undefined;
  434. this.loadData();
  435. },
  436. render() {
  437. const rowSelection = {
  438. selectedRowKeys: this.state.selectedRowKeys,
  439. onChange: (selectedRowKeys, selectedRows) => {
  440. this.setState({
  441. selectedRows: selectedRows.slice(-1),
  442. selectedRowKeys: selectedRowKeys.slice(-1)
  443. });
  444. },
  445. onSelectAll: (selected, selectedRows, changeRows) => {
  446. this.setState({
  447. selectedRowKeys:[]
  448. })
  449. },
  450. };
  451. let departmentArr = this.state.departmentArr || [];
  452. const hasSelected = this.state.selectedRowKeys.length > 0;
  453. const { RangePicker } = DatePicker;
  454. return (
  455. <div className="user-content" >
  456. <div className="content-title">
  457. <span style={{fontSize:'16px'}}>我的结算订单</span>
  458. <div className="user-search">
  459. <Input placeholder="客户名称" style={{width:'150px'}}
  460. value={this.state.buyerNameSearch}
  461. onChange={(e) => { this.setState({ buyerNameSearch: e.target.value }); }} />
  462. <RangePicker
  463. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  464. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  465. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  466. <Select placeholder="部门机构"
  467. style={{ width: 150 ,marginRight:'10px',marginLeft:'10px'}}
  468. value={this.state.departmenttSearch}
  469. onChange={(e) => { this.setState({ departmenttSearch: e }) }}>
  470. {
  471. departmentArr.map(function (item) {
  472. return <Select.Option key={item.id} >{item.name}</Select.Option>
  473. })
  474. }
  475. </Select>
  476. <Input placeholder="订单负责人" style={{width:'150px'}}
  477. value={this.state.salesmanNameSearch}
  478. onChange={(e) => { this.setState({ salesmanNameSearch: e.target.value }); }} />
  479. <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
  480. <Button onClick={this.reset}>重置</Button>
  481. <span style={{marginLeft:'10px',marginRight:'20px'}}>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  482. </div>
  483. <div className='clearfix' style={{marginTop:'5px'}}>
  484. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  485. <Input placeholder="订单编号" style={{width:'150px',marginRight:'10px'}}
  486. value={this.state.orderNoSearch}
  487. onChange={(e) => { this.setState({ orderNoSearch: e.target.value }); }} />
  488. <Select placeholder="结算状态"
  489. style={{ width: 150 ,marginRight:'10px'}}
  490. value={this.state.liquidationStatusSearch}
  491. onChange={(e) => { this.setState({ liquidationStatusSearch: e }) }}>
  492. {
  493. paymentState.map(function (item) {
  494. return <Select.Option key={item.value} >{item.key}</Select.Option>
  495. })
  496. }
  497. </Select>
  498. <Select placeholder="订单状态"
  499. style={{ width: 150 ,marginRight:'10px'}}
  500. value={this.state.orderStatusSearch}
  501. onChange={(e) => { this.setState({ orderStatusSearch: e }) }}>
  502. {
  503. orderState.map(function (item) {
  504. return <Select.Option key={item.value} >{item.key}</Select.Option>
  505. })
  506. }
  507. </Select>
  508. <Select placeholder="是否特批"
  509. style={{ width: 150,marginRight:'10px',marginBottom:'10px' }}
  510. value={this.state.orderChannelSearch}
  511. onChange={(e) => { this.setState({ orderChannelSearch: e }) }}>
  512. <Select.Option value='0'>非特批</Select.Option>
  513. <Select.Option value='2'>特批通过</Select.Option>
  514. <Select.Option value='3'>特批驳回</Select.Option>
  515. </Select>
  516. </div>
  517. </div>
  518. <div className="patent-table">
  519. <Spin spinning={this.state.loading}>
  520. <Table columns={this.state.columns}
  521. dataSource={this.state.dataSource}
  522. rowSelection={rowSelection}
  523. pagination={this.state.pagination}
  524. onRowClick={this.tableRowClick} />
  525. </Spin>
  526. </div>
  527. <MySettlementDetaile
  528. confirmDelet={this.confirmDelet}
  529. userDetaile={this.state.userDetaile}
  530. datauser={this.state.datauser}
  531. showDesc={this.state.showDesc}
  532. closeDesc={this.closeDesc} />
  533. </div >
  534. <Modal maskClosable={false} visible={this.state.paymentVisible}
  535. onOk={this.paymentCancel} onCancel={this.paymentCancel}
  536. width='600px'
  537. title='支付详情'
  538. footer=''
  539. className="admin-desc-content">
  540. <Form layout="horizontal" id="demand-form">
  541. <Spin spinning={this.state.loading}>
  542. <div className="clearfix">
  543. <Form.Item className="half-middle"
  544. labelCol={{ span: 8 }}
  545. wrapperCol={{ span: 14 }}
  546. label="支付金额(万元)" >
  547. <Input value={this.state.payment} onChange={(e)=>{this.setState({payment:e.target.value})}} style={{width:'150px'}} />
  548. <span className="mandatory">*</span>
  549. </Form.Item>
  550. <Button type="primary" onClick={this.payment} style={{marginRight:'20px',marginLeft:'210px'}}>支付</Button>
  551. <Button onClick={this.paymentCancel}>取消</Button>
  552. </div>
  553. </Spin>
  554. </Form >
  555. </Modal>
  556. <Modal maskClosable={false} visible={this.state.distributionVisible}
  557. onOk={this.distributionOk} onCancel={this.distributionCancel}
  558. width='800px'
  559. title='转交订单'
  560. footer=''
  561. className="admin-desc-content">
  562. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form" style={{paddingBottom:'40px'}} >
  563. <Spin spinning={this.state.loading}>
  564. <div>
  565. <Select placeholder="部门"
  566. style={{ width: 150 ,marginRight:'10px',marginLeft:'10px'}}
  567. value={this.state.departmenttList}
  568. onChange={(e) => { this.setState({ departmenttList: e }) }}>
  569. {
  570. departmentArr.map(function (item) {
  571. return <Select.Option key={item.id} >{item.name}</Select.Option>
  572. })
  573. }
  574. </Select>
  575. <Input placeholder="订单负责人" style={{width:'150px',marginLeft:'10px'}}
  576. value={this.state.financeNameSearch}
  577. onChange={(e) => { this.setState({ financeNameSearch: e.target.value }); }} />
  578. <Button type="primary" onClick={this.searchOrder} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
  579. <Button onClick={this.resetOrder}>重置</Button>
  580. </div>
  581. <div className="patent-table" style={{marginTop:'10px'}}>
  582. <Spin spinning={this.state.loading}>
  583. <Table columns={this.state.userList}
  584. dataSource={this.state.distributionList}
  585. pagination={false}
  586. />
  587. </Spin>
  588. </div>
  589. </Spin>
  590. </Form>
  591. </Modal>
  592. </div>
  593. );
  594. }
  595. }));
  596. export default MySettlement;