|
|
@ -4,21 +4,40 @@ import { |
|
|
|
ProForm, |
|
|
|
ProFormSelect, |
|
|
|
ProFormTextArea, |
|
|
|
ProFormText |
|
|
|
ProFormText, |
|
|
|
ProFormTreeSelect |
|
|
|
} from '@ant-design/pro-form'; |
|
|
|
|
|
|
|
import '../../style.less'; |
|
|
|
function StepOne(props) { |
|
|
|
const { next, stepOneValues, stepOneValuesFinish, readOnly, dataSources, stepOneInitValue } = props; |
|
|
|
const { next, stepOneValues, stepOneValuesFinish, readOnly, treeData } = props; |
|
|
|
const formRef = React.createRef(); |
|
|
|
const initialValues = stepOneValues ? stepOneValues : { |
|
|
|
adapterName: 'PostgreSQL采集适配器', |
|
|
|
adapterVersion: '9.x', |
|
|
|
mode: '数据库连接', |
|
|
|
mountPath: 1, |
|
|
|
// mountPath: 1,
|
|
|
|
} |
|
|
|
|
|
|
|
const formItemLayout = { labelCol: { span: 3 }, wrapperCol: { span: 10 } }; |
|
|
|
|
|
|
|
const getTreeNodeData = (dataSource, parent, key) => { |
|
|
|
let treeData = []; |
|
|
|
let data = []; |
|
|
|
if (!parent) { |
|
|
|
data = dataSource.filter(ds => !ds.parent); |
|
|
|
} else { |
|
|
|
data = dataSource.filter(ds => ds.parent == parent); |
|
|
|
} |
|
|
|
treeData = data.map(ds => { |
|
|
|
return { title: ds.name, key: ds?.id, id: ds.id, value: ds?.id } |
|
|
|
}); |
|
|
|
for (let d of treeData) { |
|
|
|
d.children = getTreeNodeData(dataSource, d.id, d.key); |
|
|
|
} |
|
|
|
return treeData |
|
|
|
} |
|
|
|
const treeDataFilter = treeData ? getTreeNodeData(treeData, null, 'rc') : [] |
|
|
|
return <> |
|
|
|
<ProForm |
|
|
|
title={''} |
|
|
@ -80,7 +99,7 @@ function StepOne(props) { |
|
|
|
label="采集模式" |
|
|
|
disabled={readOnly} |
|
|
|
/> |
|
|
|
<ProFormSelect |
|
|
|
{/* <ProFormSelect |
|
|
|
rules={[{ required: true, message: '请选择输入控件' }]} |
|
|
|
options={[ |
|
|
|
{ label: '库表/目录1', value: 1 }, |
|
|
@ -88,6 +107,32 @@ function StepOne(props) { |
|
|
|
name="mountPath" |
|
|
|
label="数据源挂载路径" |
|
|
|
// disabled={true}
|
|
|
|
/> */} |
|
|
|
<ProFormTreeSelect |
|
|
|
name="mountPath" |
|
|
|
label="数据源挂载路径" |
|
|
|
placeholder="请选择数据源挂载路径" |
|
|
|
rules={[{ required: true, message: '请选择数据源挂载路径' }]} |
|
|
|
allowClear |
|
|
|
// width={330}
|
|
|
|
secondary |
|
|
|
request={async () => { |
|
|
|
return treeDataFilter || []; |
|
|
|
}} |
|
|
|
// tree-select args
|
|
|
|
fieldProps={{ |
|
|
|
showArrow: false, |
|
|
|
filterTreeNode: true, |
|
|
|
showSearch: true, |
|
|
|
dropdownMatchSelectWidth: false, |
|
|
|
labelInValue: false, |
|
|
|
autoClearSearchValue: true, |
|
|
|
multiple: false, |
|
|
|
treeNodeFilterProp: 'title', |
|
|
|
fieldNames: { |
|
|
|
label: 'title', |
|
|
|
}, |
|
|
|
}} |
|
|
|
/> |
|
|
|
|
|
|
|
<ProFormTextArea |
|
|
|