U improve page style

spug_web/src/pages/alarm/contact/Table.js

@@ -7,7 +7,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { Table, Modal, message } from 'antd';
 import ComForm from './Form';
-import {http, hasPermission} from 'libs';
+import { http, hasPermission } from 'libs';
 import store from './store';
 import { Action } from "components";
 
@@ -17,40 +17,6 @@ class ComTable extends React.Component {
     store.fetchRecords()
   }
 
-  columns = [{
-    title: '序号',
-    key: 'series',
-    render: (_, __, index) => index + 1,
-    width: 80,
-  }, {
-    title: '姓名',
-    dataIndex: 'name',
-  }, {
-    title: '手机号',
-    dataIndex: 'phone',
-  }, {
-    title: '邮箱',
-    dataIndex: 'email',
-    ellipsis: true
-  }, {
-    title: '钉钉',
-    dataIndex: 'ding',
-    ellipsis: true
-  }, {
-    title: '企业微信',
-    dataIndex: 'qy_wx',
-    ellipsis: true
-  }, {
-    title: '操作',
-    className: hasPermission('alarm.contact.edit|alarm.contact.del') ? null : 'none',
-    render: info => (
-      <Action>
-        <Action.Button auth="alarm.contact.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
-        <Action.Button auth="alarm.contact.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
-      </Action>
-    )
-  }];
-
   handleDelete = (text) => {
     Modal.confirm({
       title: '删除确认',
@@ -82,8 +48,22 @@ class ComTable extends React.Component {
             hideOnSinglePage: true,
             showTotal: total => `共 ${total} 条`,
             pageSizeOptions: ['10', '20', '50', '100']
-          }}
-          columns={this.columns}/>
+          }}>
+          <Table.Column width={80} title="序号" key="series" render={(_, __, index) => index + 1}/>
+          <Table.Column title="姓名" dataIndex="name"/>
+          <Table.Column title="手机号" dataIndex="phone"/>
+          <Table.Column ellipsis title="邮箱" dataIndex="email"/>
+          <Table.Column ellipsis title="钉钉" dataIndex="ding"/>
+          <Table.Column ellipsis title="企业微信" dataIndex="qy_wx"/>
+          {hasPermission('alarm.contact.edit|alarm.contact.del') && (
+            <Table.Column title="操作" render={info => (
+              <Action>
+                <Action.Button auth="alarm.contact.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+                <Action.Button auth="alarm.contact.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+              </Action>
+            )}/>
+          )}
+        </Table>
         {store.formVisible && <ComForm/>}
       </React.Fragment>
     )

spug_web/src/pages/alarm/group/Table.js

@@ -7,7 +7,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { Table, Modal, message } from 'antd';
 import ComForm from './Form';
-import {http, hasPermission} from 'libs';
+import { http, hasPermission } from 'libs';
 import store from './store';
 import contactStore from '../contact/store';
 import { Action } from "components";
@@ -39,34 +39,6 @@ class ComTable extends React.Component {
     this.setState({contactMap: tmp})
   };
 
-  columns = [{
-    title: '序号',
-    key: 'series',
-    render: (_, __, index) => index + 1,
-    width: 80,
-  }, {
-    title: '组名称',
-    dataIndex: 'name',
-  }, {
-    title: '成员',
-    dataIndex: 'contacts',
-    render: value => value.map(x => lds.get(this.state.contactMap, `${x}.name`)).join(','),
-    ellipsis: true
-  }, {
-    title: '描述信息',
-    dataIndex: 'desc',
-    ellipsis: true
-  }, {
-    title: '操作',
-    className: hasPermission('alarm.group.edit|alarm.group.del') ? null : 'none',
-    render: info => (
-      <Action>
-        <Action.Button auth="alarm.group.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
-        <Action.Button auth="alarm.group.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
-      </Action>
-    )
-  }];
-
   handleDelete = (text) => {
     Modal.confirm({
       title: '删除确认',
@@ -101,8 +73,21 @@ class ComTable extends React.Component {
             hideOnSinglePage: true,
             showTotal: total => `共 ${total} 条`,
             pageSizeOptions: ['10', '20', '50', '100']
-          }}
-          columns={this.columns}/>
+          }}>
+          <Table.Column title="序号" key="series" render={(_, __, index) => index + 1}/>
+          <Table.Column title="组名称" dataIndex="name"/>
+          <Table.Column ellipsis title="成员" dataIndex="contacts"
+                        render={value => value.map(x => lds.get(this.state.contactMap, `${x}.name`)).join(',')}/>
+          <Table.Column ellipsis title="描述信息" dataIndex="desc"/>
+          {hasPermission('alarm.group.edit|alarm.group.del') && (
+            <Table.Column title="操作" render={info => (
+              <Action>
+                <Action.Button auth="alarm.group.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+                <Action.Button auth="alarm.group.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+              </Action>
+            )}/>
+          )}
+        </Table>
         {store.formVisible && <ComForm/>}
       </React.Fragment>
     )

spug_web/src/pages/config/app/Table.js

@@ -16,34 +16,6 @@ class ComTable extends React.Component {
     store.fetchRecords()
   }
 
-  columns = [{
-    title: '序号',
-    key: 'series',
-    render: (_, __, index) => index + 1,
-    width: 80,
-  }, {
-    title: '应用名称',
-    dataIndex: 'name',
-  }, {
-    title: '标识符',
-    dataIndex: 'key',
-  }, {
-    title: '描述信息',
-    dataIndex: 'desc',
-    ellipsis: true
-  }, {
-    title: '操作',
-    className: hasPermission('config.app.edit|config.app.del|config.app.view_config') ? null : 'none',
-    render: info => (
-      <Action>
-        <Action.Button auth="config.app.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
-        <Action.Button auth="config.app.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
-        <Action.Button auth="config.app.view_config" onClick={() => store.showRel(info)}>依赖</Action.Button>
-        <Action.Link auth="config.app.view_config" to={`/config/setting/app/${info.id}`}>配置</Action.Link>
-      </Action>
-    )
-  }];
-
   handleDelete = (text) => {
     Modal.confirm({
       title: '删除确认',
@@ -74,8 +46,22 @@ class ComTable extends React.Component {
           hideOnSinglePage: true,
           showTotal: total => `共 ${total} 条`,
           pageSizeOptions: ['10', '20', '50', '100']
-        }}
-        columns={this.columns}/>
+        }}>
+        <Table.Column title="序号" key="series" render={(_, __, index) => index + 1}/>
+        <Table.Column title="应用名称" dataIndex="name"/>
+        <Table.Column title="标识符" dataIndex="key"/>
+        <Table.Column ellipsis title="描述信息" dataIndex="desc"/>
+        {hasPermission('config.app.edit|config.app.del|config.app.view_config') && (
+          <Table.Column title="操作" render={info => (
+            <Action>
+              <Action.Button auth="config.app.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+              <Action.Button auth="config.app.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+              <Action.Button auth="config.app.view_config" onClick={() => store.showRel(info)}>依赖</Action.Button>
+              <Action.Link auth="config.app.view_config" to={`/config/setting/app/${info.id}`}>配置</Action.Link>
+            </Action>
+          )}/>
+        )}
+      </Table>
     )
   }
 }

spug_web/src/pages/config/environment/Table.js

@@ -7,7 +7,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { Table, Modal, message } from 'antd';
 import ComForm from './Form';
-import {http, hasPermission} from 'libs';
+import { http, hasPermission } from 'libs';
 import store from './store';
 import { Action } from "components";
 
@@ -17,32 +17,6 @@ class ComTable extends React.Component {
     store.fetchRecords()
   }
 
-  columns = [{
-    title: '序号',
-    key: 'series',
-    render: (_, __, index) => index + 1,
-    width: 80,
-  }, {
-    title: '环境名称',
-    dataIndex: 'name',
-  }, {
-    title: '标识符',
-    dataIndex: 'key',
-  }, {
-    title: '描述信息',
-    dataIndex: 'desc',
-    ellipsis: true
-  }, {
-    title: '操作',
-    className: hasPermission('config.env.edit|config.env.del') ? null : 'none',
-    render: info => (
-      <Action>
-        <Action.Button auth="config.env.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
-        <Action.Button auth="config.env.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
-      </Action>
-    )
-  }];
-
   handleDelete = (text) => {
     Modal.confirm({
       title: '删除确认',
@@ -74,8 +48,20 @@ class ComTable extends React.Component {
             hideOnSinglePage: true,
             showTotal: total => `共 ${total} 条`,
             pageSizeOptions: ['10', '20', '50', '100']
-          }}
-          columns={this.columns}/>
+          }}>
+          <Table.Column title="序号" key="series" render={(_, __, index) => index + 1}/>
+          <Table.Column title="环境名称" dataIndex="name"/>
+          <Table.Column title="标识符" dataIndex="key"/>
+          <Table.Column ellipsis title="描述信息" dataIndex="desc"/>
+          {hasPermission('config.env.edit|config.env.del') && (
+            <Table.Column title="操作" render={info => (
+              <Action>
+                <Action.Button auth="config.env.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+                <Action.Button auth="config.env.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+              </Action>
+            )}/>
+          )}
+        </Table>
         {store.formVisible && <ComForm/>}
       </React.Fragment>
     )

spug_web/src/pages/config/service/Table.js

@@ -17,33 +17,6 @@ class ComTable extends React.Component {
     store.fetchRecords()
   }
 
-  columns = [{
-    title: '序号',
-    key: 'series',
-    render: (_, __, index) => index + 1,
-    width: 80,
-  }, {
-    title: '服务名称',
-    dataIndex: 'name',
-  }, {
-    title: '标识符',
-    dataIndex: 'key',
-  }, {
-    title: '描述信息',
-    dataIndex: 'desc',
-    ellipsis: true
-  }, {
-    title: '操作',
-    className: hasPermission('config.src.edit|config.src.del|config.src.view_config') ? null : 'none',
-    render: info => (
-      <Action>
-        <Action.Button auth="config.src.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
-        <Action.Button auth="config.src.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
-        <Action.Link auth="config.src.view_config" to={`/config/setting/src/${info.id}`}>配置</Action.Link>
-      </Action>
-    )
-  }];
-
   handleDelete = (text) => {
     Modal.confirm({
       title: '删除确认',
@@ -75,8 +48,21 @@ class ComTable extends React.Component {
             hideOnSinglePage: true,
             showTotal: total => `共 ${total} 条`,
             pageSizeOptions: ['10', '20', '50', '100']
-          }}
-          columns={this.columns}/>
+          }}>
+          <Table.Column title="序号" key="series" render={(_, __, index) => index + 1}/>
+          <Table.Column title="服务名称" dataIndex="name"/>
+          <Table.Column title="标识符" dataIndex="key"/>
+          <Table.Column ellipsis title="描述信息" dataIndex="desc"/>
+          {hasPermission('config.src.edit|config.src.del|config.src.view_config') && (
+            <Table.Column title="操作" render={info => (
+              <Action>
+                <Action.Button auth="config.src.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+                <Action.Button auth="config.src.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+                <Action.Link auth="config.src.view_config" to={`/config/setting/src/${info.id}`}>配置</Action.Link>
+              </Action>
+            )}/>
+          )}
+        </Table>
         {store.formVisible && <ComForm/>}
       </React.Fragment>
     )

spug_web/src/pages/deploy/app/Table.js

@@ -28,35 +28,6 @@ class ComTable extends React.Component {
     }
   }
 
-  columns = [{
-    title: '序号',
-    key: 'series',
-    render: (_, __, index) => index + 1,
-    width: 80,
-  }, {
-    title: '应用名称',
-    dataIndex: 'name',
-  }, {
-    title: '标识符',
-    dataIndex: 'key'
-  }, {
-    title: '描述信息',
-    dataIndex: 'desc',
-    ellipsis: true
-  }, {
-    title: '操作',
-    width: 260,
-    className: hasPermission('deploy.app.edit|deploy.app.del') ? null : 'none',
-    render: info => (
-      <Action>
-        <Action.Button auth="deploy.app.edit" onClick={e => store.showExtForm(e, info.id)}>新建发布</Action.Button>
-        <Action.Button auth="deploy.app.edit" onClick={e => this.handleClone(e, info.id)}>克隆发布</Action.Button>
-        <Action.Button auth="deploy.app.edit" onClick={e => store.showForm(e, info)}>编辑</Action.Button>
-        <Action.Button auth="deploy.app.del" onClick={e => this.handleDelete(e, info)}>删除</Action.Button>
-      </Action>
-    )
-  }];
-
   handleClone = (e, id) => {
     e.stopPropagation();
     this.cloneObj = null;
@@ -106,38 +77,6 @@ class ComTable extends React.Component {
   };
 
   expandedRowRender = (record) => {
-    const columns = [{
-      title: '模式',
-      dataIndex: 'extend',
-      render: value => value === '1' ? <Icon style={{fontSize: 20, color: '#1890ff'}} type="ordered-list"/> :
-        <Icon style={{fontSize: 20, color: '#1890ff'}} type="build"/>,
-      width: 80
-    }, {
-      title: '发布环境',
-      dataIndex: 'env_id',
-      render: value => lds.get(envStore.idMap, `${value}.name`)
-    }, {
-      title: '关联主机',
-      dataIndex: 'host_ids',
-      render: value => `${value.length} 台`
-    }, {
-      title: '发布审核',
-      dataIndex: 'is_audit',
-      render: value => value ? <Tag color="green">开启</Tag> : <Tag color="red">关闭</Tag>
-    }, {
-      title: '操作',
-      className: hasPermission('deploy.app.config|deploy.app.edit') ? null : 'none',
-      render: info => (
-        <Action>
-          <Action.Button
-            auth="deploy.app.config"
-            onClick={e => store.showExtForm(e, record.id, info, false, true)}>查看</Action.Button>
-          <Action.Button auth="deploy.app.edit" onClick={e => store.showExtForm(e, record.id, info)}>编辑</Action.Button>
-          <Action.Button auth="deploy.app.edit" onClick={() => this.handleDeployDelete(info)}>删除</Action.Button>
-        </Action>
-      )
-    }];
-
     if (record['deploys'] === undefined) {
       store.loadDeploys(record.id)
     }
@@ -145,9 +84,28 @@ class ComTable extends React.Component {
     return <Table
       rowKey="id"
       loading={record['deploys'] === undefined}
-      columns={columns}
       dataSource={record['deploys']}
-      pagination={false}/>
+      pagination={false}>
+      <Table.Column width={80} title="模式" dataIndex="extend" render={value => value === '1' ?
+        <Icon style={{fontSize: 20, color: '#1890ff'}} type="ordered-list"/> :
+        <Icon style={{fontSize: 20, color: '#1890ff'}} type="build"/>}/>
+      <Table.Column title="发布环境" dataIndex="env_id" render={value => lds.get(envStore.idMap, `${value}.name`)}/>
+      <Table.Column title="关联主机" dataIndex="host_ids" render={value => `${value.length} 台`}/>
+      <Table.Column title="发布审核" dataIndex="is_audit"
+                    render={value => value ? <Tag color="green">开启</Tag> : <Tag color="red">关闭</Tag>}/>
+      {hasPermission('deploy.app.config|deploy.app.edit') && (
+        <Table.Column title="操作" render={info => (
+          <Action>
+            <Action.Button
+              auth="deploy.app.config"
+              onClick={e => store.showExtForm(e, record.id, info, false, true)}>查看</Action.Button>
+            <Action.Button auth="deploy.app.edit"
+                           onClick={e => store.showExtForm(e, record.id, info)}>编辑</Action.Button>
+            <Action.Button auth="deploy.app.edit" onClick={() => this.handleDeployDelete(info)}>删除</Action.Button>
+          </Action>
+        )}/>
+      )}
+    </Table>
   };
 
   render() {
@@ -172,8 +130,22 @@ class ComTable extends React.Component {
           hideOnSinglePage: true,
           showTotal: total => `共 ${total} 条`,
           pageSizeOptions: ['10', '20', '50', '100']
-        }}
-        columns={this.columns}/>
+        }}>
+        <Table.Column width={80} title="序号" key="series" render={(_, __, index) => index + 1}/>
+        <Table.Column title="应用名称" dataIndex="name"/>
+        <Table.Column title="标识符" dataIndex="key"/>
+        <Table.Column ellipsis title="描述信息" dataIndex="desc"/>
+        {hasPermission('deploy.app.edit|deploy.app.del') && (
+          <Table.Column width={260} title="操作" render={info => (
+            <Action>
+              <Action.Button auth="deploy.app.edit" onClick={e => store.showExtForm(e, info.id)}>新建发布</Action.Button>
+              <Action.Button auth="deploy.app.edit" onClick={e => this.handleClone(e, info.id)}>克隆发布</Action.Button>
+              <Action.Button auth="deploy.app.edit" onClick={e => store.showForm(e, info)}>编辑</Action.Button>
+              <Action.Button auth="deploy.app.del" onClick={e => this.handleDelete(e, info)}>删除</Action.Button>
+            </Action>
+          )}/>
+        )}
+      </Table>
     )
   }
 }

spug_web/src/pages/exec/template/Table.js

@@ -7,7 +7,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 import { Table, Modal, message } from 'antd';
 import ComForm from './Form';
-import {http,hasPermission } from 'libs';
+import { http, hasPermission } from 'libs';
 import { Action } from "components";
 import store from './store';
 
@@ -17,31 +17,6 @@ class ComTable extends React.Component {
     store.fetchRecords()
   }
 
-  columns = [{
-    title: '模版名称',
-    dataIndex: 'name',
-  }, {
-    title: '模版类型',
-    dataIndex: 'type',
-  }, {
-    title: '模版内容',
-    render: text => text.body,
-    ellipsis: true
-  }, {
-    title: '描述信息',
-    dataIndex: 'desc',
-    ellipsis: true
-  }, {
-    title: '操作',
-    className: hasPermission('exec.template.edit|exec.template.del') ? null : 'none',
-    render: info => (
-      <Action>
-        <Action.Button auth="exec.template.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
-        <Action.Button auth="exec.template.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
-      </Action>
-    )
-  }];
-
   handleDelete = (text) => {
     Modal.confirm({
       title: '删除确认',
@@ -76,8 +51,20 @@ class ComTable extends React.Component {
             hideOnSinglePage: true,
             showTotal: total => `共 ${total} 条`,
             pageSizeOptions: ['10', '20', '50', '100']
-          }}
-          columns={this.columns}/>
+          }}>
+          <Table.Column title="模版名称" dataIndex="name"/>
+          <Table.Column title="模版类型" dataIndex="type"/>
+          <Table.Column ellipsis title="模版内容" dataIndex="body"/>
+          <Table.Column ellipsis title="描述信息" dataIndex="desc"/>
+          {hasPermission('exec.template.edit|exec.template.del') && (
+            <Table.Column title="操作" render={info => (
+              <Action>
+                <Action.Button auth="exec.template.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+                <Action.Button auth="exec.template.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+              </Action>
+            )}/>
+          )}
+        </Table>
         {store.formVisible && <ComForm/>}
       </React.Fragment>
     )

spug_web/src/pages/host/Table.js

@@ -9,7 +9,7 @@ import { Table, Modal, message } from 'antd';
 import { Action } from 'components';
 import ComForm from './Form';
 import ComImport from './Import';
-import { http, hasPermission} from 'libs';
+import { http, hasPermission } from 'libs';
 import store from './store';
 
 @observer
@@ -18,38 +18,6 @@ class ComTable extends React.Component {
     store.fetchRecords()
   }
 
-  columns = [{
-    title: '类别',
-    dataIndex: 'zone',
-  }, {
-    title: '主机名称',
-    dataIndex: 'name',
-    sorter: (a, b) => a.name.localeCompare(b.name)
-  }, {
-    title: '连接地址',
-    dataIndex: 'hostname',
-    sorter: (a, b) => a.name.localeCompare(b.name)
-  }, {
-    title: '端口',
-    dataIndex: 'port',
-    width: 100,
-  }, {
-    title: '备注',
-    dataIndex: 'desc',
-    ellipsis: true
-  }, {
-    title: '操作',
-    width: 200,
-    className: hasPermission('host.host.edit|host.host.del|host.host.console') ? null : 'none',
-    render: info => (
-      <Action>
-        <Action.Button auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
-        <Action.Button auth="host.host.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
-        <Action.Button auth="host.host.console" onClick={() => this.handleConsole(info)}>Console</Action.Button>
-      </Action>
-    )
-  }];
-
   handleConsole = (info) => {
     window.open(`/ssh/${info.id}`)
   };
@@ -91,8 +59,22 @@ class ComTable extends React.Component {
             hideOnSinglePage: true,
             showTotal: total => `共 ${total} 条`,
             pageSizeOptions: ['10', '20', '50', '100']
-          }}
-          columns={this.columns}/>
+          }}>
+          <Table.Column title="类别" dataIndex="zone"/>
+          <Table.Column title="主机名称" dataIndex="name" sorter={(a, b) => a.name.localeCompare(b.name)}/>
+          <Table.Column title="连接地址" dataIndex="hostname" sorter={(a, b) => a.name.localeCompare(b.name)}/>
+          <Table.Column width={100} title="端口" dataIndex="port"/>
+          <Table.Column ellipsis title="备注信息" dataIndex="desc"/>
+          {hasPermission('host.host.edit|host.host.del|host.host.console') && (
+            <Table.Column width={200} title="操作" render={info => (
+              <Action>
+                <Action.Button auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+                <Action.Button auth="host.host.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+                <Action.Button auth="host.host.console" onClick={() => this.handleConsole(info)}>Console</Action.Button>
+              </Action>
+            )}/>
+          )}
+        </Table>
         {store.formVisible && <ComForm/>}
         {store.importVisible && <ComImport/>}
       </React.Fragment>

spug_web/src/pages/monitor/Table.js

@@ -8,7 +8,7 @@ import { observer } from 'mobx-react';
 import { Table, Modal, Tag, message } from 'antd';
 import { Action } from 'components';
 import ComForm from './Form';
-import {http, hasPermission} from 'libs';
+import { http, hasPermission } from 'libs';
 import store from './store';
 import hostStore from '../host/store';
 import lds from 'lodash';
@@ -41,58 +41,6 @@ class ComTable extends React.Component {
     this.setState({hosts: tmp})
   };
 
-  columns = [{
-    title: '任务名称',
-    dataIndex: 'name',
-  }, {
-    title: '类型',
-    dataIndex: 'type_alias',
-  }, {
-    title: '地址',
-    render: info => {
-      if ('34'.includes(info.type)) {
-        return lds.get(this.state.hosts, `${info.addr}.name`)
-      } else {
-        return info.addr
-      }
-    },
-    ellipsis: true
-  }, {
-    title: '频率',
-    dataIndex: 'rate',
-    render: value => `${value}分钟`
-  }, {
-    title: '状态',
-    render: info => {
-      if (info.is_active) {
-        if (info['latest_status'] === 0) {
-          return <Tag color="green">正常</Tag>
-        } else if (info['latest_status'] === 1) {
-          return <Tag color="red">异常</Tag>
-        } else {
-          return <Tag color="orange">待检测</Tag>
-        }
-      } else {
-        return <Tag>未启用</Tag>
-      }
-    }
-  }, {
-    title: '更新于',
-    dataIndex: 'latest_run_time_alias',
-    sorter: (a, b) => a.latest_run_time.localeCompare(b.latest_run_time)
-  }, {
-    title: '操作',
-    className: hasPermission('monitor.monitor.edit|monitor.monitor.del') ? null : 'none',
-    render: info => (
-      <Action>
-        <Action.Button auth="monitor.monitor.edit" onClick={() => this.handleActive(info)}>{info['is_active'] ? '禁用' : '启用'}</Action.Button>
-        <Action.Button auth="monitor.monitor.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
-        <Action.Button auth="monitor.monitor.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
-      </Action>
-    ),
-    width: 180
-  }];
-
   handleActive = (text) => {
     Modal.confirm({
       title: '操作确认',
@@ -152,8 +100,43 @@ class ComTable extends React.Component {
             hideOnSinglePage: true,
             showTotal: total => `共 ${total} 条`,
             pageSizeOptions: ['10', '20', '50', '100']
-          }}
-          columns={this.columns}/>
+          }}>
+          <Table.Column title="任务名称" dataIndex="name"/>
+          <Table.Column title="类型" dataIndex="type_alias"/>
+          <Table.Column ellipsis title="地址" render={info => {
+            if ('34'.includes(info.type)) {
+              return lds.get(this.state.hosts, `${info.addr}.name`)
+            } else {
+              return info.addr
+            }
+          }}/>
+          <Table.Column title="频率" dataIndex="rate" render={value => `${value}分钟`}/>
+          <Table.Column title="状态" render={info => {
+            if (info.is_active) {
+              if (info['latest_status'] === 0) {
+                return <Tag color="green">正常</Tag>
+              } else if (info['latest_status'] === 1) {
+                return <Tag color="red">异常</Tag>
+              } else {
+                return <Tag color="orange">待检测</Tag>
+              }
+            } else {
+              return <Tag>未启用</Tag>
+            }
+          }}/>
+          <Table.Column title="更新于" dataIndex="latest_run_time_alias"
+                        sorter={(a, b) => a.latest_run_time.localeCompare(b.latest_run_time)}/>
+          {hasPermission('monitor.monitor.edit|monitor.monitor.del') && (
+            <Table.Column width={180} title="操作" render={info => (
+              <Action>
+                <Action.Button auth="monitor.monitor.edit"
+                               onClick={() => this.handleActive(info)}>{info['is_active'] ? '禁用' : '启用'}</Action.Button>
+                <Action.Button auth="monitor.monitor.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
+                <Action.Button auth="monitor.monitor.del" onClick={() => this.handleDelete(info)}>删除</Action.Button>
+              </Action>
+            )}/>
+          )}
+        </Table>
         {store.formVisible && <ComForm/>}
       </React.Fragment>
     )