github
/
spug
mirror of https://github.com/openspug/spug
1
0
Fork 0
Code Issues Releases Wiki Activity

improve

pull/410/head
vapao 2021-08-16 22:36:50 +08:00
parent 28b219e9a8
commit 68c4b3ad54
2 changed files with 25 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
spug_web/src/pages/host/Detail.js
View File

@ -1,3 +1,8 @@
/**
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
* Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License.
*/
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { Drawer, Descriptions, List, Button, Input, Select, DatePicker, Tag, message } from 'antd'; import { Drawer, Descriptions, List, Button, Input, Select, DatePicker, Tag, message } from 'antd';

32
spug_web/src/pages/host/Selector.js
View File

@ -1,6 +1,12 @@
/**
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
* Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License.
*/
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { Modal, Row, Col, Tree, Table, Button, Alert } from 'antd'; import { Modal, Row, Col, Tree, Table, Button, Space, Input } from 'antd';
import { includes } from 'libs';
import store from './store'; import store from './store';
import styles from './index.module.less'; import styles from './index.module.less';
@ -9,6 +15,7 @@ export default observer(function (props) {
const [group, setGroup] = useState({}); const [group, setGroup] = useState({});
const [dataSource, setDataSource] = useState([]); const [dataSource, setDataSource] = useState([]);
const [selectedRowKeys, setSelectedRowKeys] = useState(props.selectedRowKeys || []); const [selectedRowKeys, setSelectedRowKeys] = useState(props.selectedRowKeys || []);
const [fKey, setFKey] = useState();
useEffect(() => { useEffect(() => {
if (!store.treeData.length) { if (!store.treeData.length) {
@ -20,11 +27,11 @@ export default observer(function (props) {
}, []) }, [])
useEffect(() => { useEffect(() => {
if (group.key) { let records = store.records;
const records = store.records.filter(x => group.self_host_ids.includes(x.id)); if (group.key) records = records.filter(x => group.self_host_ids.includes(x.id));
setDataSource(records) if (fKey) records = records.filter(x => includes(x.name, fKey) || includes(x.hostname, fKey));
} setDataSource(records)
}, [group]) }, [group, fKey])
function treeRender(nodeData) { function treeRender(nodeData) {
return ( return (
@ -81,12 +88,13 @@ export default observer(function (props) {
/> />
</Col> </Col>
<Col span={18}> <Col span={18}>
{selectedRowKeys.length > 0 && ( <div style={{display: 'flex', justifyContent: 'space-between', marginBottom: 12}}>
<Alert <Input style={{width: 260}} placeholder="输入检索" onChange={e => setFKey(e.target.value)}/>
style={{marginBottom: 12}} <Space hidden={selectedRowKeys.length === 0}>
message={`已选择 ${selectedRowKeys.length} 台主机`} <div>已选择 {selectedRowKeys.length} 台主机</div>
action={<Button type="link" onClick={() => setSelectedRowKeys([])}>取消选择</Button>}/> <Button type="link" onClick={() => setSelectedRowKeys([])}>取消选择</Button>
)} </Space>
</div>
<Table <Table
rowKey="id" rowKey="id"
dataSource={dataSource} dataSource={dataSource}