/* update:2018/07/16 author:liting */ import React from 'react'; import $ from 'jquery/src/ajax'; import { Form, Button, Input, Select,Rate, Spin, Table, message, Modal, Tooltip, Switch, DatePicker } from 'antd'; import { getOrderType } from '@/tools.js'; import moment from 'moment'; //主体 const Order = Form.create()( React.createClass({ loadData(pageNo) { this.state.data = []; this.setState({ loading: true, page: pageNo }); $.ajax({ method: 'get', dataType: 'json', crossDomain: false, url: globalConfig.context + '/api/user/jtOrder/list', data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, orderNo: this.state.numberSearch, userType:0, orderType:10, commodityName: this.state.entryNameSearch, sellerName: this.state.companyNameSearch, startCreateDate: this.state.releaseDate[0], endCreateDate: this.state.releaseDate[1] }, success: function(data) { let theArr = []; if (!data.data || !data.data.list) { if (data.error && data.error.length) { message.warning(data.error[0].message); } } else { for (let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; theArr.push({ key: i, sellerId: thisdata.sellerId, buyerId:thisdata.buyerId, orderNo:thisdata.orderNo, commodityId:thisdata.commodityId, commodityType:thisdata.commodityType, orderAmount:thisdata.orderAmount, commodityName:thisdata.commodityName, sellerName:thisdata.sellerName!=null?thisdata.sellerName:'佚名', sellerMobile:thisdata.sellerMobile, createTime: thisdata.createTime ? new Date(thisdata.createTime).toLocaleString() : '' }); } this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; } this.setState({ dataSource: theArr, pagination: this.state.pagination }); }.bind(this) }).always( function() { this.setState({ loading: false }); }.bind(this) ); }, getInitialState() { return { searchMore: true, selectedRowKeys: [], selectedRows: [], loading: false, releaseDate: [], pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function(page) { this.loadData(page); this.setState({ selectedRowKeys: [] }); }.bind(this), showTotal: function(total) { return '共' + total + '条数据'; } }, columns: [ { title: '订单编号', dataIndex: 'orderNo', key: 'orderNo' }, { title: '订单类型', dataIndex: 'commodityType', key: 'commodityType', render: (text) => { return getOrderType(text); } }, { title: '订单日期', dataIndex: 'createTime', key: 'createTime' }, { title: '订单金额(万元)', dataIndex: 'orderAmount', key: 'orderAmount', render:(text)=>{ return text?text:'面议' } }, { title: '项目名称', dataIndex: 'commodityName', key: 'commodityName', render: (text) => { return ( <Tooltip title={text}> {text && text.length >12 ? text.substr(0,12) + '...' : text} </Tooltip> ); } }, { title: '服务商', dataIndex: 'sellerName', key: 'sellerName', render:(text)=>{ return text && text.length >12 ? text.substr(0,12) + '...' : text } }, { title: '联系方式', dataIndex: 'sellerMobile', key: 'sellerMobile' }, { title: '评价', dataIndex: 'pingjia', key: 'pingjia', render:(text,recard)=>{ return <Button type="primary" onClick={(e)=>{e.stopPropagation(),this.evaluate(recard)}}>评价</Button> } } ], dataSource: [] }; }, componentWillMount() { this.loadData(); }, //项目列表整行点击 tableRowClick(record, index) { this.state.RowData = record; this.setState({ editvisible: true }); }, edithandleCancel(e) { this.setState({ editvisible: false }); }, search() { this.loadData(); }, //评价 evaluate(recard){ this.setState({ remark:'', star:undefined, orderNo:recard.orderNo, ids:recard.commodityId, evaluateVisible:true }) }, evaluateOk(){ this.setState({ evaluateVisible:false }) }, evaluateCancel(){ this.setState({ evaluateVisible:false }) }, //评价 evaluateSubmit(e){ e.preventDefault(); if(!this.state.remark){ message.warning('请填写评价内容'); return; } if(!this.state.star){ message.warning('请选择评星等级'); return; } this.setState({ loading:true }) $.ajax({ method:"post", dataType:'json', url:globalConfig.context+'/api/user/comment/apply', data:{ commodityId:this.state.ids, content:this.state.remark, star:this.state.star, orderNo:this.state.orderNo }, success:function(data){ if(data&&data.error.length){ message.error(data.error[0].message); return; } message.success('提交成功,感谢您的评价!') this.loadData(this.state.page); }.bind(this) }).always( function() { this.setState({ evaluateVisible:false, loading: false }); }.bind(this) ); }, //搜索部分的清零 reset() { this.state.numberSearch = ''; this.state.typeSearch = undefined; this.state.companyNameSearch = ''; this.state.entryNameSearch = ''; this.state.releaseDate = []; this.state.searchMore=true; this.loadData(); }, searchSwitch() { this.setState({ searchMore: !this.state.searchMore }); }, render() { const FormItem = Form.Item; const rowSelection = { selectedRowKeys: this.state.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ selectedRows: selectedRows.slice(-1), selectedRowKeys: selectedRowKeys.slice(-1) }); } }; const { RangePicker } = DatePicker; const theData = this.state.RowData || {}; return ( <div className="user-content"> <div className="content-title"> <span>订单列表</span> </div> <div className="user-search"> <Input placeholder="订单编号" style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }} value={this.state.numberSearch} onChange={(e) => { this.setState({ numberSearch: e.target.value }); }} /> <Input placeholder="服务商名称" style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }} value={this.state.companyNameSearch} onChange={(e) => { this.setState({ companyNameSearch: e.target.value }); }} /> <Input placeholder="项目名称" style={{ width: '150px', marginRight: '10px', marginBottom: '10px' }} value={this.state.entryNameSearch} onChange={(e) => { this.setState({ entryNameSearch: e.target.value }); }} /> <Button type="primary" onClick={this.search} style={{ marginRight: '10px' }}> 搜索 </Button> <Button onClick={this.reset} style={{ marginRight: '10px' }}> 重置 </Button> <span> 更多搜索<Switch checked={!this.state.searchMore} onChange={this.searchSwitch} /> </span> <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}> <span style={{ marginRight: 10 }}>订单时间 :</span> <RangePicker value={[ this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null, this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null ]} onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} /> </div> </div> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table columns={this.state.columns} dataSource={this.state.dataSource} rowSelection={rowSelection} pagination={this.state.pagination} onRowClick={this.tableRowClick} /> </Spin> </div> <div className="patent-desc"> <Modal className="customeDetails" title="订单详情" width="1000px" visible={this.state.editvisible} onOk={this.edithandleCancel} onCancel={this.edithandleCancel} footer="" > <Form layout="horizontal" onSubmit={this.edithandleSubmit} id="demand-form"> <Spin spinning={this.state.loading}> <div className="clearfix"> <FormItem className="half-item" labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} label="订单编号" > <span>{theData.orderNo}</span> </FormItem> <FormItem className="half-item" labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} label="订单类型" > <span>{getOrderType(theData.commodityType)}</span> </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} label="订单日期" > <span>{theData.createTime}</span> </FormItem> <FormItem className="half-item" labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} label="订单金额(万元)" > <span>{theData.orderAmount ? theData.orderAmount + '万元' : '面议'}</span> </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} label="项目名称" > <span>{theData.commodityName}</span> </FormItem> </div> <div className="clearfix"> <FormItem className="half-item" labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} label="服务商" > <span>{theData.sellerName}</span> </FormItem> <FormItem className="half-item" labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} label="联系方式" > <span>{theData.sellerMobile}</span> </FormItem> </div> </Spin> </Form> </Modal> </div> <Modal title="评价" width="600px" visible={this.state.evaluateVisible} onOk={this.evaluateOk} okText="提交" onCancel={this.evaluateCancel} footer='' > <Form layout="horizontal" onSubmit={this.evaluateSubmit} > <Spin spinning={this.state.loading}> <p style={{marginLeft:40,fontSize:20,marginBottom:15}}>其他买家需要您的建议哦!</p> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 12 }} label={<span><i style={{color:'#f00'}}> * </i>评价内容</span>}> <Input type="textarea" rows={4} placeholder="输入你的建议" value={this.state.remark} onChange={(e) => { this.setState({ remark: e.target.value }); }} /> </FormItem> <FormItem labelCol={{ span: 4 }} wrapperCol={{ span: 8 }} label={<span><i style={{color:'#f00'}}> * </i>评星</span>} > <Rate onChange={(e)=>{this.setState({star:e})}} value={this.state.star} /> </FormItem> <div className="clearfix"> <FormItem wrapperCol={{ span: 12, offset: 4 }}> <Button className="set-submit" type="primary" htmlType="submit" style={{marginRight:15}}> 提交 </Button> <Button className="set-submit" type="ghost" onClick={this.evaluateCancel}> 取消 </Button> </FormItem> </div> </Spin> </Form> </Modal> </div> ); } }) ); export default Order;