资产详情调整

src/App.js

@@ -15,6 +15,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 AssetDetailPage from './view/Manage/AssetManage/Component/AssetDetailPage';
 import AssetDetail from './view/Manage/AssetManage/Component/AssetDetail';
 import ImportAction from './view/Manage/Model/Component/ImportAction';
 import EditModel from './view/Manage/Model/Component/EditModel';
@@ -50,10 +51,7 @@ export class App extends React.Component {
       return (
         <AssetDetail
           id={id} 
-          reference='search'
-          action='detail'
           terms={terms}
-          visible={true}
         />
       );
     }
@@ -85,7 +83,9 @@ export class App extends React.Component {
             <Route path={`${ContextPath}/home`} component={Home} />
             <Route path={`${ContextPath}/manage`} component={Manage} />
             <Route path={`${ContextPath}/data-model-action`} component={EditModel} exact />   
-            <Route path={`${ContextPath}/model-template-action`} component={EditTemplate} exact />       
+            <Route path={`${ContextPath}/model-template-action`} component={EditTemplate} exact />    
+            <Route path={`${ContextPath}/asset-detail`} component={AssetDetailPage} exact />   
+   
 
             <Route path={'/center-home/view/datasource-manage'} component={DatasourceManage} exact />
             <Route path={'/center-home/view/data-model'} component={Model} exact />
@@ -103,6 +103,7 @@ export class App extends React.Component {
             <Route path={'/center-home/menu/asset-browse'} component={AssetBrowse} exact />
             <Route path={'/center-home/menu/asset-recycle'} component={AssetRecycle} exact />  
             <Route path={'/center-home/data-model-action'} component={EditModel} exact />
+            <Route path={'/center-home/asset-detail'} component={AssetDetailPage} exact />
           </Switch>
         </Router>
       </AppContext.Provider>

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

-import React, { useEffect, useState } from "react";
-import { Modal, Typography, Spin } from "antd";
-
-import AssetDetailItem from './AssetDetailItem';
-import { dispatch } from '../../../../model';
-
-const AssetDetail = (props)=>{
-  
-  const { onCancel, visible, id, reference=null, terms } = props;
-  const [ asset, setAsset ] = useState('');
-  const [ assetName, setAssetName ] = useState('');
-  const [ loading, setLoading ] = useState(false);
-
-  useEffect(() => {
-
-    if (visible && (id||'') !== '') {
-      getAssetThenGetAssetName();
-    }
-    //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ visible, id ])
-
-  const getAssetThenGetAssetName = () => {
-    setLoading(true);
-    dispatch({
-      type: 'assetmanage.getDataAssetDetail',
-      payload: {
-        dataAssetId: id
-      },
-      callback: data => {
-        setLoading(false);
-        setAsset(data);
-        getAssetName(data);
-      },
-      error: () => {
-        setLoading(false);
-      }
-    })
-  }
-
-  const getAssetName = (data) => {
-    if (data) {
-      const index = (data.elements||[]).findIndex(element => element.name==='中文名称');
-      if (index !== -1) {
-        setAssetName(data.elements[index].value||'');
-      }
-    }
-  }
-
-  return(
-    <>
-    {
-      !reference && <Modal
-       title={
-         <Typography.Paragraph 
-           className='mr-5'
-           title={`资产: ${assetName||''}`} 
-           ellipsis 
-         >
-         {`资产: ${assetName||''}`}
-         </Typography.Paragraph>}
-       visible={visible}
-       width={800}
-       onCancel={()=>{ onCancel && onCancel()}}
-       footer={null}
-     >
-      <Spin spinning={loading}>
-        <AssetDetailItem data={asset} />
-      </Spin>
-     </Modal>
-    }
-    {
-      reference && <Spin spinning={loading}>
-        <AssetDetailItem data={asset} terms={terms} />
-      </Spin>
-    }
-    </>
-  )
-}
-
+import React, { useEffect, useState } from "react";
+import { Modal, Typography, Spin, Tabs, Descriptions } from "antd";
+
+import MetadataInfo from './MetadataInfo';
+import { highlightSearchContentByTerms } from '../../../../util';
+import { dispatch } from '../../../../model';
+
+const { TabPane } = Tabs;
+
+const AssetDetail = (props)=>{
+  
+  const { id, terms } = props;
+  const [ asset, setAsset ] = useState('');
+  const [ types, setTypes ] = useState([]);
+  const [ loading, setLoading ] = useState(false);
+  const [ tabKey, setTabKey ] = useState('0');
+
+  useEffect(() => {
+
+    if ((id||'') !== '') {
+      getAssetThenGetAssetName();
+    }
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ id ])
+
+  const getAssetThenGetAssetName = () => {
+    setLoading(true);
+    dispatch({
+      type: 'assetmanage.getDataAssetDetail',
+      payload: {
+        dataAssetId: id
+      },
+      callback: data => {
+        setLoading(false);
+        setAsset(data);
+
+        const _types = [];
+        (data?.elements||[]).forEach(element => {
+          if (_types.indexOf(element.type) === -1) {
+            _types.push(element.type);
+          }
+        })
+
+        setTypes(_types);
+      },
+      error: () => {
+        setLoading(false);
+      }
+    })
+  }
+
+  const onTabChange = (key) => {
+    setTabKey(key);
+  }
+
+  return(
+    <Spin spinning={loading}>
+      <Tabs activeKey={tabKey} onChange={onTabChange}>
+      {
+        (types||[]).map((type, index) => {
+
+          const _currentValues = (asset.elements||[]).filter(element => element.type===type);
+
+          return (
+            <TabPane tab={type} key={index}>
+              <Descriptions column={2}>
+              {
+                (_currentValues||[]).map((item, index) => {
+                  return (
+                    <Descriptions.Item label={item.name||''} key={index}>
+                    { 
+                      item.name==='资产项' ? <MetadataInfo config={false} value={item.value||''} /> : <span>{highlightSearchContentByTerms(item.value||'', terms)}</span>
+                    }
+                    </Descriptions.Item>
+                  );
+                })
+              }
+              </Descriptions>
+            </TabPane>  
+          )
+        })
+      }
+      </Tabs>
+    </Spin>
+  )
+}
+
 export default AssetDetail;
\ No newline at end of file

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

-import React, { useEffect, useState } from 'react';
-import { Row, Col, Typography } from 'antd';
-
-import { highlightSearchContentByTerms } from '../../../../util';
-import MetadataInfo from './MetadataInfo';
-import './AssetItem.less';
-
-const AssetItem = (props) => {
-
-  const { data, terms } = props;
-  const [ typesOfElements, setTypesOfElements ] = useState([]);
-
-  useEffect(() => {
-
-    if (data) {
-      convertData();
-    }
-    //eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ data ]);
-
-  const convertData = () => {
-    const _typesOfElements = [];
-
-    const _types = [];
-
-    data && (data.elements||[]).forEach(element => {
-      if (_types.indexOf(element.type||'') === -1) {
-        _types.push(element.type||'');
-        const _elements =  (data.elements||[]).filter(_element => (_element.type||'') === (element.type||''));
-        _typesOfElements.push({ type: element.type||'', elements: _elements||[] });
-      }
-    })
-
-    setTypesOfElements(_typesOfElements);
-  }
-
-  return (
-    <div className='asset-item'>
-    {
-      (typesOfElements||[]).map((elementGroup, index) => {
-        const _type = elementGroup.type||'';
-
-        return (
-          <div>
-            <div className='flex' style={{ alignItems: 'center', padding: '15px 0' }}>
-              <div style={{ width: 3, height: 14, backgroundColor: '#0069AC', marginRight: 5 }} />
-              <span style={{ fontWeight: 'bold', color: '#464646' }}>{_type||''}</span>
-            </div>
-            <Row>
-            {
-              elementGroup && elementGroup.elements && elementGroup.elements.map((element, _index) => {
-                return (
-                  <Col className='mb-3' key={_index} md={8}>
-                    <Typography.Paragraph title={ `${element.name||''}: ${element.value||''}` } style={{ color: '#464646' }} ellipsis>
-                    { `${element.name||''}: `}
-                    {
-                      (element.name==='资产项')?<MetadataInfo config={false} value={element.value||''} />:highlightSearchContentByTerms(element.value||'', terms)
-                    }
-                    </Typography.Paragraph>
-                  </Col>
-                );
-              })
-            }
-            </Row>
-            <div style={{ width: '100%', height: 2, backgroundColor: '#ededed' }} />
-          </div>
-        )
-      })
-    }
-    </div>
-  );
-}
-
-export default AssetItem;

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

+import React, { useEffect, useState } from "react";
+
+import AssetDetail from './AssetDetail';
+import { getQueryParam } from '../../../../util';
+
+import './AssetDetailPage.less';
+
+const AssetDetailPage = (props)=>{
+  
+ const [ id, setId ] = useState('');
+
+  useEffect(() => {
+
+    const _id = getQueryParam('id', props.location.search);
+    setId(_id);
+
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return(
+    <div className='asset-detail position-relative'>
+      <div className='detail-header'>
+        <span style={{ fontSize: 16, fontWeight: 'bold', color: '#fff' }}>资产详情</span>
+      </div>
+      <div className='detail-container'>
+        <div className='detail-container-card'>
+          <AssetDetail id={id} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AssetDetailPage;
\ No newline at end of file

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

+.asset-detail {
+  .detail-header {
+    display: flex;
+    width: 100%;
+    height: 44px; 
+    padding: 0 15px;
+    background-color: #464d6e;
+    align-items: center;
+    position: fixed; 
+    justify-content: space-between; 
+    border-bottom: 1px solid #EFEFEF;
+    z-index: 100;
+  }
+
+  .detail-container {
+    top: 44px;
+    width: 100%;
+    height: calc(100vh - 44px);
+    overflow: auto;
+    background: #EDF0F5;
+    padding: 10px 20px;
+    position: absolute;
+  }
+
+  .detail-container-card {
+    padding: 20px 20px 0;
+    background: #fff;
+  }
+}
\ No newline at end of file

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

@@ -10,7 +10,6 @@ import AssetMount from '../../AssetRecycle/Component/AssetMount';
 import AttributeRelationModal from "./AttributeRelationModal";
 import ImportAsset from './ImportAsset';
 import AssetEdit from './AssetEdit';
-import AssetDetail from "./AssetDetail";
 import MetadataInfo from './MetadataInfo';
 import { dispatch, dispatchLatestHomepage } from '../../../../model';
 import { showMessage, showNotifaction, getQueryParam, inputWidth, isSzseEnv } from '../../../../util';
@@ -31,7 +30,6 @@ const AssetTable = (props) => {
   const [ filterElementVisible, setFilterElementVisible ] = useState(false);
   const [ attributeRelationModalVisible, setAttributeRelationModalVisible ] = useState(false);
   const [ assetEditVisible, setAssetEditVisible ] = useState(false);
-  const [ assetDetailVisible, setAssetDetailVisible ] = useState(false);
   const [ assetMountVisible, setAssetMountVisible ] = useState(false);
   const [ currentAssetId, setCurrentAssetId ] = useState('');
   const [ assetEditAction, setAssetEditAction ] = useState('');
@@ -345,11 +343,7 @@ const AssetTable = (props) => {
 
   const detailAsset = (item)=>{
     setCurrentAssetId(item.id);
-    setAssetDetailVisible(true);
-  }
-
-  const onAssetDetailCancel = () => {
-    setAssetDetailVisible(false);
+    window.open(`/center-home/asset-detail?id=${item.id}`);
   }
 
   const deleteAssets = () => {
@@ -555,11 +549,6 @@ const AssetTable = (props) => {
         nodeId={nodeId}
         onCancel={onAssetEditCancel}
       />
-      <AssetDetail 
-        visible={assetDetailVisible} 
-        id={currentAssetId} 
-        onCancel={onAssetDetailCancel}
-      />
       <ImportElement 
         visible={importElementVisible}
         onCancel={onImportElementCancel}

src/view/Manage/AssetRecycle/index.jsx

@@ -3,7 +3,6 @@ import { Table, Pagination, Space, Tooltip, Button, Modal } from 'antd';
 import { ReconciliationOutlined, DeleteOutlined, UndoOutlined } from '@ant-design/icons';
 
 import { dispatchLatest } from '../../../model';
-import AssetDetail from '../AssetManage/Component/AssetDetail';
 import AssetMount from './Component/AssetMount';
 import { showMessage } from '../../../util';
 
@@ -16,7 +15,6 @@ const AssetRecycle = (props) => {
   const [ total, setTotal ] = useState(0);
   const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
   const [ currentAssetId, setCurrentAssetId ] = useState('');
-  const [ assetDetailVisible, setAssetDetailVisible ] = useState(false);
   const [ assetMountVisible, setAssetMountVisible ] = useState(false);
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
   const [ batchMount, setBatchMount ] = useState(false);
@@ -108,15 +106,7 @@ const AssetRecycle = (props) => {
 
   const detailItem = (record) => {
     setCurrentAssetId(record.id);
-
-    const index = selectedRowKeys.findIndex((rowKey) => rowKey === record.id);
-    if (index !== -1) {
-      const newSelectedRowKeys = [...selectedRowKeys];
-      newSelectedRowKeys.splice(index, 1);
-      setSelectedRowKeys(newSelectedRowKeys);
-    }
-
-    setAssetDetailVisible(true);
+    window.open(`/center-home/asset-detail?id=${record.id}`);
   }
 
   const mountItem = (record) => {
@@ -179,10 +169,6 @@ const AssetRecycle = (props) => {
     });
   }
 
-  const onAssetDetailCancel = () => {
-    setAssetDetailVisible(false);
-  }
-
   const onAssetMountCancel = (refresh = false) => {
     setAssetMountVisible(false);
 
@@ -240,11 +226,6 @@ const AssetRecycle = (props) => {
           showTotal={total => `共 ${total} 条`}
         />
       </div>
-      <AssetDetail 
-        visible={ assetDetailVisible }
-        id={ currentAssetId }
-        onCancel={ onAssetDetailCancel }
-      />
       <AssetMount
         refrence='asset-recycle'
         visible={ assetMountVisible }