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

spug_web/src/pages/schedule/Step2.js

@@ -3,17 +3,21 @@
  * 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}}>
+    <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}>
@@ -39,15 +43,21 @@ export default observer(function () {
           ))}
         </Form.Item>
         <Form.Item wrapperCol={{span: 14, offset: 6}}>
-        <Button type="dashed" style={{width: '80%'}} onClick={store.addTarget}>
+          <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
   };