图表列表设置分页

src/components/chart/list.jsx

@@ -2,7 +2,7 @@
  * 图表列表
  */
 import React from 'react'
-import { Layout, Button, Icon, Menu, Dropdown, Card, Col, Row, Breadcrumb, Tag, Checkbox } from 'antd'
+import { Layout, Button, Icon, Menu, Dropdown, Card, Col, Row, Breadcrumb, Tag, Checkbox, Pagination } from 'antd'
 import { connect } from 'dva'
 import ChooseDataSourceBox from './chooseDataSourceBox'
 import GroupManagementBox from '../common/groupManageMentBox/box'
@@ -35,7 +35,10 @@ class ChartList extends React.Component {
             visibleGroupManageMentBox: false, // 显示分组管理组件
             visibleDataPreviewBox: false,
             noGroup: false, // 显示未分组数据
-            ListScrollTop: 0, // 记录滚动条高度
+            page: 1, // 分页器当前页码
+            pageSize: 15,// 每页最大展示卡片数 maxRowCards * maxRow
+            maxRowCards: 5, // 每行最大展示卡片数
+            maxRow: 3, // 每页最大行数
         }
         this.bodyRef = React.createRef();
     }
@@ -43,7 +46,7 @@ class ChartList extends React.Component {
     componentDidMount() {
         const { dispatch, chart } = this.props;
         this.setBodyWidth();
-        dispatch({ type: 'chart/fetchList' });
+        dispatch({ type: 'chart/fetchList' })
         dispatch({ type: 'chart/remoteGroupList' });
         this.bodyRef.current.parentNode.scrollTo(0, chart.listScrollTop)
         window.addEventListener('resize', this.setBodyWidth);
@@ -59,6 +62,7 @@ class ChartList extends React.Component {
      * 设置卡片容器宽度 = 每行最大卡片数量 * 卡片宽度
      */
     setBodyWidth = () => {
+        const { maxRowCards, maxRow } = this.state;
         const cardBody = this.bodyRef.current; // 卡片容器
         const parent = cardBody.parentNode; // 父级容器
         const pWidth = parent.offsetWidth; // 父级容器宽度
@@ -67,13 +71,20 @@ class ChartList extends React.Component {
         const cMargin = 8 + 8; // 每个卡片左右margin
         const pTrueWidth = pWidth - pPadding; // 父容器实际可用宽度
         const cTrueWidth = cWidth + cMargin; // 卡片实际占用宽度
-        const count = Math.ceil(pTrueWidth/cTrueWidth); // 每行最大卡片数量
-        const cardBodyWidth = (count - 1) * cTrueWidth; // 考虑到滚动条，减少一个
+        const count = Math.ceil(pTrueWidth/cTrueWidth) - 1; // 每行最大卡片数量，考虑到滚动条，减少一个
+        const cardBodyWidth = count * cTrueWidth; // 考虑到滚动条，减少一个
 
         cardBodyWidth > 0 ? cardBody.style.width = cardBodyWidth + 'px' : void(0);
+
+        if(maxRowCards !== count) {
+            this.setState({
+                maxRowCards: count,
+                pageSize: count * maxRow
+            });
+        }
     }
 
-    onGroup() {
+    onGroup = () => {
         const { chart } = this.props;
         const { noGroup } = this.state;
         const { list, currentGroup } = chart;
@@ -87,6 +98,69 @@ class ChartList extends React.Component {
         }
     }
 
+    onFilterAndGroup = (cardList) => {
+        const { chart } = this.props;
+        const { noGroup } = this.state;
+        const { filterItem, currentGroup } = chart;
+        const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
+        let filterLabel = chart.filterLabel ? (chart.filterLabel + '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') : ''; // 添加转义符号
+        let filterReg = new RegExp('(' + filterLabel + '){1}', 'ig');
+
+        let list = cardList.filter(l => {
+            if(filterItem.type === 'date') {
+                if(filterLabel===""){
+                    if(!noGroup || !currentGroup || (noGroup && l.groupCode === '-1') || (!!currentGroup && l.groupCode === currentGroup.code)) {
+                        return true;
+                    }else {
+                        return false;
+                    }
+                }else if(filterLabel.indexOf('#')>-1){
+                    let start = filterLabel.split('#')[0]
+                    let end = filterLabel.split('#')[1]
+                    let nowTime = new Date(l[filterItem.name]).getTime();
+                    if(nowTime>=start && nowTime<=end){
+                        if(!noGroup || !currentGroup || (noGroup && l.groupCode === '-1') || (!!currentGroup && l.groupCode === currentGroup.code)) {
+                            return true;
+                        }else {
+                            return false;
+                        }
+                    }
+                    return false;
+                }else{
+                    return false;
+                }
+            }else {
+                if((l[filterItem.name] + '').search(filterReg) > -1) {
+                    if(!noGroup || !currentGroup || (noGroup && l.groupCode === '-1') || (!!currentGroup && l.groupCode === currentGroup.code)) {
+                        return true;
+                    }else {
+                        return false;
+                    }
+                }else {
+                    return false;
+                }
+            }
+        })
+
+        return list;
+    }
+
+    onSort = (list) => {
+        return list.sort((a, b) => {
+            return new Date(b.createTime) - new Date(a.createTime)
+        })
+    }
+
+    onPage = (list) => {
+        const { page, pageSize } = this.state;
+        return list.slice(pageSize * (page - 1), pageSize * (page - 1) + pageSize)
+    }
+
+    onReduce = () => {
+        const { list } = this.props.chart;
+        return this.onSort(this.onFilterAndGroup(list));
+    }
+
     getParens = (group) => {
         const groupData = this.props.chart.groupList;
         let pgroups = [group];
@@ -184,36 +258,15 @@ class ChartList extends React.Component {
         )
     }
 
-    generateCard() {
+    generateCard(list) {
         const { chart, dispatch } = this.props;
         let { filterItem } = chart
 
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = chart.filterLabel ? (chart.filterLabel + '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') : ''; // 添加转义符号
-        let filterReg = new RegExp('(' + filterLabel + '){1}', 'ig');
         
         
-        let cards = this.onGroup().map(l => {
-            if(filterItem.type === 'date') {
-                if(filterLabel===""){
-                    return { ...l };
-                }else if(filterLabel.indexOf('#')>-1){
-                    let start = filterLabel.split('#')[0]
-                    let end = filterLabel.split('#')[1]
-                    let nowTime = new Date(l[filterItem.name]).getTime();
-                    if(nowTime>=start && nowTime<=end){
-                        return { ...l };
-                    }
-                    return null;
-                }else{
-                    return null;
-                }
-            }else {
-                return ((l[filterItem.name] + '').search(filterReg) > -1) ? { ...l } : null
-            }
-        }).filter(l => l !== null).sort((a, b) => {
-            return new Date(b.createTime) - new Date(a.createTime)
-        }).map( (l, i) => (
+        let cards = list.map( (l, i) => (
             <CardGrid className={`chart-card`} key={i} onClick={() => {
                 this.setState({ selectedRecord: l })
             }}>
@@ -340,9 +393,17 @@ class ChartList extends React.Component {
         dispatch({ type: 'chart/remoteMoveGroup', dragCode, dropCode, dropPosition });
     }
 
+    onPageChange = (pageNumber) => {
+        this.setState({
+            page: pageNumber
+        })
+    }
+
     render() {
         const { dispatch, chart } = this.props;
-        const { visibleChooseDataSourceBox, visibleDistributeBox, visibleGroupManageMentBox, visibleTransferBox, visibleDeleteBox, selectedRecord, noGroup } = this.state;
+        const { visibleChooseDataSourceBox, visibleDistributeBox, visibleGroupManageMentBox, visibleTransferBox, visibleDeleteBox, selectedRecord, noGroup, pageSize, page } = this.state;
+        let reduceList =  this.onReduce();
+        let viewList = this.onPage(reduceList);
         return (
             <Layout className='layout-chart'>
                 <Content>
@@ -390,9 +451,10 @@ class ChartList extends React.Component {
                         </Row>
                     }>
                         <div ref={this.bodyRef} className='chart-body'>
-                            { this.generateCard() }
+                            { this.generateCard(viewList) }
                         </div>
                     </Card>
+                    <Pagination showQuickJumper pageSize={pageSize} current={page} total={reduceList.length} onChange={this.onPageChange} />
                 </Content>
                 {visibleGroupManageMentBox && <GroupManagementBox
                     visibleBox={visibleGroupManageMentBox}

src/components/chart/list.less

@@ -1,7 +1,9 @@
 .layout-chart {
     &>.ant-layout-content {
+        display: flex;
+        flex-direction: column;
         &>.ant-card {
-            height: 100%;
+            min-height: calc(~'100% - 64px');
             display: flex;
             flex-direction: column;
             &>.ant-card-head {
@@ -159,6 +161,12 @@
                 }
             }
         }
+        .ant-pagination {
+            height: 64px;
+            padding: 16px;
+            text-align: end;
+            background: @content-background-color;
+        }
     }
 }
 .popover-group {

src/components/homePage/index.jsx

@@ -18,8 +18,8 @@ class Home extends React.Component {
 
         return tabs.map(t => (
             // TODO 右键关闭菜单，会报错，先不启用
-            // <TabPane tab={this.generateTabTitle(t.name, t.code)} key={t.code}>
-            <TabPane tab={<span><CusIcon type='bi-dashboard'/>{t.name}</span>} key={t.code}>
+            <TabPane tab={this.generateTabTitle(t.name, t.code)} key={t.code}>
+            {/* <TabPane tab={<span><CusIcon type='bi-dashboard'/>{t.name}</span>} key={t.code}> */}
                 <DashboardViewToolbar />
                 <DashboardView code={t.code} config={t.config}/>
             </TabPane>
@@ -28,7 +28,7 @@ class Home extends React.Component {
 
     generateTabTitle = (text, tabKey) => (
         <Dropdown overlay={this.generateMenu(tabKey)} trigger={["contextMenu"]}>
-            <span style={{ userSelect: "none" }}>{text}</span>
+            <span style={{ userSelect: "none" }}><CusIcon type='bi-dashboard'/>{text}</span>
         </Dropdown>
     )
 

src/models/chart.js

@@ -186,7 +186,7 @@ export default {
             try{
                 const chart = yield select(state => state.present.chart);
                 if(!action.mandatory && chart.list.length > 0) {
-                    return;
+                    return chart.list;
                 }
                 const res = yield call(service.fetch, {
                     url: URLS.CHART_LIST,
@@ -216,8 +216,10 @@ export default {
                         }
                     })
                     yield put({ type: 'list', list: list });
+                    return list;
                 }else {
                     message.error('请求图表列表失败: ' + (res.err || res.data.msg));
+                    return false;
                 }
             }catch(e) {
                 message.error('请求图表列表失败: ' + e.message);