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

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 { observer } from 'mobx-react';
import { Drawer, Descriptions, List, Button, Input, Select, DatePicker, Tag, message } from 'antd';

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 { 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 styles from './index.module.less';
@ -9,6 +15,7 @@ export default observer(function (props) {
const [group, setGroup] = useState({});
const [dataSource, setDataSource] = useState([]);
const [selectedRowKeys, setSelectedRowKeys] = useState(props.selectedRowKeys || []);
const [fKey, setFKey] = useState();
useEffect(() => {
if (!store.treeData.length) {
@ -20,11 +27,11 @@ export default observer(function (props) {
}, [])
useEffect(() => {
if (group.key) {
const records = store.records.filter(x => group.self_host_ids.includes(x.id));
setDataSource(records)
}
}, [group])
let records = store.records;
if (group.key) records = records.filter(x => group.self_host_ids.includes(x.id));
if (fKey) records = records.filter(x => includes(x.name, fKey) || includes(x.hostname, fKey));
setDataSource(records)
}, [group, fKey])
function treeRender(nodeData) {
return (
@ -81,12 +88,13 @@ export default observer(function (props) {
/>
</Col>
<Col span={18}>
{selectedRowKeys.length > 0 && (
<Alert
style={{marginBottom: 12}}
message={`已选择 ${selectedRowKeys.length} 台主机`}
action={<Button type="link" onClick={() => setSelectedRowKeys([])}>取消选择</Button>}/>
)}
<div style={{display: 'flex', justifyContent: 'space-between', marginBottom: 12}}>
<Input style={{width: 260}} placeholder="输入检索" onChange={e => setFKey(e.target.value)}/>
<Space hidden={selectedRowKeys.length === 0}>
<div>已选择 {selectedRowKeys.length} 台主机</div>
<Button type="link" onClick={() => setSelectedRowKeys([])}>取消选择</Button>
</Space>
</div>
<Table
rowKey="id"
dataSource={dataSource}