fix issue

pull/330/head
vapao 2021-04-09 09:17:15 +08:00
parent 10c782e186
commit 5aeac11c6e
6 changed files with 66 additions and 64 deletions

View File

@ -14,7 +14,7 @@ class App extends Component {
return (
<Switch>
<Route path="/" exact component={Login} />
<Route path="/ssh/:id" exact component={WebSSH} />
<Route path="/ssh" exact component={WebSSH} />
<Route component={Layout} />
</Switch>
);

View File

@ -27,7 +27,10 @@ export default class extends React.Component {
<Breadcrumb>
{this.props.children}
</Breadcrumb>
<div className={styles.title}>{title}</div>
<div className={styles.title}>
<span>{title}</span>
{this.props.extra}
</div>
</div>
)
}

View File

@ -141,6 +141,8 @@
border-bottom: 1px solid #e8e8e8;
.title {
display: flex;
justify-content: space-between;
margin-bottom: 9px;
font-size: 20px;
line-height: 50px;

View File

@ -22,7 +22,7 @@ export default observer(function () {
<Descriptions.Item label="所属分组">
<List >
{group_ids.map(g_id => (
<List.Item style={{padding: '6px 0'}}>{store.groups[g_id]}</List.Item>
<List.Item key={g_id} style={{padding: '6px 0'}}>{store.groups[g_id]}</List.Item>
))}
</List>
</Descriptions.Item>

View File

@ -3,7 +3,7 @@
* Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License.
*/
import React from 'react';
import React, { useEffect } from 'react';
import { observer } from 'mobx-react';
import { Table, Modal, message } from 'antd';
import { PlusOutlined, ImportOutlined } from '@ant-design/icons';
@ -11,17 +11,12 @@ import { Action, TableCard, AuthButton } from 'components';
import { http, hasPermission } from 'libs';
import store from './store';
@observer
class ComTable extends React.Component {
componentDidMount() {
function ComTable() {
useEffect(() => {
store.fetchRecords()
}
}, [])
handleConsole = (info) => {
window.open(`/ssh/${info.id}`)
};
handleDelete = (text) => {
function handleDelete(text) {
Modal.confirm({
title: '删除确认',
content: `确定要删除【${text['name']}】?`,
@ -33,55 +28,52 @@ class ComTable extends React.Component {
})
}
})
};
render() {
return (
<TableCard
rowKey="id"
title={<TableCard.Search keys={['f_name/主机名称', 'f_host/连接地址']} onChange={(k, v) => store[k] = v}/>}
loading={store.isFetching}
dataSource={store.dataSource}
onReload={store.fetchRecords}
actions={[
<AuthButton
auth="host.host.add"
type="primary"
icon={<PlusOutlined/>}
onClick={() => store.showForm()}>新建</AuthButton>,
<AuthButton
auth="host.host.add"
type="primary"
icon={<ImportOutlined/>}
onClick={() => store.importVisible = true}>批量导入</AuthButton>
]}
pagination={{
showSizeChanger: true,
showLessItems: true,
hideOnSinglePage: true,
showTotal: total => `${total}`,
pageSizeOptions: ['10', '20', '50', '100']
}}>
<Table.Column
showSorterTooltip={false}
title="主机名称"
render={info => <Action.Button onClick={() => store.showDetail(info)}>{info.name}</Action.Button>}
sorter={(a, b) => a.name.localeCompare(b.name)}/>
<Table.Column title="连接地址" dataIndex="hostname" sorter={(a, b) => a.name.localeCompare(b.name)}/>
<Table.Column hide width={100} title="端口" dataIndex="port"/>
<Table.Column 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>
)}/>
)}
</TableCard>
)
}
return (
<TableCard
rowKey="id"
title={<TableCard.Search keys={['f_name/主机名称', 'f_host/连接地址']} onChange={(k, v) => store[k] = v}/>}
loading={store.isFetching}
dataSource={store.dataSource}
onReload={store.fetchRecords}
actions={[
<AuthButton
auth="host.host.add"
type="primary"
icon={<PlusOutlined/>}
onClick={() => store.showForm()}>新建</AuthButton>,
<AuthButton
auth="host.host.add"
type="primary"
icon={<ImportOutlined/>}
onClick={() => store.importVisible = true}>批量导入</AuthButton>
]}
pagination={{
showSizeChanger: true,
showLessItems: true,
hideOnSinglePage: true,
showTotal: total => `${total}`,
pageSizeOptions: ['10', '20', '50', '100']
}}>
<Table.Column
showSorterTooltip={false}
title="主机名称"
render={info => <Action.Button onClick={() => store.showDetail(info)}>{info.name}</Action.Button>}
sorter={(a, b) => a.name.localeCompare(b.name)}/>
<Table.Column title="连接地址" dataIndex="hostname" sorter={(a, b) => a.name.localeCompare(b.name)}/>
<Table.Column hide width={100} title="端口" dataIndex="port"/>
<Table.Column title="备注信息" dataIndex="desc"/>
{hasPermission('host.host.edit|host.host.del|host.host.console') && (
<Table.Column width={160} title="操作" render={info => (
<Action>
<Action.Button auth="host.host.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
<Action.Button auth="host.host.del" onClick={() => handleDelete(info)}>删除</Action.Button>
</Action>
)}/>
)}
</TableCard>
)
}
export default ComTable
export default observer(ComTable)

View File

@ -5,7 +5,8 @@
*/
import React from 'react';
import { observer } from 'mobx-react';
import { Row, Col } from 'antd';
import { Row, Col, Button } from 'antd';
import { RobotOutlined } from '@ant-design/icons';
import { AuthDiv, Breadcrumb } from 'components';
import Group from './Group';
import ComTable from './Table';
@ -16,9 +17,13 @@ import Selector from './Selector';
import store from './store';
export default observer(function () {
function openTerminal() {
window.open('/ssh')
}
return (
<AuthDiv auth="host.host.view">
<Breadcrumb>
<Breadcrumb extra={<Button type="primary" icon={<RobotOutlined/>} onClick={openTerminal}>Web 终端</Button>}>
<Breadcrumb.Item>首页</Breadcrumb.Item>
<Breadcrumb.Item>主机管理</Breadcrumb.Item>
</Breadcrumb>