(*)适配器管理功能提交

api/app/lib/controllers/adapter/index.js

@@ -20,7 +20,7 @@ function checkConnect(opts) {
             ctx.body = { message: client._connected ? '连接成功' : '连接失败' }
         } catch (error) {
             ctx.fs.logger.error(`path: ${ctx.path}, error: ${error}`);
-            ctx.status = 400;
+            ctx.status = 200;
             ctx.body = { message: '连接失败' }
         }
     }

web/client/src/sections/metadataAcquisition/actions/adapter.js

@@ -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: '',
+        },
+    });
+}

web/client/src/sections/metadataAcquisition/actions/index.js

@@ -1,7 +1,9 @@
 'use strict';
 
 import * as example from './example'
+import * as adapter from './adapter'
 
 export default {
     ...example,
+    ...adapter,
 }

web/client/src/sections/metadataAcquisition/components/adapterStep.js

@@ -6,8 +6,8 @@ import { STEP_CONFIG } from './steps/index';
 const AdapterStep = (props) => {
     const { type } = props;
     const [current, setCurrent] = useState(0);
-
+    const [stepOneValues, setStepOneValues] = useState(0);
-    const { StepOne, StepTwo, StepThree } = STEP_CONFIG[type];
+    const { StepOne, StepTwo, StepThree } = STEP_CONFIG[type]; //记录第一页表单数据用于切换步骤时展示上一次填写的值
 
     const next = () => {
         current < 2 && setCurrent(current + 1);
@@ -16,14 +16,18 @@ const AdapterStep = (props) => {
         setCurrent(current - 1);
     };
 
+    const stepOneValuesFinish = (values) => {
+        setStepOneValues(values)
+    }
+
     const steps = [
         {
             title: '配置数据源基本信息',
-            content: <StepOne next={next} />,
+            content: <StepOne stepOneValues={stepOneValues} stepOneValuesFinish={stepOneValuesFinish} next={next} />,
         },
         {
             title: '数据源参数配置',
-            content: <StepTwo prev={prev} next={next} />,
+            content: <StepTwo prev={prev} next={next} {...props} />,
         },
         {
             title: '配置计划任务',

web/client/src/sections/metadataAcquisition/components/steps/postgre/stepOne.js

@@ -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 <>
+        <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" onClick={() => next()}>
+                <Button type="primary" htmlType="submit">
                     下一步
                 </Button>
             </div>
+        </ProForm>
     </>
 }
 

web/client/src/sections/metadataAcquisition/components/steps/postgre/stepTwo.js

@@ -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 { data: connect = {} } = useFsRequest({
+    const [connect, setConnet] = useState('')
-        url: ApiTable.robotRequest,
+    const [loading, setLoading] = useState(false);
-        method: 'post',
+    // const { data: connect = {} } = useFsRequest({
-        data: {
+    //     url: ApiTable.pgCheckConnect,
-            "user": "FashionAdmin",
+    //     method: 'post',
-            "host": "10.8.30.156",
+    //     body: {
-            "database": "dayawan",
+    //         "user": params?.user,
-            "password": "123456",
+    //         "host": params?.host,
-            "port": "5432"
+    //         "database": params?.database,
-        },
+    //         "password": params?.password,
-        // ready: !!(struct?.id && actiAlarm?.hasRobot),
+    //         "port": params?.port
-    });
+    //     },
+    //     ready: !!(params?.user && params?.host && params?.database && params?.password && params?.port),
+    // });
+
+
+    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: '数据库用户名',
+        },
+        {
+            param: 'password',
+            title: '密码',
+            value: 'password',
+            description: '数据库密码',
+        }
 
+    ];
+
+    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 <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>
 
-    return <>
-        <div>connect:{connect?.message}</div>
-        <Button 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;

web/client/src/sections/metadataAcquisition/components/style.less

@@ -2,4 +2,5 @@
     display: flex;
     justify-content: flex-end;
     margin-top: 20px;
+    width: 100%;
 }

web/client/src/sections/metadataAcquisition/containers/adapter.js

@@ -45,6 +45,7 @@ const LatestMetadata = (props) => {
         >
             <AdapterStep
                 type={isModalOpen} //当前卡片的key （目前只有postgre,支持后续扩展）
+                {...props}
             />
         </Modal>
     </>

web/client/src/sections/metadataManagement/components/modelModal.js

@@ -88,7 +88,6 @@ export default (props) => {
                 name="length"
                 label="长度"
                 fieldProps={{ precision: 0, max: 99999999, }}
-                // rules={[{ max: 99999999, message: '长度最大值不能超过99999999' }]}
             />
 
             <ProFormSelect

web/client/src/utils/webapi.js

@@ -17,6 +17,9 @@ export const ApiTable = {
     getMetaModelList: 'meta/models',
     addMetaModel: 'meta/model',
     modifyMetaModel: 'meta/model/{id}',
+
+    //元数据采集
+    pgCheckConnect: 'adapter/check/connect',
 };
 
 export const RouteTable = {