achievementOrderX.jsx 12 KB

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