order.jsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402
  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 + '/api/admin/jtOrder/list',
  25. data: {
  26. pageNo: pageNo || 1,
  27. pageSize: this.state.pagination.pageSize,
  28. orderNo: this.state.numberSearch,
  29. commodityName: this.state.entryNameSearch,
  30. sellerName: this.state.companyNameSearch,
  31. buyerName: this.state.employerNameSearch,
  32. orderType:this.state.orderTypeSearch,
  33. startCreateDate: this.state.releaseDate[0],
  34. endCreateDate: this.state.releaseDate[1]
  35. },
  36. success: function(data) {
  37. let theArr = [];
  38. if (!data.data || !data.data.list) {
  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. sellerId: thisdata.sellerId,
  48. buyerId:thisdata.buyerId,
  49. orderNo:thisdata.orderNo,
  50. commodityType:thisdata.commodityType,
  51. orderAmount:thisdata.orderAmount,
  52. commodityName:thisdata.commodityName,
  53. buyerName:thisdata.buyerName,
  54. buyerMobile:thisdata.buyerMobile,
  55. sellerName:thisdata.sellerName,
  56. sellerMobile:thisdata.sellerMobile,
  57. createTime: thisdata.createTime ? new Date(thisdata.createTime).toLocaleString() : ''
  58. });
  59. }
  60. this.state.pagination.current = data.data.pageNo;
  61. this.state.pagination.total = data.data.totalCount;
  62. }
  63. this.setState({
  64. dataSource: theArr,
  65. pagination: this.state.pagination
  66. });
  67. }.bind(this)
  68. }).always(
  69. function() {
  70. this.setState({
  71. loading: false
  72. });
  73. }.bind(this)
  74. );
  75. },
  76. getInitialState() {
  77. return {
  78. searchMore: true,
  79. selectedRowKeys: [],
  80. selectedRows: [],
  81. loading: false,
  82. releaseDate: [],
  83. pagination: {
  84. defaultCurrent: 1,
  85. defaultPageSize: 10,
  86. showQuickJumper: true,
  87. pageSize: 10,
  88. onChange: function(page) {
  89. this.loadData(page);
  90. this.setState({
  91. selectedRowKeys: []
  92. });
  93. }.bind(this),
  94. showTotal: function(total) {
  95. return '共' + total + '条数据';
  96. }
  97. },
  98. columns: [
  99. {
  100. title: '订单编号',
  101. dataIndex: 'orderNo',
  102. key: 'orderNo'
  103. },
  104. {
  105. title: '订单类型',
  106. dataIndex: 'commodityType',
  107. key: 'commodityType',
  108. render: (text) => {
  109. return getOrderType(text);
  110. }
  111. },
  112. {
  113. title: '订单日期',
  114. dataIndex: 'createTime',
  115. key: 'createTime'
  116. },
  117. {
  118. title: '订单金额(万元)',
  119. dataIndex: 'orderAmount',
  120. key: 'orderAmount'
  121. },
  122. {
  123. title: '项目名称',
  124. dataIndex: 'commodityName',
  125. key: 'commodityName',
  126. render: (text) => {
  127. return (
  128. <Tooltip title={text}>
  129. {text && text.length > 6 ? text.substr(0, 6) + '...' : text}
  130. </Tooltip>
  131. );
  132. }
  133. },
  134. {
  135. title: '消费者联系人',
  136. dataIndex: 'buyerName',
  137. key: 'buyerName',
  138. render:(text)=>{
  139. return text?text:'佚名'
  140. }
  141. },
  142. {
  143. title: '消费者联系方式',
  144. dataIndex: 'buyerMobile',
  145. key: 'buyerMobile',
  146. render:(text)=>{
  147. return text&&text.length>1?text:'暂无'
  148. }
  149. },
  150. {
  151. title: '服务商联系人',
  152. dataIndex: 'sellerName',
  153. key: 'sellerName',
  154. render:(text)=>{
  155. return text?text:'佚名'
  156. }
  157. },
  158. {
  159. title: '服务商联系方式',
  160. dataIndex: 'sellerMobile',
  161. key: 'sellerMobile',
  162. render:(text)=>{
  163. return text&&text.length>1?text:'暂无'
  164. }
  165. },
  166. ],
  167. dataSource: []
  168. };
  169. },
  170. componentWillMount() {
  171. this.loadData();
  172. },
  173. //项目列表整行点击
  174. tableRowClick(record, index) {
  175. this.setState({
  176. RowData:record,
  177. editvisible: true
  178. });
  179. },
  180. edithandleCancel(e) {
  181. this.setState({
  182. editvisible: false
  183. });
  184. },
  185. search() {
  186. this.loadData();
  187. },
  188. //搜索部分的清零
  189. reset() {
  190. this.state.numberSearch = '';
  191. this.state.typeSearch = undefined;
  192. this.state.orderTypeSearch=undefined;
  193. this.state.companyNameSearch = '';
  194. this.state.entryNameSearch = '';
  195. this.state.releaseDate = [];
  196. this.state.searchMore=true;
  197. this.loadData();
  198. },
  199. searchSwitch() {
  200. this.setState({
  201. searchMore: !this.state.searchMore
  202. });
  203. },
  204. render() {
  205. const FormItem = Form.Item;
  206. const rowSelection = {
  207. selectedRowKeys: this.state.selectedRowKeys,
  208. onChange: (selectedRowKeys, selectedRows) => {
  209. this.setState({
  210. selectedRows: selectedRows.slice(-1),
  211. selectedRowKeys: selectedRowKeys.slice(-1)
  212. });
  213. }
  214. };
  215. const { RangePicker } = DatePicker;
  216. const theData = this.state.RowData || {};
  217. return (
  218. <div className="user-content">
  219. <div className="content-title">
  220. <span>咨询单管理</span>
  221. </div>
  222. <div className="user-search">
  223. <Input
  224. placeholder="订单编号"
  225. style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }}
  226. value={this.state.numberSearch}
  227. onChange={(e) => {
  228. this.setState({ numberSearch: e.target.value });
  229. }}
  230. />
  231. <Select placeholder="订单类型" style={{ width: 120 }}
  232. value={this.state.orderTypeSearch}
  233. onChange={(e) => { this.setState({ orderTypeSearch: e }) }}>
  234. {
  235. orderType.map(function (item) {
  236. return <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  237. })
  238. }
  239. </Select>
  240. <Input
  241. placeholder="卖方名称"
  242. style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }}
  243. value={this.state.companyNameSearch}
  244. onChange={(e) => {
  245. this.setState({ companyNameSearch: e.target.value });
  246. }}
  247. />
  248. <Input
  249. placeholder="项目名称"
  250. style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }}
  251. value={this.state.entryNameSearch}
  252. onChange={(e) => {
  253. this.setState({ entryNameSearch: e.target.value });
  254. }}
  255. />
  256. <Input
  257. style={{ width: 140, marginRight: 10 }}
  258. value={this.state.employerNameSearch}
  259. onChange={(e) => {
  260. this.setState({ employerNameSearch: e.target.value });
  261. }}
  262. placeholder="买方名称"
  263. />
  264. <Button type="primary" onClick={this.search} style={{ marginRight: '10px' }}>
  265. 搜索
  266. </Button>
  267. <Button onClick={this.reset} style={{ marginRight: '10px' }}>
  268. 重置
  269. </Button>
  270. <span>
  271. 更多搜索<Switch checked={!this.state.searchMore} onChange={this.searchSwitch} />
  272. </span>
  273. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  274. <span style={{ marginRight: 10 }}>发布时间 :</span>
  275. <RangePicker
  276. value={[
  277. this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  278. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null
  279. ]}
  280. onChange={(data, dataString) => {
  281. this.setState({ releaseDate: dataString });
  282. }}
  283. />
  284. </div>
  285. </div>
  286. <div className="patent-table">
  287. <Spin spinning={this.state.loading}>
  288. <Table
  289. columns={this.state.columns}
  290. dataSource={this.state.dataSource}
  291. rowSelection={rowSelection}
  292. pagination={this.state.pagination}
  293. onRowClick={this.tableRowClick}
  294. />
  295. </Spin>
  296. </div>
  297. <div className="patent-desc">
  298. <Modal
  299. className="customeDetails"
  300. title="订单详情"
  301. width="1000px"
  302. visible={this.state.editvisible}
  303. onOk={this.edithandleCancel}
  304. onCancel={this.edithandleCancel}
  305. footer=""
  306. >
  307. <Form layout="horizontal" onSubmit={this.edithandleSubmit} id="demand-form">
  308. <Spin spinning={this.state.loading}>
  309. <div className="clearfix">
  310. <FormItem
  311. className="half-item"
  312. labelCol={{ span: 8 }}
  313. wrapperCol={{ span: 12 }}
  314. label="订单编号"
  315. >
  316. <span>{theData.orderNo}</span>
  317. </FormItem>
  318. <FormItem
  319. className="half-item"
  320. labelCol={{ span: 8 }}
  321. wrapperCol={{ span: 12 }}
  322. label="订单类型"
  323. >
  324. <span>{getOrderType(theData.commodityType)}</span>
  325. </FormItem>
  326. </div>
  327. <div className="clearfix">
  328. <FormItem
  329. className="half-item"
  330. labelCol={{ span: 8 }}
  331. wrapperCol={{ span: 12 }}
  332. label="订单日期"
  333. >
  334. <span>{theData.createTime}</span>
  335. </FormItem>
  336. <FormItem
  337. className="half-item"
  338. labelCol={{ span: 8 }}
  339. wrapperCol={{ span: 12 }}
  340. label="订单金额"
  341. >
  342. <span>{theData.orderAmount||theData.orderAmount=='0' ? theData.orderAmount + '万元' : ''}</span>
  343. </FormItem>
  344. </div>
  345. <div className="clearfix">
  346. <FormItem
  347. className="half-item"
  348. labelCol={{ span: 8 }}
  349. wrapperCol={{ span: 12 }}
  350. label="项目名称"
  351. >
  352. <span>{theData.commodityName}</span>
  353. </FormItem>
  354. </div>
  355. <div className="clearfix">
  356. <FormItem
  357. className="half-item"
  358. labelCol={{ span: 8 }}
  359. wrapperCol={{ span: 12 }}
  360. label="买方联系人"
  361. >
  362. <span>{theData.buyerName}</span>
  363. </FormItem>
  364. <FormItem
  365. className="half-item"
  366. labelCol={{ span: 8 }}
  367. wrapperCol={{ span: 12 }}
  368. label="卖方联系人"
  369. >
  370. <span>{theData.sellerName}</span>
  371. </FormItem>
  372. <FormItem
  373. className="half-item"
  374. labelCol={{ span: 8 }}
  375. wrapperCol={{ span: 12 }}
  376. label="买方联系方式"
  377. >
  378. <span>{theData.buyerMobile}</span>
  379. </FormItem>
  380. <FormItem
  381. className="half-item"
  382. labelCol={{ span: 8 }}
  383. wrapperCol={{ span: 12 }}
  384. label="卖方联系方式"
  385. >
  386. <span>{theData.sellerMobile}</span>
  387. </FormItem>
  388. </div>
  389. </Spin>
  390. </Form>
  391. </Modal>
  392. </div>
  393. </div>
  394. );
  395. }
  396. })
  397. );
  398. export default Order;