增加资产路径

src/util/constant.js

 //全文检索
 export const AnchorId = 'id';
 export const AnchorTimestamp = 'timestamp';
+export const AnchorDirId = 'did';
 
 //编辑模型
 export const Action = 'action';

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

 import React, { useEffect, useState } from 'react';
 import { Form, Spin, Input, Descriptions, Space, Button } from 'antd';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
-import Tag from '../../Tag';  
+import LocalStorage from 'local-storage';
 
 import MetadataInfo from './MetadataInfo';
 import { dispatch } from '../../../../model';
 import { highlightSearchContentByTerms, showMessage } from '../../../../util';
 import { unfoldedElements } from '../util';
 import { AppContext } from '../../../../App';
+import Tag from '../../Tag';  
 
 const AssetAction = (props) => {
 
@@ -77,7 +78,8 @@ const AssetAction = (props) => {
     dispatch({
       type: 'assetmanage.getDataAssetDetail',
       payload: {
-        dataAssetId: id
+        dataAssetId: id,
+        dirId: dirId,
       },
       callback: data => {
         setLoading(false);
@@ -120,6 +122,16 @@ const AssetAction = (props) => {
     }
   }
 
+  const jumpToPath = () => {
+    setFullScreen(false);
+    
+    LocalStorage.set('assetDirChange', !(LocalStorage.get('assetDirChange')||false));
+    let event = new Event('storage');
+    event.key = 'assetDirChange';
+    event.dirId = (assets?.dirIds||[]).length>0?assets.dirIds[0]:'';
+    window?.dispatchEvent(event);
+  }
+
   const onOk = async() => {
     try {
       const row = await form.validateFields();
@@ -243,6 +255,13 @@ const AssetAction = (props) => {
 
       <div style={{ padding: 10 }}>
         <Descriptions column={1}>
+          {
+            (assets.currentPath||'')!=='' && <Descriptions.Item label='路径' style={{ paddingBottom: 10 }}>
+              <a onClick={()=>{jumpToPath();}}>
+              {assets.currentPath||''}
+              </a>
+            </Descriptions.Item>
+          }
           <Descriptions.Item label='标签' style={{ paddingBottom: 0 }}>
           {
             (currentAction==='add'||currentAction==='edit')?<Tag styleType='complex' id={id} />:<Tag id={id} />

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

@@ -52,7 +52,8 @@ const AssetTable = (props) => {
   const [ columns, setColumns ] = useState([]);
   const [ assets, setAssets ] = useState([]);
   const [ total, setTotal ] = useState(0);
-  const [ selectKey, setSelectKey ] = useState('');
+  const [ selectItem, setSelectItem ] = useState({});
+
   const [ checkedKeys, setCheckedKeys ] = useState([]);
   const [ importAssetVisible, setImportAssetVisible ] = useState(false);
   const [ filterElementVisible, setFilterElementVisible ] = useState(false);
@@ -78,7 +79,7 @@ const AssetTable = (props) => {
   useEffect(() => {
     if ((nodeId||'') !== '' ) {
       setKeyword('');
-      setSelectKey('');
+      setSelectItem({});
       setCheckedKeys([]);
 
       if (shouldScrollRef.current === true) {
@@ -296,16 +297,16 @@ const AssetTable = (props) => {
         setAssets(_assets);
 
         if (reference === AssetManageReference) {
-          if ((selectKey||'') !=='') {
-            const index = _assets.findIndex((asset) => asset.id === selectKey);
+          if ((selectItem?.id||'') !=='') {
+            const index = _assets.findIndex((asset) => asset.id === selectItem?.id);
   
             if (index === -1) {
-              setSelectKey(_assets.length>0?_assets[0].id:'');
-              onSelect && onSelect(_assets.length>0?_assets[0].id:'');
+              setSelectItem(_assets.length>0?_assets[0]:{});
+              onSelect && onSelect(_assets.length>0?_assets[0].id:'', _assets.length>0?_assets[0].dirId:'');
             }
           } else {
-            setSelectKey(_assets.length>0?_assets[0].id:'');
-            onSelect && onSelect(_assets.length>0?_assets[0].id:'');
+            setSelectItem(_assets.length>0?_assets[0]:{});
+            onSelect && onSelect(_assets.length>0?_assets[0].id:'', _assets.length>0?_assets[0].dirId:'');
           }
         }
 
@@ -526,8 +527,8 @@ const AssetTable = (props) => {
             return {
               id: `data-asset-${record?.id}`,
               onClick: (e) => {
-                setSelectKey(record?.id);
-                onSelect && onSelect(record?.id);
+                setSelectItem(record);
+                onSelect && onSelect(record?.id, record?.dirId);
 
                 if (reference !== AssetManageReference) {
                   setAssetDetailDrawerVisible(true);
@@ -536,7 +537,7 @@ const AssetTable = (props) => {
             }
           }}
           rowClassName={(record, index) => {
-            if (record?.id===anchorId || record?.id===selectKey) {
+            if (record?.id===anchorId || record?.id===selectItem?.id) {
               return 'highlight-row';
             }
 
@@ -600,8 +601,8 @@ const AssetTable = (props) => {
         onCancel={ onFilterElementModalCancel}
       />
       <AssetDetailDrawer 
-        id={selectKey}
-        dirId={nodeId}
+        id={selectItem?.id}
+        dirId={selectItem?.dirId}
         visible={assetDetailDrawerVisible}
         onCancel={onAssetDetailDrawerCancel}
       />

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

 import React, { useEffect, useState } from 'react';
+import { useMount } from 'ahooks';
 import {Card, Spin, Tooltip, Tree, Input, Dropdown, Menu, Modal} from 'antd';
 import { PlusOutlined, ImportOutlined,EditOutlined,DeleteOutlined,ExportOutlined,ReloadOutlined, SettingOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
@@ -8,7 +9,7 @@ import ImportDirectory from './ImportDirectory';
 import UpdateDirectoryModal from './UpdateDirectoryModal';
 import CustomDirectoryModal from './CustomDirectoryModal';
 import { showMessage, getQueryParam } from '../../../../util';
-import { AnchorTimestamp, AnchorId, AssetManageReference, AssetBrowseReference, ResourceBrowseReference, AssetMountReference } from '../../../../util/constant';
+import { AnchorTimestamp, AnchorId, AssetManageReference, AssetBrowseReference, ResourceBrowseReference, AssetMountReference, AnchorDirId } from '../../../../util/constant';
 import './AssetTree.less';
 
 const AssetTree = (props) => {
@@ -35,6 +36,14 @@ const AssetTree = (props) => {
   const timestamp = getQueryParam(AnchorTimestamp, props?.location?.search);
   const id = getQueryParam(AnchorId, props?.location?.search);
 
+  useMount(() => {
+    window?.addEventListener("storage", storageChange);
+
+    return () => {
+      window?.removeEventListener("storage", storageChange);
+    }
+  })
+
   useEffect(() => {
     if ((id||'') !== '') {
       getDataAssetLocationThenGetTreeData();
@@ -53,11 +62,19 @@ const AssetTree = (props) => {
 
   useEffect(() => {
     if ((centerId||'') !== '') {
-      centerIdChanged();
+      treeDirectoryChanged(centerId);
     } 
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [centerId])
 
+  const storageChange = (e) => {
+    if (e.key === 'assetDirChange') {
+      if ((e.dirId||'') !== '') {
+        treeDirectoryChanged(e.dirId);
+      }
+    }
+  }
+
   const getDataAssetLocationThenGetTreeData = () => {
     setLoading(true);
     dispatch({
@@ -177,7 +194,7 @@ const AssetTree = (props) => {
     });
   }
 
-  const centerIdChanged = () => {
+  const treeDirectoryChanged = (did) => {
 
     let defaultItem = null;
 
@@ -187,7 +204,7 @@ const AssetTree = (props) => {
 
       (subCatalogs||[]).forEach(catalog=> {
 
-        if (catalog.nodeId === centerId) {
+        if (catalog.nodeId === did) {
           defaultItem = catalog;
         }
 
@@ -195,14 +212,14 @@ const AssetTree = (props) => {
       })
     } 
 
-    if ((centerId||'') !== '') {
+    if ((did||'') !== '') {
       recursion(treeData);
     }
 
     if (defaultItem) {  
       const expandedKeys = (dataList||[])
         .map(item => {
-          if (item.key.indexOf(centerId) > -1) {
+          if (item.key.indexOf(did) > -1) {
             return getParentKey(item.key, treeData);
           }
           return null;
@@ -214,6 +231,7 @@ const AssetTree = (props) => {
 
       setCurrentDirId(defaultItem.nodeId);
       setCurrentDirType(defaultItem.type||'');
+      onSelect && onSelect(defaultItem.nodeId);
     } 
   }
 

src/view/Manage/AssetManage/index.jsx

@@ -15,7 +15,7 @@ import './index.less';
 const AssetManage = (props) => {
 
   const [ nodeId, setNodeId ] = useState('');
-  const [ assetId, setAssetId ] = useState('');
+  const [ assetParams, setAssetParams ] = useState({ assetId: '', assetDirId: '' })
   const [ expandTree, setExpandTree ] = useState(true);
 
   const [ assetCount, setAssetCount ] = useState(0);
@@ -23,13 +23,15 @@ const AssetManage = (props) => {
   const [ elementsChanged, setElementsChanged ] = useState(false);
   const [ assetActionChanged, setAssetActionChanged ] = useState(false);
 
+  const { assetId, assetDirId } = assetParams;
+
   const onTreeSelect = (value, type) => {
 
     setNodeId(value||'');
   }
 
-  const onTableSelect = (value) => {
-    setAssetId(value);
+  const onTableSelect = (id, did) => {
+    setAssetParams({ assetId: id, assetDirId: did });
   }
 
   const treeToggleClick = () => {
@@ -72,9 +74,8 @@ const AssetManage = (props) => {
         <AssetTable nodeId={nodeId} reference={AssetManageReference} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} {...props} />
       </div>
       <div className='right'>
-        <AssetAction id={assetId} dirId={nodeId} action='detail' onChange={onAssetActionChange} />
+        <AssetAction id={assetId} dirId={assetDirId} action='detail' onChange={onAssetActionChange} />
       </div>
-
     </div>
   )
 }

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

 import React, { useState, useEffect, useRef } from "react";
-import { Tooltip, Modal, Pagination, Table, Popover } from 'antd';
+import { Tooltip, Modal, Pagination, Table } from 'antd';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import SmoothScroll from 'smooth-scroll';
 import classnames from 'classnames';