分支目录以及列表显示

src/view/Manage/Model/Component/ModelTree.jsx

@@ -40,7 +40,7 @@ const ModelTree = (props) => {
     id: MENU_ID,
   });
 
-  const { onSelect, onViewChange, refrence='', importStockModel, keyword, searchProperties } = props;
+  const { onSelect, onViewChange, refrence='', importStockModel, keyword, searchProperties, setRootNode } = props;
 
   const { user } = useContext(AppContext);
   const [ loading, setLoading ] = useState(false);
@@ -62,6 +62,7 @@ const ModelTree = (props) => {
   const [ dataList, setDataList ] = useState([]);
   const [options, setOptions] = useState([]);
   const [ isAdmin, setAdmin ] = useState(false);
+  const [loadingRoot, setLoadingRoot] = useState(false);
 
   const [modal, contextHolder] = Modal.useModal();
 
@@ -95,22 +96,24 @@ const ModelTree = (props) => {
   }, [timestamp])
 
   useEffect(() => {
-    if (keyword!=='') {
-      if (item && !prevItem) {
-        setPrevItem(item);
-      }
-
-      setItem(null);
-    } else {
-      if (prevItem && !item) {
-        setItem(prevItem);
-        onSelect && onSelect(prevItem?.key||'');
-        setPrevItem(null);
+    if (viewSelectedKey !== 'branch') {
+      if (keyword!=='') {
+        if (item && !prevItem) {
+          setPrevItem(item);
+        }
+  
+        setItem(null);
+      } else {
+        if (prevItem && !item) {
+          setItem(prevItem);
+          onSelect && onSelect(prevItem?.key||'');
+          setPrevItem(null);
+        }
       }
     }
 
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ keyword ])
+  }, [ keyword, viewSelectedKey])
 
   useEffect(() => {
     if ((searchProperties??[]).length > 0) {
@@ -277,6 +280,21 @@ const ModelTree = (props) => {
     });
   }
 
+  const getRootThenGetBranchTreeData = () => {
+    setLoadingRoot(true)
+    dispatch({
+      type: 'datamodel.refreshDataModelCatalog',
+      callback: data => {
+        setLoadingRoot(false)
+        setRootNode?.(data)
+        getBranchTreeData()
+      },
+      error: () => {
+        setLoadingRoot(false)
+      }
+    });
+  }
+
   const getBranchTreeData = (defaultSelectedId) => {
     setLoading(true);
     dispatch({
@@ -363,7 +381,7 @@ const ModelTree = (props) => {
     } else if (key === 'state') {
       getStateTreeData();
     } else if (key === 'branch') {
-      getBranchTreeData();
+      getRootThenGetBranchTreeData()
     }
   }
 
@@ -677,7 +695,7 @@ const ModelTree = (props) => {
       </div>
     }
       <div className='p-3'>
-        <Spin spinning={loading} >
+        <Spin spinning={loading||loadingRoot} >
           {
             (viewSelectedKey==='dir'||viewSelectedKey==='branch') && <AutoComplete
               allowClear

src/view/Manage/Model/index.jsx

@@ -76,6 +76,7 @@ class Model extends React.Component {
         items: undefined
       },
       batchAddTagChange: false,
+      rootNode: undefined,
     }
   }
   
@@ -212,7 +213,7 @@ class Model extends React.Component {
   }
 
   onTableChange = () => {
-    const { currentView, catalogId, keyword, currentModelState, searchProperties } = this.state;
+    const { currentView, catalogId, keyword, currentModelState, searchProperties, rootNode } = this.state;
 
     this.setState({ loadingTableData: true }, () => {
       if (keyword) {
@@ -224,6 +225,10 @@ class Model extends React.Component {
           params.stateId = currentModelState;
         }
 
+        if (currentView === 'branch') {
+          params.branchId = catalogId;
+        }
+
         dispatchLatestHomepage({
           type: 'datamodel.searchModel',
           payload: params,
@@ -249,7 +254,6 @@ class Model extends React.Component {
         })
       } else {
         if (currentView === 'dir') {
-
           const params = {
             easyDataModelerCatalogId: catalogId,
           };
@@ -268,7 +272,7 @@ class Model extends React.Component {
               this.setState({ loadingTableData: false });
             }
           })
-        } else {
+        } else if (currentView === 'state') {
           dispatchLatestHomepage({
             type: 'datamodel.getCurrentDataModelStateCatalog',
             payload: {
@@ -281,6 +285,26 @@ class Model extends React.Component {
               this.setState({ loadingTableData: false });
             }
           })
+        } else if (currentView === 'branch') {
+          const params = {
+            easyDataModelerCatalogId: rootNode?.id,
+            branchId: catalogId,
+          };
+
+          if (currentModelState !== '') {
+            params.stateId = currentModelState;
+          }
+
+          dispatchLatestHomepage({
+            type: 'datamodel.getCurrentDataModelCatalog',
+            payload: params,
+            callback: data => {
+              this.setState({ loadingTableData: false, tableData: data.easyDataModelerDataModels||[], filterTableData: data.easyDataModelerDataModels||[] });
+            },
+            error: () => {
+              this.setState({ loadingTableData: false });
+            }
+          })
         }
       }
     })
@@ -303,11 +327,18 @@ class Model extends React.Component {
   }
 
   onSearchInputChange = (value) => {
-    this.setState({ keyword: value||'', catalogId: '' }, () => {
-      if (value !== '') {
+    const { currentView } = this.state;
+    if (currentView === 'branch') {
+      this.setState({ keyword: value}, () => {
         this.onTableChange();
-      }
-    });
+      })
+    } else {
+      this.setState({ keyword: value||'', catalogId: '' }, () => {
+        if (value !== '') {
+          this.onTableChange();
+        }
+      });
+    }
   }
 
   onSearchPropertiesClick = () => {
@@ -598,7 +629,16 @@ class Model extends React.Component {
           axis='x'
           minConstraints={[230, Infinity]} maxConstraints={[Infinity, Infinity]}          
         >
-          <ModelTree onViewChange={this.onViewChange} onSelect={this.onTreeSelect} importStockModel={this.importStockModel} keyword={keyword} searchProperties={this.state.searchProperties} {...this.props} />
+          <ModelTree 
+            onViewChange={this.onViewChange} 
+            onSelect={this.onTreeSelect} 
+            importStockModel={this.importStockModel} 
+            keyword={keyword} 
+            searchProperties={this.state.searchProperties} 
+            setRootNode={(val) => {
+              this.setState({ rootNode: val })
+            }} 
+            {...this.props} />
         </ResizableBox>
         <div className='tree-toggle-wrap'>
           <div className='tree-toggle' onClick={this.treeToggleClick}>