元数据新增数据源

src/view/Feign/metadata-update-datasource.jsx

@@ -17,6 +17,11 @@ const FC = (props) => {
 
   const [loadingSupportedTargetTypes, setLoadingSupportedTargetTypes] = React.useState(false)
   const [supportedTargetTypes, setSupportedTargetTypes] = React.useState()
+  const [loadingSupportedDatasourceTypies, setLoadingSupportedDatasourceTypies] = React.useState(false)
+  const [supportedDatasourceTypies, setSupportedDatasourceTypies] = React.useState()
+
+  const [selectedTargetType, setSelectedTargetType] = React.useState()
+  const [currentDatasourceType, setDatasourceType] = React.useState()
 
   const basicRef = React.useRef()
   const credentialRef = React.useRef()
@@ -26,9 +31,17 @@ const FC = (props) => {
     if (metadataId) {
       getDatasource()
       getSupportedTargetTypes()
+      getSupportedDatasourceTypies()
     }
   }, [metadataId])
 
+  React.useEffect(() => {
+    const index = (supportedDatasourceTypies??[]).findIndex(item => item.type === selectedTargetType)
+    if (index !== -1) {
+      setDatasourceType(supportedDatasourceTypies[index])
+    }
+  }, [selectedTargetType, supportedDatasourceTypies])
+
   const getDatasource = () => {
     setLoading(false)
     dispatch({
@@ -42,18 +55,8 @@ const FC = (props) => {
         databaseType,
       },
       callback: data => {
-        function compare(val1, val2) {
-          var a = val1.seq;
-          var b = val2.seq;
-          return (a - b);
-        }
-
-        const newData = produce(data??{}, (draft) => {
-          (draft.credential?.credentialParameters??[]).sort(compare);
-          (draft.targetParameters??[]).sort(compare);
-        })
-
-        setDatasource(newData)
+        setDatasource(data)
+        setSelectedTargetType(data?.type)
       }
     })
   }
@@ -72,6 +75,32 @@ const FC = (props) => {
     })
   }
 
+  const getSupportedDatasourceTypies = () => {
+    setLoadingSupportedDatasourceTypies(true)
+    dispatch({
+      type: 'datasource.getAllSupportedDatasourceTypies',
+      callback: data => {
+        setLoadingSupportedDatasourceTypies(false);
+
+        function compare(val1, val2) {
+          var a = val1.seq;
+          var b = val2.seq;
+          return (a - b);
+        }
+
+        (data||[]).forEach(item => {
+          item.credential && (item.credential.credentialParameters||[]).sort(compare);
+          (item.targetParameters||[]).sort(compare);
+        });
+
+        setSupportedDatasourceTypies(data);
+      },
+      error: () => {
+        setLoadingSupportedDatasourceTypies(false)
+      }
+    })
+  }
+
   const close = (refresh = false) => {
     setWaiting(false)
     setTestWaiting(false)
@@ -178,15 +207,17 @@ const FC = (props) => {
       centered destroyOnClose
       onCancel={() => { close() }}
     >
-      <Spin spinning={loading||waiting}>
+      <Spin spinning={loading||waiting||loadingSupportedDatasourceTypies||loadingSupportedTargetTypes}>
         <div className='flex' style={{ justifyContent: 'end' }}>
           <Space>
             <span>数据源类型:</span>
             <Select 
             loading={loadingSupportedTargetTypes}
-            value={datasource?.type} 
+            value={selectedTargetType} 
             style={{ width: 130 }}
-            disabled={true}
+            onChange={(val) => {
+              setSelectedTargetType(val)
+            }}
           >
           {
             (supportedTargetTypes??[]).map((item, index) => {
@@ -199,9 +230,9 @@ const FC = (props) => {
           </Space>
         </div>
         <Divider>数据源信息</Divider>
-        <Basic ref={basicRef} datasource={datasource} />
+        <Basic ref={basicRef} datasource={datasource} datasourceType={currentDatasourceType} />
         <Divider>认证信息</Divider>
-        <Credential ref={credentialRef} datasource={datasource} />
+        <Credential ref={credentialRef} datasource={datasource} datasourceType={currentDatasourceType} />
       </Spin>
     </Modal>
   )
@@ -209,7 +240,7 @@ const FC = (props) => {
 
 export default FC
 
-const Basic = React.forwardRef(function ({ datasource }, ref) {
+const Basic = React.forwardRef(function ({ datasource, datasourceType }, ref) {
   const [form] = Form.useForm()
 
   React.useImperativeHandle(ref, () => ({
@@ -243,7 +274,7 @@ const Basic = React.forwardRef(function ({ datasource }, ref) {
   return (
     <Form {...formItemLayout} form={form}>
       {
-        (datasource?.targetParameters??[]).map((item, index) => {
+        (datasourceType?.targetParameters??[]).map((item, index) => {
           return (
             <Form.Item 
               label={item.cnName||''}
@@ -275,7 +306,7 @@ const Basic = React.forwardRef(function ({ datasource }, ref) {
   )
 })
 
-const Credential = React.forwardRef(function ({ datasource }, ref) {
+const Credential = React.forwardRef(function ({ datasource, datasourceType }, ref) {
   const [fileListBindName, setFileListBindName] = React.useState([])
 
   const [form] = Form.useForm()
@@ -343,7 +374,7 @@ const Credential = React.forwardRef(function ({ datasource }, ref) {
   return (
     <Form {...formItemLayout} form={form}>
       {
-        (datasource?.credential?.credentialParameters??[]).map((item, index) => {
+        (datasourceType?.credential?.credentialParameters??[]).map((item, index) => {
 
           let _fileList = [];
           const _index = (fileListBindName||[]).findIndex(_item => _item.name===item.name);

src/view/Manage/DatasourceManage/index.jsx

@@ -13,6 +13,7 @@ import { dispatch } from '../../../model';
 import { showMessage, getQueryParam } from '../../../util';
 import { DatasourceContext } from './Component/ContextManager.js';
 import { AppContext } from '../../../App';
+import MetadataUpdateDatasource from '../../Feign/metadata-update-datasource'
  
 import './index.less';
 
@@ -497,6 +498,15 @@ const DatasourceManage = (props) => {
           setApiConfigModalVisible(false)
         }}
       />
+
+      <MetadataUpdateDatasource
+        metadataId='Database=1=cc998fa5c3f44da8bbbb1960882223cd'
+        name='7878'
+        systemId='4'
+        catalogId='1'
+        model='Database'
+        databaseType='MySQL'
+      />
       
       {contextHolder}  
     </div>