流程跳转资产详情

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

 import React, { useEffect, useState } from "react";
+import { Spin } from "antd";
 
 import AssetDetail from './AssetDetail';
 import { getQueryParam } from '../../../../util';
+import { dispatch } from '../../../../model'
 
 import './AssetDetailPage.less';
 
 const AssetDetailPage = (props)=>{
-
-  const [ data, setData ] = useState({ id: '', dirId: '' });
-
-  const { id, dirId } = data;
+  const id = getQueryParam('id', props.location?.search)
+  const [dirId, setDirId] = useState(getQueryParam('dirId', props.location?.search))
+  const [loading, setLoading] = useState(false)
   
   useEffect(() => {
-
-    const _id = getQueryParam('id', props.location.search);
-    const _dirId = getQueryParam('dirId', props.location.search);
-    setData({ id: _id, dirId: _dirId });
-
+    if (!dirId) {
+      getAssetPaths()
+    }
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  const getAssetPaths = () => {
+    if (id) {
+      setLoading(true);
+      dispatch({
+        type: 'assetmanage.getAssetPaths',
+        payload: {
+          dataAssetId: id,
+        },
+        callback: data => {
+          setLoading(false);
+          if ((data??[]).length > 0) {
+            setDirId(data[0].dirId)
+          }
+        },
+        error: () => {
+          setLoading(false);
+        }
+      })
+    }
+  }
+
   return(
     <div className='asset-detail position-relative'>
       <div className='detail-header'>
         <span style={{ fontSize: 16, fontWeight: 'bold', color: '#fff' }}>资产详情</span>
       </div>
+      <Spin spinning={loading}>
         <div className='detail-container'>
           <div className='detail-container-card'>
-          <AssetDetail id={id} dirId={dirId} />
+            {
+              dirId && <AssetDetail id={id} dirId={dirId} />
+            }
           </div>
         </div>
+      </Spin>
     </div>
   )
 }