资产适配全文检索

src/App.js

@@ -14,6 +14,7 @@ import AssetManage from './view/Manage/AssetManage';
 import AssetBrowse from './view/Manage/AssetBrowse';
 import AssetRecycle from './view/Manage/AssetRecycle';
 import DatasourceManage from './view/Manage/DatasourceManage';
+import AssetDetail from './view/Manage/AssetManage/Component/AssetDetail';
 import ImportModal from './view/Manage/Model/Component/ImportModal';
 
 export default class App extends React.Component {
@@ -28,11 +29,25 @@ export default class App extends React.Component {
     }
 
     if (message === 'showDataModelDetail') {
-      return  <ImportModal
+      return (
+        <ImportModal
           modelerId={id} 
           reference='search'
           action='detail'
-      />;
+          visible={true}
+        />
+      );
+    }
+    
+    if (message === 'showAssetDetail') {
+      return (
+        <AssetDetail
+          id={id} 
+          reference='search'
+          action='detail'
+          visible={true}
+        />
+      );
     }
 
     return (

src/util/constant.js

+export const AnchorId = 'id';
+export const AnchorDid = 'did';
+export const AnchorLocation = 'location';
\ No newline at end of file

src/view/Manage/AssetBrowse/index.jsx

@@ -14,10 +14,10 @@ const AssetBrowse = (props) => {
   return (
     <Row gutter={15} style={{backgroundColor:'#ededed'}}>
       <Col span={6}>
-        <AssetTree onSelect={onTreeSelect} readOnly />
+        <AssetTree onSelect={onTreeSelect} readOnly {...props} />
       </Col>
       <Col span={18}>
-        <AssetTable nodeId={nodeId} readOnly />
+        <AssetTable nodeId={nodeId} readOnly {...props} />
       </Col>
     </Row>
   )

src/view/Manage/AssetManage/Component/AssetDetail.jsx

@@ -6,7 +6,7 @@ import { dispatch } from '../../../../model';
 
 const AssetDetail = (props)=>{
   
-  const { onCancel, visible, id } = props;
+  const { onCancel, visible, id, reference=null } = props;
   const [ asset, setAsset ] = useState('');
   const [ assetName, setAssetName ] = useState('');
 
@@ -41,7 +41,9 @@ const AssetDetail = (props)=>{
   }
 
   return(
-    <Modal
+    <>
+    {
+      !reference && <Modal
        title={
          <Typography.Paragraph 
            className='mr-5'
@@ -57,6 +59,11 @@ const AssetDetail = (props)=>{
      >
        <AssetItem data={asset} />
      </Modal>
+    }
+    {
+      reference && <AssetItem data={asset} />
+    }
+    </>
   )
 }
 

src/view/Manage/AssetManage/Component/AssetTable.jsx

-import React,{ useState, useEffect } from "react";
+import React,{ useState, useEffect, useRef } from "react";
 import { Card, Checkbox, Button, List, Skeleton, Pagination, Space, Modal, Switch, Divider, Tooltip, Popover, Input } from "antd";
 import { EditOutlined, ReconciliationOutlined, DeleteOutlined  } from '@ant-design/icons';
 import classNames from 'classnames';
+import SmoothScroll from 'smooth-scroll';
 
 import ImportElement from './ImportElement';
 import FilterElement from './FilterElement';
@@ -10,11 +11,12 @@ import AssetEdit from './AssetEdit';
 import AssetDetail from "./AssetDetail"
 import AssetItem from './AssetItem';
 import { dispatch } from '../../../../model';
-import { showMessage, showNotifaction } from '../../../../util';
+import { showMessage, showNotifaction, getQueryParam } from '../../../../util';
+import { AnchorId, AnchorLocation } from '../../../../util/constant';
 
 import "./AssetTable.less";
 
-const AssetTable = (props) =>{
+const AssetTable = (props) => {
 
   const { readOnly = false, className, nodeId } = props;
   const [ loading, setLoading ] = useState(false);
@@ -36,15 +38,41 @@ const AssetTable = (props) =>{
 
   const [ modal, contextHolder ] = Modal.useModal();
 
+  const anchorId = getQueryParam(AnchorId, props.location.search);
+  const anchorLocation = Number(getQueryParam(AnchorLocation, props.location.search));
+
+  const shouldScrollRef = useRef(false);
+
   useEffect(()=>{
     if ((nodeId||'') !== '' ) {
+
+      if (shouldScrollRef.current === true) {
+
+        const _pageNum = parseInt(anchorLocation/pageSize + ((anchorLocation%pageSize===0)?0:1));
+        setPagination({ ...pagination, pageNum: _pageNum });
+
+      } else {
+
         setPagination({ ...pagination, pageNum: 1 });
+
+      }
+
+      setKeyword('');
       setSelectedKeys([]);
       setCheckAllValue(false);
     }
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ nodeId ])
 
+  useEffect(() => {
+
+    if ((anchorId||'') !== '') {
+      shouldScrollRef.current = true;
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [anchorId])
+
 
   useEffect(()=>{
     if ((nodeId||'') !== '' ) {
@@ -53,6 +81,25 @@ const AssetTable = (props) =>{
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ keyword, pagination ])
 
+  useEffect(() => {
+    if (shouldScrollRef.current) {
+      SmoothScroll('a[href*="#"]');
+
+      const _id = getQueryParam(AnchorId, props.location.search);
+      var scroll = new SmoothScroll();
+      var anchor = document.querySelector(`#data-asset-${_id}`);
+
+      if (anchor) {
+        shouldScrollRef.current = false;
+
+        setTimeout(() => {
+          scroll.animateScroll(anchor);
+        }, 1000);
+
+      }
+    }
+  })
+
   const changeCurrent=(page,size)=>{
     setCheckAllValue(false);
     setSelectedKeys([]);
@@ -325,7 +372,7 @@ const AssetTable = (props) =>{
           dataSource={ assets||[] }
           footer={null}
           renderItem={(item, index) => (
-            <List.Item>
+            <List.Item id={`data-asset-${item.id||''}`} style={{ backgroundColor: (item.id===anchorId)?'#e7f7ff':'transparent' }}>
               <Skeleton title={false} loading={loading} active>
                 <List.Item.Meta
                   title={

src/view/Manage/AssetManage/Component/AssetTree.jsx

@@ -7,7 +7,8 @@ import { dispatch } from '../../../../model';
 import ImportDirectory from './ImportDirectory'; 
 import UpdateDirectoryModal from './UpdateDirectoryModal';
 import CustomDirectoryModal from './CustomDirectoryModal';
-import { showMessage } from '../../../../util';
+import { showMessage, getQueryParam } from '../../../../util';
+import { AnchorDid } from '../../../../util/constant';
 import './AssetTree.less';
 
 const AssetTree = (props) => {
@@ -29,13 +30,19 @@ const AssetTree = (props) => {
 
   const [modal, contextHolder] = Modal.useModal();
   
+  const did = getQueryParam(AnchorDid, props.location.search);
+
   useEffect(() => {
-    getAllDirectoryAsTree();
+    getAllDirectoryAsTree(true, did);
     //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [did])
 
-  const getAllDirectoryAsTree = (resetCurrentDirId=true) => {
+  const getAllDirectoryAsTree = (resetCurrentDirId=true, defaultSelectedId='') => {
     setLoading(true);
+    if (resetCurrentDirId) {
+      onSelect && onSelect('');
+    }
+    
     dispatch({
       type: 'assetmanage.queryAllDirectoryAsTree',
       callback: data => {
@@ -46,13 +53,56 @@ const AssetTree = (props) => {
         generateList(data, _dataList);
         setDataList(_dataList);
 
+        let defaultItem = null;
+
+        function recursion(subCatalogs) {
+
+          if ((subCatalogs||[]).length===0) return;
+
+          (subCatalogs||[]).forEach(catalog=> {
+    
+            if (catalog.nodeId === defaultSelectedId) {
+              defaultItem = catalog;
+            }
+
+            recursion(catalog.children);
+          })
+        } 
+
+        if ((defaultSelectedId||'') !== '') {
+          recursion(data);
+        }
+
         if (resetCurrentDirId) {
+
+          if (defaultItem) {  
+            const expandedKeys = _dataList
+              .map(item => {
+                if (item.key.indexOf(defaultSelectedId) > -1) {
+                  return getParentKey(item.key, data);
+                }
+                return null;
+              })
+              .filter((item, i, self) => item && self.indexOf(item) === i);
+  
+            setExpandedKeys(expandedKeys);
+            setAutoExpandParent(true);
+  
+            setCurrentDirId(defaultItem.nodeId);
+            setCurrentDirType(defaultItem.type||'');
+            onSelect && onSelect(defaultItem.nodeId);
+          
+          } else {
+
             const _currentDirId = (data&&data[0]?(data[0].nodeId||''):'');
             const _type = (data&&data[0]?(data[0].type||''):'');
   
             setCurrentDirId(_currentDirId);
             setCurrentDirType(_type);
             onSelect && onSelect(_currentDirId);
+
+          }
+       
         }
       },
       error: () => {

src/view/Manage/AssetManage/index.jsx

@@ -14,10 +14,10 @@ const AssetManage = (props) => {
   return (
     <Row gutter={15} style={{backgroundColor:'#ededed'}}>
       <Col span={6}>
-        <AssetTree onSelect={onTreeSelect} />
+        <AssetTree onSelect={onTreeSelect} {...props} />
       </Col>
       <Col span={18}>
-        <AssetTable nodeId={nodeId} />
+        <AssetTable nodeId={nodeId} {...props} />
       </Col>
     </Row>
   )

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

@@ -5,6 +5,8 @@ import SmoothScroll from 'smooth-scroll';
 
 import { dispatchLatest } from '../../../../model'; 
 import { showMessage, getQueryParam } from '../../../../util';
+import { AnchorId } from '../../../../util/constant';
+
 import './ModelTable.less';
 
 const ModelTable = (props) => {
@@ -14,8 +16,8 @@ const ModelTable = (props) => {
 
   const [modal, contextHolder] = Modal.useModal();
 
-  const anchorId = getQueryParam('id', props.location.search);
-  const shouldScrollRef = useRef(anchorId!==null);
+  const anchorId = getQueryParam(AnchorId, props.location.search);
+  const shouldScrollRef = useRef(false);
 
   useEffect(() => {
 
@@ -26,10 +28,19 @@ const ModelTable = (props) => {
   }, [ catalogId ]);
 
   useEffect(() => {
+
+    if ((anchorId||'') !== '') {
+      shouldScrollRef.current = true;
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [anchorId])
+
+  useEffect(() => {
     if (shouldScrollRef.current) {
       SmoothScroll('a[href*="#"]');
 
-      const _id = getQueryParam('id', props.location.search);
+      const _id = getQueryParam(AnchorId, props.location.search);
       var scroll = new SmoothScroll();
       var anchor = document.querySelector(`#data-model-${_id}`);
 

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

@@ -5,6 +5,8 @@ import { PlusOutlined, EditOutlined, SyncOutlined, DeleteOutlined  } from '@ant-
 import UpdateTreeItemModal from './UpdateTreeItemModal';
 import { dispatch } from '../../../../model'; 
 import { showMessage, getQueryParam } from '../../../../util';
+import { AnchorDid } from '../../../../util/constant';
+
 import './ModelTree.less';
 
 const ModelTree = (props) => {
@@ -21,7 +23,7 @@ const ModelTree = (props) => {
 
   const [modal, contextHolder] = Modal.useModal();
 
-  const did = getQueryParam('did', props.location.search);
+  const did = getQueryParam(AnchorDid, props.location.search);
 
   const itemRef = useRef();
   itemRef.current = item;