文档介绍：AntDesignPro 开发手
册
修订历史记录
日期 版本 说明 作者
import
{ Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu,
InputNumber,
DatePicker,
Modal, message,
Badge,
Divider,
Steps,
Radio }
from 'antd' ;
import
StandardTable
from '../../components/StandardTable'
;
import
PageHeaderLayout
from
'../../layouts/PageHeaderLayout'
;
import
styles
from
'./'
;
const
FormItem
= ;
const
getValue
= obj
=>
Object
. keys (obj).
map( key => obj[key]).
join ( ','
);
和 'hostMonitor'建立连接，进行页面的数据交互
***@connect (({ hostMonitor , loading }) => ({
hostMonitor,
loading: [ 'hostMonitor/getMonitorList' ]
}))
创建 form 对象，固定写法
***@ ()
export default class HostMonitor extends PureComponent {
state = {
modalVisible: false ,
updateModalVisible: false ,
expandForm: false ,
selectedRows: [],
formValues: {},
stepFormValues: {},
};
渲染页面完成后执行
componentDidMount () {
const { dispatch } = this .props;
dispatch ({
type: 'hostMonitor/getMonitorList' ,
});
}
表格表头定义
columns
= [
{
title:
'
触发器 '
,
dataIndex:
'description'
,
},
{
title:
'
主机名称 ' ,
dataIndex:
'name' ,
},
{
title:
'
主机 IP'
,
dataIndex:
'host_ip'
,
},
{
title:
'
系统运行时间 '
,
dataIndex:
't'
,
},
{
title:
'
操作系统 ' ,
dataIndex:
''
,
},
{
title:
'
所属系统 ' ,
dataIndex:
''
,
},
{
title:
'
网络区域 ' ,
dataIndex:
''
,
}
];
表格发生操作时执行函数
handleStandardTableChange = ( pagination
const { dispatch } = this .props;
, filtersArg
, sorter
) =>{
const
{