U 优化主机选择支持搜索匹配

openspug · Jun 2, 2020 · bf469cc · bf469cc
1 parent b6cb7fb
commit bf469cc
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 7 deletions.
diff --git a/spug_web/src/pages/deploy/app/Ext1Setup2.js b/spug_web/src/pages/deploy/app/Ext1Setup2.js
@@ -41,12 +41,15 @@ class Ext1Setup2 extends React.Component {
             <React.Fragment key={index}>
               <Select
                 value={id}
+                showSearch
                 placeholder="请选择"
                 style={{width: '80%', marginRight: 10}}
+                optionFilterProp="children"
+                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                 onChange={v => store.editHost(index, v)}>
                 {hostStore.records.map(item => (
                   <Select.Option key={item.id} value={item.id} disabled={info['host_ids'].includes(item.id)}>
-                    {item.name}({item['hostname']}:{item['port']})
+                    {`${item.name}(${item['hostname']}:${item['port']})`}
                   </Select.Option>
                 ))}
               </Select>

diff --git a/spug_web/src/pages/deploy/app/Ext2Setup2.js b/spug_web/src/pages/deploy/app/Ext2Setup2.js
@@ -27,12 +27,15 @@ class Ext2Setup2 extends React.Component {
             <React.Fragment key={index}>
               <Select
                 value={id}
+                showSearch
                 placeholder="请选择"
+                optionFilterProp="children"
                 style={{width: '80%', marginRight: 10}}
+                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                 onChange={v => store.editHost(index, v)}>
                 {hostStore.records.map(item => (
                   <Select.Option key={item.id} value={item.id} disabled={info['host_ids'].includes(item.id)}>
-                    {item.name}({item['hostname']}:{item['port']})
+                    {`${item.name}(${item['hostname']}:${item['port']})`}
                   </Select.Option>
                 ))}
               </Select>

diff --git a/spug_web/src/pages/deploy/app/index.module.css b/spug_web/src/pages/deploy/app/index.module.css
@@ -9,6 +9,10 @@
     top: 4px
 }
 
+.delIcon:hover {
+    color: #f5222d;
+}
+
 .deployBlock {
     height: 100px;
     margin-top: 63px;

diff --git a/spug_web/src/pages/monitor/Form.js b/spug_web/src/pages/monitor/Form.js
@@ -143,10 +143,17 @@ class ComForm extends React.Component {
               <Input value={addr['2']} placeholder="请输入监控地址（IP/域名）" onChange={e => this.handleAddr('2', e)}/>
             </Form.Item>
             <Form.Item required label="监控主机" style={this.getStyle('34')}>
-              <Select value={addr['3']} placeholder="请选择主机" onChange={v => this.handleAddr('3', v)}>
+              <Select
+                showSearch
+                value={addr['3']}
+                placeholder="请选择主机"
+                optionFilterProp="children"
+                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
+                onChange={v => this.handleAddr('3', v)}>
                 {hostStore.records.map(item => (
-                  <Select.Option value={String(item.id)}
-                                 key={item.id}>{item.name}({item.hostname}:{item.port})</Select.Option>
+                  <Select.Option value={String(item.id)} key={item.id}>
+                    {`${item.name}(${item.hostname}:${item.port})`}
+                  </Select.Option>
                 ))}
               </Select>
             </Form.Item>

diff --git a/spug_web/src/pages/schedule/Form.js b/spug_web/src/pages/schedule/Form.js
@@ -177,13 +177,16 @@ class ComForm extends React.Component {
                 <React.Fragment key={index}>
                   <Select
                     value={id}
+                    showSearch
                     placeholder="请选择"
-                    style={{width: '60%', marginRight: 10}}
+                    optionFilterProp="children"
+                    style={{width: '80%', marginRight: 10}}
+                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                     onChange={v => store.editTarget(index, v)}>
                     <Select.Option value="local" disabled={store.targets.includes('local')}>本机</Select.Option>
                     {hostStore.records.map(item => (
                       <Select.Option key={item.id} value={item.id} disabled={store.targets.includes(item.id)}>
-                        {item.name}({item['hostname']}:{item['port']})
+                        {`${item.name}(${item['hostname']}:${item['port']})`}
                       </Select.Option>
                     ))}
                   </Select>

diff --git a/spug_web/src/pages/schedule/index.module.css b/spug_web/src/pages/schedule/index.module.css
@@ -7,4 +7,8 @@
     font-size: 24px;
     position: relative;
     top: 4px
+}
+
+.delIcon:hover {
+    color: #f5222d;
 }