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;
View Code
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;
