jitao-client/js/component/account/order/expertX.jsx

/* 
	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',
						
					},
					{
						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;