报表数据视图分页器根据容器宽度设置simple模式

src/components/chartDesigner/content.jsx

@@ -32,10 +32,6 @@ class ChartDesignerContent extends React.Component {
             isOwner: false,
             autoRefresh: true,
             collapsed: false,
-            contentSize: {
-                width: 0,
-                height: 0
-            }
         }
     }
 
@@ -88,7 +84,7 @@ class ChartDesignerContent extends React.Component {
                 themeConfig={chartOption.themeConfig}
                 styleConfig={styleConfig.dataView}
                 pagination={{
-                    simple: true,
+                    simple: false,
                     pageSize: chartOption.pageSize || 25,
                     total: chartOption.total,
                     showTotal: (total, range) => {

src/components/dashboardDesigner/chartView.jsx

@@ -33,7 +33,7 @@ class ChartView extends React.Component {
     }
 
     render() {
-        const { item, editMode, dispatch, readOnly, chartRef } = this.props;
+        const { item, editMode, dispatch, readOnly, chartRef, contentSize } = this.props;
         // const { tableScrollHeight } = this.state;
         const { chartCode, viewType, chartType, content, chartOption, styleConfig, fetching, layout } = item;
         let children = <EmptyContent/>;
@@ -52,7 +52,8 @@ class ChartView extends React.Component {
                         themeConfig={chartOption.themeConfig}
                         styleConfig={(styleConfig || {}).dataView}
                         pagination={{
-                            simple: true,
+                            key: `${chartCode}-${layout.w}-${layout.h}-${hashcode(chartOption.page)}`,
+                            simple: contentSize.width * (layout.w/12) < 500,
                             pageSize: chartOption.pageSize,
                             total: chartOption.total,
                             current: chartOption.page,

src/components/dashboardDesigner/viewLayout.jsx

@@ -42,7 +42,7 @@ class ViewLayout extends React.PureComponent {
         });
     }
 
-    createElement = (item, isPreview, reload) => {
+    createElement = (item, isPreview, reload, contentSize) => {
         const { code, layout } = item;
         return <div key={code} data-grid={esMobile ? { x:0, y:50, w:12, h:8, minW: 12, maxW:12, minH:8, maxH:8 } : layout} style={{ height: '100%' }}>
             <ViewLayoutItem
@@ -52,6 +52,7 @@ class ViewLayout extends React.PureComponent {
                 reload={reload}
                 showPreviewBox={this.showPreviewBox}
                 hidePreviewBox={this.hidePreviewBox}
+                contentSize={contentSize}
             />
         </div>
     }
@@ -108,7 +109,7 @@ class ViewLayout extends React.PureComponent {
         const { editingKey } = this.state;
         const { editMode, minLayoutHeight, layoutMargin, theme: themeName } = dashboardDesigner;
         const { visiblePreviewBox, previewItem } = this.state;
-        const children = dashboardDesigner.items.map((item) => this.createElement(item, false, !item.chartOption));
+        const children = dashboardDesigner.items.map((item) => this.createElement(item, false, !item.chartOption, contentSize));
         return (<div className={`dashboard-viewcontent ${themeName}`} ref={node => this.viewContentRef = node}>
             <ReactGridLayout
                 width={ contentSize.width }
@@ -147,7 +148,7 @@ class ViewLayout extends React.PureComponent {
                 keyboard={true}
                 maskClosable={true}
                 >
-                {!!previewItem && this.createElement(dashboardDesigner.items.find(item => item.code === previewItem.code), true, false)}
+                {!!previewItem && this.createElement(dashboardDesigner.items.find(item => item.code === previewItem.code), true, false, {width: document.body.offsetWidth-36*2, height:document.body.offsetHeight - 40})}
             </Modal>}
         </div>);
     }

src/components/dashboardDesigner/viewLayout.less

@@ -55,7 +55,7 @@
     .chartview-content {
       flex: 1;
       overflow: hidden;
-      padding: 0 8px;
+      padding: 0 8px 8px;
       .dashboard-table { // 表格
         height: 100%;
         .ant-spin-nested-loading {

src/components/dashboardDesigner/viewLayoutItem.jsx

@@ -18,7 +18,7 @@ class ViewLayoutItem extends React.Component {
     }
 
     render() {
-        const { dispatch, main, dashboardDesigner, item, isPreview, reload, showPreviewBox, hidePreviewBox, esMobile } = this.props;
+        const { dispatch, main, dashboardDesigner, item, isPreview, reload, showPreviewBox, hidePreviewBox, esMobile, contentSize } = this.props;
         const { editing, title } = this.state;
         const { currentUser } = main;
         const { dashboardDesignerCode, editMode, minLayoutHeight } = dashboardDesigner;
@@ -90,7 +90,7 @@ class ViewLayoutItem extends React.Component {
                         {isPreview && <Icon className={iconCls} type="close" onClick={hidePreviewBox}/>}
                     </div>
                 </div>
-                <ChartView chartRef={`chartRef-${dashboardDesignerCode}-${code}`} minLayoutHeight={minLayoutHeight} editMode={isPreview ? false : editMode} item={{...item}} reload={reload}/>
+                <ChartView chartRef={`chartRef-${dashboardDesignerCode}-${code}`} minLayoutHeight={minLayoutHeight} editMode={isPreview ? false : editMode} item={{...item}} reload={reload} contentSize={contentSize}/>
             </div>
         )
     }