github
/
spug
mirror of https://github.com/openspug/spug
1
0
Fork 0
Code Issues Releases Wiki Activity

U 优化主机选择体验

pull/194/head
vapao 2020-09-07 15:21:10 +08:00
parent 2c39b8db89
commit f97a052b99
1 changed files with 10 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
spug_web/src/pages/exec/task/HostSelector.js
View File

@ -5,7 +5,7 @@
*/ */
import React from 'react'; import React from 'react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import { Modal, Table, Input, Button, Select, Checkbox } from 'antd'; import { Modal, Table, Input, Button, Select } from 'antd';
import { SearchForm } from 'components'; import { SearchForm } from 'components';
import store from '../../host/store'; import store from '../../host/store';
@ -35,21 +35,6 @@ class HostSelector extends React.Component {
this.setState({selectedRows}); this.setState({selectedRows});
}; };
handleCheck = (e) => {
if (e.target.checked) {
let data = store.records;
if (store.f_name) {
data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
}
if (store.f_zone) {
data = data.filter(item => item['zone'].toLowerCase().includes(store.f_zone.toLowerCase()))
}
this.setState({selectedRows: data})
} else {
this.setState({selectedRows: []})
}
};
handleSubmit = () => { handleSubmit = () => {
this.props.onOk(this.state.selectedRows); this.props.onOk(this.state.selectedRows);
this.props.onCancel() this.props.onCancel()
@ -83,6 +68,7 @@ class HostSelector extends React.Component {
if (store.f_zone) { if (store.f_zone) {
data = data.filter(item => item['zone'].toLowerCase().includes(store.f_zone.toLowerCase())) data = data.filter(item => item['zone'].toLowerCase().includes(store.f_zone.toLowerCase()))
} }
const dataIds = data.map(x => x.id);
return ( return (
<Modal <Modal
visible visible
@ -102,8 +88,8 @@ class HostSelector extends React.Component {
<SearchForm.Item span={8} title="主机别名"> <SearchForm.Item span={8} title="主机别名">
<Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/> <Input allowClear value={store.f_name} onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
</SearchForm.Item> </SearchForm.Item>
<SearchForm.Item span={4} title="全选"> <SearchForm.Item span={4} title="已选">
<Checkbox onChange={this.handleCheck}/> {selectedRows.length} 台
</SearchForm.Item> </SearchForm.Item>
<SearchForm.Item span={4}> <SearchForm.Item span={4}>
<Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button> <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
@ -113,7 +99,10 @@ class HostSelector extends React.Component {
rowKey="id" rowKey="id"
rowSelection={{ rowSelection={{
selectedRowKeys: selectedRows.map(item => item.id), selectedRowKeys: selectedRows.map(item => item.id),
onChange: (_, selectedRows) => this.setState({selectedRows}) onChange: (_, rows) => {
let tmp = selectedRows.filter(x => !dataIds.includes(x.id))
this.setState({selectedRows: tmp.concat(rows)})
}
}} }}
dataSource={data} dataSource={data}
loading={store.isFetching} loading={store.isFetching}
@ -122,6 +111,8 @@ class HostSelector extends React.Component {
onClick: () => this.handleClick(record) onClick: () => this.handleClick(record)
} }
}} }}
pagination={false}
scroll={{y: 480}}
columns={this.columns}/> columns={this.columns}/>
</Modal> </Modal>
) )