优化HostSelector组件

2022-11-07 00:02:54 +08:00 · 2022-11-07 00:02:54 +08:00 · 35f2e5698f
parent 033174b5a5
commit 35f2e5698f
9 changed files with 49 additions and 44 deletions
--- 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}
--- 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
--- 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'}}>
--- 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="请输入模板备注信息"/>
--- 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>
--- 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)
--- 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>
  );
--- 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秒超时"
--- a/spug_web/src/pages/schedule/Step3.js
+++ b/spug_web/src/pages/schedule/Step3.js
@ -58,7 +58,7 @@ export default observer(function (props) {
    }
  }

-  function handleChange(_, ids) {
+  function handleChange(ids) {
    if (S.targets.includes('local')) {
      ids.unshift('local')
    }