order.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453
  1. /*
  2. update:2018/07/16
  3. author:liting
  4. */
  5. import React from 'react';
  6. import $ from 'jquery/src/ajax';
  7. import { Form, Button, Input, Select, Spin, Table, message, Modal, Tooltip, Switch, DatePicker } from 'antd';
  8. import { orderType } from '@/dataDic';
  9. import { getOrderType } from '@/tools.js';
  10. import moment from 'moment';
  11. //主体
  12. const Order = Form.create()(
  13. React.createClass({
  14. loadData(pageNo) {
  15. this.state.data = [];
  16. this.setState({
  17. loading: true,
  18. page: pageNo
  19. });
  20. $.ajax({
  21. method: 'get',
  22. dataType: 'json',
  23. crossDomain: false,
  24. url: globalConfig.context + '/portal/service/jtProject/list',
  25. data: {
  26. pageNo: pageNo || 1,
  27. pageSize: this.state.pagination.pageSize,
  28. number: this.state.numberSearch,
  29. type: this.state.typeSearch,
  30. entryName: this.state.entryNameSearch,
  31. companyName: this.state.companyNameSearch,
  32. start: this.state.releaseDate[0],
  33. end: this.state.releaseDate[1]
  34. },
  35. success: function(data) {
  36. let theArr = [];
  37. if (!data.data || !data.data.list) {
  38. if (data.error && data.error.length) {
  39. message.warning(data.error[0].message);
  40. }
  41. } else {
  42. for (let i = 0; i < data.data.list.length; i++) {
  43. let thisdata = data.data.list[i];
  44. theArr.push({
  45. key: i,
  46. id: thisdata.id,
  47. name: thisdata.name,
  48. number: thisdata.number,
  49. createTime: thisdata.createTime ? new Date(thisdata.createTime).toLocaleString() : ''
  50. });
  51. }
  52. this.state.pagination.current = data.data.pageNo;
  53. this.state.pagination.total = data.data.totalCount;
  54. }
  55. this.setState({
  56. dataSource: theArr,
  57. pagination: this.state.pagination
  58. });
  59. }.bind(this)
  60. }).always(
  61. function() {
  62. this.setState({
  63. loading: false
  64. });
  65. }.bind(this)
  66. );
  67. },
  68. getInitialState() {
  69. return {
  70. searchMore: true,
  71. selectedRowKeys: [],
  72. selectedRows: [],
  73. loading: false,
  74. releaseDate: [],
  75. pagination: {
  76. defaultCurrent: 1,
  77. defaultPageSize: 10,
  78. showQuickJumper: true,
  79. pageSize: 10,
  80. onChange: function(page) {
  81. this.loadData(page);
  82. this.setState({
  83. selectedRowKeys: []
  84. });
  85. }.bind(this),
  86. showTotal: function(total) {
  87. return '共' + total + '条数据';
  88. }
  89. },
  90. columns: [
  91. {
  92. title: '订单编号',
  93. dataIndex: 'name',
  94. key: 'bname'
  95. },
  96. {
  97. title: '订单类型',
  98. dataIndex: 'cname',
  99. key: 'cname',
  100. render: (text) => {
  101. return getOrderType(text);
  102. }
  103. },
  104. {
  105. title: '订单日期',
  106. dataIndex: 'superName',
  107. key: 'superName'
  108. },
  109. {
  110. title: '订单金额',
  111. dataIndex: 'price',
  112. key: 'price'
  113. },
  114. {
  115. title: '项目名称',
  116. dataIndex: 'memberPrice',
  117. key: 'memberPrice',
  118. render: (text) => {
  119. return (
  120. <Tooltip title={text}>
  121. {text && text.length > 6 ? text.substr(0, 6) + '...' : text}
  122. </Tooltip>
  123. );
  124. }
  125. },
  126. {
  127. title: '消费者',
  128. dataIndex: 'activityPrice',
  129. key: 'activityPrice',
  130. render: (text) => {
  131. return getOrderType(text);
  132. }
  133. },
  134. {
  135. title: '消费者联系人',
  136. dataIndex: 'activityFlag',
  137. key: 'activityFlag'
  138. },
  139. {
  140. title: '消费者联系方式',
  141. dataIndex: 'activityFlag1',
  142. key: 'activityFlag1'
  143. },
  144. {
  145. title: '服务商',
  146. dataIndex: 'activityFlag12',
  147. key: 'activityFlag12',
  148. render: (text) => {
  149. return (
  150. <Tooltip title={text}>
  151. {text && text.length > 6 ? text.substr(0, 6) + '...' : text}
  152. </Tooltip>
  153. );
  154. }
  155. },{
  156. title: '服务商联系人',
  157. dataIndex: 'activityFlag3',
  158. key: 'activityFlag3'
  159. },
  160. {
  161. title: '服务商联系方式',
  162. dataIndex: 'activityFlag41',
  163. key: 'activityFlag41'
  164. },
  165. ],
  166. dataSource: []
  167. };
  168. },
  169. componentWillMount() {
  170. this.loadData();
  171. },
  172. detailes(recard) {
  173. this.setState({
  174. loading: true
  175. });
  176. $.ajax({
  177. method: 'get',
  178. dataType: 'json',
  179. crossDomain: false,
  180. url: globalConfig.context + '/api/user/jtBusiness/project/detail',
  181. data: {
  182. id: recard.id
  183. },
  184. success: function(data) {
  185. let thisData = data.data;
  186. if (!thisData) {
  187. if (data.error && data.error.length) {
  188. message.warning(data.error[0].message);
  189. }
  190. thisData = {};
  191. }
  192. this.setState({
  193. id: thisData.id,
  194. data: thisData,
  195. createTime: thisData.createTime ? new Date(thisData.createTime).toLocaleString() : ''
  196. });
  197. }.bind(this)
  198. }).always(
  199. function() {
  200. this.setState({
  201. loading: false
  202. });
  203. }.bind(this)
  204. );
  205. },
  206. //项目列表整行点击
  207. tableRowClick(record, index) {
  208. this.state.RowData = record;
  209. this.setState({
  210. editvisible: true
  211. });
  212. this.detailes(record);
  213. },
  214. edithandleCancel(e) {
  215. this.setState({
  216. editvisible: false
  217. });
  218. },
  219. search() {
  220. this.loadData();
  221. },
  222. //搜索部分的清零
  223. reset() {
  224. this.state.numberSearch = '';
  225. this.state.typeSearch = undefined;
  226. this.state.companyNameSearch = '';
  227. this.state.entryNameSearch = '';
  228. this.state.releaseDate = [];
  229. this.state.searchMore=true;
  230. this.loadData();
  231. },
  232. searchSwitch() {
  233. this.setState({
  234. searchMore: !this.state.searchMore
  235. });
  236. },
  237. render() {
  238. const FormItem = Form.Item;
  239. const rowSelection = {
  240. selectedRowKeys: this.state.selectedRowKeys,
  241. onChange: (selectedRowKeys, selectedRows) => {
  242. this.setState({
  243. selectedRows: selectedRows.slice(-1),
  244. selectedRowKeys: selectedRowKeys.slice(-1)
  245. });
  246. }
  247. };
  248. const { RangePicker } = DatePicker;
  249. const theData = this.state.data || {};
  250. return (
  251. <div className="user-content">
  252. <div className="content-title">
  253. <span>咨询单管理</span>
  254. </div>
  255. <div className="user-search">
  256. <Input
  257. placeholder="订单编号"
  258. style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }}
  259. value={this.state.numberSearch}
  260. onChange={(e) => {
  261. this.setState({ numberSearch: e.target.value });
  262. }}
  263. />
  264. <Select
  265. placeholder="订单类型"
  266. style={{ width: '200px', marginRight: '10px' }}
  267. value={this.state.typeSearch}
  268. onChange={(e) => {
  269. this.setState({ typeSearch: e });
  270. }}
  271. >
  272. {orderType.map(function(item) {
  273. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  274. })}
  275. </Select>
  276. <Input
  277. placeholder="公司名称"
  278. style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }}
  279. value={this.state.companyNameSearch}
  280. onChange={(e) => {
  281. this.setState({ companyNameSearch: e.target.value });
  282. }}
  283. />
  284. <Input
  285. placeholder="项目名称"
  286. style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }}
  287. value={this.state.entryNameSearch}
  288. onChange={(e) => {
  289. this.setState({ entryNameSearch: e.target.value });
  290. }}
  291. />
  292. <Input
  293. style={{ width: 140, marginRight: 10 }}
  294. value={this.state.employerNameSearch}
  295. onChange={(e) => {
  296. this.setState({ employerNameSearch: e.target.value });
  297. }}
  298. placeholder="客户名称"
  299. />
  300. <Button type="primary" onClick={this.search} style={{ marginRight: '10px' }}>
  301. 搜索
  302. </Button>
  303. <Button onClick={this.reset} style={{ marginRight: '10px' }}>
  304. 重置
  305. </Button>
  306. <span>
  307. 更多搜索<Switch checked={!this.state.searchMore} onChange={this.searchSwitch} />
  308. </span>
  309. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  310. <span style={{ marginRight: 10 }}>发布时间 :</span>
  311. <RangePicker
  312. value={[
  313. this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  314. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null
  315. ]}
  316. onChange={(data, dataString) => {
  317. this.setState({ releaseDate: dataString });
  318. }}
  319. />
  320. </div>
  321. </div>
  322. <div className="patent-table">
  323. <Spin spinning={this.state.loading}>
  324. <Table
  325. columns={this.state.columns}
  326. dataSource={this.state.dataSource}
  327. rowSelection={rowSelection}
  328. pagination={this.state.pagination}
  329. onRowClick={this.tableRowClick}
  330. />
  331. </Spin>
  332. </div>
  333. <div className="patent-desc">
  334. <Modal
  335. className="customeDetails"
  336. title="订单详情"
  337. width="1000px"
  338. visible={this.state.editvisible}
  339. onOk={this.edithandleCancel}
  340. onCancel={this.edithandleCancel}
  341. footer=""
  342. >
  343. <Form layout="horizontal" onSubmit={this.edithandleSubmit} id="demand-form">
  344. <Spin spinning={this.state.loading}>
  345. <div className="clearfix">
  346. <FormItem
  347. className="half-item"
  348. labelCol={{ span: 8 }}
  349. wrapperCol={{ span: 12 }}
  350. label="订单编号"
  351. >
  352. <span>{theData.name}</span>
  353. </FormItem>
  354. <FormItem
  355. className="half-item"
  356. labelCol={{ span: 8 }}
  357. wrapperCol={{ span: 12 }}
  358. label="订单类型"
  359. >
  360. <span>{getOrderType(theData.type)}</span>
  361. </FormItem>
  362. </div>
  363. <div className="clearfix">
  364. <FormItem
  365. className="half-item"
  366. labelCol={{ span: 8 }}
  367. wrapperCol={{ span: 12 }}
  368. label="订单日期"
  369. >
  370. <span>{this.state.createTime}</span>
  371. </FormItem>
  372. <FormItem
  373. className="half-item"
  374. labelCol={{ span: 8 }}
  375. wrapperCol={{ span: 12 }}
  376. label="订单金额"
  377. >
  378. <span>{theData.isHot ? theData.isHot + '万元' : ''}</span>
  379. </FormItem>
  380. </div>
  381. <div className="clearfix">
  382. <FormItem
  383. className="half-item"
  384. labelCol={{ span: 8 }}
  385. wrapperCol={{ span: 12 }}
  386. label="项目名称"
  387. >
  388. <span>{theData.name}</span>
  389. </FormItem>
  390. </div>
  391. <div className="clearfix">
  392. <FormItem
  393. className="half-item"
  394. labelCol={{ span: 8 }}
  395. wrapperCol={{ span: 12 }}
  396. label="买方名称"
  397. >
  398. <span>{theData.memberPrice1}</span>
  399. </FormItem>
  400. <FormItem
  401. className="half-item"
  402. labelCol={{ span: 8 }}
  403. wrapperCol={{ span: 12 }}
  404. label="卖方名称"
  405. >
  406. <span>{theData.activityFlag1}</span>
  407. </FormItem>
  408. <FormItem
  409. className="half-item"
  410. labelCol={{ span: 8 }}
  411. wrapperCol={{ span: 12 }}
  412. label="买方联系人"
  413. >
  414. <span>{theData.activityPrice}</span>
  415. </FormItem>
  416. <FormItem
  417. className="half-item"
  418. labelCol={{ span: 8 }}
  419. wrapperCol={{ span: 12 }}
  420. label="卖方联系人"
  421. >
  422. <span>{theData.offset}</span>
  423. </FormItem>
  424. <FormItem
  425. className="half-item"
  426. labelCol={{ span: 8 }}
  427. wrapperCol={{ span: 12 }}
  428. label="买方联系方式"
  429. >
  430. <span>{theData.memberPrice}</span>
  431. </FormItem>
  432. <FormItem
  433. className="half-item"
  434. labelCol={{ span: 8 }}
  435. wrapperCol={{ span: 12 }}
  436. label="卖方联系方式"
  437. >
  438. <span>{theData.activityFlag}</span>
  439. </FormItem>
  440. </div>
  441. </Spin>
  442. </Form>
  443. </Modal>
  444. </div>
  445. </div>
  446. );
  447. }
  448. })
  449. );
  450. export default Order;