serviceOrder.jsx 10 KB

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