improve code

spug_web/src/pages/deploy/request/Ext1Form.js

@@ -5,14 +5,17 @@
  */
 import React, { useState, useEffect } from 'react';
 import { observer } from 'mobx-react';
-import { Modal, Form, Input, Select, Tag, message } from 'antd';
+import { Modal, Form, Input, Select, message, Button } from 'antd';
+import HostSelector from './HostSelector';
 import hostStore from 'pages/host/store';
 import http from 'libs/http';
 import store from './store';
 import lds from 'lodash';
+import moment from 'moment';
 
 export default observer(function () {
   const [form] = Form.useForm();
+  const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false);
   const [versions, setVersions] = useState([]);
   const [host_ids, setHostIds] = useState([]);
@@ -22,9 +25,7 @@ export default observer(function () {
     setHostIds(lds.clone(host_ids || app_host_ids));
     http.get('/api/repository/', {params: {deploy_id}})
       .then(res => setVersions(res))
-    if (hostStore.records.length === 0) {
-      hostStore.fetchRecords()
-    }
+    if (hostStore.records.length === 0) hostStore.fetchRecords()
   }, [])
 
   function handleSubmit() {
@@ -44,17 +45,6 @@ export default observer(function () {
       }, () => setLoading(false))
   }
 
-  function handleChange(id) {
-    const index = host_ids.indexOf(id);
-    if (index === -1) {
-      setHostIds([id, ...host_ids])
-    } else {
-      const tmp = lds.clone(host_ids);
-      tmp.splice(index, 1);
-      setHostIds(tmp)
-    }
-  }
-
   return (
     <Modal
       visible
@@ -74,22 +64,27 @@ export default observer(function () {
               <Select.Option
                 key={item.id}
                 value={item.id}>
-                {item.remarks ? `${item.version} (${item.remarks})` : item.version}
+                <div style={{display: 'flex', justifyContent: 'space-between'}}>
+                  <span>{item.remarks ? `${item.version} (${item.remarks})` : item.version}</span>
+                  <span style={{color: '#999', fontSize: 12}}>构建于 {moment(item.created_at).fromNow()}</span>
+                </div>
               </Select.Option>
             ))}
           </Select>
         </Form.Item>
+        <Form.Item required label="目标主机" help="可以通过创建多个发布申请单，选择主机分批发布。">
+          {host_ids.length > 0 && `已选择 ${host_ids.length} 台`}
+          <Button type="link" onClick={() => setVisible(true)}>选择主机</Button>
+        </Form.Item>
         <Form.Item name="desc" label="备注信息">
           <Input placeholder="请输入备注信息"/>
         </Form.Item>
-        <Form.Item required label="发布主机" help="通过点击主机名称自由选择本次发布的主机。">
-          {store.record.app_host_ids.map(id => (
-            <Tag.CheckableTag key={id} checked={host_ids.includes(id)} onChange={() => handleChange(id)}>
-              {lds.get(hostStore.idMap, `${id}.name`)}({lds.get(hostStore.idMap, `${id}.hostname`)}:{lds.get(hostStore.idMap, `${id}.port`)})
-            </Tag.CheckableTag>
-          ))}
-        </Form.Item>
       </Form>
+      {visible && <HostSelector
+        host_ids={host_ids}
+        app_host_ids={store.record.app_host_ids}
+        onCancel={() => setVisible(false)}
+        onOk={ids => setHostIds(ids)}/>}
     </Modal>
   )
 })

spug_web/src/pages/deploy/request/Ext2Form.js

@@ -6,14 +6,16 @@
 import React, { useState, useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { UploadOutlined } from '@ant-design/icons';
-import { Modal, Form, Input, Tag, Upload, message, Button } from 'antd';
+import { Modal, Form, Input, Upload, message, Button } from 'antd';
 import hostStore from 'pages/host/store';
 import { http, X_TOKEN } from 'libs';
 import store from './store';
 import lds from 'lodash';
+import HostSelector from "./HostSelector";
 
 export default observer(function () {
   const [form] = Form.useForm();
+  const [visible, setVisible] = useState(false);
   const [loading, setLoading] = useState(false);
   const [uploading, setUploading] = useState(false);
   const [fileList, setFileList] = useState([]);
@@ -51,17 +53,6 @@ export default observer(function () {
       }, () => setLoading(false))
   }
 
-  function handleChange(id, v) {
-    const index = host_ids.indexOf(id);
-    if (index === -1) {
-      setHostIds([id, ...host_ids])
-    } else {
-      const tmp = lds.clone(host_ids);
-      tmp.splice(index, 1);
-      setHostIds(tmp)
-    }
-  }
-
   function handleUploadChange(v) {
     if (v.fileList.length === 0) {
       setFileList([])
@@ -108,14 +99,16 @@ export default observer(function () {
             {fileList.length === 0 ? <Button loading={uploading} icon={<UploadOutlined/>}>点击上传</Button> : null}
           </Upload>
         </Form.Item>
-        <Form.Item required label="发布目标主机" help="通过点击主机名称自由选择本次发布的主机。">
-          {store.record['app_host_ids'].map(id => (
-            <Tag.CheckableTag key={id} checked={host_ids.includes(id)} onChange={v => handleChange(id, v)}>
-              {lds.get(hostStore.idMap, `${id}.name`)}({lds.get(hostStore.idMap, `${id}.hostname`)}:{lds.get(hostStore.idMap, `${id}.port`)})
-            </Tag.CheckableTag>
-          ))}
+        <Form.Item required label="目标主机" help="可以通过创建多个发布申请单，选择主机分批发布。">
+          {host_ids.length > 0 && `已选择 ${host_ids.length} 台`}
+          <Button type="link" onClick={() => setVisible(true)}>选择主机</Button>
         </Form.Item>
       </Form>
+      {visible && <HostSelector
+        host_ids={host_ids}
+        app_host_ids={store.record.app_host_ids}
+        onCancel={() => setVisible(false)}
+        onOk={ids => setHostIds(ids)}/>}
     </Modal>
   )
 })

spug_web/src/pages/deploy/request/HostSelector.js

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { observer } from 'mobx-react';
+import { Modal, Table, Button, Alert } from 'antd';
+import hostStore from 'pages/host/store';
+import lds from 'lodash';
+
+export default observer(function (props) {
+  const [selectedRowKeys, setSelectedRowKeys] = useState(props.host_ids || []);
+
+  function handleClickRow(record) {
+    const index = selectedRowKeys.indexOf(record.id);
+    if (index !== -1) {
+      selectedRowKeys.splice(index, 1)
+    } else {
+      selectedRowKeys.push(record.id)
+    }
+    setSelectedRowKeys([...selectedRowKeys])
+  }
+
+  function handleSubmit() {
+    if (props.onOk) {
+      const res = props.onOk(selectedRowKeys);
+      if (res && res.then) {
+        res.then(props.onCancel)
+      } else {
+        props.onCancel();
+      }
+    }
+  }
+
+  return (
+    <Modal
+      visible
+      width={600}
+      title='可选主机列表'
+      onOk={handleSubmit}
+      onCancel={props.onCancel}>
+      {selectedRowKeys.length > 0 && (
+        <Alert
+          style={{marginBottom: 12}}
+          message={`已选择 ${selectedRowKeys.length} 台主机`}
+          action={<Button type="link" onClick={() => setSelectedRowKeys([])}>取消选择</Button>}/>
+      )}
+      <Table
+        rowKey="id"
+        dataSource={props.app_host_ids.map(id => ({id}))}
+        onRow={record => {
+          return {
+            onClick: () => handleClickRow(record)
+          }
+        }}
+        rowSelection={{
+          selectedRowKeys,
+          onSelect: handleClickRow,
+          onSelectAll: (_, __, changeRows) => changeRows.map(x => handleClickRow(x))
+        }}>
+        <Table.Column
+          title="主机名称"
+          dataIndex="id"
+          render={id => lds.get(hostStore.idMap, `${id}.name`)}/>
+        <Table.Column
+          title="连接地址"
+          dataIndex="id"
+          render={id => lds.get(hostStore.idMap, `${id}.hostname`)}/>
+      </Table>
+    </Modal>
+  )
+})