publicOrder.jsx 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
  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 PublicOrderDetaile from "./publicOrderDetaile.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 PublicOrder=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. title: '订单金额',
  126. dataIndex: 'c',
  127. key: 'c'
  128. },
  129. {
  130. title: '实际下单金额',
  131. dataIndex: 'creater1',
  132. key: 'creater1'
  133. }, {
  134. title: '意向进度',
  135. dataIndex: 'createTime1',
  136. key: 'createTime1',
  137. render:(text)=>{return getIntentProgress(text) }
  138. },{
  139. title: '交易进度',
  140. dataIndex: 'roleName2',
  141. key: 'roleName2',
  142. render:(text)=>{return getTransactionProgress(text) }
  143. }, {
  144. title: '结算状态',
  145. dataIndex: 'creater2',
  146. key: 'creater2',
  147. render:(text)=>{return getContractProgress(text) }
  148. }, {
  149. title: '订单状态',
  150. dataIndex: 'creatu',
  151. key: 'creatu',
  152. render:(text)=>{return getProjectProgress(text) }
  153. },{
  154. title: '订单渠道',
  155. dataIndex: 'cre',
  156. key: 'cre',
  157. render:(text)=>{return getProjectProgress(text) }
  158. },{
  159. title: '操作',
  160. dataIndex: 'operation',
  161. key: 'operation',
  162. render: (text, record, index) => {
  163. return <div>
  164. <Button style={{marginRight:'5px'}} onClick={(e) =>{ e.stopPropagation(),this.confirmDelet(record)}} type="primary">派单</Button>
  165. </div>
  166. }
  167. }
  168. ],
  169. userList:[
  170. {
  171. title: '用户编号',
  172. dataIndex: 'roleName',
  173. key: 'roleName'
  174. }, {
  175. title: '用户姓名',
  176. dataIndex: 'creater',
  177. key: 'creater'
  178. },{
  179. title: '部门机构',
  180. dataIndex: 'roleName1',
  181. key: 'roleName1'
  182. }, {
  183. title: '职务',
  184. dataIndex: 'creater1',
  185. key: 'creater1'
  186. },{
  187. title: '联系手机',
  188. dataIndex: 'roleName2',
  189. key: 'roleName2'
  190. }, {
  191. title: '操作',
  192. dataIndex: 'abc',
  193. key: 'abc',
  194. render:(text,record,index)=>{
  195. return (
  196. <Popconfirm title={'您确认将此订单 【'+ record.roleName+'】 分配给【'+record.roleName+'-'+record.roleName+'】进行业务跟进?'} onConfirm={(e)=>{this.confirmSelect(record)}} okText="确认" cancelText="取消">
  197. <Button style={{marginRight:'5px'}} type="primary">选定</Button>
  198. </Popconfirm>
  199. )
  200. }
  201. }
  202. ],
  203. dataSource: [],
  204. };
  205. },
  206. //操作分配
  207. confirmDelet(index){
  208. this.setState({
  209. userDetaile:false,
  210. distributionVisible:true
  211. });
  212. this.contactList(1,index.id)
  213. },
  214. distributionCancel(){
  215. this.setState({
  216. distributionVisible:false
  217. })
  218. },
  219. distributionOk(){
  220. this.setState({
  221. distributionVisible:false
  222. })
  223. },
  224. //分配对象列表
  225. contactList(pageNo,orderId){
  226. $.ajax({
  227. method: "post",
  228. dataType: "json",
  229. crossDomain: false,
  230. url: globalConfig.context + '/api/admin/roles',
  231. data: {
  232. pageNo: pageNo || 1,
  233. pageSize: this.state.distributionPagination.pageSize,
  234. },
  235. success: function (data) {
  236. let theArr = [];
  237. if (!data.data) {
  238. if (data.error && data.error.length) {
  239. message.warning(data.error[0].message);
  240. };
  241. } else {
  242. for (let i = 0; i < data.data.list.length; i++) {
  243. let thisdata = data.data.list[i];
  244. theArr.push({
  245. key: i,
  246. id: thisdata.id,
  247. roleName: thisdata.roleName,
  248. creater:thisdata.creater,
  249. createTime:thisdata.createTimez,
  250. uid:orderId,
  251. });
  252. };
  253. this.state.distributionPagination.current = data.data.pageNo;
  254. this.state.distributionPagination.total = data.data.totalCount;
  255. };
  256. if(!data.data.list.length){
  257. this.state.distributionPagination.current=0
  258. this.state.distributionPagination.total=0
  259. }
  260. this.setState({
  261. distributionList: theArr,
  262. pagination: this.state.distributionPagination,
  263. });
  264. }.bind(this),
  265. }).always(function () {
  266. this.setState({
  267. loading: false
  268. });
  269. }.bind(this));
  270. },
  271. //选定对象
  272. confirmSelect(record){
  273. this.setState({
  274. loading: true
  275. });
  276. $.ajax({
  277. method: "POST",
  278. dataType: "json",
  279. crossDomain: false,
  280. url: globalConfig.context + "",
  281. data: {
  282. id:record.id,
  283. uid:record.uid
  284. }
  285. }).done(function (data) {
  286. if (!data.error.length) {
  287. message.success('分配成功');
  288. this.setState({
  289. loading: false,
  290. });
  291. this.distributionOk();
  292. } else {
  293. message.warning(data.error[0].message);
  294. };
  295. this.loadData();
  296. }.bind(this));
  297. },
  298. componentWillMount() {
  299. this.loadData();
  300. },
  301. tableRowClick(record, index) {
  302. this.state.userDetaile=true;
  303. this.state.datauser = record;
  304. this.setState({
  305. showDesc: true
  306. });
  307. },
  308. closeDesc(e, s) {
  309. this.state.userDetaile=false;
  310. this.state.showDesc = e;
  311. if (s) {
  312. this.loadData();
  313. };
  314. },
  315. searchSwitch() {
  316. this.setState({
  317. searchMore: !this.state.searchMore
  318. });
  319. },
  320. search() {
  321. this.loadData();
  322. },
  323. //分配时搜索
  324. searchOrder() {
  325. this.contactList();
  326. },
  327. //分配时重置
  328. resetOrder() {
  329. this.contactList();
  330. },
  331. reset() {
  332. this.state.customerName='';
  333. this.state.releaseDate[0] = undefined;
  334. this.state.releaseDate[1] = undefined;
  335. this.state.transactionProgress = undefined;
  336. this.state.contractProgress = undefined;
  337. this.state.projectProgress = undefined;
  338. this.state.settlementState = undefined;
  339. this.state.orderStatus = undefined;
  340. this.state.approved = undefined;
  341. this.state.orderChannel = undefined;
  342. this.loadData();
  343. },
  344. render() {
  345. const rowSelection = {
  346. selectedRowKeys: this.state.selectedRowKeys,
  347. onChange: (selectedRowKeys, selectedRows) => {
  348. this.setState({
  349. selectedRows: selectedRows.slice(-1),
  350. selectedRowKeys: selectedRowKeys.slice(-1)
  351. });
  352. },
  353. onSelectAll: (selected, selectedRows, changeRows) => {
  354. this.setState({
  355. selectedRowKeys:[]
  356. })
  357. },
  358. };
  359. const hasSelected = this.state.selectedRowKeys.length > 0;
  360. const { RangePicker } = DatePicker;
  361. return (
  362. <div className="user-content" >
  363. <div className="content-title">
  364. <span style={{fontSize:'16px'}}>公共订单</span>
  365. <div className="user-search">
  366. <Input placeholder="客户名称" style={{width:'150px'}}
  367. value={this.state.customerName}
  368. onChange={(e) => { this.setState({ customerName: e.target.value }); }} />
  369. <RangePicker
  370. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  371. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  372. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  373. <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
  374. <Button onClick={this.reset}>重置</Button>
  375. <span style={{marginLeft:'10px',marginRight:'20px'}}>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  376. </div>
  377. <div className='clearfix' style={{marginTop:'5px'}}>
  378. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  379. <Select placeholder="订单状态"
  380. style={{ width: 150 ,marginRight:'10px'}}
  381. value={this.state.orderStatus}
  382. onChange={(e) => { this.setState({ orderStatus: e }) }}>
  383. {
  384. lvl.map(function (item) {
  385. return <Select.Option key={item.value} >{item.key}</Select.Option>
  386. })
  387. }
  388. </Select>
  389. <Select placeholder="订单渠道"
  390. style={{ width: 150,marginRight:'10px' }}
  391. value={this.state.orderChannel}
  392. onChange={(e) => { this.setState({ orderChannel: e }) }}>
  393. {
  394. lvl.map(function (item) {
  395. return <Select.Option key={item.value} >{item.key}</Select.Option>
  396. })
  397. }
  398. </Select>
  399. <Select placeholder="订单类型"
  400. style={{ width: 150 }}
  401. value={this.state.orderChannel}
  402. onChange={(e) => { this.setState({ orderChannel: e }) }}>
  403. {
  404. lvl.map(function (item) {
  405. return <Select.Option key={item.value} >{item.key}</Select.Option>
  406. })
  407. }
  408. </Select>
  409. </div>
  410. </div>
  411. <div className="patent-table">
  412. <Spin spinning={this.state.loading}>
  413. <Table columns={this.state.columns}
  414. dataSource={this.state.dataSource}
  415. rowSelection={rowSelection}
  416. pagination={this.state.pagination}
  417. onRowClick={this.tableRowClick} />
  418. </Spin>
  419. </div>
  420. <PublicOrderDetaile
  421. confirmDelet={this.confirmDelet}
  422. userDetaile={this.state.userDetaile}
  423. datauser={this.state.datauser}
  424. showDesc={this.state.showDesc}
  425. closeDesc={this.closeDesc} />
  426. </div >
  427. <Modal maskClosable={false} visible={this.state.distributionVisible}
  428. onOk={this.distributionOk} onCancel={this.distributionCancel}
  429. width='800px'
  430. title='分派订单'
  431. footer=''
  432. className="admin-desc-content">
  433. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form" style={{paddingBottom:'40px'}} >
  434. <Spin spinning={this.state.loading}>
  435. <div>
  436. <Input placeholder="部门名称" style={{width:'150px'}}
  437. value={this.state.customerName}
  438. onChange={(e) => { this.setState({ customerName: e.target.value }); }} />
  439. <Input placeholder="订单负责人" style={{width:'150px',marginLeft:'10px'}}
  440. value={this.state.customerName}
  441. onChange={(e) => { this.setState({ customerName: e.target.value }); }} />
  442. <Button type="primary" onClick={this.searchOrder} style={{marginLeft:'10px',marginRight:'10px'}}>搜索</Button>
  443. <Button onClick={this.resetOrder}>重置</Button>
  444. </div>
  445. <div className="patent-table" style={{marginTop:'10px'}}>
  446. <Spin spinning={this.state.loading}>
  447. <Table columns={this.state.userList}
  448. dataSource={this.state.distributionList}
  449. pagination={this.state.distributionPagination}
  450. />
  451. </Spin>
  452. </div>
  453. </Spin>
  454. </Form>
  455. </Modal>
  456. </div>
  457. );
  458. }
  459. }));
  460. export default PublicOrder;