资产浏览详情

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

@@ -10,7 +10,7 @@ import { AppContext } from '../../../../App';
 
 const AssetAction = (props) => {
 
-  const { id, dirId, action, terms, onChange } = props;
+  const { id, dirId, action, terms, onChange, readOnly = false } = props;
 
   const [ currentAction, setCurrentAction ] = useState(action);
   const [ assetParams, setAssetParams ] = useState({ assets: [], attributes: [], attributesFoldMap: {} });
@@ -221,7 +221,8 @@ const AssetAction = (props) => {
         zIndex: fullScreen?100:0,
       }}
     >
-      <div
+      {
+        !readOnly && <div
           className='flex px-3'
           style={{
             height: 52,
@@ -237,6 +238,7 @@ const AssetAction = (props) => {
             <Button onClick={onFullScreenClick}>全屏</Button>
           </Space>
         </div>
+      }
       
       <div
         style={{

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

+import React from 'react';
+import { Drawer } from 'antd';
+
+import AssetAction from './AssetAction';
+
+const AssetDetailDrawer = (props) => {
+  const { onCancel, visible, id, dirId } = props;
+
+  return (
+    <Drawer 
+      forceRender
+      visible={ visible }
+      title='资产详情'
+      width={600}
+      placement="right"
+      closable={ true }
+      onClose={() => {
+        onCancel && onCancel();
+      }}
+    >
+      <AssetAction id={id} dirId={dirId} action='detail' readOnly />
+    </Drawer>
+  )
+}
+
+export default AssetDetailDrawer;
\ No newline at end of file

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

@@ -2,17 +2,49 @@ import React,{ useState, useEffect, useRef } from "react";
 import { Button, Pagination, Space, Modal, Input, Table, Tooltip, Checkbox } from "antd";
 import classNames from 'classnames';
 import SmoothScroll from 'smooth-scroll';
+import { Resizable } from 'react-resizable';
 
 import FilterElementModal from './FilterElementModal';
 import AssetMount from '../../AssetRecycle/Component/AssetMount';
 import ImportAssetDrawer from './ImportAssetDrawer';
 import AssetEdit from './AssetEdit';
+import AssetDetailDrawer from "./AssetDetailDrawer";
 import { dispatch, dispatchLatestHomepage } from '../../../../model';
 import { showMessage, showNotifaction, getQueryParam, inputWidth, isSzseEnv } from '../../../../util';
 import { AnchorId, AnchorTimestamp, AssetBrowseReference, AssetManageReference, AssetRecycleReference, ResourceBrowseReference } from '../../../../util/constant';
 
 import "./AssetTable.less";
 
+const ResizeableHeaderCell = props => {
+  const { onResize, width, onClick, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      handle={
+        <span
+          className="react-resizable-handle"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+        />
+      }
+      onResize={onResize}
+      draggableOpts={{ enableUserSelectHack: false }}
+    >
+      <th
+        onClick={onClick}
+        {...restProps}
+      />
+    </Resizable>
+  );
+};
+
 const AssetTable = (props) => {
 
   const { className, nodeId, elementsChanged, assetActionChanged, onSelect, onCountChange, reference = AssetManageReference } = props;
@@ -26,7 +58,8 @@ const AssetTable = (props) => {
   const [ filterElementVisible, setFilterElementVisible ] = useState(false);
   const [ assetEditVisible, setAssetEditVisible ] = useState(false);
   const [ assetMountVisible, setAssetMountVisible ] = useState(false);
-  const [ currentAssetId, setCurrentAssetId ] = useState('');
+  const [ assetDetailDrawerVisible, setAssetDetailDrawerVisible ] = useState(false);
+  // const [ currentAssetId, setCurrentAssetId ] = useState('');
   const [ assetEditAction, setAssetEditAction ] = useState('');
   const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
   const { pageNum, pageSize } = pagination;
@@ -120,7 +153,7 @@ const AssetTable = (props) => {
     dispatch({
       type: 'assetmanage.listFilterElementsGroupByType',
       callback: data => {
-        const _columns = [];
+        let _columns = [];
 
         let index = 0, _metadataIndex = '';
         (data||[]).forEach(group => {
@@ -143,21 +176,21 @@ const AssetTable = (props) => {
 
             if (name === '编号') {
               params.width = 60;
-              params.fixed = 'left';
+              // params.fixed = 'left';
             } else if (name === '中文名称') {
-              params.fixed = 'left';
+              // params.fixed = 'left';
             } else if (name === '英文名称') {
               params.width = isSzseEnv?250:120;
-              params.fixed = 'left';
-              params.render = (text, record) => {
-                return (
-                  <Tooltip title={text||''}>
-                    <a onClick={()=>{detailAsset(record);}}>
-                    {text||''}
-                    </a>
-                  </Tooltip>
-                );
-              }
+              // params.fixed = 'left';
+              // params.render = (text, record) => {
+              //   return (
+              //     <Tooltip title={text||''}>
+              //       <a onClick={()=>{detailAsset(record);}}>
+              //       {text||''}
+              //       </a>
+              //     </Tooltip>
+              //   );
+              // }
             } else if (name === '资产项') {
               params.width = isSzseEnv?250:120;
               params.fixed = 'right';
@@ -188,6 +221,15 @@ const AssetTable = (props) => {
           })
         })
 
+        const _index = _columns.findIndex(column => column.title==='资产项');
+
+        //资产项放到最后一列
+        if (_index !== -1) {
+          const metaColumn = _columns[_index];
+          _columns = _columns.filter(column => column.title!=='资产项');
+          _columns.push(metaColumn);
+        }
+
         setAssets([]);
         setColumns(_columns);
 
@@ -253,6 +295,7 @@ const AssetTable = (props) => {
         
         setAssets(_assets);
 
+        if (reference === AssetManageReference) {
           if ((selectKey||'') !=='') {
             const index = _assets.findIndex((asset) => asset.id === selectKey);
   
@@ -264,6 +307,7 @@ const AssetTable = (props) => {
             setSelectKey(_assets.length>0?_assets[0].id:'');
             onSelect && onSelect(_assets.length>0?_assets[0].id:'');
           }
+        }
 
         setTotal(data.total||0);
         onCountChange && onCountChange(data.total||0);
@@ -315,10 +359,10 @@ const AssetTable = (props) => {
     }
   }
 
-  const detailAsset = (item)=>{
-    setCurrentAssetId(item.id);
-    window.open(`/center-home/asset-detail?id=${item.id}&dirId=${nodeId}`);
-  }
+  // const detailAsset = (item)=>{
+  //   setCurrentAssetId(item.id);
+  //   window.open(`/center-home/asset-detail?id=${item.id}&dirId=${nodeId}`);
+  // }
 
   const deleteAssets = () => {
     if ((checkedKeys||[]).length > 0) {
@@ -371,6 +415,10 @@ const AssetTable = (props) => {
     refresh && getFilterElementsGroupThenGetDataAssets();
   }
 
+  const onAssetDetailDrawerCancel = () => {
+    setAssetDetailDrawerVisible(false);
+  }
+
   const onBatchCatalogChangeBtnClick = () => {
     setBatchCatalogChange(true);
     setAssetMountVisible(true);
@@ -384,6 +432,16 @@ const AssetTable = (props) => {
     setFullScreen(!fullScreen);
   }
 
+  const handleResize = index => (e, { size }) => {
+    const nextColumns = [...columns];
+    nextColumns[index] = {
+      ...nextColumns[index],
+      width: size.width,
+    };
+
+    setColumns(nextColumns);
+  };
+
   const rowSelection = {
     selectedRowKeys: checkedKeys,
     onChange: onSelectChange,
@@ -459,12 +517,21 @@ const AssetTable = (props) => {
       >
         <Table
           rowSelection={rowSelection}
+          components={{
+            header: {
+              cell: ResizeableHeaderCell,
+            }
+          }}
           onRow={(record) => {
             return {
               id: `data-asset-${record?.id}`,
               onClick: (e) => {
                 setSelectKey(record?.id);
                 onSelect && onSelect(record?.id);
+
+                if (reference !== AssetManageReference) {
+                  setAssetDetailDrawerVisible(true);
+                }
               }
             }
           }}
@@ -476,7 +543,17 @@ const AssetTable = (props) => {
             return '';
           }}
           loading={loading}
-          columns={columns} 
+          columns={
+            columns.map((column, index) => { 
+              return {
+                ...column,
+                onHeaderCell: column => ({
+                  width: column.width,
+                  onResize: handleResize(index),
+                }),
+              };
+            })
+          } 
           rowKey='id'
           dataSource={assets}
           pagination={false}
@@ -501,7 +578,6 @@ const AssetTable = (props) => {
       <AssetEdit 
         visible={assetEditVisible}
         action={assetEditAction}
-        id={currentAssetId}
         nodeId={nodeId}
         onCancel={onAssetEditCancel}
       />
@@ -514,7 +590,7 @@ const AssetTable = (props) => {
       <AssetMount
         visible={ assetMountVisible }
         reference={reference}
-        ids={ batchCatalogChange?checkedKeys:[currentAssetId] }
+        ids={ batchCatalogChange?checkedKeys:[] }
         onCancel={ onAssetMountCancel }
         {...props}
       />
@@ -523,6 +599,12 @@ const AssetTable = (props) => {
         visible={ filterElementVisible }
         onCancel={ onFilterElementModalCancel}
       />
+      <AssetDetailDrawer 
+        id={selectKey}
+        dirId={nodeId}
+        visible={assetDetailDrawerVisible}
+        onCancel={onAssetDetailDrawerCancel}
+      />
       {contextHolder}
     </div>
   )