order.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  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: 'offset',
  117. key: 'offset',
  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: 'memberPrice',
  129. key: 'memberPrice',
  130. render: (text) => {
  131. return (
  132. <Tooltip title={text}>
  133. {text && text.length > 6 ? text.substr(0, 6) + '...' : text}
  134. </Tooltip>
  135. );
  136. }
  137. },
  138. {
  139. title: '订单进度',
  140. dataIndex: 'activityPrice',
  141. key: 'activityPrice',
  142. render: (text) => {
  143. return getOrderType(text);
  144. }
  145. },
  146. {
  147. title: '联系人',
  148. dataIndex: 'activityFlag',
  149. key: 'activityFlag'
  150. },
  151. {
  152. title: '联系方式',
  153. dataIndex: 'activityFlag1',
  154. key: 'activityFlag1'
  155. },
  156. {
  157. title: '买方',
  158. dataIndex: 'activityFlag12',
  159. key: 'activityFlag12',
  160. render: (text) => {
  161. return (
  162. <Tooltip title={text}>
  163. {text && text.length > 6 ? text.substr(0, 6) + '...' : text}
  164. </Tooltip>
  165. );
  166. }
  167. }
  168. ],
  169. dataSource: []
  170. };
  171. },
  172. componentWillMount() {
  173. this.loadData();
  174. },
  175. detailes(recard) {
  176. this.setState({
  177. loading: true
  178. });
  179. $.ajax({
  180. method: 'get',
  181. dataType: 'json',
  182. crossDomain: false,
  183. url: globalConfig.context + '/api/user/jtBusiness/project/detail',
  184. data: {
  185. id: recard.id
  186. },
  187. success: function(data) {
  188. let thisData = data.data;
  189. if (!thisData) {
  190. if (data.error && data.error.length) {
  191. message.warning(data.error[0].message);
  192. }
  193. thisData = {};
  194. }
  195. this.setState({
  196. id: thisData.id,
  197. data: thisData,
  198. createTime: thisData.createTime ? new Date(thisData.createTime).toLocaleString() : ''
  199. });
  200. }.bind(this)
  201. }).always(
  202. function() {
  203. this.setState({
  204. loading: false
  205. });
  206. }.bind(this)
  207. );
  208. },
  209. //项目列表整行点击
  210. tableRowClick(record, index) {
  211. this.state.RowData = record;
  212. this.setState({
  213. editvisible: true
  214. });
  215. this.detailes(record);
  216. },
  217. edithandleCancel(e) {
  218. this.setState({
  219. editvisible: false
  220. });
  221. },
  222. search() {
  223. this.loadData();
  224. },
  225. //搜索部分的清零
  226. reset() {
  227. this.state.numberSearch = '';
  228. this.state.typeSearch = undefined;
  229. this.state.companyNameSearch = '';
  230. this.state.entryNameSearch = '';
  231. this.state.releaseDate = [];
  232. this.state.searchMore=true;
  233. this.loadData();
  234. },
  235. searchSwitch() {
  236. this.setState({
  237. searchMore: !this.state.searchMore
  238. });
  239. },
  240. render() {
  241. const FormItem = Form.Item;
  242. const rowSelection = {
  243. selectedRowKeys: this.state.selectedRowKeys,
  244. onChange: (selectedRowKeys, selectedRows) => {
  245. this.setState({
  246. selectedRows: selectedRows.slice(-1),
  247. selectedRowKeys: selectedRowKeys.slice(-1)
  248. });
  249. }
  250. };
  251. const { RangePicker } = DatePicker;
  252. const theData = this.state.data || {};
  253. return (
  254. <div className="user-content">
  255. <div className="content-title">
  256. <span>咨询单管理</span>
  257. </div>
  258. <div className="user-search">
  259. <Input
  260. placeholder="订单编号"
  261. style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }}
  262. value={this.state.numberSearch}
  263. onChange={(e) => {
  264. this.setState({ numberSearch: e.target.value });
  265. }}
  266. />
  267. <Select
  268. placeholder="订单类型"
  269. style={{ width: '200px', marginRight: '10px' }}
  270. value={this.state.typeSearch}
  271. onChange={(e) => {
  272. this.setState({ typeSearch: e });
  273. }}
  274. >
  275. {orderType.map(function(item) {
  276. return <Select.Option key={item.value}>{item.key}</Select.Option>;
  277. })}
  278. </Select>
  279. <Input
  280. placeholder="公司名称"
  281. style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }}
  282. value={this.state.companyNameSearch}
  283. onChange={(e) => {
  284. this.setState({ companyNameSearch: e.target.value });
  285. }}
  286. />
  287. <Input
  288. placeholder="项目名称"
  289. style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }}
  290. value={this.state.entryNameSearch}
  291. onChange={(e) => {
  292. this.setState({ entryNameSearch: e.target.value });
  293. }}
  294. />
  295. <Input
  296. style={{ width: 140, marginRight: 10 }}
  297. value={this.state.employerNameSearch}
  298. onChange={(e) => {
  299. this.setState({ employerNameSearch: e.target.value });
  300. }}
  301. placeholder="客户名称"
  302. />
  303. <Button type="primary" onClick={this.search} style={{ marginRight: '10px' }}>
  304. 搜索
  305. </Button>
  306. <Button onClick={this.reset} style={{ marginRight: '10px' }}>
  307. 重置
  308. </Button>
  309. <span>
  310. 更多搜索<Switch checked={!this.state.searchMore} onChange={this.searchSwitch} />
  311. </span>
  312. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  313. <span style={{ marginRight: 10 }}>发布时间 :</span>
  314. <RangePicker
  315. value={[
  316. this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  317. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null
  318. ]}
  319. onChange={(data, dataString) => {
  320. this.setState({ releaseDate: dataString });
  321. }}
  322. />
  323. </div>
  324. </div>
  325. <div className="patent-table">
  326. <Spin spinning={this.state.loading}>
  327. <Table
  328. columns={this.state.columns}
  329. dataSource={this.state.dataSource}
  330. rowSelection={rowSelection}
  331. pagination={this.state.pagination}
  332. onRowClick={this.tableRowClick}
  333. />
  334. </Spin>
  335. </div>
  336. <div className="patent-desc">
  337. <Modal
  338. className="customeDetails"
  339. title="订单详情"
  340. width="1000px"
  341. visible={this.state.editvisible}
  342. onOk={this.edithandleCancel}
  343. onCancel={this.edithandleCancel}
  344. footer=""
  345. >
  346. <Form layout="horizontal" onSubmit={this.edithandleSubmit} id="demand-form">
  347. <Spin spinning={this.state.loading}>
  348. <div className="clearfix">
  349. <FormItem
  350. className="half-item"
  351. labelCol={{ span: 8 }}
  352. wrapperCol={{ span: 12 }}
  353. label="订单编号"
  354. >
  355. <span>{theData.name}</span>
  356. </FormItem>
  357. <FormItem
  358. className="half-item"
  359. labelCol={{ span: 8 }}
  360. wrapperCol={{ span: 12 }}
  361. label="订单类型"
  362. >
  363. <span>{getOrderType(theData.type)}</span>
  364. </FormItem>
  365. </div>
  366. <div className="clearfix">
  367. <FormItem
  368. className="half-item"
  369. labelCol={{ span: 8 }}
  370. wrapperCol={{ span: 12 }}
  371. label="订单日期"
  372. >
  373. <span>{this.state.createTime}</span>
  374. </FormItem>
  375. <FormItem
  376. className="half-item"
  377. labelCol={{ span: 8 }}
  378. wrapperCol={{ span: 12 }}
  379. label="订单金额"
  380. >
  381. <span>{theData.isHot ? theData.isHot + '万元' : ''}</span>
  382. </FormItem>
  383. </div>
  384. <div className="clearfix">
  385. <FormItem
  386. className="half-item"
  387. labelCol={{ span: 8 }}
  388. wrapperCol={{ span: 12 }}
  389. label="项目名称"
  390. >
  391. <span>{theData.name}</span>
  392. </FormItem>
  393. </div>
  394. <div className="clearfix">
  395. <FormItem
  396. className="half-item"
  397. labelCol={{ span: 8 }}
  398. wrapperCol={{ span: 12 }}
  399. label="买方名称"
  400. >
  401. <span>{theData.memberPrice1}</span>
  402. </FormItem>
  403. <FormItem
  404. className="half-item"
  405. labelCol={{ span: 8 }}
  406. wrapperCol={{ span: 12 }}
  407. label="卖方名称"
  408. >
  409. <span>{theData.activityFlag1}</span>
  410. </FormItem>
  411. <FormItem
  412. className="half-item"
  413. labelCol={{ span: 8 }}
  414. wrapperCol={{ span: 12 }}
  415. label="买方联系人"
  416. >
  417. <span>{theData.activityPrice}</span>
  418. </FormItem>
  419. <FormItem
  420. className="half-item"
  421. labelCol={{ span: 8 }}
  422. wrapperCol={{ span: 12 }}
  423. label="卖方联系人"
  424. >
  425. <span>{theData.offset}</span>
  426. </FormItem>
  427. <FormItem
  428. className="half-item"
  429. labelCol={{ span: 8 }}
  430. wrapperCol={{ span: 12 }}
  431. label="买方联系方式"
  432. >
  433. <span>{theData.memberPrice}</span>
  434. </FormItem>
  435. <FormItem
  436. className="half-item"
  437. labelCol={{ span: 8 }}
  438. wrapperCol={{ span: 12 }}
  439. label="卖方联系方式"
  440. >
  441. <span>{theData.activityFlag}</span>
  442. </FormItem>
  443. </div>
  444. </Spin>
  445. </Form>
  446. </Modal>
  447. </div>
  448. </div>
  449. );
  450. }
  451. })
  452. );
  453. export default Order;