U 优化任务计划添加执行对象

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>
   )
 })

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 {

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
   };