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