10 changed files with 245 additions and 32 deletions
@ -0,0 +1,17 @@ |
|||
'use strict'; |
|||
|
|||
import { basicAction } from '@peace/utils' |
|||
import { ApiTable } from '$utils' |
|||
|
|||
export function checkPostgreConnect(params) { |
|||
return (dispatch) => basicAction({ |
|||
type: 'post', |
|||
data: params, |
|||
dispatch, |
|||
actionType: 'CHECK_POSTGRE_CONNECT', |
|||
url: ApiTable.pgCheckConnect, |
|||
msg: { |
|||
option: '', |
|||
}, |
|||
}); |
|||
} |
|||
@ -1,7 +1,9 @@ |
|||
'use strict'; |
|||
|
|||
import * as example from './example' |
|||
import * as adapter from './adapter' |
|||
|
|||
export default { |
|||
...example, |
|||
...adapter, |
|||
} |
|||
@ -1,14 +1,104 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { Button } from 'antd'; |
|||
import { Button, Form, Input, Row, Col } from 'antd'; |
|||
import { |
|||
ProForm, |
|||
ProFormSelect, |
|||
ProFormTextArea, |
|||
ProFormText |
|||
} from '@ant-design/pro-form'; |
|||
|
|||
import '../../style.less'; |
|||
function StepOne(props) { |
|||
const { next } = props; |
|||
const { next, stepOneValues, stepOneValuesFinish } = props; |
|||
const formRef = React.createRef(); |
|||
const initialValues = stepOneValues ? stepOneValues : { |
|||
adapter: 'PostgreSQL采集适配器', |
|||
version: '9.x', |
|||
mode: '数据库连接', |
|||
source: '库表/目录1', |
|||
} |
|||
const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 10 } }; |
|||
return <> |
|||
<div className='step-footer'> |
|||
<Button type="primary" onClick={() => next()}> |
|||
下一步 |
|||
</Button> |
|||
</div> |
|||
<ProForm |
|||
title={''} |
|||
initialValues={initialValues} |
|||
layout="horizontal" |
|||
grid={true} |
|||
{...formItemLayout} |
|||
modalProps={{ |
|||
destroyOnClose: true, |
|||
onCancel: () => { }, |
|||
}} |
|||
onFinish={async (values) => { |
|||
next() |
|||
stepOneValuesFinish(values) |
|||
return true; |
|||
}} |
|||
style={{ marginTop: 20 }} |
|||
submitter={{ |
|||
render: (props, defaultDoms) => { |
|||
return null; |
|||
}, |
|||
}} |
|||
> |
|||
<ProFormText |
|||
rules={[{ required: true, message: '请输入数据源名称' }, |
|||
{ max: 255, message: '数据源名称长度不能大于255个字符' }, |
|||
]} |
|||
name="name" |
|||
label="数据源名称" |
|||
/> |
|||
|
|||
<ProFormSelect |
|||
rules={[{ required: true, message: '请选择' }]} |
|||
options={[ |
|||
{ label: 'PostgreSQL采集适配器', value: 'PostgreSQL采集适配器' }, |
|||
]} |
|||
name="adapter" |
|||
label="适配器" |
|||
disabled={true} |
|||
/> |
|||
|
|||
<ProFormSelect |
|||
rules={[{ required: true, message: '请选择' }]} |
|||
options={[ |
|||
{ label: '9.x', value: '9.x' }, |
|||
]} |
|||
name="version" |
|||
label="工具版本" |
|||
disabled={true} |
|||
/> |
|||
<ProFormSelect |
|||
rules={[{ required: true, message: '请选择' }]} |
|||
options={[ |
|||
{ label: '数据库连接', value: '数据库连接' }, |
|||
]} |
|||
name="mode" |
|||
label="采集模式" |
|||
disabled={true} |
|||
/> |
|||
<ProFormSelect |
|||
rules={[{ required: true, message: '请选择输入控件' }]} |
|||
options={[ |
|||
{ label: '库表/目录1', value: '库表/目录1' }, |
|||
]} |
|||
name="source" |
|||
label="数据源挂载路径" |
|||
disabled={true} |
|||
/> |
|||
|
|||
<ProFormTextArea |
|||
name="description" |
|||
label="描述" |
|||
rules={[{ max: 255, message: '描述长度不能大于255个字符' }]} |
|||
/> |
|||
|
|||
<div className='step-footer'> |
|||
<Button type="primary" htmlType="submit"> |
|||
下一步 |
|||
</Button> |
|||
</div> |
|||
</ProForm> |
|||
</> |
|||
} |
|||
|
|||
|
|||
@ -1,39 +1,135 @@ |
|||
import React, { useEffect, useState } from 'react' |
|||
import { Button } from 'antd'; |
|||
import { Button, Table, Input, Row, Col, Alert, message, Spin } from 'antd'; |
|||
import '../../style.less'; |
|||
import { Func, useMockRequest, useFsRequest, ApiTable } from '$utils'; |
|||
|
|||
function StepTwo(props) { |
|||
const { prev, next } = props; |
|||
const { prev, next, dispatch, actions } = props; |
|||
const [params, setParams] = useState({}) |
|||
const [connect, setConnet] = useState('') |
|||
const [loading, setLoading] = useState(false); |
|||
// const { data: connect = {} } = useFsRequest({
|
|||
// url: ApiTable.pgCheckConnect,
|
|||
// method: 'post',
|
|||
// body: {
|
|||
// "user": params?.user,
|
|||
// "host": params?.host,
|
|||
// "database": params?.database,
|
|||
// "password": params?.password,
|
|||
// "port": params?.port
|
|||
// },
|
|||
// ready: !!(params?.user && params?.host && params?.database && params?.password && params?.port),
|
|||
// });
|
|||
|
|||
const { data: connect = {} } = useFsRequest({ |
|||
url: ApiTable.robotRequest, |
|||
method: 'post', |
|||
data: { |
|||
"user": "FashionAdmin", |
|||
"host": "10.8.30.156", |
|||
"database": "dayawan", |
|||
"password": "123456", |
|||
"port": "5432" |
|||
|
|||
const dataSource = [ |
|||
{ |
|||
param: 'host', |
|||
title: '数据库host', |
|||
value: 'host', |
|||
description: '数据库访问所需的host', |
|||
}, |
|||
{ |
|||
param: 'port', |
|||
title: '数据库端口', |
|||
value: 'port', |
|||
description: '数据库访问所需的端口', |
|||
}, |
|||
{ |
|||
param: 'database', |
|||
title: '数据库名称', |
|||
value: 'database', |
|||
description: '数据库名称', |
|||
}, |
|||
{ |
|||
param: 'username', |
|||
title: '用户名', |
|||
value: 'user', |
|||
description: '数据库用户名', |
|||
}, |
|||
// ready: !!(struct?.id && actiAlarm?.hasRobot),
|
|||
}); |
|||
{ |
|||
param: 'password', |
|||
title: '密码', |
|||
value: 'password', |
|||
description: '数据库密码', |
|||
} |
|||
|
|||
]; |
|||
|
|||
const checkConnect = () => { |
|||
const columns = [ |
|||
{ |
|||
title: '参数名', |
|||
dataIndex: 'param', |
|||
key: 'param', |
|||
}, |
|||
{ |
|||
title: '显示名', |
|||
dataIndex: 'title', |
|||
key: 'title', |
|||
}, |
|||
{ |
|||
title: '描述', |
|||
dataIndex: 'description', |
|||
key: 'description', |
|||
}, |
|||
{ |
|||
title: '参数值', |
|||
dataIndex: 'value', |
|||
key: 'value', |
|||
render: (text, record) => { |
|||
return <Input onChange={(e) => { |
|||
const obj = {}; |
|||
obj[text] = e.target.value; |
|||
const paramToSet = Object.assign(params, obj, {}) |
|||
setParams(paramToSet) |
|||
}} /> |
|||
} |
|||
}, |
|||
]; |
|||
|
|||
const checkNext = () => { |
|||
if (!(params?.user || params?.host || params?.database || params?.password || params?.port)) { |
|||
message.warning('请填写完整的参数值！') |
|||
return false; |
|||
} else { |
|||
return true; |
|||
} |
|||
} |
|||
const checkConnect = () => { |
|||
if (checkNext() === true) { |
|||
setLoading(true) |
|||
setConnet('') |
|||
dispatch(actions.metadataAcquisition.checkPostgreConnect({ |
|||
"user": params?.user, |
|||
"host": params?.host, |
|||
"database": params?.database, |
|||
"password": params?.password, |
|||
"port": params?.port |
|||
})).then((res) => { |
|||
setLoading(false) |
|||
setConnet(res?.payload?.data?.message) |
|||
}); |
|||
} |
|||
} |
|||
|
|||
return <> |
|||
<div>connect:{connect?.message}</div> |
|||
<Button onClick={checkConnect}>测试连接</Button> |
|||
return <Spin spinning={loading}> |
|||
<Table style={{ marginTop: 20 }} dataSource={dataSource} columns={columns} pagination={{ position: ['none', 'none'] }} /> |
|||
<div style={{ marginTop: 10 }}> |
|||
{connect == '' ? '' : connect == '连接成功' ? <Alert message="连接测试成功" type="success" showIcon /> : |
|||
<Alert message="连接测试失败" type="error" showIcon /> |
|||
} |
|||
</div> |
|||
<Button type='primary' style={{ marginTop: 20 }} onClick={checkConnect}>测试连接</Button> |
|||
|
|||
<div className='step-footer'> |
|||
<Button style={{ margin: '0 8px', }} onClick={() => prev()}>上一步</Button> |
|||
<Button type="primary" onClick={() => next()}> |
|||
<Button type="primary" onClick={() => { |
|||
if (checkNext() === true) { next() } |
|||
}}> |
|||
下一步 |
|||
</Button> |
|||
</div> |
|||
</> |
|||
</Spin> |
|||
} |
|||
|
|||
export default StepTwo; |
|||
Loading…
Reference in new issue