资产浏览

src/App.js

@@ -11,6 +11,7 @@ import Manage from './view/Manage';
 import Map from './view/Manage/Map';
 import Model from './view/Manage/Model';
 import AssetManage from './view/Manage/AssetManage';
+import AssetBrowse from './view/Manage/AssetBrowse';
 import AssetRecycle from './view/Manage/AssetRecycle';
 import DatasourceManage from './view/Manage/DatasourceManage';
 
@@ -27,6 +28,7 @@ export default class App extends React.Component {
             <Route path={'/center-home/view/data-model'} component={Model} exact />
             <Route path={'/center-home/view/asset-map'} component={Map} exact />
             <Route path={'/center-home/view/asset-manage'} component={AssetManage} exact />
+            <Route path={'/center-home/view/asset-browse'} component={AssetBrowse} exact />
             <Route path={'/center-home/view/asset-recycle'} component={AssetRecycle} exact />
           </Switch>
         </Router>

src/routes.js

@@ -28,6 +28,10 @@ export const routes = [
         text: '资产管理',
       },
       {
+        name: 'asset-browse',
+        text: '资产浏览'
+      },
+      {
         name: 'asset-recycle',
         text: '未分类资产',
       }

src/view/Manage/AssetBrowse/index.jsx

+import React, { useState } from 'react';
+import { Row, Col } from 'antd';
+import AssetTable from "../AssetManage/Component/AssetTable";
+import AssetTree from '../AssetManage/Component/AssetTree';
+
+const AssetBrowse = (props) => {
+
+  const [ nodeId, setNodeId ] = useState(''); 
+
+  const onTreeSelect = (value) => {
+    setNodeId(value||'');
+  }
+
+  return (
+    <Row gutter={15} style={{backgroundColor:'#ededed'}}>
+      <Col span={6}>
+        <AssetTree onSelect={onTreeSelect} readOnly />
+      </Col>
+      <Col span={18}>
+        <AssetTable nodeId={nodeId} readOnly />
+      </Col>
+    </Row>
+  )
+}
+
+export default AssetBrowse;
\ No newline at end of file

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

 import React,{ useState, useEffect } 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 ImportElement from './ImportElement';
 import FilterElement from './FilterElement';
@@ -15,7 +16,7 @@ import "./AssetTable.less";
 
 const AssetTable = (props) =>{
 
-  const { nodeId } = props
+  const { readOnly = false, className, nodeId } = props;
   const [ loading, setLoading ] = useState(false);
   const [ assetNames, setAssetNames ] = useState([]);
   const [ assets, setAssets ] = useState([]);
@@ -244,10 +245,14 @@ const AssetTable = (props) =>{
     window.open('/api/dataassetmanager/elementApi/export');
   }
 
+  const classes = classNames('asset-list', className, {
+    'asset-list-read-only': readOnly
+  });  
+
   return(
     <Card
       bordered={false} 
-      className="asset-list"
+      className={classes}
       bodyStyle={{ padding: '0 10px' }}
       headStyle={{ padding: 10 }}
       title={
@@ -262,7 +267,9 @@ const AssetTable = (props) =>{
               style={{ width: 240, marginLeft: 'auto' }}
             />
           </Space>
-          <Button style={{ marginLeft: 'auto' }} type="primary"onClick={onRecycleClick} >未分类资产</Button>
+          {
+            !readOnly && <Button style={{ marginLeft: 'auto' }} type="primary"onClick={onRecycleClick} >未分类资产</Button>
+          }
         </div>
       }
     >
@@ -282,25 +289,31 @@ const AssetTable = (props) =>{
           onChange={ onCheckAll } 
         />
         <div>
-          <Space>
-            <span>资产要素:</span>
-            <Button type="primary" onClick={onImportElementBtnClick}>导入</Button>
-            <Button type="primary" onClick={onExportElementBtnClick}>导出</Button>
-            <Popover 
-              placement="bottom" 
-              content={<FilterElement onCancel={onFilterElementVisibleChange} />} 
-              title='资产要素过滤'
-              visible={filterElementVisible} 
-              onVisibleChange={onFilterElementVisibleChange}
-              trigger="hover">
-              <Button type="primary">过滤</Button>
-            </Popover>
-          </Space>
+          {
+            !readOnly && <Space>
+              <span>资产要素:</span>
+              <Button type="primary" onClick={onImportElementBtnClick}>导入</Button>
+              <Button type="primary" onClick={onExportElementBtnClick}>导出</Button>
+              <Popover 
+                placement="bottom" 
+                content={<FilterElement onCancel={onFilterElementVisibleChange} />} 
+                title='资产要素过滤'
+                visible={filterElementVisible} 
+                onVisibleChange={onFilterElementVisibleChange}
+                trigger="hover">
+                <Button type="primary">过滤</Button>
+              </Popover>
+            </Space>
+          }
           <Space className='ml-5'>
             <span>资产:</span>
-            <Button type="primary"  onClick={ addAsset }>新增</Button>
-            <Button type="danger" onClick={ deleteAssets } >删除</Button>
-            <Button type="primary" onClick={importAsset} >导入</Button>
+            {
+              !readOnly && <>
+                <Button type="primary"  onClick={ addAsset }>新增</Button>
+                <Button type="danger" onClick={ deleteAssets } >删除</Button>
+                <Button type="primary" onClick={importAsset} >导入</Button>
+              </>
+            }
             <Button type="primary" onClick={exportAsset} >导出</Button>
           </Space>
         </div>

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

@@ -277,7 +277,7 @@ const AssetTree = (props) => {
     });
 
   const classes = classNames('asset-tree', className, {
-    'asset-tree-read': readOnly
+    'asset-tree-read-only': readOnly
   });  
 
   return (

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

@@ -14,9 +14,9 @@
   }
 }
 
-.asset-tree-read {
+.asset-tree-read-only {
   .yy-tree-list {
-    height: 400px !important;
+    height: calc(100vh - 64px - 30px - 20px - 42px) !important;;
     overflow: auto !important;
   }
 }
\ No newline at end of file

src/view/Manage/AssetManage/index.jsx

 import React, { useState } from 'react';
 import { Row, Col } from 'antd';
-import AssetTable from "./Component/AssetTable"
+import AssetTable from './Component/AssetTable';
 import AssetTree from './Component/AssetTree';
 
 const AssetManage = (props) => {

src/view/Manage/index.jsx

@@ -9,6 +9,7 @@ import DatasourceManage from './DatasourceManage';
 import Map from './Map';
 import Model from './Model';
 import AssetManage from './AssetManage';
+import AssetBrowse from './AssetBrowse';
 import AssetRecycle from './AssetRecycle';
 
 class Manage extends Component {
@@ -28,6 +29,7 @@ class Manage extends Component {
                 <Route path={`${match.path}/data-model`} component={Model} />
                 <Route path={`${match.path}/asset-map`} component={Map} />
                 <Route path={`${match.path}/asset-manage`} component={AssetManage} />
+                <Route path={`${match.path}/asset-browse`} component={AssetBrowse} />
                 <Route path={`${match.path}/asset-recycle`} component={AssetRecycle} />
               </Switch>
             ) : (