使用antd中的Form和24 栅格系统进行排版实现响应式布局
import React, { Component } from 'react';
import { Table, Row, Col, Input, DatePicker, Button, Select, Form} from 'antd';
import { getFormatDate } from '../../utils/date';
import '../../styles/Common.css';
import './TradeCircle.css';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
class TradeCircleList extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
const columns = [
{
title: '序号',
dataIndex: 'num',
render: (text, record, index) => <span>{(this.state.currentPageIndex - 1) * 20 + index + 1}</span>
},{
title: '姓名',
dataIndex: 'userName',
key: 'userName',
},{
title: '手机号码',
dataIndex : 'telphone',
key: 'telphone',
},{
title: '生意圈类型',
dataIndex: 'type',
key: 'type',
render: text => {
switch (text) {
case 1:
return <span>图文</span>;
case 2:
return <span>视频</span>;
case 3:
return <span>供需</span>;
case 4:
return <span>引用</span>;
case 5:
return <span>想法</span>;
default:
return null;
}
}
},{
title: '内容预览',
dataIndex: 'content',
key: 'content',
render:(text) => {
return (
<span>
{text ? (text.length > 10 ? text.substr(0, 10) + "(.....)" : text) : ""}
</span>
)
}
},{
title: '发布时间',
dataIndex: 'createDate',
key: 'createDate',
render: CreateDate => (<span>{getFormatDate(CreateDate)}</span>)
},{
title: '审核人',
dataIndex: 'reportUserName',
key: 'reportUserName',
},{
title: '审核状态',
dataIndex: 'status',
key: 'status',
render: text => {
switch (text) {
case -1:
return <span>未通过</span>;
case 0:
return <span>审核中</span>;
case 1:
return <span>已通过</span>
default:
return null;
}
}
},{
title: '标签',
dataIndex: 'tags',
key: 'tags',
},{
title: '审核时间',
dataIndex: 'updateDate',
key: 'updateDate',
render: UpdateDate => (<span>{getFormatDate(UpdateDate)}</span>)
},{
title: '备注',
dataIndex: 'remark',
key: 'remark',
render:(text) => {
return (
<span>
{text ? (text.length > 10 ? text.substr(0 , 10) + "(....)": text) : ""}
</span>
)
}
},{
title: '推荐情况',
dataIndex: 'recommendation',
key: 'recommendation',
render: text => {
switch (text) {
case 1:
return <span>未推荐</span>;
case 2:
return <span>已推荐待推送</span>;
case 3:
return <span>已推送</span>;
default:
return null;
}
}
},{
title: '操作',
key: 'action',
fixed: 'right',
width: 110,
render: (text, record) => (
<span>
<a href='javascript:;' onClick={() => this.showDetailsModal(record)}>详情</a>
{/* <Divider type='vertical'></Divider> */}
{record.status !== 1 ? <a href='javascript:;' onClick={() => this.showModal(record)} >审核</a> : null}
</span>
)
}];
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 6 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
};
return (
<div>
<Form layout="horizontal">
<Row gutter={18}>
<Col xl={6} md={12} sm={24}>
<FormItem label="姓名" {...formItemLayout} >
{getFieldDecorator('title', {
// rules: [{ required: true, message: "请输入活动名" }],
})(<Input placeholder="输入用户名" />)}
</FormItem>
</Col>
<Col xl={6} md={12} sm={24}>
<FormItem label="手机号码" {...formItemLayout} >
{getFieldDecorator('title', {
// rules: [{ required: true, message: "请输入活动名" }],
})(<Input placeholder="输入手机号码" />)}
</FormItem>
</Col>
<Col xl={6} md={12} sm={24}>
<FormItem label="类型" {...formItemLayout}>
{getFieldDecorator('type', {
// rules: [{ required: true }],
initialValue: "全部",
//valuePropName: "checked"
})(
<Select>
<Select.Option value={0}>全部</Select.Option>
<Select.Option value={1}>图文</Select.Option>
<Select.Option value={2}>视频</Select.Option>
<Select.Option value={3}>供需</Select.Option>
<Select.Option value={4}>引用</Select.Option>
<Select.Option value={5}>想法</Select.Option>
</Select>
)}
</FormItem>
</Col>
<Col xl={6} md={12} sm={24}>
<FormItem label="发布时间" {...formItemLayout}>
{getFieldDecorator('registrationRangepicker')(
<RangePicker />
)}
</FormItem>
</Col>
<Col xl={6} md={12} sm={24}>
<FormItem label="审核人" {...formItemLayout}>
{getFieldDecorator('type', {
// rules: [{ required: true }],
initialValue: "全部",
//valuePropName: "checked"
})(
<Select>
<Select.Option value={0}>全部</Select.Option>
<Select.Option value={1}>ZD001</Select.Option>
<Select.Option value={2}>ZD002</Select.Option>
<Select.Option value={3}>ZD003</Select.Option>
</Select>
)}
</FormItem>
</Col>
<Col xl={6} md={12} sm={24}>
<FormItem label="审核状态" {...formItemLayout}>
{getFieldDecorator('type', {
// rules: [{ required: true }],
initialValue: "全部",
//valuePropName: "checked"
})(
<Select>
<Select.Option value={0}>全部</Select.Option>
<Select.Option value={1}>待审核</Select.Option>
<Select.Option value={2}>已审核</Select.Option>
<Select.Option value={3}>已删除</Select.Option>
</Select>
)}
</FormItem>
</Col>
<Col xl={6} md={12} sm={24}>
<FormItem label="推荐情况" {...formItemLayout}>
{getFieldDecorator('type', {
// rules: [{ required: true }],
initialValue: "全部",
//valuePropName: "checked"
})(
<Select>
<Select.Option value={0}>全部</Select.Option>
<Select.Option value={1}>未推荐</Select.Option>
<Select.Option value={2}>已推荐待推送</Select.Option>
<Select.Option value={3}>已推送</Select.Option>
</Select>
)}
</FormItem>
</Col>
<Col xl={6} md={12} sm={24}>
<FormItem label="审核时间" {...formItemLayout}>
{getFieldDecorator('registrationRangepicker')(
<RangePicker />
)}
</FormItem>
</Col>
<Col xl={6} md={12} sm={24} style={{float: "right", marginBottom: 10}}>
<Button type="primary" icon="search" style={{ marginRight: 55 }}>搜索</Button>
<Button type="default" icon="redo">重置</Button>
</Col>
</Row>
</Form>
<Table
columns={columns}
/>
</div>
);
}
}
export default Form.create()(TradeCircleList);
效果图：