使用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) => {(this.state.currentPageIndex - 1) * 20 + index + 1}
            },{
                title: '姓名',
                dataIndex: 'userName',
                key: 'userName',
            },{
                title: '手机号码',
                dataIndex : 'telphone',
                key: 'telphone',
            },{
                title: '生意圈类型',
                dataIndex: 'type',
                key: 'type',
                render: text => {
                    switch (text) {
                        case 1:
                            return 图文;
                        case 2:
                            return 视频;
                        case 3:
                            return 供需;
                        case 4:
                            return 引用;
                        case 5:
                            return 想法;
                        default:
                            return null;
                    }
                }
            },{
                title: '内容预览',
                dataIndex: 'content',
                key: 'content',
                render:(text) => {
                    return (
                        
                            {text ? (text.length > 10 ? text.substr(0, 10) + "(.....)" : text) : ""}
                        
                    )
                }
            },{
                title: '发布时间',
                dataIndex: 'createDate',
                key: 'createDate',
                render: CreateDate => ({getFormatDate(CreateDate)})
            },{
                title: '审核人',
                dataIndex: 'reportUserName',
                key: 'reportUserName',
            },{
                title: '审核状态',
                dataIndex: 'status',
                key: 'status',
                render: text => {
                    switch (text) {
                        case -1:
                            return 未通过;
                        case 0:
                            return 审核中;
                        case 1:
                            return 已通过
                        default:
                            return null;
                    }
                }
            },{
                title: '标签',
                dataIndex: 'tags',
                key: 'tags',
            },{
                title: '审核时间',
                dataIndex: 'updateDate',
                key: 'updateDate',
                render: UpdateDate => ({getFormatDate(UpdateDate)})
            },{
                title: '备注',
                dataIndex: 'remark',
                key: 'remark',
                render:(text) => {
                    return (
                        
                            {text ? (text.length > 10 ? text.substr(0 , 10) + "(....)": text) : ""}
                        
                    )
                }
            },{
                title: '推荐情况',
                dataIndex: 'recommendation',
                key: 'recommendation',
                render: text => {
                    switch (text) {
                        case 1:
                            return 未推荐;
                        case 2:
                            return 已推荐待推送;
                        case 3:
                            return 已推送;
                        default:
                            return null;
                    }
                }
            },{
                title: '操作',
                key: 'action',
                fixed: 'right',
                width: 110,
                render: (text, record) => (
                    
                         this.showDetailsModal(record)}>详情
                        {/*  */}
                        {record.status !== 1 ?  this.showModal(record)} >审核 : null}
                    
                )
            }];


            const { getFieldDecorator } = this.props.form;
        
            const formItemLayout = {
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 6 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
            };

        return (
            
{getFieldDecorator('title', { // rules: [{ required: true, message: "请输入活动名" }], })()} {getFieldDecorator('title', { // rules: [{ required: true, message: "请输入活动名" }], })()} {getFieldDecorator('type', { // rules: [{ required: true }], initialValue: "全部", //valuePropName: "checked" })( )} {getFieldDecorator('registrationRangepicker')( )} {getFieldDecorator('type', { // rules: [{ required: true }], initialValue: "全部", //valuePropName: "checked" })( )} {getFieldDecorator('type', { // rules: [{ required: true }], initialValue: "全部", //valuePropName: "checked" })( )} {getFieldDecorator('type', { // rules: [{ required: true }], initialValue: "全部", //valuePropName: "checked" })( )} {getFieldDecorator('registrationRangepicker')( )}
); } } export default Form.create()(TradeCircleList);

效果图:
使用antd中的Form和24 栅格系统进行排版实现响应式布局_第1张图片

你可能感兴趣的:(react)