资产全屏

src/view/Manage/AssetBrowse/index.jsx

@@ -22,6 +22,7 @@ const AssetBrowse = (props) => {
   const [ expandRelation, setExpandRelation ] = useState(true);
   const [ assetCount, setAssetCount ] = useState(0);
   const [ resizeRelation, setResizeRelation ] = useState(false);
+  const [ assetFullScreen, setAssetFullScreen ] = useState(false);
 
   const { centerId, expandId } = nodeParams;
 
@@ -47,6 +48,10 @@ const AssetBrowse = (props) => {
     setAssetCount(count);
   }
 
+  const onFullScreenChange = (value) => {
+    setAssetFullScreen(value);
+  }
+
   let nodeId = '';
   if ((expandId||'') !== '') {
     nodeId = expandId;
@@ -57,7 +62,11 @@ const AssetBrowse = (props) => {
   const classes = classNames('asset-browse', {
     'asset-browse-tree-collapse': !expandTree,
     'asset-browse-relation-collapse': !expandRelation,
-  });  
+  }); 
+  
+  const rightClasses = classNames('right', {
+    'right-fullscreen': assetFullScreen
+  }); 
 
   return (
     <div className={classes}>
@@ -73,7 +82,7 @@ const AssetBrowse = (props) => {
       {
         expandTree && <Separate width={15} />
       }
-      <div className='right'>
+      <div className={rightClasses}>
         <AssetDirectory id={nodeId} assetCount={assetCount} reference={reference} nodeType={nodeParams.nodeType} />
         <Separate height={15} />
         <div className='flex' style={{ flex: 1, height: '100%', overflow: 'hidden' }}>
@@ -86,7 +95,7 @@ const AssetBrowse = (props) => {
             </React.Fragment>
           }
           <div style={{ flex: 1, overflow: 'hidden' }}>
-            <AssetTable nodeId={nodeId} nodeType={nodeParams.nodeType} reference={reference} onCountChange={onAssetCountChange} {...props} />
+            <AssetTable nodeId={nodeId} nodeType={nodeParams.nodeType} reference={reference} onCountChange={onAssetCountChange} onFullScreenChange={onFullScreenChange} {...props} />
           </div>          
         </div>
         <div className='tree-toggle' onClick={treeToggleClick}>

src/view/Manage/AssetBrowse/index.less

@@ -36,6 +36,10 @@
     flex-direction: column;
   }
 
+  .right-fullscreen {
+    position: static;
+  }
+
   .relation-toggle {
     display: flex;
     justify-content: center;

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

@@ -116,7 +116,7 @@ const ResizeableHeaderCell = props => {
 
 const AssetTable = (props) => {
 
-  const { className, nodeId, nodeType, nodeLevel, elementsChanged, assetActionChanged, onSelect, onCountChange, reference = AssetManageReference } = props;
+  const { className, nodeId, nodeType, nodeLevel, elementsChanged, assetActionChanged, onSelect, onCountChange, reference = AssetManageReference, onFullScreenChange } = props;
 
   const MENU_ID = 'asset-table';
 
@@ -686,6 +686,7 @@ const AssetTable = (props) => {
 
   const onFullScreenClick = () => {
     setFullScreen(!fullScreen);
+    onFullScreenChange && onFullScreenChange(!fullScreen);
   }
 
   const handleResize = index => (e, { size }) => {

src/view/Manage/AssetManage/index.jsx

@@ -21,6 +21,7 @@ const AssetManage = (props) => {
   const [ nodeLevel, setNodeLevel ] = useState(null);
   const [ assetParams, setAssetParams ] = useState({ assetId: '', assetDirId: '' })
   const [ expandTree, setExpandTree ] = useState(true);
+  const [ assetFullScreen, setAssetFullScreen ] = useState(false);
 
   const [ assetCount, setAssetCount ] = useState(0);
   const [ directoryChanged, setDirectoryChanged ] = useState(false);
@@ -61,10 +62,18 @@ const AssetManage = (props) => {
     setAssetCount(count);
   }
 
+  const onFullScreenChange = (value) => {
+    setAssetFullScreen(value);
+  }
+
   const classes = classNames('asset-manage', {
     'asset-manage-collapse': !expandTree
   });  
 
+  const middleClasses = classNames('middle', {
+    'middle-fullscreen': assetFullScreen
+  });  
+
   return (
     <div className={classes}>
       <ResizableBox 
@@ -79,10 +88,10 @@ const AssetManage = (props) => {
       {
         expandTree && <Separate width={15} />
       }
-      <div className='middle'>
+      <div className={middleClasses}>
         <AssetDirectory id={nodeId} assetCount={assetCount} directoryChanged={directoryChanged} onElementsChange={onElementsChange} />
         <Separate height={15} />
-        <AssetTable nodeId={nodeId} nodeType={nodeType} nodeLevel={nodeLevel} reference={AssetManageReference} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} {...props} />
+        <AssetTable nodeId={nodeId} nodeType={nodeType} nodeLevel={nodeLevel} reference={AssetManageReference} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} onFullScreenChange={onFullScreenChange} {...props} />
         <div className='tree-toggle' onClick={treeToggleClick}>
         { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
         </div>

src/view/Manage/AssetManage/index.less

@@ -33,6 +33,10 @@
     overflow: hidden;
   }
 
+  .middle-fullscreen {
+    position: static;
+  }
+
   .right {
     width: 400px;
     border-left: 1px solid #EFEFEF;