Skip to content

S
szse
Commit 7b51fd30 by zhaochengxiang
Options

资产管理列表性能优化

parent 00ef24a3
Showing with 96 additions and 59 deletions
package.json
......@@ -11,7 +11,6 @@
"@testing-library/user-event": "^12.1.10",
"antd": "^4.14.0",
"axios": "^0.19.0",
"local-storage": "^2.0.0",
"copy-to-clipboard": "^3.3.1",
"core-js": "^3.4.2",
"craco-less": "^1.17.1",
......@@ -20,6 +19,7 @@
"insert-css": "^2.0.0",
"less": "^4.1.1",
"less-loader": "^8.0.0",
"local-storage": "^2.0.0",
"react": "^17.0.1",
"react-dnd": "^14.0.2",
"react-dnd-html5-backend": "^14.0.0",
......@@ -27,6 +27,7 @@
"react-redux": "^7.1.0",
"react-router-dom": "^5.0.1",
"react-scripts": "4.0.3",
"react-virtualized": "^9.22.3",
"redux": "^4.0.1",
"redux-saga": "^1.0.5",
"smooth-scroll": "^16.1.3",
......
src/view/Manage/AssetManage/Component/AssetTable.jsx
......@@ -2,7 +2,9 @@ import React,{ useState, useEffect, useRef } from "react";
import { Card, Checkbox, Button, List, Pagination, Space, Modal, Switch, Divider, Tooltip, Popover, Input, Spin } from "antd";
import { EditOutlined, ReconciliationOutlined, DeleteOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import SmoothScroll from 'smooth-scroll';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import VList from 'react-virtualized/dist/commonjs/List';
import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
import ImportElement from './ImportElement';
import FilterElement from './FilterElement';
......@@ -10,7 +12,7 @@ import ImportAsset from './ImportAsset';
import AssetEdit from './AssetEdit';
import AssetDetail from "./AssetDetail"
import AssetItem from './AssetItem';
import { dispatch } from '../../../../model';
import { dispatch, dispatchLatest } from '../../../../model';
import { showMessage, showNotifaction, getQueryParam } from '../../../../util';
import { AnchorId, AnchorTimestamp } from '../../../../util/constant';
......@@ -36,6 +38,7 @@ const AssetTable = (props) => {
const [ pagination, setPagination ] = useState( { pageNum: 1, pageSize: 20 } );
const { pageNum, pageSize } = pagination;
const [ keyword, setKeyword ] = useState('');
const [ scrollToIndex, setScrollToIndex ] = useState(-1);
const [ modal, contextHolder ] = Modal.useModal();
......@@ -45,6 +48,11 @@ const AssetTable = (props) => {
const shouldScrollRef = useRef(false);
const urlChangeRef = useRef(false);
const cellCache = new CellMeasurerCache({
fixedWidth: true,
minHeight: 50,
});
useEffect(() => {
if ((nodeId||'') !== '' ) {
......@@ -93,18 +101,10 @@ const AssetTable = (props) => {
useEffect(() => {
if (shouldScrollRef.current) {
SmoothScroll('a[href*="#"]');
var scroll = new SmoothScroll();
var anchor = document.querySelector(`#data-asset-${anchorId}`);
if (anchor) {
shouldScrollRef.current = false;
setTimeout(() => {
scroll.animateScroll(anchor);
}, 1000);
}
}
})
......@@ -119,6 +119,8 @@ const AssetTable = (props) => {
callback: data => {
const anchorLocation = data.offset;
const _pageNum = parseInt(anchorLocation/pageSize + ((anchorLocation%pageSize===0)?0:1));
const _index = anchorLocation - (_pageNum - 1)*pageSize - 1;
setScrollToIndex(_index);
setPagination({ ...pagination, pageNum: _pageNum });
},
error: () => {
......@@ -130,6 +132,7 @@ const AssetTable = (props) => {
const changeCurrent = (page,size) => {
setCheckAllValue(false);
setSelectedKeys([]);
setScrollToIndex(-1);
setPagination({ pageNum: page, pageSize: size });
}
......@@ -149,7 +152,7 @@ const AssetTable = (props) => {
const getDataAssets = (elmentsGroup = filterElementsGroup) => {
setLoading(true);
dispatch({
dispatchLatest({
type: 'assetmanage.listDataAssetsByPage',
payload: {
dirId: nodeId,
......@@ -159,8 +162,6 @@ const AssetTable = (props) => {
},
callback: data => {
const _assetNames = [];
(data.data||[]).forEach((asset, index) => {
asset.elementsGroup = [];
......@@ -416,50 +417,81 @@ const AssetTable = (props) => {
</Space>
</div>
</div>
<Spin spinning={loading} >
<Checkbox.Group
style={{ width: '100%' }}
onChange={ onAssetCheckboxChange }
value={ selectedKeys }
>
<List
itemLayout="vertical"
dataSource={ assets||[] }
footer={null}
renderItem={(item, index) => (
<List.Item id={`data-asset-${item.id||''}`} style={{ backgroundColor: (item.id===anchorId)?'#e7f7ff':'transparent' }}>
<List.Item.Meta
title={
<>
<div className='d-flex mt-3 mb-1' style={{ alignItems: 'center' }}>
<div className='textOverflow' style={{ flex: 1 }}>
<Checkbox value={item.id}></Checkbox>
<span title={assetNames[index]||''} style={{ marginLeft:8 }}>{assetNames[index]||''}</span>
</div>
<Space className='m-3' style={{ marginLeft: 'auto' }} size='small'>
{
!readOnly && <Tooltip placement='bottom' title={'修改'}>
<Button icon={<EditOutlined />} size='small' onClick={() => { editAsset(item); }} />
</Tooltip>
}
<Tooltip placement='bottom' title={'详情'}>
<Button icon={<ReconciliationOutlined />} size='small' onClick={() => { detailAsset(item); }} />
</Tooltip>
{
!readOnly && <Tooltip placement='bottom' title={'删除'}>
<Button icon={<DeleteOutlined />} size='small' onClick={() => { deleteAsset(item); }} />
</Tooltip>
}
</Space>
</div>
<Divider />
</>
}
description={ <AssetItem data={item} /> }
/>
</List.Item>
<Spin spinning={loading}>
{
loading && <div className='data-asset-spin' />
}
{
!loading && (
<>
<Checkbox.Group
style={{ width: '100%' }}
onChange={ onAssetCheckboxChange }
value={ selectedKeys }
>
<AutoSizer>
{({width, height}) => (
<VList
deferredMeasurementCache={cellCache}
overscanRowCount={2}
height={height}
width={width}
rowCount={(assets||[]).length}
rowHeight={cellCache.rowHeight}
scrollToIndex={scrollToIndex}
rowRenderer={({index, key, parent, style}) => {
const item = assets[index];
return (
<CellMeasurer
cache={cellCache}
columnIndex={0}
key={key}
rowIndex={index}
parent={parent}>
{({measure, registerChild}) => (
<List.Item
onLoad={measure}
id={`data-asset-${item.id||''}`}
style={{ ...style, backgroundColor: (item.id===anchorId)?'#e7f7ff':'transparent' }}
>
<List.Item.Meta
title={
<>
<div className='d-flex mt-3 mb-1' style={{ alignItems: 'center' }}>
<div className='textOverflow' style={{ flex: 1 }}>
<Checkbox value={item.id}></Checkbox>
<span title={assetNames[index]||''} style={{ marginLeft:8 }}>{assetNames[index]||''}</span>
</div>
<Space className='m-3' style={{ marginLeft: 'auto' }} size='small'>
{
!readOnly && <Tooltip placement='bottom' title={'修改'}>
<Button icon={<EditOutlined />} size='small' onClick={() => { editAsset(item); }} />
</Tooltip>
}
<Tooltip placement='bottom' title={'详情'}>
<Button icon={<ReconciliationOutlined />} size='small' onClick={() => { detailAsset(item); }} />
</Tooltip>
{
!readOnly && <Tooltip placement='bottom' title={'删除'}>
<Button icon={<DeleteOutlined />} size='small' onClick={() => { deleteAsset(item); }} />
</Tooltip>
}
</Space>
</div>
<Divider />
</>
}
description={ <AssetItem data={item} /> }
/>
</List.Item>
)}
</CellMeasurer>
);
}}
/>
)}
/>
</AutoSizer>
</Checkbox.Group>
<Pagination
size="small"
className="text-center m-3"
......@@ -473,7 +505,8 @@ const AssetTable = (props) => {
total={total}
showTotal={total => `共 ${total} 条`}
/>
</Checkbox.Group>
</>
)}
</Spin>
<AssetEdit
visible={assetEditVisible}
......
src/view/Manage/AssetManage/Component/AssetTable.less
......@@ -12,8 +12,11 @@
.yy-list-vertical .yy-list-item-action > li {
padding: 0 ;
}
.data-asset-spin {
height: calc(100vh - @header-height - @pm-4 - 53px - 58px);
}
.yy-checkbox-group {
height: calc(100vh - @header-height - @pm-4 - 53px - 57px) !important;
height: calc(100vh - @header-height - @pm-4 - 53px - 58px - 48px) !important;
overflow: auto !important;
}
.yy-divider-horizontal {
......
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