mirror of https://github.com/openspug/spug
优化HostSelector组件
parent
033174b5a5
commit
35f2e5698f
|
@ -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}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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'}}>
|
||||
|
|
|
@ -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="请输入模板备注信息"/>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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秒超时"
|
||||
|
|
|
@ -58,7 +58,7 @@ export default observer(function (props) {
|
|||
}
|
||||
}
|
||||
|
||||
function handleChange(_, ids) {
|
||||
function handleChange(ids) {
|
||||
if (S.targets.includes('local')) {
|
||||
ids.unshift('local')
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue