报表计算view conent layout逻辑优化

src/components/chartDesigner/sections/style/theme/theme2.less

@@ -18,19 +18,22 @@
                 }
             }
         }
-        .ant-table-tbody {
-            tr:nth-child(even) {
-                background: #253C7E;
-                color: #E9F0F5;
-                td {
-                    border: none;
+        .ant-table-body {
+            border: none;
+            .ant-table-tbody {
+                tr:nth-child(even) {
+                    background: #253C7E;
+                    color: #E9F0F5;
+                    td {
+                        border: none;
+                    }
                 }
-            }
-            tr:nth-child(odd) {
-                background: #182E6F;
-                color: #E9F0F5;
-                td {
-                    border: none;
+                tr:nth-child(odd) {
+                    background: #182E6F;
+                    color: #E9F0F5;
+                    td {
+                        border: none;
+                    }
                 }
             }
         }

src/components/dashboardDesigner/content.jsx

@@ -12,7 +12,7 @@ class DashboardDesignerContent extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            lastContentSize: {
+            contentSize: {
                 scroll: false,
                 width: 0,
                 height: 0,
@@ -24,12 +24,12 @@ class DashboardDesignerContent extends React.Component {
     }
 
     componentDidMount() {
-        // this.refreshContentSize();
         const { dashboardDesigner } = this.props;
         const { filters } = dashboardDesigner;
         this.setState({
             closeFilters: filters.length > 6
         });
+        this.refreshContentSize();
         window.addEventListener("resize", this.refreshContentSize);
     }
 
@@ -53,40 +53,20 @@ class DashboardDesignerContent extends React.Component {
      * 重设容器宽度
      */
     refreshContentSize = () => {
+        let viewLayoutEl = this.contentRef.current;
+        let viewContentEl = viewLayoutEl.getElementsByClassName('dashboard-viewcontent')[0];
+        let _scroll = viewContentEl.scrollHeight > viewContentEl.clientHeight;
+        let padding = 0;
+        let width = viewContentEl.offsetWidth - padding * 2 - (_scroll ? 10 : 2); // 有滚动条时需要减去滚动条的宽度
+        let height = viewContentEl.clientHeight;
         this.setState({
-            refresh: true
+            contentSize: {
+                width,
+                height
+            }
         });
     }
 
-    getContentSize = () => {
-        const { lastContentSize } = this.state;
-        let contentEl = this.contentRef.current;
-        if(!contentEl) {
-            return {
-                width: 0,
-                height: 0
-            }; 
-        }
-        let viewcontent = contentEl.getElementsByClassName('dashboard-viewcontent')[0];
-        let _scroll = viewcontent.scrollHeight > viewcontent.clientHeight;
-        let padding = 0;
-
-        let width = contentEl.offsetWidth - padding * 2 - (_scroll ? 10 : 2) // 有滚动条时需要减去滚动条的宽度
-        if(width > 0 && width !== lastContentSize.width) {
-            this.setState({
-                lastContentSize: {
-                    width,
-                    height: contentEl.clientHeight,
-                    scroll: _scroll
-                }
-            });
-        }
-        return {
-            width: width,
-            height: contentEl.clientHeight
-        }
-    }
-
     createFilters = (filters) => {
         const { dispatch, afterRefresh } = this.props;
         dispatch({ type: 'dashboardDesigner/changeFilters', filters }).then(() => {
@@ -114,9 +94,7 @@ class DashboardDesignerContent extends React.Component {
     render() {
         const { dashboardDesigner, isOwner, isShareView, isShareKeyView, isViewMode } = this.props;
         const { dataSources, editMode, filters, relationColumns } = dashboardDesigner;
-        const { visibleFilterBox, lastContentSize, closeFilters } = this.state;
-
-        const contentSize = this.getContentSize();
+        const { visibleFilterBox, contentSize, closeFilters } = this.state;
 
         return <Layout className='content'>
             <Content className={`dashboard-content${(isShareView || isShareKeyView || isViewMode) ? ' nomargin' : ''}`}>
@@ -156,7 +134,7 @@ class DashboardDesignerContent extends React.Component {
                             </div>
                             {visibleFilterBox && <FilterBox key={Math.random()} dataSources={dataSources} relationColumns={relationColumns} filterData={filters} visibleFilterBox={visibleFilterBox} showFilterBox={this.showFilterBox} hideFilterBox={this.hideFilterBox} createFilters={this.createFilters} />}
                         </Header>}
-                        <ViewLayout isOwner={isOwner} isShareView={isShareView} isShareKeyView={isShareKeyView} isViewMode={isViewMode} contentSize={contentSize} lastContentSize={lastContentSize} editMode={editMode}/>
+                        <ViewLayout isOwner={isOwner} isShareView={isShareView} isShareKeyView={isShareKeyView} isViewMode={isViewMode} contentSize={contentSize} editMode={editMode}/>
                     </main>
                 </Layout>
             </Content>

src/components/dashboardDesigner/viewLayout.jsx

@@ -91,15 +91,15 @@ class ViewLayout extends React.PureComponent {
     }
 
     render() {
-        const { dashboardDesigner, contentSize, lastContentSize, dispatch } = this.props;
+        const { dashboardDesigner, contentSize, dispatch } = this.props;
         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));
-        
+        console.log(contentSize);
         return (<div className={`dashboard-viewcontent ${themeName}`} ref={node => this.viewContentRef = node}>
             <ReactGridLayout
-                width={ contentSize.width ? contentSize.width : lastContentSize.width }
+                width={ contentSize.width }
                 autoSize={true}
                 cols={12}
                 margin = {editMode ? layoutMargin : layoutMargin}

src/components/dashboardDesigner/viewLayout.less

@@ -143,7 +143,6 @@
     .chartview-content {
       height: calc(~'100% - 20px');
       width: 100%;
-      padding: 8px;
       .richtexteditor {
         .w-e-text-container {
           pointer-events: all;