优化HostSelector组件

spug_web/src/pages/deploy/app/Ext1Setup1.js

@@ -62,7 +62,7 @@ export default observer(function Ext1Setup1() {
         </Form.Item>
       </Form.Item>
       <Form.Item required label="目标主机" tooltip="该发布配置作用于哪些目标主机。">
-        <HostSelector value={info.host_ids} onChange={(_, ids) => info.host_ids = ids}/>
+        <HostSelector value={info.host_ids} onChange={ids => info.host_ids = ids}/>
       </Form.Item>
       <Form.Item required label="Git仓库地址" extra={<span className="btn" onClick={() => setVisible(true)}>私有仓库？</span>}>
         <Input disabled={store.isReadOnly} value={info['git_repo']} onChange={e => info['git_repo'] = e.target.value}

spug_web/src/pages/deploy/app/Ext2Setup1.js

@@ -60,7 +60,7 @@ export default observer(function Ext2Setup1() {
         </Form.Item>
       </Form.Item>
       <Form.Item required label="目标主机" tooltip="该发布配置作用于哪些目标主机。">
-        <HostSelector value={info.host_ids} onChange={(_, ids) => info.host_ids = ids}/>
+        <HostSelector value={info.host_ids} onChange={ids => info.host_ids = ids}/>
       </Form.Item>
       <Form.Item label="发布模式" tooltip="串行即发布时一台完成后再发布下一台，期间出现异常则终止发布。并行则每个主机相互独立发布同时进行。">
         <Radio.Group

spug_web/src/pages/exec/task/index.js

@@ -87,7 +87,7 @@ function TaskIndex() {
       <div className={style.index} hidden={store.showConsole}>
         <Form layout="vertical" className={style.left}>
           <Form.Item required label="目标主机">
-            <HostSelector type="button" value={store.host_ids} onChange={(_, ids) => store.host_ids = ids}/>
+            <HostSelector type="button" value={store.host_ids} onChange={ids => store.host_ids = ids}/>
           </Form.Item>
 
           <Form.Item required label="执行命令" style={{position: 'relative'}}>

spug_web/src/pages/exec/template/Form.js

@@ -135,7 +135,7 @@ export default observer(function () {
           <Button type="link" style={{padding: 0}} onClick={() => setParameter({})}>添加参数</Button>
         </Form.Item>
         <Form.Item label="目标主机">
-          <HostSelector value={info.host_ids} onChange={(_, ids) => info.host_ids = ids}/>
+          <HostSelector value={info.host_ids} onChange={ids => info.host_ids = ids}/>
         </Form.Item>
         <Form.Item name="desc" label="备注信息">
           <Input.TextArea placeholder="请输入模板备注信息"/>

spug_web/src/pages/exec/transfer/index.js

@@ -120,7 +120,7 @@ function TransferIndex() {
         <Card type="inner" title={`数据源${files.length ? `（${files.length}）` : ''}`} extra={(<Space size={24}>
           <Upload multiple beforeUpload={handleUpload}><Space
             className="btn"><UploadOutlined/>上传本地文件</Space></Upload>
-          <HostSelector onlyOne onChange={(_, __, row) => makeFile(row)}>
+          <HostSelector onlyOne mode="rows" onChange={row => makeFile(row)}>
             <Space className="btn"><CloudServerOutlined/>添加主机文件</Space>
           </HostSelector>
         </Space>)}>
@@ -144,7 +144,7 @@ function TransferIndex() {
               <Input value={dir} onChange={e => setDir(e.target.value)} placeholder="请输入目标路径"/>
             </Form.Item>
             <Form.Item required label="目标主机">
-              <HostSelector type="button" value={hosts.map(x => x.id)} onChange={(_, __, rows) => setHosts(rows)}/>
+              <HostSelector type="button" mode="rows" value={hosts.map(x => x.id)} onChange={rows => setHosts(rows)}/>
             </Form.Item>
           </Form>
         </Card>

spug_web/src/pages/host/Selector.js

@@ -62,20 +62,17 @@ function HostSelector(props) {
   }
 
   function handleSubmit() {
-    if (props.onChange) {
+    if (props.mode === 'ids') {
-      setLoading(true);
+      props.onChange(props.onlyOne ? selectedRowKeys[0] : selectedRowKeys)
-      let res
-      const selectedRows = store.rawRecords.filter(x => selectedRowKeys.includes(x.id))
-      if (props.onlyOne) {
-        res = props.onChange(store.group, selectedRowKeys[0], selectedRows[0])
-      } else {
-        res = props.onChange(store.group, selectedRowKeys, selectedRows);
-      }
-      if (res && res.then) {
-        res.then(handleClose, () => setLoading(false))
-      } else {
       handleClose()
-      }
+    } else if (props.mode === 'rows') {
+      const value = store.rawRecords.filter(x => selectedRowKeys.includes(x.id))
+      props.onChange(props.onlyOne ? value[0] : value)
+      handleClose()
+    } else if (props.mode === 'group') {
+      setLoading(true)
+      props.onChange(store.group, selectedRowKeys)
+        .then(handleClose, () => setLoading(false))
     }
   }
 
@@ -112,11 +109,15 @@ function HostSelector(props) {
     setSelectedRowKeys([])
     setLoading(false)
     setVisible(false)
+    if (props.onCancel) {
+      props.onCancel()
+    }
   }
 
   return (
     <div className={styles.selector}>
-      {props.children ? (
+      {props.mode !== 'group' && (
+        props.children ? (
           <div onClick={() => setVisible(true)}>{props.children}</div>
         ) : (
           props.type === 'button' ? (
@@ -136,10 +137,11 @@ function HostSelector(props) {
               <Button type="link" style={{padding: 0}} onClick={() => setVisible(true)}>选择主机</Button>
             </div>
           )
+        )
       )}
 
       <Modal
-        visible={visible}
+        visible={props.mode === 'group' || visible}
         width={1000}
         className={styles.modal}
         title={props.title || '主机列表'}
@@ -205,7 +207,9 @@ function HostSelector(props) {
 
 HostSelector.defaultProps = {
   value: [],
-  type: 'text'
+  type: 'text',
+  mode: 'ids',
+  onChange: () => null
 }
 
 export default observer(HostSelector)

spug_web/src/pages/host/index.js

@@ -51,9 +51,10 @@ export default observer(function () {
       {store.syncVisible && <BatchSync/>}
       {store.selectorVisible &&
         <Selector
+          mode="group"
           onlySelf={!store.addByCopy}
           onCancel={() => store.selectorVisible = false}
-          onOk={store.updateGroup}
+          onChange={store.updateGroup}
         />}
     </AuthDiv>
   );

spug_web/src/pages/monitor/Step1.js

@@ -130,7 +130,7 @@ export default observer(function () {
           notFoundContent={null}/>
       </Form.Item>
       <Form.Item required label="监控主机" style={getStyle(['3', '4'])}>
-        <HostSelector value={targets} onChange={(_, ids) => store.record.targets = ids}/>
+        <HostSelector value={targets} onChange={ids => store.record.targets = ids}/>
       </Form.Item>
       <Form.Item label="响应时间" style={getStyle(['1'])}>
         <Input suffix="ms" value={extra} placeholder="最长响应时间（毫秒），不设置则默认10秒超时"

spug_web/src/pages/schedule/Step2.js

@@ -13,7 +13,7 @@ import hostStore from 'pages/host/store';
 import styles from './index.module.css';
 
 export default observer(function () {
-  function handleChange(_, ids) {
+  function handleChange(ids) {
     if (store.targets.includes('local')) {
       ids.unshift('local')
     }