From f43c31d351509827fc82cbc0360fe32b50a240a3 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Sat, 26 Dec 2020 16:39:03 +0800
Subject: [PATCH] improve host selector

---
 spug_web/src/pages/host/Selector.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/spug_web/src/pages/host/Selector.js b/spug_web/src/pages/host/Selector.js
index c424e37..b084045 100644
--- a/spug_web/src/pages/host/Selector.js
+++ b/spug_web/src/pages/host/Selector.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { observer } from 'mobx-react';
-import { Modal, Row, Col, Tree, Table } from 'antd';
+import { Modal, Row, Col, Tree, Table, Button, Alert } from 'antd';
 import store from './store';
 
 export default observer(function (props) {
@@ -70,6 +70,12 @@ 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>}/>
+          )}
           <Table
             rowKey="id"
             dataSource={dataSource}
@@ -80,7 +86,8 @@ export default observer(function (props) {
             }}
             rowSelection={{
               selectedRowKeys,
-              onChange: (keys) => setSelectedRowKeys(keys)
+              onSelect: handleClickRow,
+              onSelectAll: (_, __, changeRows) => changeRows.map(x => handleClickRow(x))
             }}>
             <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)}/>