From 7902a8727ccfaf9599b3cbcaf4a68dfe2968eab1 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Wed, 29 Mar 2023 18:30:06 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96HostSelector=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 spug_web/src/pages/deploy/app/Ext1Setup1.js |  2 +-
 spug_web/src/pages/deploy/app/Ext2Setup1.js |  2 +-
 spug_web/src/pages/exec/task/index.js       |  2 +-
 spug_web/src/pages/exec/template/Form.js    |  2 +-
 spug_web/src/pages/exec/transfer/index.js   |  4 +-
 spug_web/src/pages/host/Selector.js         | 74 +++++++++++----------
 spug_web/src/pages/host/index.js            |  3 +-
 spug_web/src/pages/monitor/Step1.js         |  2 +-
 spug_web/src/pages/schedule/Step2.js        |  2 +-
 9 files changed, 49 insertions(+), 44 deletions(-)

diff --git a/spug_web/src/pages/deploy/app/Ext1Setup1.js b/spug_web/src/pages/deploy/app/Ext1Setup1.js
index 1405f38..3f8da29 100644
--- a/spug_web/src/pages/deploy/app/Ext1Setup1.js
+++ b/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}
diff --git a/spug_web/src/pages/deploy/app/Ext2Setup1.js b/spug_web/src/pages/deploy/app/Ext2Setup1.js
index 358089a..22485b6 100644
--- a/spug_web/src/pages/deploy/app/Ext2Setup1.js
+++ b/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
diff --git a/spug_web/src/pages/exec/task/index.js b/spug_web/src/pages/exec/task/index.js
index 94dc604..c48798a 100644
--- a/spug_web/src/pages/exec/task/index.js
+++ b/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'}}>
diff --git a/spug_web/src/pages/exec/template/Form.js b/spug_web/src/pages/exec/template/Form.js
index 7774044..c67c9b5 100644
--- a/spug_web/src/pages/exec/template/Form.js
+++ b/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="请输入模板备注信息"/>
diff --git a/spug_web/src/pages/exec/transfer/index.js b/spug_web/src/pages/exec/transfer/index.js
index 9eb82ad..66663de 100644
--- a/spug_web/src/pages/exec/transfer/index.js
+++ b/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>
diff --git a/spug_web/src/pages/host/Selector.js b/spug_web/src/pages/host/Selector.js
index da1c4c5..f2ab447 100644
--- a/spug_web/src/pages/host/Selector.js
+++ b/spug_web/src/pages/host/Selector.js
@@ -62,20 +62,17 @@ function HostSelector(props) {
   }
 
   function handleSubmit() {
-    if (props.onChange) {
-      setLoading(true);
-      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()
-      }
+    if (props.mode === 'ids') {
+      props.onChange(props.onlyOne ? selectedRowKeys[0] : selectedRowKeys)
+      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,34 +109,39 @@ function HostSelector(props) {
     setSelectedRowKeys([])
     setLoading(false)
     setVisible(false)
+    if (props.onCancel) {
+      props.onCancel()
+    }
   }
 
   return (
     <div className={styles.selector}>
-      {props.children ? (
-        <div onClick={() => setVisible(true)}>{props.children}</div>
-      ) : (
-        props.type === 'button' ? (
-          props.value.length > 0 ? (
-            <Alert
-              type="info"
-              className={styles.area}
-              message={<div>已选择 <b style={{fontSize: 18, color: '#1890ff'}}>{props.value.length}</b> 台主机</div>}
-              onClick={() => setVisible(true)}/>
-          ) : (
-            <Button icon={<PlusOutlined/>} onClick={() => setVisible(true)}>
-              添加目标主机
-            </Button>
-          )) : (
-          <div style={{display: 'flex', alignItems: 'center'}}>
-            {props.value.length > 0 && <span style={{marginRight: 16}}>已选择 {props.value.length} 台</span>}
-            <Button type="link" style={{padding: 0}} onClick={() => setVisible(true)}>选择主机</Button>
-          </div>
+      {props.mode !== 'group' && (
+        props.children ? (
+          <div onClick={() => setVisible(true)}>{props.children}</div>
+        ) : (
+          props.type === 'button' ? (
+            props.value.length > 0 ? (
+              <Alert
+                type="info"
+                className={styles.area}
+                message={<div>已选择 <b style={{fontSize: 18, color: '#1890ff'}}>{props.value.length}</b> 台主机</div>}
+                onClick={() => setVisible(true)}/>
+            ) : (
+              <Button icon={<PlusOutlined/>} onClick={() => setVisible(true)}>
+                添加目标主机
+              </Button>
+            )) : (
+            <div style={{display: 'flex', alignItems: 'center'}}>
+              {props.value.length > 0 && <span style={{marginRight: 16}}>已选择 {props.value.length} 台</span>}
+              <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)
\ No newline at end of file
diff --git a/spug_web/src/pages/host/index.js b/spug_web/src/pages/host/index.js
index fc43907..abbe600 100644
--- a/spug_web/src/pages/host/index.js
+++ b/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>
   );
diff --git a/spug_web/src/pages/monitor/Step1.js b/spug_web/src/pages/monitor/Step1.js
index 1dd1e19..007cb2b 100644
--- a/spug_web/src/pages/monitor/Step1.js
+++ b/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秒超时"
diff --git a/spug_web/src/pages/schedule/Step2.js b/spug_web/src/pages/schedule/Step2.js
index f0a781b..c3c9e7e 100644
--- a/spug_web/src/pages/schedule/Step2.js
+++ b/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')
     }