关联关系跳转

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

@@ -10,6 +10,7 @@ import { AppContext } from '../../../../App';
 import Tag from '../../Tag';  
 import Separate from './Separate';
 import AssetTagModal from './AssetTagModal';
+import { AnchorId, AnchorDirId } from '../../../../util/constant';
 
 import { CancelSvg, EditSvg, SaveSvg, FullScreenSvg, CancelFullScreenSvg } from './AssetSvg';
 
@@ -184,13 +185,31 @@ const AssetAction = (props) => {
   const jumpToPath = () => {
     setFullScreen(false);
     
-    LocalStorage.set('assetDirChange', !(LocalStorage.get('assetDirChange')||false));
     let event = new Event('storage');
-    event.key = 'assetDirChange';
+    event.key = 'assetDirChangeEvent';
     event.dirId = dirId||'';
     window?.dispatchEvent(event);
   }
 
+  const jumpToRelation = (relation) => {
+    if (!readOnly) {
+      let event = new Event('storage');
+      event.key = 'assetRelationOnClickEvent';
+      event.relation = relation;
+      window?.dispatchEvent(event);
+    } else {
+      const timestamp = new Date().getTime();
+
+      if (relation.resourceType==='innerSource'||relation.resourceType==='outerSource') {
+        window.open('/center-home/menu/' + `asset-resource-browse?${AnchorId}=${relation?.dataAssetId}&${AnchorDirId}=${relation?.dirId}&timestamp=${timestamp}`);
+      } else if (relation.resourceType==='dataAsset') {
+        window.open('/center-home/menu/' + `asset-browse?${AnchorId}=${relation?.dataAssetId}&${AnchorDirId}=${relation?.dirId}&timestamp=${timestamp}`);
+      } else {
+        showMessage('warn', '资产类型不是资源也不是资产!');
+      }
+    }
+  }
+
   const onOk = async() => {
     try {
       const row = await form?.validateFields();
@@ -382,7 +401,7 @@ const AssetAction = (props) => {
                 {
                   (resourceRelations||[]).map((item, key) => {
                     return (
-                      <span key={key}>{item?.dataAssetName||''}</span>
+                      <a key={key} onClick={() => { jumpToRelation(item); }}>{item?.dataAssetName||''}</a>
                     );
                   })
                 }

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

@@ -14,7 +14,7 @@ import AssetEdit from './AddAssetModel';
 import AssetDetailDrawer from "./AssetDetailDrawer";
 import { dispatch, dispatchLatestHomepage } from '../../../../model';
 import { showMessage, showNotifaction, getQueryParam, inputWidth, isSzseEnv } from '../../../../util';
-import { AnchorId, AnchorTimestamp, AssetBrowseReference, AssetManageReference, AssetRecycleReference, ResourceBrowseReference } from '../../../../util/constant';
+import { AnchorId, AnchorDirId, AnchorTimestamp, AssetBrowseReference, AssetManageReference, AssetRecycleReference, ResourceBrowseReference } from '../../../../util/constant';
 import { FullScreenSvg, CancelFullScreenSvg } from './AssetSvg';
 
 import "./AssetTable.less";
@@ -146,11 +146,23 @@ const AssetTable = (props) => {
   const [ compact, setCompact ] = useState(false);
 
   const [ modal, contextHolder ] = Modal.useModal();
-  const anchorId = getQueryParam(AnchorId, props.location.search);
-  const timestamp = getQueryParam(AnchorTimestamp, props.location.search);
+  const anchorId = getQueryParam(AnchorId, props?.location?.search);
+  const timestamp = getQueryParam(AnchorTimestamp, props?.location?.search);
+  const anchorDid = getQueryParam(AnchorDirId, props?.location?.search);
 
   const shouldScrollRef = useRef(false);
   const metadataIndexRef = useRef('');
+  const remoteRelationRef = useRef(null);
+
+  useEffect(() => {
+    window?.addEventListener("storage", storageChange);
+
+    return () => {
+      window?.removeEventListener("storage", storageChange);
+    }
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
 
   useEffect(() => {
     if ((nodeId||'') !== '' ) {
@@ -160,7 +172,12 @@ const AssetTable = (props) => {
       if (shouldScrollRef.current === true) {
 
         shouldScrollRef.current = false;
+
+        if (remoteRelationRef.current) {
+          getDataAssetLocationByRelation();
+        } else {
           getDataAssetLocation();
+        }
 
       } else {
         setPagination({ ...pagination, pageNum: 1 });
@@ -200,12 +217,44 @@ const AssetTable = (props) => {
     }
   })
 
+  const storageChange = (e) => {
+    if (e.key === 'assetRelationOnClickEvent') {
+      remoteRelationRef.current = e.relation;
+      shouldScrollRef.current = true;
+    }
+  }
+
+  const getDataAssetLocationByRelation = () => {
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.getDataAssetLocation',
+      payload: {
+        dataAssetId: remoteRelationRef.current?.dataAssetId,
+        dirId: remoteRelationRef.current?.dirId,
+      },
+      callback: data => {
+        remoteRelationRef.current = null;
+
+        const anchorLocation = data.offset;
+        const _pageNum = parseInt(anchorLocation/pageSize + ((anchorLocation%pageSize===0)?0:1));
+        setPagination({ ...pagination, pageNum: _pageNum });
+      },
+      error: () => {
+        setLoading(false);
+
+        remoteRelationRef.current = null;
+        setPagination({ ...pagination, pageNum: 1 });
+      }
+    });
+  }
+
   const getDataAssetLocation = () => {
     setLoading(true);
     dispatch({
       type: 'assetmanage.getDataAssetLocation',
       payload: {
-        dataAssetId: anchorId
+        dataAssetId: anchorId,
+        dirId: anchorDid,
       },
       callback: data => {
         const anchorLocation = data.offset;
@@ -285,9 +334,8 @@ const AssetTable = (props) => {
                   <Tooltip title={text||''}>
                     <Text ellipsis={true}>
                       <a onClick={()=>{
-                        LocalStorage.set('assetDirChange', !(LocalStorage.get('assetDirChange')||false));
                         let event = new Event('storage');
-                        event.key = 'assetDirChange';
+                        event.key = 'assetDirChangeEvent';
                         event.dirId = record.dirId||'';
                         window?.dispatchEvent(event);
                       }}>

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

@@ -64,10 +64,10 @@ const AssetTree = (props) => {
   }, [])
 
   useEffect(() => {
-    if ((id||'') !== '') {
-      getDataAssetLocationThenGetTreeData();
-    } else if ((did||'') !== '') {
+    if ((did||'') !== '') {
       getAllDirectoryAsTree(true, did);
+    } else if ((id||'') !== '') {
+      getDataAssetLocationThenGetTreeData();
     }  else {
       getAllDirectoryAsTree(true);
     } 
@@ -89,10 +89,12 @@ const AssetTree = (props) => {
   }, [centerId])
 
   const storageChange = (e) => {
-    if (e.key === 'assetDirChange') {
+    if (e.key === 'assetDirChangeEvent') {
       if ((e.dirId||'') !== '') {
         treeDirectoryChanged(e.dirId);
       }
+    } else if (e.key === 'assetRelationOnClickEvent') {
+      treeDirectoryChanged(e.relation?.dirId);
     }
   }