系统调整

src/App.js

@@ -17,7 +17,9 @@ import DatasourceManage from './view/Manage/DatasourceManage';
 import AssetDetail from './view/Manage/AssetManage/Component/AssetDetail';
 import ImportAction from './view/Manage/Model/Component/ImportAction';
 
-export default class App extends React.Component {
+export const AppContext = React.createContext();
+
+export class App extends React.Component {
   render() {
 
     const { params } = this.props;
@@ -52,7 +54,9 @@ export default class App extends React.Component {
     }
 
     return (
-      <React.Fragment>
+      <AppContext.Provider value={{
+        env: params?.env
+      }}>
         <Router basename={window.__POWERED_BY_QIANKUN__ ? '/data-govern' : '/'}>
           <Switch>
             <Route path={`${ContextPath}/login`} component={Signin} exact />
@@ -73,7 +77,7 @@ export default class App extends React.Component {
             <Route path={'/center-home/menu/asset-recycle'} component={AssetRecycle} exact />         
           </Switch>
         </Router>
-      </React.Fragment>
+      </AppContext.Provider>
     );
   }
 }
\ No newline at end of file

src/index.js

@@ -7,7 +7,7 @@ import { ConfigProvider } from 'antd';
 import zh_CN from 'antd/es/locale-provider/zh_CN';
 import { Provider } from "react-redux";
 import { store } from './model';
-import App from './App'
+import { App } from './App'
 
 import './index.less';
 

src/view/Manage/DatasourceManage/index.jsx

-import React, { useEffect, useState } from 'react';
-import { Space, Select, Button, Modal, Cascader } from 'antd';
+import React, { useEffect, useState, useContext } from 'react';
+import { Space, Select, Button, Modal, Cascader, TreeSelect } from 'antd';
 
 import DatasourceList from './Component/DatasourceList';
 import UpdateDatasourceModal from './Component/UpdateDatasourceModal';
@@ -10,6 +10,7 @@ import UpdateTaskModal from './Component/UpdateTaskModal';
 import { dispatch } from '../../../model';
 import { showMessage, getQueryParam } from '../../../util';
 import { DatasourceContext } from './Component/ContextManager.js';
+import { AppContext } from '../../../App';
  
 import './index.less';
 
@@ -17,10 +18,15 @@ const { Option } = Select;
 
 const DatasourceManage = (props) => {
 
+  const { env } = useContext(AppContext);
+
   const domainId = getQueryParam('domainId', props.location.search);
   const catalogId = getQueryParam('catalogId', props.location.search);
   const scopeId = getQueryParam('scopeId', props.location.search);
 
+  const [ treeData, setTreeData ] = useState([]);
+  const [ treeValue, setTreeValue ] = useState('');
+  const [ treeExpandKeys, setTreeExpandKeys ] = useState([]);
   const [ scopes, setScopes ] = useState([]);
   const [ selectedScope, setSelectedScope] = useState([]);
   const [ rawSupportDatabases, setRawSupportDatabases ] = useState([]);
@@ -58,6 +64,38 @@ const DatasourceManage = (props) => {
   }, [])
 
   useEffect(() => {
+    if (env && env.children) {
+      setTreeData(env.children);
+
+      const defaultDomain = (env?.children||[]).length>0 ? env.children[0]: null;
+
+      if (defaultDomain) {
+        const defaultSystem = (defaultDomain?.children||[]).length>0 ? defaultDomain.children[0]: null;
+
+        if (defaultSystem) {
+
+          if (env?.value === domainId) {
+            setTreeValue(Number(scopeId));
+            setSelectedScope([Number(domainId), Number(catalogId), Number(scopeId)]);
+
+          } else {
+            setTreeValue(defaultSystem.value);
+            setSelectedScope([env?.value, defaultDomain.value, defaultSystem.value]);
+          }
+
+          let _expandKeys = [];
+          (env.children||[]).forEach(item => {
+            _expandKeys.push(item.key);
+          })
+
+          setTreeExpandKeys(_expandKeys);
+
+        }
+      }
+    }
+  }, [env])
+
+  useEffect(() => {
     if ((selectedScope||[]).length>0) {
       getAllDatasources();
     }
@@ -71,7 +109,7 @@ const DatasourceManage = (props) => {
       type: 'datasource.getScopesAndSupportedTargetTypes',
       callback: data => {
         setLoadingDatabases(false);
-        convertScopes(data.scopes||[]);
+        setScopes(data.scopes||[]);
         setRawSupportDatabases(data.typies||[]);
         setSupportDatabases([{ targetType: 'all', targetName: '全部类型' }, ...(data.typies||[])]);
         setSelectedDatabaseKey('all');
@@ -82,50 +120,6 @@ const DatasourceManage = (props) => {
     })
   }
 
-  const convertScopes = (data) => {
-    const newScopes = [...(data||[])];
-    const defaultScope = [];
-    newScopes.forEach((item, index) => {
-      item.value = item.domainId;
-      item.label = item.domainName||'';
-      item.children = [];
-
-      if (index === 0) {
-        defaultScope.push(item.domainId);
-      }
-
-      (item.catalogs||[]).forEach((catalog, _index) => {
-
-        if (_index === 0) {
-          item.children.push({ value: '', label: '领域', disabled: true });
-        }
-
-        if (index===0 && _index===0) {
-          defaultScope.push(catalog.catalogId);
-        }
-
-        const children = [];
-        (catalog.scopes||[]).forEach((scope, __index) => {
-
-          if (__index === 0) {
-            children.push({ value: '', label: '系统', disabled: true });
-          }
-
-          if (index===0 && _index===0 && __index===0) {
-            defaultScope.push(scope.scopeId);
-          }
-
-          children.push({ value: scope.scopeId, label: scope.scopeName||'' });
-        })
-
-        item.children.push({ value: catalog.catalogId, label: catalog.catalogName||'', children });
-      })
-    })
-
-    setScopes([{ value: '', label: '环境', disabled: true }, ...newScopes]);
-    setSelectedScope(domainId&&catalogId&&scopeId?[Number(domainId), Number(catalogId), Number(scopeId)]:defaultScope);
-  }
-
   const getAllDatasources = () => {
     setLoadingDatasources(true);
     dispatch({
@@ -155,7 +149,19 @@ const DatasourceManage = (props) => {
   }
 
   const onScopeChange = (value) => {
-    setSelectedScope(value);
+
+    let domainId = '';
+
+    (treeData||[]).forEach(domain => {
+      (domain.children||[]).forEach(system => {
+        if (system.value === value) {
+          domainId = domain.value
+        }
+      })
+    })
+
+    setTreeValue(value);
+    setSelectedScope([env?.value, domainId, value]);
   }
 
   const onDatabaseChange = (value) => {
@@ -318,12 +324,18 @@ const DatasourceManage = (props) => {
       > 
         <Space>
           <span>系统:</span>
-          <Cascader 
-            options={scopes} 
-            expandTrigger="hover"
+          <TreeSelect 
+            style={{width:170}}
+            dropdownMatchSelectWidth={210}
+            listHeight={450}
+            value={treeValue}
+            treeData={treeData}
+            placeholder="请选择系统"
+            treeExpandedKeys={treeExpandKeys}
+            onTreeExpand={(keys)=>{
+              setTreeExpandKeys(keys);
+            }}
             onChange={onScopeChange}
-            value={selectedScope}
-            allowClear={false}
           />
           <span>数据源类型:</span>
           <Select