看板编辑界面Table组件样式调整（—计算容器大小以正确呈现滚动条）

src/components/dashboardDesigner/chartView.jsx

@@ -5,7 +5,7 @@ import { Table } from 'antd'
 import resolveChartOption from '../chart/resolveChartOption.js'
 import RichTextEditor from './richTextEditor'
 
-const ChartView = ({ item, chart, editMode, dispatch }) => {
+const ChartView = ({ item, itemSize, chart, editMode, dispatch }) => {
     const { viewType, chartCode, content } = item;
     let children = <div className='chart-default mover'></div>;
 
@@ -24,7 +24,20 @@ const ChartView = ({ item, chart, editMode, dispatch }) => {
                 />
             }else if(type === 'table') {
                 const { columns, data } = option;
-                children = <Table className='mover' columns={columns} dataSource={data} pagination={false} />
+                const { height } = itemSize;
+                children = <Table
+                    className='dashboard-table'
+                    size='small'
+                    scroll={{
+                        x: columns ? columns.length * 100 : 0,
+                        y: height - 38 - 50 -16 , // 减去工具栏高度、表格标题栏高度、分页工具高度、缩放调整按钮高度
+                    }}
+                    columns={columns ? columns.map(c => ({
+                        ...c,
+                        width: 100
+                    })) : []}
+                    dataSource={data}
+                />
             }
         }
     }else if(viewType === 'richText') { // 富文本类型

src/components/dashboardDesigner/content.jsx

@@ -10,7 +10,11 @@ class DashboardDesignerContent extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            viewWidth: 0,
+            contentSize: {
+                scroll: false,
+                width: 0,
+                height: 0,
+            },
             editMode: true,
             operation: 'create',
             visibleBox: false,
@@ -18,7 +22,7 @@ class DashboardDesignerContent extends React.Component {
     }
 
     componentDidMount() {
-        this.refreshContentWidth()
+        this.refreshContentSize(true);
     }
 
     showBox = (o) => {
@@ -37,17 +41,25 @@ class DashboardDesignerContent extends React.Component {
     /**
      * 重设容器宽度
      */
-    refreshContentWidth = () => {
+    refreshContentSize = (flag) => {
         let contentEl = findDOMNode(this.refs.contentEl);
         if(!contentEl) { return; }
-        let scroll = contentEl.scrollHeight > contentEl.clientHeight;
+        let _scroll = contentEl.scrollHeight > contentEl.clientHeight;
+
+        if(!flag && this.state.contentSize.scroll === _scroll) { // 如果滚动条没有变化则直接退出
+            return;
+        }
         this.setState({
-            viewWidth: contentEl.offsetWidth - (scroll ? 25 : 0) // 有滚动条时需要减去滚动条的宽度
+            contentSize: {
+                scroll: _scroll,
+                width: contentEl.offsetWidth - (_scroll ? 25 : 0), // 有滚动条时需要减去滚动条的宽度
+                height: contentEl.clientHeight
+            }
         });
     }
 
     render() {
-        const { viewWidth, editMode, operation, visibleBox } = this.state;
+        const { contentSize, editMode, operation, visibleBox } = this.state;
         return <Layout className='content'>
             <Header>
                 <div>
@@ -86,7 +98,7 @@ class DashboardDesignerContent extends React.Component {
                 </div>
             </Header>
             <Content ref='contentEl' className='dashboard-content'>
-                <ViewLayout width={viewWidth} reset={this.refreshContentWidth} editMode={editMode}/>
+                <ViewLayout contentSize={contentSize} reset={this.refreshContentSize} editMode={editMode}/>
             </Content>
         </Layout>
     }

src/components/dashboardDesigner/header.jsx

@@ -63,7 +63,7 @@ class Header extends React.Component {
                 <div className='header-item toolbar-title'>
                     <Input
                         className='input-title'
-                        value={dashboardDesigner.title}
+                        value={dashboardDesigner.name}
                         addonAfter={<Icon type="edit" 
                             onClick={(e) => {
                                 const input = e.currentTarget.parentElement.parentElement.getElementsByTagName('input')[0];
@@ -71,7 +71,7 @@ class Header extends React.Component {
                             }}
                         />}
                         onChange={(e) => {
-                            dispatch({ type: 'dashboardDesigner/setField', name: 'title', value: e.target.value });
+                            dispatch({ type: 'dashboardDesigner/setField', name: 'name', value: e.target.value });
                         }}
                     />
                 </div>

src/components/dashboardDesigner/viewLayout.jsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { findDOMNode } from 'react-dom'
 import "./viewLayout.less"
 import ReactGridLayout from 'react-grid-layout'
 import { Icon, Modal } from 'antd'
@@ -15,11 +16,11 @@ class ViewLayout extends React.PureComponent {
 
     createElement = (item, isPreview) => {
         const { dispatch, editMode } = this.props;
-        const { code, title, viewType, layout, chartCode } = item;
+        const { code, name, viewType, layout, chartCode } = item;
         return (
             <div className={`chartview${editMode ? ' chartview-edit' : ''}`} key={code} data-grid={layout}>
                 <div className='chartview-toolbar mover'>
-                    <div className='chart-title'><span>{title}</span></div>
+                    <div className='chart-title'><span>{name}</span></div>
                     <div className='chart-tools'>
                         {!isPreview && viewType !== 'richText' && <Icon type="arrows-alt" onClick={() => this.showPreviewBox(item)}/>}
                         {editMode && viewType !== 'richText' &&  <Icon type='edit' onClick={() => {
@@ -33,7 +34,7 @@ class ViewLayout extends React.PureComponent {
                         {isPreview && <Icon type="close" onClick={this.hidePreviewBox}/>}
                     </div>
                 </div>
-                <ChartView editMode={isPreview ? false : editMode} item={{...item}}/>
+                <ChartView itemSize={{ width: '100%', height: isPreview ? '100%' : 50*layout.h }} editMode={isPreview ? false : editMode} item={{...item}}/>
             </div>
         )
     }
@@ -43,7 +44,12 @@ class ViewLayout extends React.PureComponent {
         dispatch({ type: 'dashboardDesigner/changeLayout', layout });
         setTimeout(() => {
             reset();
-        }, 200)
+        }, 500)
+    }
+
+    onResize = () => {
+        const { reset, } = this.props;
+        reset();
     }
 
     showPreviewBox = (item) => {
@@ -60,12 +66,13 @@ class ViewLayout extends React.PureComponent {
     }
 
     render() {
-        const { dashboardDesigner, width, editMode } = this.props;
+        const { dashboardDesigner, contentSize, editMode } = this.props;
         const { visiblePreviewBox, previewItem } = this.state;
         const children = dashboardDesigner.items.map((item) => this.createElement(item));
         return (<div>
             <ReactGridLayout
-                width={width}
+                width={contentSize.width}
+                autoSize={true}
                 cols={12}
                 margin = {editMode ? [2, 2] : [0, 0]}
                 rowHeight = {50}
@@ -73,6 +80,7 @@ class ViewLayout extends React.PureComponent {
                 isResizable={editMode}
                 draggableHandle='.mover'
                 onLayoutChange={this.onLayoutChange}
+                onResize={this.onResize}
                 onBreakpointChange={this.onBreakpointChange}
                 verticalCompact={true}
                 compactType='vertical'

src/components/dashboardDesigner/viewLayout.less

@@ -9,7 +9,8 @@
       padding: 0 10px;
       justify-content: space-between;
       .chart-title {
-        font-size: 20px;
+        font-size: 16px;
+        line-height: 2;
       }
       .chart-tools {
         display: none;
@@ -21,7 +22,42 @@
       }
     }
     .chartview-content {
-      .chart-default {
+      .dashboard-table { // 表格
+        height: 100%;
+        .ant-spin-nested-loading {
+          height: 100%;
+          .ant-spin-container {
+            height: 100%;
+            padding-bottom: 50px;
+            .ant-table {
+              height: 100%;
+              .ant-table-content {
+                height: 100%;
+                .ant-table-scroll {
+                  height: 100%;
+                }
+                .ant-table-header {
+                  overflow-y: hidden;
+                }
+                .ant-table-body {
+                  overflow: auto !important;
+                  .ant-table-tbody {
+                    tr {
+                      td {
+                        // padding: 0;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+            .ant-pagination {
+              margin: 8px 0;
+            }
+          }
+        }
+      }
+      .chart-default { // echart缺省
         background-image: url(/images/chart-default.png);
         width: 100%;
         height: 100%;
@@ -29,7 +65,7 @@
         background-size: contain;
         background-repeat: no-repeat;
       }
-      .richtexteditor {
+      .richtexteditor { // 富文本
         padding-bottom: 10px;
         height: 100%;
         .w-e-toolbar {
@@ -114,6 +150,7 @@
   }
   .react-grid-layout {
     background: #eee;
+    overflow: hidden;
   }
   .layoutJSON {
     background: #ddd;

src/models/dashboardDesigner.js

@@ -14,23 +14,10 @@ export default {
             dirty: false
         },
         name: '标题',
-        basicConfig: {
-            name:'可爱的标题！',  
-            description:'',
-            type:'',   //分为Dynamic和Static
-            refreshTimer: 0, //自动刷新时间，如果是Static时应当无效或为0
-            width: '',   //Grid宽度，数字
-            cols: '',  //Grid列数 数字
-            compactType:'',   //Grid紧凑方式
-            margin:'', //Grid内Element之间的间隔
-            containerPadding:'',  //Element的内垫
-            rowHeight:'', //Grid单行高，数字
-        },
+        defaultLayout: { x: 0, y: 50, w: 12, h: 6, minW: 2, maxW: 12, minH: 0 },
         parameters: {
         },  //全局可用参数
         items: [],
-        configBoxForm: {
-        },
         description: '',
         thumbnail: '',
         groupCode: '',
@@ -67,14 +54,14 @@ export default {
             return Object.assign({}, newState, {dirty: true});
         },
         addCharts(state, action) {
-            let { items } = state;
+            let { items, defaultLayout } = state;
             const { charts } = action;
 
             items = items.concat(charts.map(c => ({
                 code: c.code,
                 viewType: 'chart',
                 name: c.name,
-                layout: { x: 0, y: 50, w: 12, h: 6},
+                layout: defaultLayout,
                 chartCode: c.code
             })));
             return Object.assign({}, state, {items, dirty: true});
@@ -87,12 +74,12 @@ export default {
             return { ...state, dirty: dirty, items: newItems };
         },
         addRichText(state, action) {
-            let { items } = state;
+            let { items, defaultLayout } = state;
             items.push({
                 code: Math.random(),
                 viewType: 'richText',
                 name: '',
-                layout: { x: 0, y: 50, w: 12, h: 6}
+                layout: defaultLayout
             });
             return Object.assign({}, state, {items, dirty: true});
         },
@@ -147,15 +134,14 @@ export default {
                     return null;
                 }
             }); 
-                try {
-                    yield put.resolve({ type: 'setField', name: 'thumbnail', value: thumbnail })
-                    yield put.resolve({ type: 'dashboard/remoteModify' })
-                }catch (e){
-                    message.error('保存失败');
-                }
+            try {
+                yield put.resolve({ type: 'setField', name: 'thumbnail', value: thumbnail })
+                yield put.resolve({ type: 'dashboard/remoteModify' })
+            }catch (e){
+                message.error('保存失败');
             }
-
-        },
+        }
+    },
     subscription: {
 
     },