mySettlement.jsx 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  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, Modal, Upload ,Popconfirm} from 'antd';
  6. import MySettlementDetaile from "./mySettlementDetaile.jsx";
  7. import moment from 'moment';
  8. import '../userMangagement.less';
  9. import {lvl,intentProgress,transactionProgress,contractProgress,projectProgress} from '../../../dataDic.js';
  10. import {getIntentProgress,getTransactionProgress,getContractProgress,getProjectProgress} from '../../../tools.js';
  11. const MySettlement=Form.create()(React.createClass({
  12. loadData(pageNo) {
  13. this.state.data = [];
  14. this.setState({
  15. loading: true
  16. });
  17. $.ajax({
  18. method: "post",
  19. dataType: "json",
  20. crossDomain: false,
  21. url: globalConfig.context + '/api/admin/roles',
  22. data: {
  23. pageNo: pageNo || 1,
  24. pageSize: this.state.pagination.pageSize,
  25. customerName:this.state.customerName,
  26. startDate: this.state.releaseDate[0],
  27. endDate: this.state.releaseDate[1],
  28. transactionProgress:this.state.transactionProgress,
  29. contractProgress:this.state.contractProgress,
  30. projectProgress:this.state.projectProgress,
  31. settlementState:this.state.settlementState,
  32. orderStatus:this.state.orderStatus,
  33. approved:this.state.approved,
  34. orderChannel:this.state.orderChannel,
  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. roleName: thisdata.roleName,
  49. creater:thisdata.creater,
  50. createTime:thisdata.createTimez,
  51. });
  52. };
  53. this.state.pagination.current = data.data.pageNo;
  54. this.state.pagination.total = data.data.totalCount;
  55. };
  56. if(!data.data.list.length){
  57. this.state.pagination.current=0
  58. this.state.pagination.total=0
  59. }
  60. this.setState({
  61. dataSource: theArr,
  62. pagination: this.state.pagination,
  63. selectedRowKeys:[]
  64. });
  65. }.bind(this),
  66. }).always(function () {
  67. this.setState({
  68. loading: false
  69. });
  70. }.bind(this));
  71. },
  72. getInitialState() {
  73. return {
  74. datauser:{},
  75. selectedRowKeys: [],
  76. releaseDate: [],
  77. selectedRows: [],
  78. searchMore: true,
  79. loading: false,
  80. distributionVisible:false,
  81. visible:false,
  82. showDesc:false,
  83. pagination: {
  84. defaultCurrent: 1,
  85. defaultPageSize: 10,
  86. showQuickJumper: true,
  87. pageSize: 10,
  88. onChange: function (page) {
  89. this.loadData(page);
  90. }.bind(this),
  91. showTotal: function (total) {
  92. return '共' + total + '条数据';
  93. }
  94. },
  95. distributionPagination: {
  96. defaultCurrent: 1,
  97. defaultPageSize: 10,
  98. showQuickJumper: true,
  99. pageSize: 10,
  100. onChange: function (page) {
  101. this.contactList(page);
  102. }.bind(this),
  103. showTotal: function (total) {
  104. return '共' + total + '条数据';
  105. }
  106. },
  107. columns: [
  108. {
  109. title: '订单编号',
  110. dataIndex: 'roleName',
  111. key: 'roleName'
  112. }, {
  113. title: '订单类型',
  114. dataIndex: 'creater',
  115. key: 'creater'
  116. }, {
  117. title: '下单时间',
  118. dataIndex: 'creater7',
  119. key: 'creater7'
  120. },{
  121. title: '订单客户',
  122. dataIndex: 'roleName1',
  123. key: 'roleName1'
  124. },
  125. {
  126. title: '实际下单金额',
  127. dataIndex: 'creater1',
  128. key: 'creater1'
  129. }, {
  130. title: '订单状态',
  131. dataIndex: 'createTime1',
  132. key: 'createTime1',
  133. render:(text)=>{return getIntentProgress(text) }
  134. },{
  135. title: '项目进度',
  136. dataIndex: 'roleName2',
  137. key: 'roleName2',
  138. render:(text)=>{return getTransactionProgress(text) }
  139. }, {
  140. title: '结算状态',
  141. dataIndex: 'creater2',
  142. key: 'creater2',
  143. render:(text)=>{return getContractProgress(text) }
  144. },{
  145. title: '是否特批',
  146. dataIndex: 'creater77',
  147. key: 'creater77',
  148. render:(text)=>{return getContractProgress(text) }
  149. },{
  150. title: '订单负责人',
  151. dataIndex: 'creater9',
  152. key: 'creater9',
  153. render:(text)=>{return getContractProgress(text) }
  154. }
  155. ],
  156. dataSource: [],
  157. };
  158. },
  159. //操作分配
  160. confirmDelet(index){
  161. this.setState({
  162. userDetaile:false,
  163. });
  164. this.contactList(1,index.id)
  165. },
  166. //驳回
  167. reject(record){
  168. let api ='api/bohui'
  169. this.confirmSelect(api,record)
  170. },
  171. //确认
  172. confirm(record){
  173. let api='api/quren'
  174. this.confirmSelect(api,record)
  175. },
  176. confirmSelect(api,record){
  177. this.setState({
  178. loading: true
  179. });
  180. $.ajax({
  181. method: "POST",
  182. dataType: "json",
  183. crossDomain: false,
  184. url: globalConfig.context + api,
  185. data: {
  186. id:record.id,
  187. }
  188. }).done(function (data) {
  189. if (!data.error.length) {
  190. message.success('操作成功');
  191. this.setState({
  192. loading: false,
  193. });
  194. } else {
  195. message.warning(data.error[0].message);
  196. };
  197. this.loadData();
  198. }.bind(this));
  199. },
  200. componentWillMount() {
  201. this.loadData();
  202. },
  203. tableRowClick(record, index) {
  204. this.state.userDetaile=true;
  205. this.state.datauser = record;
  206. this.setState({
  207. showDesc: true
  208. });
  209. },
  210. closeDesc(e, s) {
  211. this.state.userDetaile=false;
  212. this.state.showDesc = e;
  213. if (s) {
  214. this.loadData();
  215. };
  216. },
  217. searchSwitch() {
  218. this.setState({
  219. searchMore: !this.state.searchMore
  220. });
  221. },
  222. search() {
  223. this.loadData();
  224. },
  225. //分配时搜索
  226. searchOrder() {
  227. this.contactList();
  228. },
  229. //分配时重置
  230. resetOrder() {
  231. this.contactList();
  232. },
  233. reset() {
  234. this.state.customerName='';
  235. this.state.releaseDate[0] = undefined;
  236. this.state.releaseDate[1] = undefined;
  237. this.state.transactionProgress = undefined;
  238. this.state.contractProgress = undefined;
  239. this.state.projectProgress = undefined;
  240. this.state.settlementState = undefined;
  241. this.state.orderStatus = undefined;
  242. this.state.approved = undefined;
  243. this.state.orderChannel = undefined;
  244. this.loadData();
  245. },
  246. render() {
  247. const rowSelection = {
  248. selectedRowKeys: this.state.selectedRowKeys,
  249. onChange: (selectedRowKeys, selectedRows) => {
  250. this.setState({
  251. selectedRows: selectedRows.slice(-1),
  252. selectedRowKeys: selectedRowKeys.slice(-1)
  253. });
  254. },
  255. onSelectAll: (selected, selectedRows, changeRows) => {
  256. this.setState({
  257. selectedRowKeys:[]
  258. })
  259. },
  260. };
  261. const hasSelected = this.state.selectedRowKeys.length > 0;
  262. const { RangePicker } = DatePicker;
  263. return (
  264. <div className="user-content" >
  265. <div className="content-title">
  266. <span style={{fontSize:'16px'}}>我的结算订单</span>
  267. <div className="user-search">
  268. <Input placeholder="客户名称" style={{width:'150px'}}
  269. value={this.state.customerName}
  270. onChange={(e) => { this.setState({ customerName: e.target.value }); }} />
  271. <RangePicker
  272. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  273. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  274. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  275. <Select placeholder="部门机构"
  276. style={{ width: 150 ,marginRight:'10px',marginLeft:'10px'}}
  277. value={this.state.orderStatus}
  278. onChange={(e) => { this.setState({ orderStatus: e }) }}>
  279. {
  280. lvl.map(function (item) {
  281. return <Select.Option key={item.value} >{item.key}</Select.Option>
  282. })
  283. }
  284. </Select>
  285. <Input placeholder="订单负责人" style={{width:'150px'}}
  286. value={this.state.customerName}
  287. onChange={(e) => { this.setState({ customerName: e.target.value }); }} />
  288. <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
  289. <Button onClick={this.reset}>重置</Button>
  290. <span style={{marginLeft:'10px',marginRight:'20px'}}>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  291. </div>
  292. <div className='clearfix' style={{marginTop:'5px'}}>
  293. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  294. <Select placeholder="订单状态"
  295. style={{ width: 150 ,marginRight:'10px'}}
  296. value={this.state.orderStatus}
  297. onChange={(e) => { this.setState({ orderStatus: e }) }}>
  298. {
  299. lvl.map(function (item) {
  300. return <Select.Option key={item.value} >{item.key}</Select.Option>
  301. })
  302. }
  303. </Select>
  304. <Select placeholder="结算状态"
  305. style={{ width: 150 ,marginRight:'10px'}}
  306. value={this.state.orderStatus}
  307. onChange={(e) => { this.setState({ orderStatus: e }) }}>
  308. {
  309. lvl.map(function (item) {
  310. return <Select.Option key={item.value} >{item.key}</Select.Option>
  311. })
  312. }
  313. </Select>
  314. <Select placeholder="订单渠道"
  315. style={{ width: 150,marginRight:'10px' }}
  316. value={this.state.orderChannel}
  317. onChange={(e) => { this.setState({ orderChannel: e }) }}>
  318. {
  319. lvl.map(function (item) {
  320. return <Select.Option key={item.value} >{item.key}</Select.Option>
  321. })
  322. }
  323. </Select>
  324. </div>
  325. </div>
  326. <div className="patent-table">
  327. <Spin spinning={this.state.loading}>
  328. <Table columns={this.state.columns}
  329. dataSource={this.state.dataSource}
  330. rowSelection={rowSelection}
  331. pagination={this.state.pagination}
  332. onRowClick={this.tableRowClick} />
  333. </Spin>
  334. </div>
  335. <MySettlementDetaile
  336. confirmDelet={this.confirmDelet}
  337. userDetaile={this.state.userDetaile}
  338. datauser={this.state.datauser}
  339. showDesc={this.state.showDesc}
  340. closeDesc={this.closeDesc} />
  341. </div >
  342. </div>
  343. );
  344. }
  345. }));
  346. export default MySettlement;