From 27aa9927df56ac022f64c4cd60ae34d457f200f7 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Sun, 9 Jan 2022 20:56:39 +0800
Subject: [PATCH] =?UTF-8?q?U=20=E4=BC=98=E5=8C=96=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E8=AE=A1=E5=88=92=E6=B7=BB=E5=8A=A0=E6=89=A7=E8=A1=8C=E5=AF=B9?=
 =?UTF-8?q?=E8=B1=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 spug_web/src/pages/schedule/Step2.js         | 74 +++++++++++---------
 spug_web/src/pages/schedule/index.module.css |  3 +-
 spug_web/src/pages/schedule/store.js         |  4 --
 3 files changed, 44 insertions(+), 37 deletions(-)

diff --git a/spug_web/src/pages/schedule/Step2.js b/spug_web/src/pages/schedule/Step2.js
index 623c823..68a4186 100644
--- a/spug_web/src/pages/schedule/Step2.js
+++ b/spug_web/src/pages/schedule/Step2.js
@@ -3,51 +3,61 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { observer } from 'mobx-react';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Form, Select, Button } from 'antd';
+import HostSelector from 'pages/host/Selector';
 import store from './store';
 import hostStore from 'pages/host/store';
 import styles from './index.module.css';
 
 export default observer(function () {
+  const [visible, setVisible] = useState(false)
+
   return (
-    <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
-      <Form.Item required label="执行对象">
-        {store.targets.map((id, index) => (
-          <React.Fragment key={index}>
-            <Select
-              value={id}
-              showSearch
-              placeholder="请选择"
-              optionFilterProp="children"
-              style={{width: '80%', marginRight: 10, marginBottom: 12}}
-              filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
-              onChange={v => store.editTarget(index, v)}>
-              <Select.Option value="local" disabled={store.targets.includes('local')}>本机</Select.Option>
-              {hostStore.records.map(item => (
-                <Select.Option key={item.id} value={item.id} disabled={store.targets.includes(item.id)}>
-                  {`${item.name}(${item['hostname']}:${item['port']})`}
-                </Select.Option>
-              ))}
-            </Select>
-            {store.targets.length > 1 && (
-              <MinusCircleOutlined className={styles.delIcon} onClick={() => store.delTarget(index)}/>
-            )}
-          </React.Fragment>
-        ))}
-      </Form.Item>
-      <Form.Item wrapperCol={{span: 14, offset: 6}}>
-        <Button type="dashed" style={{width: '80%'}} onClick={store.addTarget}>
-          <PlusOutlined/>添加执行对象
-        </Button>
-      </Form.Item>
+    <React.Fragment>
+      <Form labelCol={{span: 6}} wrapperCol={{span: 14}} style={{minHeight: 350}}>
+        <Form.Item required label="执行对象">
+          {store.targets.map((id, index) => (
+            <React.Fragment key={index}>
+              <Select
+                value={id}
+                showSearch
+                placeholder="请选择"
+                optionFilterProp="children"
+                style={{width: '80%', marginRight: 10, marginBottom: 12}}
+                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+                onChange={v => store.editTarget(index, v)}>
+                <Select.Option value="local" disabled={store.targets.includes('local')}>本机</Select.Option>
+                {hostStore.records.map(item => (
+                  <Select.Option key={item.id} value={item.id} disabled={store.targets.includes(item.id)}>
+                    {`${item.name}(${item['hostname']}:${item['port']})`}
+                  </Select.Option>
+                ))}
+              </Select>
+              {store.targets.length > 1 && (
+                <MinusCircleOutlined className={styles.delIcon} onClick={() => store.delTarget(index)}/>
+              )}
+            </React.Fragment>
+          ))}
+        </Form.Item>
+        <Form.Item wrapperCol={{span: 14, offset: 6}}>
+          <Button type="dashed" style={{width: '80%'}} onClick={() => setVisible(true)}>
+            <PlusOutlined/>添加执行对象
+          </Button>
+        </Form.Item>
+        <HostSelector
+          visible={visible}
+          selectedRowKeys={[...store.targets]}
+          onCancel={() => setVisible(false)}
+          onOk={(_, ids) => store.targets = ids}/>
+      </Form>
       <Form.Item wrapperCol={{span: 14, offset: 6}}>
         <Button disabled={store.targets.filter(x => x).length === 0} type="primary"
                 onClick={() => store.page += 1}>下一步</Button>
         <Button style={{marginLeft: 20}} onClick={() => store.page -= 1}>上一步</Button>
       </Form.Item>
-    </Form>
+    </React.Fragment>
   )
 })
diff --git a/spug_web/src/pages/schedule/index.module.css b/spug_web/src/pages/schedule/index.module.css
index 30bddd7..dd9a3e0 100644
--- a/spug_web/src/pages/schedule/index.module.css
+++ b/spug_web/src/pages/schedule/index.module.css
@@ -6,7 +6,8 @@
 .delIcon {
     font-size: 24px;
     position: relative;
-    top: 4px
+    top: 4px;
+    color: #999999;
 }
 
 .delIcon:hover {
diff --git a/spug_web/src/pages/schedule/store.js b/spug_web/src/pages/schedule/store.js
index c5c03b0..d90910c 100644
--- a/spug_web/src/pages/schedule/store.js
+++ b/spug_web/src/pages/schedule/store.js
@@ -71,10 +71,6 @@ class Store {
     this.record = info
   };
 
-  addTarget = () => {
-    this.targets.push(undefined)
-  };
-
   editTarget = (index, v) => {
     this.targets[index] = v
   };