react 组装table列表带分页

2.组装编辑界面

/**
 * Created by hldev on 17-6-14.
 */
import React, {Component} from "react";
import {Link} from "react-router-dom";
import {inject, observer} from "mobx-react";
import {Form, Input, Select, Row, Col, Button, Card, InputNumber, Radio, Modal  } from 'antd';
import HlBreadcrumb from "../common/HlBreadcrumb";
import Panel, {PanelBody, PanelHeader} from '../common/Panel';
import Utils from "../../utils/util"
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

@inject("store")
@observer
class HostEdit extends Component {

    constructor(props) {
        super(props);
        this.hostState = this.props.store.hostState;
    }

    componentWillMount() {
        this.hostState.getCabinetList();
        if (!this.isAdd()) {
            this.hostState.getHosts(this.props.match.params.id);
        }
    }

    isAdd = () => this.props.match.params.id === 'add';

    handClick = (event) => {
        window.history.back();
    };

    isUNumb =(obj) =>{
      //根据cabinetId 找到对应的机柜的总的U位数
      //然后对比两个U位和机柜U位之间的关系
      const cabinetList = this.hostState.cabinetList;
      if (!cabinetList || cabinetList.length === 0) {
        return [];
      }
      const cabinet = cabinetList.find( item => item.cabinetId === obj.cabinetId);

      if(obj.startNum > cabinet.unum){
        Modal.error({
          title:'错误消息',
          content:`开始U位数不能大于机柜的U位数${cabinet.unum}`
        });
        return;

      }
      if(obj.endNum > cabinet.unum){
        Modal.error({
          title:'错误消息',
          content:`结束U位数不能大于机柜的U位数${cabinet.unum}`
        });
        return;
      }

      if(obj.startNum > obj.endNum){
        Modal.error({
          title:'错误消息',
          content:`开始U位数不能大于结束U位数`
        });
        return;
      }
      if(obj.startNum < cabinet.unum && obj.endNum <= cabinet.unum && obj.startNum <= obj.endNum){
        //处理添加和修改的区别
        if (!this.isAdd()) {
          this.hostState.updateHost(obj).then((response)=> {
            console.log(response);
            const {status} = response;
            if(status){
              Utils.goBack();
            }
          })
        } else {
          this.hostState.createHost(obj); //新增
          Utils.goBack();
        }
      }

    };

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
                if (this.isAdd()) { //新增/api/cabinet
                    //验证主机的开始U位数和结束U位数不能大于 机柜的总的U位数
                    this.isUNumb(values)
                    //this.hostState.createHost(values);
                } else {
                    console.log('修改主机参数: ', values);
                    this.isUNumb(values);
                    //this.hostState.updateHost(values); //修改
                }

            }
        });
    };

    renderOptions = () => {
        const cabinetList = this.hostState.cabinetList;
        if (!cabinetList || cabinetList.length === 0) {
            return <Option value="暂无数据" key='-1'>暂无数据</Option>
        }
        return cabinetList.map((doc, idx) => <Option key={idx} value={doc.cabinetId}>{doc.name}——{doc.cabinetId}</Option>);
    };

    render() {
        const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {span: 7},
                sm: {span: 6},
            },
            wrapperCol: {
                xs: {span: 12},
                sm: {span: 14},
            },
        };

        const breadcrumb = [{
            path: '/', name: '首页'
        }, {
            path: '/hostMain', name: '主机管理'
        }, {
          name: this.isAdd() ? '添加主机' : '编辑主机'
        }];

        const optionElement = this.renderOptions();

        return (
            <div className="content-main">
                <HlBreadcrumb breadcrumb={breadcrumb}/>
                <Panel>
                    <PanelBody>
                        <Form onSubmit={this.handleSubmit}>
                            <Row>
                                <Col span={10}>
                                    <FormItem
                                        {...formItemLayout}
                                        label="机柜ID"
                                        hasFeedback>
                                        {getFieldDecorator('cabinetId', {
                                            rules: [{
                                                required: true, message: '请输入机柜ID!',
                                            }],
                                            initialValue: this.isAdd() ? "" : this.hostState.hosts.cabinetId
                                        })(
                                            <Select  showSearch style={{width: '16rem'}}
                                                     optionFilterProp="children"
                                                     onChange={this.handleChange}
                                                     filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                                     placeholder="--请选择--">
                                                {optionElement}
                                            </Select>
                                        )}
                                    </FormItem>
                                    <FormItem {...formItemLayout}
                                              label="CPU参数"
                                              hasFeedback>
                                        {getFieldDecorator('cpuParameter', {
                                            rules: [{
                                                required: true, message: '请输入CPU参数!',
                                            }],
                                            initialValue: this.isAdd() ? "" : this.hostState.hosts.cpuParameter
                                        })(
                                            <Input />
                                        )}
                                    </FormItem>

                                    <FormItem {...formItemLayout}
                                              label="主机ID"
                                              hasFeedback>
                                        {getFieldDecorator('hostId', {
                                            rules: [{
                                                required: true, message: '请输入主机ID!',
                                            }],
                                            initialValue: this.isAdd() ? "" : this.hostState.hosts.hostId
                                        })(
                                          this.isAdd() ? <Input /> : <Input disabled={true}/>
                                        )}
                                    </FormItem>

                                    <FormItem {...formItemLayout}
                                              label="内存参数(GB)"
                                              hasFeedback>
                                        {getFieldDecorator('memoryParameter', {
                                            rules: [{
                                                required: true, message: '请输入内存参数!',
                                            }],
                                            initialValue: this.isAdd() ? "" : this.hostState.hosts.memoryParameter
                                        })(
                                            <Input />
                                        )}
                                    </FormItem>

                                    <FormItem {...formItemLayout}
                                              label="硬盘参数(T)"
                                              hasFeedback>
                                        {getFieldDecorator('diskParameter', {
                                            rules: [{
                                                required: true, message: '请输入硬盘参数!',
                                            }],
                                            initialValue: this.isAdd() ? "" : this.hostState.hosts.diskParameter
                                        })(
                                            <Input />
                                        )}
                                    </FormItem>

                                    <FormItem {...formItemLayout} label="电源参数(V)"
                                              hasFeedback>
                                        {getFieldDecorator('powerParameter', {
                                            rules: [{
                                                required: true, message: '请输入电源参数!',
                                            }],
                                            initialValue: this.isAdd() ? "" : this.hostState.hosts.powerParameter
                                        })(
                                            <Input />
                                        )}
                                    </FormItem>

                                    <FormItem {...formItemLayout}
                                              label="主板参数(GB)"
                                              hasFeedback>
                                        {getFieldDecorator('motherBoardParameter', {
                                            rules: [{
                                                required: true, message: '请输入主板参数!',
                                            }],
                                            initialValue: this.isAdd() ? "" : this.hostState.hosts.motherBoardParameter
                                        })(
                                            <Input />
                                        )}
                                    </FormItem>

                                </Col>
                                <Col span={2}>

                                </Col>

                                <Col span={10}>

                                    <FormItem {...formItemLayout}
                                              label="起始U位"
                                              hasFeedback>
                                        {getFieldDecorator('startNum', {
                                            rules: [{
                                                required: true, message: '请输入起始U位!',
                                            }],
                                            initialValue: this.isAdd() ? "" : this.hostState.hosts.startNum
                                        })(
                                            <InputNumber
                                                min={1}
                                                max={99}
                                                formatter={value => parseInt(value) || "" }
                                            />
                                        )}
                                    </FormItem>
                                    <FormItem {...formItemLayout}
                                              label="终止U位"
                                              hasFeedback>
                                        {getFieldDecorator('endNum', {
                                            rules: [{
                                                required: true, message: '请输入终止U位!',
                                            }],
                                            initialValue: this.isAdd() ? "" : this.hostState.hosts.endNum
                                        })(
                                            <InputNumber

                                                min={1}
                                                max={99}
                                                formatter={value => parseInt(value) || ""}
                                            />
                                        )}
                                    </FormItem>

                                    <FormItem {...formItemLayout}
                                              label="硬盘状态"
                                              hasFeedback>
                                        {getFieldDecorator('diskStatus', {
                                            rules: [{
                                                required: true, message: '请选择硬盘状态!',
                                            }],
                                            initialValue: this.isAdd() ? "" : this.hostState.hosts.diskStatus+''
                                        })(
                                            <RadioGroup>
                                                <Radio value="0">预警</Radio>
                                                <Radio value="1">正常</Radio>
                                            </RadioGroup>
                                        )}
                                    </FormItem>

                                    <FormItem {...formItemLayout}
                                              label="内存状态"
                                              hasFeedback>
                                        {getFieldDecorator('memoryStatus', {
                                            rules: [{
                                                required: true, message: '请选择内存状态!',
                                            }],
                                            initialValue: this.isAdd() ? "" : this.hostState.hosts.memoryStatus+''
                                        })(
                                            <RadioGroup>
                                                <Radio value="0">预警</Radio>
                                                <Radio value="1">正常</Radio>
                                            </RadioGroup>
                                        )}
                                    </FormItem>

                                    <FormItem {...formItemLayout}
                                              label="CPU状态"
                                              hasFeedback>
                                        {getFieldDecorator('cpuStatus', {
                                            rules: [{
                                                required: true, message: '请选择CPU状态!',
                                            }],
                                            initialValue: this.isAdd() ? "" : this.hostState.hosts.cpuStatus+''
                                        })(
                                            <RadioGroup>
                                                <Radio value="0">预警</Radio>
                                                <Radio value="1">正常</Radio>
                                            </RadioGroup>
                                        )}
                                    </FormItem>

                                    <FormItem {...formItemLayout}
                                              label="服务健康状况"
                                              hasFeedback>
                                        {getFieldDecorator('serverStatus', {
                                            rules: [{
                                                required: true, message: '请选择服务健康状况!',
                                            }],
                                            initialValue: this.isAdd() ? "" : this.hostState.hosts.serverStatus+''
                                        })(
                                            <RadioGroup>
                                                <Radio value="0">预警</Radio>
                                                <Radio value="1">正常</Radio>
                                            </RadioGroup>
                                        )}
                                    </FormItem>

                                    <FormItem {...formItemLayout}
                                              label="主机状态"
                                              hasFeedback>
                                        {getFieldDecorator('status', {
                                            rules: [{
                                                required: true, message: '请选择主机状态!',
                                            }],
                                            initialValue: this.isAdd() ? "" : this.hostState.hosts.status+''
                                        })(
                                            <RadioGroup>
                                                <Radio value="0">未使用</Radio>
                                                <Radio value="1">正常</Radio>
                                                <Radio value="2">预警</Radio>
                                            </RadioGroup>
                                        )}
                                    </FormItem>

                                </Col>
                            </Row>

                            <FormItem style={{textAlign: 'center'}}>
                                <Button onClick={this.handClick}>取消</Button>
                                <Button type="primary" htmlType="submit">确认</Button>
                            </FormItem>
                        </Form>
                    </PanelBody>
                </Panel>
            </div>
        )
    }
}

HostEdit = Form.create()(HostEdit);
export default  HostEdit;

1.table列表

/**
 * Created by hldev on 17-6-14.
 * 机柜列表管理
 */
import React, {Component} from "react";
import {Link} from "react-router-dom";
import {inject, observer} from "mobx-react";
import {Button, Col, Form, Icon, Popconfirm, Row, Table, Tag} from "antd";
import HlBreadcrumb from "../common/HlBreadcrumb";
import HlPagination from "../common/HlPagination";
import Panel, {PanelBody, PanelHeader} from "../common/Panel";

@inject("store")
@observer
class CabinetList extends Component {

  constructor(props) {
    super(props);
    this.roomState = this.props.store.roomState;
  }

  componentDidMount() {
    //this.roomState.getRoomList();
    this.roomState.getRoomPage();
  }

  /*
   * 渲染table数据列，处理请求返回为空的情况
   * */
  dataSource = (roomPage) => {
    console.log('totalElements', roomPage.totalElements);
    if (roomPage.totalElements === undefined || roomPage.totalElements <= 0) {
      return [];
    }

    return roomPage.content.map((item, idx) => {
      let statusName = '';
      if (item.status === 0) {
        statusName = '未使用'
      } else if (item.status === 1) {
        statusName = '使用中'
      } else {
        statusName = '预警'
      }
      return {
        ...item,
        status: statusName,
        /*address:cabinet.address,*/
        key: idx,
      };
    });
  };

  render() {

    const columns = [{
      title: '机房编号',
      dataIndex: 'roomId',
      key: 'roomId',
      render: (text, record, index) => <Link to={`/clusterMain/${record.roomId}`}>{text}</Link>
    }, {
      title: '机房位置',
      dataIndex: 'address',
      key: 'address',
      /*render: (item) => item ? item.join('，') : '' description*/
    }, {
      title: '备注信息',
      dataIndex: 'description',
      key: 'description',
    }, {
      title: '机房状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => {
        if (status === `未使用`) {
          return (<div style={{color: 'gary'}}>{status}</div>)
        } else if (status === `使用中`) {
          return (<Tag color="green">{status}</Tag>)
        } else {
          return (<Tag color="orange">{status}</Tag>)
        }
      }
    },{
      title: '操作',
      key: 'operation',
      render: (_, record) => (
        <div>
          <Link to={`/roomMain/${record.roomId}`}><Icon type="edit"/>编辑</Link>
          <span className="ant-divider"/>
          <Popconfirm title="是否确认删除该记录?"
                      onConfirm={() => this.topicState.deleteTopic(`${record.id}`)}>
            {/*<a className="fgw-text-error"><Icon type="delete"/>删除</a>*/}
          </Popconfirm>
        </div>)
    }];

    const {getFieldDecorator} = this.props.form;

    const dataSource = this.dataSource(this.roomState.roomPage);
    const paginationProps = {
      totalElements: this.roomState.roomPage.totalElements || 0,
      params: this.props.form.getFieldsValue(),
      state: "roomState",
      method: "getRoomPage"
    };

    const breadcrumb = [{
      path: '/',
      name: '首页'
    }, {
      name: '所有机房管理'
    }];

    return (
      <div className="content-main">
        <HlBreadcrumb breadcrumb={breadcrumb}/>
        <Panel>
          <PanelHeader>
            <Row>
              <Col span={12}>
                {/*<Input.Search placeholder="输入机柜编号进行搜索"
                 onSearch={value => this.topicState.getTopicPage({name: value})}/>*/}
              </Col>
              <Col span={12}>
                <Link to={`/roomMain/add`} className="fgw-pull-right">
                  <Button type="primary" htmlType="submit">添加</Button>
                </Link>
              </Col>
            </Row>
          </PanelHeader>
          <PanelBody>
            <Table bordered={true}
                   size="small"
                   columns={columns}
                   pagination={false}
                   dataSource={dataSource}/>
            <HlPagination paginationProps={paginationProps}/>
          </PanelBody>
        </Panel>
      </div>);
  }
}

CabinetList = Form.create()(CabinetList);
export default  CabinetList;