Skip to content

S
szse
Commit 216b1d23 by zhaochengxiang
Options

资产浏览详情

parent 20ba0632
Showing with 155 additions and 44 deletions
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,22 +221,24 @@ const AssetAction = (props) => {
zIndex: fullScreen?100:0,
}}
>
<div
className='flex px-3'
style={{
height: 52,
alignItems: 'center',
justifyContent: 'space-between',
borderBottom: '1px solid #f0f0f0',
}}
>
<div style={{ color: 'rgba(0,0,0,0.75)' }}>资产详情</div>
<Space>
<Button loading={confirmLoading} onClick={onActionButtonClick}>{ currentAction==='detail'?'编辑':'保存'}</Button>
{
!readOnly && <div
className='flex px-3'
style={{
height: 52,
alignItems: 'center',
justifyContent: 'space-between',
borderBottom: '1px solid #f0f0f0',
}}
>
<div style={{ color: 'rgba(0,0,0,0.75)' }}>资产详情</div>
<Space>
<Button loading={confirmLoading} onClick={onActionButtonClick}>{ currentAction==='detail'?'编辑':'保存'}</Button>
<Button onClick={onFullScreenClick}>全屏</Button>
</Space>
</div>
<Button onClick={onFullScreenClick}>全屏</Button>
</Space>
</div>
}
<div
style={{
......
src/view/Manage/AssetManage/Component/AssetDetailDrawer.jsx 0 → 100644
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,16 +295,18 @@ const AssetTable = (props) => {
setAssets(_assets);
if ((selectKey||'') !=='') {
const index = _assets.findIndex((asset) => asset.id === selectKey);
if (index === -1) {
if (reference === AssetManageReference) {
if ((selectKey||'') !=='') {
const index = _assets.findIndex((asset) => asset.id === selectKey);
if (index === -1) {
setSelectKey(_assets.length>0?_assets[0].id:'');
onSelect && onSelect(_assets.length>0?_assets[0].id:'');
}
} else {
setSelectKey(_assets.length>0?_assets[0].id:'');
onSelect && onSelect(_assets.length>0?_assets[0].id:'');
}
} else {
setSelectKey(_assets.length>0?_assets[0].id:'');
onSelect && onSelect(_assets.length>0?_assets[0].id:'');
}
setTotal(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>
)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment