资产浏览调整

src/util/constant.js

@@ -13,4 +13,10 @@ export const PermitCheckOut = 'permitCheckOut';
 export const StateId = 'sid';
 export const VersionId = 'vid';
 export const TemplateId = 'tid';
-export const Holder = 'holder';
+export const Holder = 'holder';
\ No newline at end of file
+
+//资产
+export const AssetManageReference = 'asset-manage';
+export const AssetBrowseReference = 'asset-browse';
+export const ResourceBrowseReference = 'resource-browse';
+export const AssetRecycleReference = 'asset-recycle';
\ No newline at end of file

src/view/Manage/AssetBrowse/index.jsx

@@ -4,8 +4,9 @@ import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
 
 import AssetTable from "../AssetManage/Component/AssetTable";
 import AssetTree from '../AssetManage/Component/AssetTree';
+import { AssetBrowseReference } from '../../../util/constant';
 
-import '../AssetManage/index.less';
+import './index.less';
 
 const AssetBrowse = (props) => {
 
@@ -22,14 +23,14 @@ const AssetBrowse = (props) => {
     setExpandTree(!expandTree);
   }
 
-  const classes = classNames('asset-manage', {
-    'asset-manage-collapse': !expandTree
+  const classes = classNames('asset-browse', {
+    'asset-browse-collapse': !expandTree
   });  
 
   return (
     <div className={classes}>
       <div className='left'>
-        <AssetTree onSelect={onTreeSelect} readOnly {...props} />
+        <AssetTree onSelect={onTreeSelect} reference={AssetBrowseReference} {...props} />
       </div>
       <div className='tree-toggle-wrap'>
         <div className='tree-toggle' onClick={treeToggleClick}>
@@ -37,7 +38,7 @@ const AssetBrowse = (props) => {
         </div>
       </div>
       <div className='right'>
-        <AssetTable nodeId={nodeId} nodeType={nodeType} readOnly {...props} />
+        <AssetTable nodeId={nodeId} reference={AssetBrowseReference} reference='asset-browse' {...props} />
       </div>
     </div>
   )

src/view/Manage/AssetBrowse/index.less

+.asset-browse {
+  display: flex;
+  position: relative;
+  background-color: #fff;
+  height: 100%;
+
+  .left {
+    width: 230px;
+    border-right: 1px solid #EFEFEF;
+    overflow: hidden;
+  }
+
+  .tree-toggle-wrap {
+    position: relative;
+    width: 20px;
+    height: calc(100vh - 94px);
+  
+    .tree-toggle {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      left: 0;
+      right: 0;
+      background: #f2f5fc;
+      position: absolute;
+      top: calc(50% - 40px);
+      width: 12px;
+      height: 80px;
+      border-radius: 0 12px 12px 0;
+      -ms-transform: translateY(-50%);
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+  }
+
+  .right {
+    width: calc(100% - 250px);
+  }
+}
+
+.asset-browse-collapse {
+  .left {
+    width: 0;
+  }
+
+  .right {
+    width: calc(100% - 20px);
+  }
+}
\ No newline at end of file

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

@@ -9,14 +9,13 @@ import ImportAsset from './ImportAsset';
 import AssetEdit from './AssetEdit';
 import { dispatch, dispatchLatestHomepage } from '../../../../model';
 import { showMessage, showNotifaction, getQueryParam, inputWidth, isSzseEnv } from '../../../../util';
-import { AnchorId, AnchorTimestamp } from '../../../../util/constant';
+import { AnchorId, AnchorTimestamp, AssetBrowseReference, AssetManageReference, AssetRecycleReference, ResourceBrowseReference } from '../../../../util/constant';
 
 import "./AssetTable.less";
-import { select } from "redux-saga/effects";
 
 const AssetTable = (props) => {
 
-  const { readOnly = false, className, nodeId, nodeType, elementsChanged, assetActionChanged, onSelect, onCountChange } = props;
+  const { className, nodeId, nodeType, elementsChanged, assetActionChanged, onSelect, onCountChange, reference = AssetManageReference } = props;
   const [ loading, setLoading ] = useState(false);
   const [ columns, setColumns ] = useState([]);
   const [ assets, setAssets ] = useState([]);
@@ -71,7 +70,7 @@ const AssetTable = (props) => {
   }, [timestamp])
 
   useEffect(() => {
-    if ((nodeId||'') !== '' || nodeType==='RecycleBin' ) {
+    if ((nodeId||'') !== '' || reference===AssetRecycleReference) {
       getFilterElementsGroupThenGetDataAssets();
     }
     //eslint-disable-next-line react-hooks/exhaustive-deps
@@ -194,7 +193,6 @@ const AssetTable = (props) => {
         metadataIndexRef.current = _metadataIndex;
 
         getDataAssets(_metadataIndex);
-
       },
       error: () => {
         setLoading(false)
@@ -205,7 +203,7 @@ const AssetTable = (props) => {
   const getDataAssets = (projectIndex = metadataIndexRef.current) => {
     setLoading(true);
     dispatchLatestHomepage({
-      type: (nodeType==='RecycleBin')?'assetmanage.listRecycleBinDataAssetsByPage':'assetmanage.listDataAssetsByPage',
+      type: (reference===AssetRecycleReference)?'assetmanage.listRecycleBinDataAssetsByPage':'assetmanage.listDataAssetsByPage',
       payload: {
         dirId: nodeId,
         pageNum,
@@ -314,20 +312,20 @@ const AssetTable = (props) => {
     if ((checkedKeys||[]).length > 0) {
       modal.confirm({
         title: '提示',
-        content: (nodeType!=='RecycleBin')?'这些资产在所有目录上唯一存在，移除后，你可以前往“未挂载资产”重新挂载。': '您确定要永久删除这些资产吗?',
+        content: (reference!==AssetRecycleReference)?'这些资产在所有目录上唯一存在，移除后，你可以前往“未挂载资产”重新挂载。': '您确定要永久删除这些资产吗?',
         onOk: () => {
           let payload = {
             data: checkedKeys
           }
       
-          if (nodeType !== 'RecycleBin') {
+          if (reference !== AssetRecycleReference) {
             payload.params = {
               dirId: nodeId
             }
           }
 
           dispatch({
-            type: (nodeType!=='RecycleBin')?'assetmanage.unloadDataAssets':'assetmanage.deleteDataAssets',
+            type: (reference!==AssetRecycleReference)?'assetmanage.unloadDataAssets':'assetmanage.deleteDataAssets',
             payload,
             callback: () => {
               showMessage("success","删除成功");
@@ -376,10 +374,22 @@ const AssetTable = (props) => {
   };
 
   const classes = classNames('asset-list', className, {
-    'asset-list-read-only': readOnly,
     'asset-list-fullscreen': fullScreen,
   });  
 
+  let scrollY = null;
+  if ((assets||[]).length>0) {
+    if (fullScreen) {
+      scrollY = 'calc(100vh - 182px - 52px - 12px)';
+    } else if (reference===AssetManageReference) {
+      scrollY = 'calc(100vh - 182px - 52px - 52px - 84px - 12px)';
+    } else if (reference===AssetBrowseReference||reference===ResourceBrowseReference) {
+      scrollY = 'calc(100vh - 182px - 52px - 12px)';
+    } else if (reference===AssetRecycleReference) {
+      scrollY = 'calc(100vh - 182px - 52px - 12px)';
+    }
+  }
+
   return(
     <div className={classes}>
       <div
@@ -394,26 +404,25 @@ const AssetTable = (props) => {
       > 
         <Space>
           { 
-            (!readOnly&&(nodeType!=='RecycleBin')) && <Button onClick={addAsset}>新增</Button>
+            (reference===AssetManageReference) && <Button onClick={addAsset}>新增</Button>
           }
           { 
-            (!readOnly&&(nodeType!=='RecycleBin')) && <Button onClick={importAsset}>导入</Button>
+            (reference===AssetManageReference) && <Button onClick={importAsset}>导入</Button>
           }
-          <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
-            <Button onClick={exportAsset} disabled={(checkedKeys||[]).length===0} >导出</Button>
-          </Tooltip>
-          <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
-            <Button onClick={onBatchCatalogChangeBtnClick} disabled={(checkedKeys||[]).length===0} >变更目录</Button>
-          </Tooltip>
-          <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
-            <Button onClick={deleteAssets} disabled={(checkedKeys||[]).length===0} >删除</Button>
-          </Tooltip>
-          <Button onClick={onFilterElementClick}>要素设置</Button>
           {
-            (nodeType==='RecycleBin') && <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
-              <Button onClick={onBatchCatalogChangeBtnClick} disabled={(checkedKeys||[]).length===0}>挂载</Button>
-            </Tooltip>
+            (reference===AssetManageReference || reference===AssetRecycleReference) && <React.Fragment>
+              <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
+                <Button onClick={exportAsset} disabled={(checkedKeys||[]).length===0} >导出</Button>
+              </Tooltip>
+              <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
+                <Button onClick={onBatchCatalogChangeBtnClick} disabled={(checkedKeys||[]).length===0} >{(reference===AssetRecycleReference)?'挂载':'变更目录'}</Button>
+              </Tooltip>
+              <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
+                <Button onClick={deleteAssets} disabled={(checkedKeys||[]).length===0} >删除</Button>
+              </Tooltip>
+            </React.Fragment> 
           }
+          <Button onClick={onFilterElementClick}>要素设置</Button>
         </Space>
         <Space>
           <Input 
@@ -455,7 +464,7 @@ const AssetTable = (props) => {
           dataSource={assets}
           pagination={false}
           size='default'
-          scroll={{ x: 1000, y: (assets||[]).length>0?(fullScreen?'calc(100vh - 182px - 12px - 50px)':'calc(100vh - 182px - 52px - 52px - 84px - 12px)'):null }}
+          scroll={{ x: 1000, y: scrollY }}
         />
       </div> 
       <Pagination
@@ -486,7 +495,7 @@ const AssetTable = (props) => {
       />
       <AssetMount
         visible={ assetMountVisible }
-        nodeType={nodeType}
+        reference={reference}
         ids={ batchCatalogChange?checkedKeys:[currentAssetId] }
         onCancel={ onAssetMountCancel }
         {...props}

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

@@ -8,12 +8,12 @@ import ImportDirectory from './ImportDirectory';
 import UpdateDirectoryModal from './UpdateDirectoryModal';
 import CustomDirectoryModal from './CustomDirectoryModal';
 import { showMessage, getQueryParam } from '../../../../util';
-import { AnchorTimestamp, AnchorId } from '../../../../util/constant';
+import { AnchorTimestamp, AnchorId, AssetManageReference, AssetBrowseReference, ResourceBrowseReference } from '../../../../util/constant';
 import './AssetTree.less';
 
 const AssetTree = (props) => {
 
-  const { readOnly = false, checkable = false, onSelect, className, onCheck, tableId, reference='', showCustom=true, onDirectoryChange } = props; 
+  const { checkable = false, onSelect, className, onCheck, tableId, reference=AssetManageReference, showCustom=true, onDirectoryChange } = props; 
   const [ keyword, setKeyword ] = useState('');
   const [ loading, setLoading ] = useState(false);
   const [ treeData, setTreeData ] = useState([]);
@@ -448,7 +448,7 @@ const AssetTree = (props) => {
     });
 
   const classes = classNames('asset-tree', className, {
-    'asset-tree-read-only': readOnly,
+    'asset-tree-read-only': (reference===AssetBrowseReference||reference===ResourceBrowseReference),
     'asset-tree-metadata-reference': reference==='metadata',
     'asset-tree-asset-mount-reference': reference==='mount',
   });  
@@ -456,7 +456,7 @@ const AssetTree = (props) => {
   return (
     <Card
       className={classes}
-      title={ readOnly ? null : (
+      title={ (reference===AssetBrowseReference||reference===ResourceBrowseReference) ? null : (
         <div
           className='p-3'
           style={{

src/view/Manage/AssetManage/index.jsx

@@ -8,6 +8,8 @@ import AssetDirectory from './Component/AssetDirectory';
 import AssetTable from './Component/AssetTable';
 import AssetAction from './Component/AssetAction';
 
+import { AssetManageReference } from '../../../util/constant';
+
 import './index.less';
 
 const AssetManage = (props) => {
@@ -69,7 +71,7 @@ const AssetManage = (props) => {
       <div className='middle'>
         <ElementManage onChange={onElementsChange} />
         <AssetDirectory id={nodeId} assetCount={assetCount} directoryChanged={directoryChanged} />
-        <AssetTable nodeId={nodeId} nodeType={nodeType} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} {...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} />

src/view/Manage/AssetManage/util/index.js

 export const requireElements = ['中文名称', '资产项', '使用方', '信息安全等级'];
 
-export const unfoldedElements = ['编号', '中文名称', '英文名称', '描述', '表现形式', '数据类型', '来源系统', '资产项', '使用方', '标签', '共享级别', '信息安全等级', '来源单位', '状态', '所属部门', '维护方', '所属层次', '更新频度', '数据规模', '数据大小', '质量情况'];
+export const unfoldedElements = ['编号', '中文名称', '英文名称', '描述', '表现形式', '数据类型', '来源系统', '资产项', '使用方', '标签', '共享级别', '信息安全等级', '来源单位', '状态', '所属部门', '维护方', '所属层次', '更新频度', '数据规模', '数据大小', '质量情况'];
\ No newline at end of file

src/view/Manage/AssetRecycle/Component/AssetMount.jsx

@@ -5,9 +5,11 @@ import { dispatch } from '../../../../model';
 import AssetTree from '../../AssetManage/Component/AssetTree';
 import { showMessage } from '../../../../util';
 
+import { AssetManageReference, AssetRecycleReference } from "../../../../util/constant";
+
 const AssetMount = (props) => {
   
-  const { onCancel, visible, ids, refrence = 'asset-manage', nodeType } = props;
+  const { onCancel, visible, ids, reference = AssetManageReference } = props;
   const [ dirIds, setDirIds ] = useState([]);
   const [ confirmLoading, setConfirmLoading ] = useState(false);
 
@@ -48,7 +50,7 @@ const AssetMount = (props) => {
 
   return(
     <Modal
-      title={(nodeType==='RecycleBin')?'挂载目录详情':'变更目录详情'}
+      title={(reference===AssetRecycleReference)?'挂载目录详情':'变更目录详情'}
       visible={ visible }
       width={ 400 }
       confirmLoading={ confirmLoading }
@@ -63,7 +65,7 @@ const AssetMount = (props) => {
         checkable={true}
         showCustom={false}
         onCheck={onCheck}
-        tableId={(refrence==='asset-manage'&&(ids||[].length>0))?ids[0]:''}
+        tableId={(reference===AssetManageReference&&(ids||[].length>0))?ids[0]:''}
         reference='mount'
         {...props} 
       /> 

src/view/Manage/AssetRecycle/index.jsx

 import React from 'react';
 
 import AssetTable from '../AssetManage/Component/AssetTable';
+import { AssetRecycleReference } from '../../../util/constant';
 
 const AssetRecycle = (props) => {
-
   return (
-    <div className='asset-recycle' style={{ backgroundColor: '#fff' }}>
-      <AssetTable nodeType='RecycleBin' {...props} />
+    <div style={{ backgroundColor: '#fff', height: '100%' }}>
+      <AssetTable reference={AssetRecycleReference} {...props} />
     </div>
   );
 }