kede-HN-officialWeb-client/js/component/administration/order/order.jsx

/* 
	update:2018/07/16
	author:liting
*/

import React from 'react';
import $ from 'jquery/src/ajax';
import { Form, Button, Input, Select, Spin, Table, message, Modal, Tooltip, Switch, DatePicker } from 'antd';
import { orderType } from '@/dataDic';
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/admin/jtOrder/list',
				data: {
					pageNo: pageNo || 1,
					pageSize: this.state.pagination.pageSize,
					orderNo: this.state.numberSearch,
					commodityName: this.state.entryNameSearch,
					sellerName: this.state.companyNameSearch,
					buyerName: this.state.employerNameSearch,
					orderType:this.state.orderTypeSearch,
					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,
								commodityType:thisdata.commodityType,
								orderAmount:thisdata.orderAmount,
								commodityName:thisdata.commodityName,
								buyerName:thisdata.buyerName,
								buyerMobile:thisdata.buyerMobile,
								sellerName: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: 'buyerName',
						key: 'buyerName',
						render: (text) => {
							return (
								<Tooltip title={text}>
									{text && text.length >12 ? text.substr(0,12) + '...' : text?text:'佚名'}
								</Tooltip>
							);
						}
					},
					{
						title: '消费者联系方式',
						dataIndex: 'buyerMobile',
						key: 'buyerMobile',
						render:(text)=>{
							return text&&text.length>1?text:'暂无'
						}
					},
					{
						title: '服务商联系人',
						dataIndex: 'sellerName',
						key: 'sellerName',
						render: (text) => {
							return (
								<Tooltip title={text}>
									{text && text.length >12 ? text.substr(0,12) + '...' : text?text:'佚名'}
								</Tooltip>
							);
						}
					},
					{
						title: '服务商联系方式',
						dataIndex: 'sellerMobile',
						key: 'sellerMobile',
						render:(text)=>{
							return text&&text.length>1?text:'暂无'
						}
					},
				],
				dataSource: []
			};
		},
		componentWillMount() {
			this.loadData();
		},
		
		//项目列表整行点击
		tableRowClick(record, index) {
			this.setState({
				RowData:record,
				editvisible: true
			});
		},
		edithandleCancel(e) {
			this.setState({
				editvisible: false
			});
		},
		search() {
			this.loadData();
		},
		//搜索部分的清零
		reset() {
			this.state.numberSearch = '';
			this.state.typeSearch = undefined;
			this.state.orderTypeSearch=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 });
							}}
						/>
						<Select placeholder="订单类型" style={{ width: 120 }}
							value={this.state.orderTypeSearch}
							onChange={(e) => { this.setState({ orderTypeSearch: e }) }}>
							{ 
								orderType.map(function (item) {
									return	<Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
								})
							}
                   		</Select>
						<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 });
							}}
						/>
						<Input
							style={{ width: 140, marginRight: 10 }}
							value={this.state.employerNameSearch}
							onChange={(e) => {
								this.setState({ employerNameSearch: e.target.value });
							}}
							placeholder="买方名称"
						/>
						<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.buyerName}</span>
										</FormItem>
										<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.buyerMobile}</span>
										</FormItem>
										<FormItem
											className="half-item"
											labelCol={{ span: 8 }}
											wrapperCol={{ span: 12 }}
											label="卖方联系方式"
										>
											<span>{theData.sellerMobile}</span>
										</FormItem>
									</div>
								</Spin>
							</Form>
						</Modal>
					</div>
				</div>
			);
		}
	})
);

export default Order;