报表表格图表放大后的表格刷新数据逻辑保持与报表中的统一

src/components/chartDesigner/charts/tableView.jsx

@@ -10,6 +10,7 @@ class TableView extends React.Component {
         this.state = {
             columnWidth: 200,
             tableScrollHeight: 0,
+            refreshable: props.refreshable === undefined ? true : props.refreshable
         };
     }
 
@@ -28,14 +29,14 @@ class TableView extends React.Component {
 
     onTableLayoutChange = () => {
         const { chartOption, viewRef, onPageSizeChange } = this.props;
-        const { tableScrollHeight } = this.state;
+        const { refreshable, tableScrollHeight } = this.state;
         let bodyRef = this[viewRef];
         const containerHeight = bodyRef.offsetHeight;
         if(containerHeight > 0 ) {
             let newtableScrollHeight = containerHeight - 40 - 24 - 8 * 2;
             if(newtableScrollHeight !== tableScrollHeight) {
                 let pageSize = ~~(newtableScrollHeight/38) + 1;
-                if(typeof onPageSizeChange === 'function' && pageSize !== chartOption.pageSize) {
+                if(typeof onPageSizeChange === 'function' && pageSize !== chartOption.pageSize && refreshable) {
                     // 在报表中的dataView第一次数据请求在此发起
                     onPageSizeChange(1, pageSize)
                 }

src/components/dashboardDesigner/chartView.jsx

@@ -33,7 +33,7 @@ class ChartView extends React.Component {
     }
 
     render() {
-        const { item, editMode, dispatch, readOnly, contentSize } = this.props;
+        const { item, editMode, isPreview, dispatch, readOnly, contentSize } = this.props;
         // const { tableScrollHeight } = this.state;
         const { chartCode, viewType, chartType, content, chartOption, styleConfig, fetching, layout } = item;
         let children = <EmptyContent/>;
@@ -46,6 +46,7 @@ class ChartView extends React.Component {
                     children = (<TableView
                         key={`${chartCode}-${layout.h}-${hashcode(chartOption.page)}`} // 这个KEY的变化才会正确引起页面的刷新
                         chartOption={chartOption}
+                        refreshable={!isPreview}
                         columns={chartOption.columns}
                         dataSource={chartOption.dataSource}
                         themeConfig={chartOption.themeConfig}

src/components/dashboardDesigner/viewLayout.jsx

@@ -4,7 +4,6 @@ import ReactGridLayout from 'react-grid-layout'
 import { Modal } from 'antd'
 import { connect } from 'dva'
 import EmptyContent from '../common/emptyContent/index'
-import DataPreview from '../common/dataPreview/dataPreview';
 import { hashcode } from '../../utils/baseUtils'
 import ViewLayoutItem from './viewLayoutItem';
 
@@ -36,8 +35,8 @@ class ViewLayout extends React.Component {
         });
     }
 
-    createElement = (item, isPreview, reload, contentSize) => {
-        const { dashboardDesigner, esMobile } = this.props;
+    createElement = (item, isPreview, reload, contentSize, esMobile) => {
+        const { dashboardDesigner } = this.props;
         const { maxLayoutW } = dashboardDesigner;
         const { code, layout } = item;
         return <div key={code} data-grid={esMobile ? { x:0, y:50, w: maxLayoutW, h:8, minW: maxLayoutW, maxW: maxLayoutW, minH:8, maxH:8 } : layout} style={{ height: '100%' }}>
@@ -116,7 +115,7 @@ class ViewLayout extends React.Component {
     }
 
     render() {
-        const { dashboardDesigner, contentSize, esMobile, dispatch } = this.props;
+        const { dashboardDesigner, contentSize, esMobile } = this.props;
         const { editingKey } = this.state;
         const { editMode, minLayoutHeight, maxLayoutW, layoutMargin, theme: themeName } = dashboardDesigner;
         const { visiblePreviewBox, previewItem } = this.state;
@@ -140,16 +139,7 @@ class ViewLayout extends React.Component {
                     <EmptyContent />
                 </div> : children}
             </ReactGridLayout>
-            {visiblePreviewBox && previewItem.chartType === 'dataView' && <DataPreview
-                modalClassName={`${themeName} ${esMobile ? 'mobile' : ''}`}
-                title={previewItem.name}
-                visibleBox={visiblePreviewBox}
-                hideBox={this.hidePreviewBox}
-                fetchFunction={(page, pageSize) => {
-                    dispatch({ type: 'dashboardDesigner/fetchDataList', item: previewItem, mandatory: true, page, pageSize });
-                }}
-            />}
-            {visiblePreviewBox && previewItem.chartType !== 'dataView' && <Modal
+            {visiblePreviewBox && <Modal
                 className={`previewbox ${themeName} ${esMobile ? 'mobile' : ''}`}
                 width={'100%'}
                 height={'100%'}

src/components/dashboardDesigner/viewLayout.less

@@ -345,6 +345,7 @@
     top: 0;
     margin: 0;
     max-width: 100%;
+    max-height: 100%;
     .ant-modal-body {
       padding: 0 12px;
     }

src/components/dashboardDesigner/viewLayoutItem.jsx

@@ -95,7 +95,7 @@ class ViewLayoutItem extends React.Component {
                         {isPreview && <Icon className={iconCls} type="close" onClick={hidePreviewBox}/>}
                     </div>
                 </div>
-                <ChartView key={`chartRef-${dashboardDesignerCode}-${code}`} minLayoutHeight={minLayoutHeight} editMode={isPreview ? false : editMode} item={{...item}} reload={reload} contentSize={contentSize} esMobile={esMobile}/>
+                <ChartView key={`chartRef-${dashboardDesignerCode}-${code}`} minLayoutHeight={minLayoutHeight} editMode={isPreview ? false : editMode} item={{...item}} reload={reload} contentSize={contentSize} esMobile={esMobile} isPreview={isPreview}/>
             </div>
         )
     }