报表表格样式自适应逻辑/数据连接详情弹框BUG修复

src/components/chartDesigner/charts/tableView.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { Table } from 'antd'
 import { connect } from 'dva'
-import EllipsisTooltip from '../../common/ellipsisTooltip/index'
 import './tableView.less'
 
 class TableView extends React.Component {
@@ -55,13 +54,13 @@ class TableView extends React.Component {
     
         const { table } = styleConfig || {};
         const { bordered } = table || {};
-        const tableContentHeight = layout.contentSize.height - layout.tableHeaderHeight - 42;
+        const tableContentHeight = layout.contentSize.height - layout.tableHeaderHeight - 42 - 10;
     
         return (
             <Table
                 className='table-view'
                 columns={columns ? columns.map((c, i) => {
-                    let obj = { ...c, render: (text) => <EllipsisTooltip title={text}>{text}</EllipsisTooltip>, };
+                    let obj = { ...c };
                     if(i !== columns.length - 1) {
                         obj.onCell = () => {
                             return {

src/components/chartDesigner/header.jsx

@@ -40,7 +40,7 @@ class Header extends React.Component {
     }
 
     isValid = () => {
-        const { chartDesigner, main } = this.props;
+        const { chartDesigner } = this.props;
         const { header } = chartDesigner; 
 
         return !!header.label && header.label.trim().length > 0 && header.label.length <= 50;

src/components/dashboardDesigner/chartView.jsx

@@ -4,14 +4,17 @@ import { Table, Spin, Icon } from 'antd'
 import RichTextEditor from './richTextEditor'
 import { connect } from 'dva'
 import resolveChartOption from '../chart/resolveChartOption'
-import { hashcode } from '../../utils/baseUtils'
+import { isEqual, hashcode } from '../../utils/baseUtils'
 import EmptyContent from '../common/emptyContent/index'
 
 class ChartView extends React.Component {
     
     constructor(props) {
         super(props);
+        console.log('init');
         this.state = {
+            tableScrollHeight: 0,
+            layout: { ...props.item.layout },
             chartOption: {
                 showLoading: true
             }, // 图表详细数据
@@ -24,13 +27,53 @@ class ChartView extends React.Component {
         if(viewType === 'chart') {
             dispatch({ type: 'dashboardDesigner/fetchChartData', item, mandatory: reload });
         }
+        this.setTableSize();
+        window.addEventListener('resize', this.setTableSize);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.setTableSize);
+    }
+
+    // static getDerivedStateFromProps = (props, state) => {
+    //     console.log(props.item.layout, state.layout);
+    //     if(!isEqual(props.item.layout, state.layout)) {
+    //         return {
+    //             tableScrollHeight: ChartView.getTableScrollSize()
+    //         }
+    //     }else {
+    //         return null;
+    //     }
+    // }
+    componentDidUpdate(preProps) {
+        console.log(preProps.item.layout, this.state.layout);
+        if(!isEqual(preProps.item.layout, this.state.layout)) {
+            this.setState({
+                layout: { ...preProps.item.layout },
+                tableScrollHeight: this.getTableScrollSize()
+            });
+        }
+    }
+
+    setTableSize = () => {
+        this.setState({
+            tableScrollHeight: this.getTableScrollSize()
+        });
+    }
+
+    getTableScrollSize = () => {
+        const { chartRef } = this.props;
+        let ref = this[chartRef];
+        return ref.offsetHeight - 40 - 10 - 3 - 40;
     }
 
     render() {
-        const { item, tableBodyHeight, editMode, dispatch, readOnly } = this.props;
+        const { item, editMode, dispatch, readOnly, chartRef } = this.props;
+        const { tableScrollHeight } = this.state;
         const { viewType, chartType, content, chartOption, fetching } = item;
         // let children = <div className='chart-default mover'></div>;
         let children = <EmptyContent/>;
+        console.log(tableScrollHeight);
         
         if(viewType === 'chart') { // 图表类型
             if(chartOption) {
@@ -68,14 +111,13 @@ class ChartView extends React.Component {
                     children = <Table
                         key={hashcode({
                             columns,
-                            dataSource,
-                            tableBodyHeight
+                            dataSource
                         })}
                         className='dashboard-table'
                         size='small'
                         scroll={{
                             x: columns ? columns.length * 200 : 0,
-                            y: tableBodyHeight,
+                            y: tableScrollHeight,
                         }}
                         pagination={pagination}
                         columns={columns ? columns.map(c => ({
@@ -95,7 +137,7 @@ class ChartView extends React.Component {
         }
     
         return (
-            <div className='chartview-content' style={{ width: '100%', height: '100%' }}>
+            <div ref={node => this[chartRef] = node } className='chartview-content' style={{ width: '100%', height: '100%' }}>
                 { children }
                 { fetching && <div style={{ display: fetching ? 'block' : 'none', position: 'absolute', height: '100%', width: '100%', zIndex: '4', background: 'rgba(51,51,51,.1)', top: 0, left: 0 }}>
                     <Spin style={{ display: 'inline-block', position: 'absolute', top: '50%', left: '50%', margin: '-10px' }} indicator={<Icon type="loading" style={{ fontSize: 24 }} spin />} />

src/components/dashboardDesigner/chooseChartBox.jsx

@@ -67,7 +67,7 @@ class ChooseChartBox extends React.Component {
                 viewScrollContent.scrollTo(0, viewScrollContent.scrollHeight - viewScrollContent.clientHeight);
             }, 500);
         }else {
-            message.warning('请选择需要填加的图表');
+            message.warning('请选择需要添加的图表');
         }
     }
 

src/components/dashboardDesigner/viewLayout.jsx

@@ -96,7 +96,7 @@ class ViewLayout extends React.PureComponent {
                         {isPreview && <Icon className={iconCls} type="close" onClick={this.hidePreviewBox}/>}
                     </div>
                 </div>
-                <ChartView readOnly={richTextReadOnly} tableBodyHeight={isPreview ? (this.state.screenHeight * 0.8 - 24 - 40 - 50 - 38) : 50 * layout.h - 30 - 50 -38} editMode={isPreview ? false : editMode} item={{...item}} reload={reload}/>
+                <ChartView chartRef={'chartRef-' + code} readOnly={richTextReadOnly} editMode={isPreview ? false : editMode} item={{...item}} reload={reload}/>
             </div>
         )
     }

src/components/dashboardDesigner/viewLayout.less

@@ -49,17 +49,17 @@
           height: 100%;
           .ant-spin-container {
             height: 100%;
-            padding-bottom: 50px;
+            padding-bottom: 10px;
             .ant-table {
-              height: 100%;
               overflow: hidden;
               .ant-table-content {
                 height: 100%;
                 .ant-table-scroll {
                   height: 100%;
-                }
-                .ant-table-body {
-                  height: calc(~"100% - 38px");
+                  .ant-table-body {
+                    height: calc(~"100% - 38px");
+                    margin-top: 0;
+                  }
                 }
               }
             }
@@ -300,6 +300,9 @@
             }
           }
         }
+        .ant-table-body {
+          margin-top: 0;
+        }
       }
     }
   }

src/components/dataConnect/list.jsx

@@ -256,7 +256,7 @@ class DataConnect extends React.Component {
                                 <Col>
                                     <Button className='btn-add' onClick={() => {
                                         // 设置新增默认值
-                                        dispatch({ type: 'dataConnect/setNewModel', model: { dbType: 'oracle', dbName: 'orcl', port: 1521 } });
+                                        dispatch({ type: 'dataConnect/setNewModel', model: { dbType: 'oracle', dbName: 'orcl' } });
                                         dispatch({ type: 'dataConnect/setNewModelFields', fields: [
                                             { name: 'visibleBox', value: true },
                                             { name: 'boxOperation', value: 'create' }

src/components/dataSourceDetail/dataConnectBox.jsx

@@ -56,8 +56,8 @@ class DataConnectBox extends React.Component {
             }
         }
 
-        return flag && !!newOne && !!newOne.name && newOne.name.length <= 50 && !!newOne.dbType && !!newOne.address && !!newOne.port &&
-            !!newOne.dbName && !!newOne.userName && newOne.description.length <= 150 && (newOne.boxOperation === 'create' ? !!newOne.password : true);
+        return flag && !!newOne && !!newOne.name && (newOne.name + '').length <= 50 && !!newOne.dbType && !!newOne.address && !!newOne.port &&
+            !!newOne.dbName && !!newOne.userName && (newOne.description + '').length <= 150 && (newOne.boxOperation === 'create' ? !!newOne.password : true);
     }
 
     render() {
@@ -114,19 +114,20 @@ class DataConnectBox extends React.Component {
                         help={validInfo.name.help}
                     >
                         <Input
+                            key={dataConnect.newOne.name}
                             disabled={disabled}
                             placeholder="输入数据链接名称"
                             defaultValue={dataConnect.newOne.name}
                             onChange={e => {
-                                let val = e.target.value;
+                                let val = e.target.value+'';
                                 window.clearTimeout(this.nameTimeout);
                                 this.nameTimeout = window.setTimeout(() => {
                                     this.setState({
-                                        validInfo: { ...validInfo, name: { status: (!val || (val+'').trim().length > 50 || (val+'').trim().length === 0) ? 'error' : 'success', help: (val+'').trim().length > 50 ? '链接名不能超过50个字符' : ((val+'').trim().length === 0 ? '链接名不能为空' : '') } }
+                                        validInfo: { ...validInfo, name: { status: (!val || val.length > 50 || val.length === 0) ? 'error' : 'success', help: val.length > 50 ? '链接名不能超过50个字符' : ((val+'').trim().length === 0 ? '链接名不能为空' : '') } }
                                     });
                                 }, 100);
                             }}
-                            onBlur={(e) => { dispatch({ type: 'dataConnect/setNewModelField', name: 'name', value: e.target.value }) }}
+                            onBlur={(e) => { dispatch({ type: 'dataConnect/setNewModelField', name: 'name', value: e.target.value+'' }) }}
                         >
                         </Input>
                     </FormItem>
@@ -135,6 +136,7 @@ class DataConnectBox extends React.Component {
                         help={(dataConnect.newOne.dbType === undefined || dataConnect.newOne.dbType) ? '' : '数据库类型不能为空'}
                     >
                         <Select
+                            key={dataConnect.newOne.dbType}
                             disabled={true}
                             placeholder="选择数据库类型"
                             defaultValue='oracle'
@@ -163,15 +165,25 @@ class DataConnectBox extends React.Component {
                                 labelCol: { span: 5 },
                                 wrapperCol: { span: 19 }
                             }}
-                            validateStatus={(dataConnect.newOne.address === undefined || dataConnect.newOne.address) ? 'success' : 'error'}
-                            help={(dataConnect.newOne.address === undefined || dataConnect.newOne.address) ? '' : '数据库地址不能为空'}
+                            validateStatus={validInfo.address.status}
+                            help={validInfo.address.help}
                             >
                                 <Input
+                                    key={dataConnect.newOne.address}
                                     disabled={disabled}
                                     placeholder="格式：192.168.1.1"
                                     defaultValue={dataConnect.newOne.address}
                                     onBlur={(e) => {
-                                        dispatch({ type: 'dataConnect/setNewModelField', name: 'address', value: e.target.value });
+                                        dispatch({ type: 'dataConnect/setNewModelField', name: 'address', value: e.target.value+'' });
+                                    }}
+                                    onChange={e => {
+                                        let val = e.target.value+'';
+                                        window.clearTimeout(this.addressTimeout);
+                                        this.addressTimeout = window.setTimeout(() => {
+                                            this.setState({
+                                                validInfo: { ...validInfo, address: { status: (val.length === 0) ? 'error' : 'success', help: val.length === 0 ? '数据库地址不能为空' : '' } }
+                                            });
+                                        }, 100);
                                     }}
                                 />
                             </FormItem>
@@ -185,10 +197,11 @@ class DataConnectBox extends React.Component {
                             help={(dataConnect.newOne.port === undefined || dataConnect.newOne.port) ? '' : '端口不能为空'}
                             >
                                 <InputNumber
+                                    // key={dataConnect.newOne.port}
                                     disabled={disabled}
-                                    defaultValue={dataConnect.newOne.port ? Number(dataConnect.newOne.port) : 1521}
-                                    // value={dataConnect.newOne.port}
-                                    onBlur={(value) => {
+                                    // defaultValue={dataConnect.newOne.port}
+                                    value={dataConnect.newOne.port}
+                                    onChange={(value) => {
                                         dispatch({ type: 'dataConnect/setNewModelField', name: 'port', value: value });
                                     }}
                                 />
@@ -200,11 +213,12 @@ class DataConnectBox extends React.Component {
                         help={(dataConnect.newOne.dbName === undefined || dataConnect.newOne.dbName) ? '' : '数据库名不能为空'}
                     >
                         <Input
+                            key={dataConnect.newOne.dbName}
                             disabled={disabled}
                             // defaultValue='orcl'
-                            defaultValue={dataConnect.newOne.dbName || 'orcl'}
+                            defaultValue={dataConnect.newOne.dbName}
                             onBlur={(e) => {
-                                dispatch({ type: 'dataConnect/setNewModelField', name: 'dbName', value: e.target.value });
+                                dispatch({ type: 'dataConnect/setNewModelField', name: 'dbName', value: e.target.value+'' });
                             }}
                         />
                     </FormItem>
@@ -218,10 +232,11 @@ class DataConnectBox extends React.Component {
                             help={(dataConnect.newOne.userName === undefined || dataConnect.newOne.userName) ? '' : '用户名不能为空'}
                             >
                                 <Input
+                                    key={dataConnect.newOne.userName}
                                     disabled={disabled}
                                     defaultValue={dataConnect.newOne.userName}
                                     onBlur={(e) => {
-                                        dispatch({ type: 'dataConnect/setNewModelField', name: 'userName', value: e.target.value });
+                                        dispatch({ type: 'dataConnect/setNewModelField', name: 'userName', value: e.target.value+'' });
                                     }}
                                 />
                             </FormItem>
@@ -247,14 +262,14 @@ class DataConnectBox extends React.Component {
                                     }}
                                     onChange={(e) => {
                                         this.setState({
-                                            password: e.target.value
+                                            password: e.target.value+''
                                         });
                                     }}
                                     onBlur={(e) => {
                                         this.setState({
                                             passwordEditing: false
                                         });
-                                        dispatch({ type: 'dataConnect/setNewModelField', name: 'password', value: e.target.value });
+                                        dispatch({ type: 'dataConnect/setNewModelField', name: 'password', value: e.target.value+'' });
                                     }}
                                 />
                             </FormItem>
@@ -281,20 +296,21 @@ class DataConnectBox extends React.Component {
                         help={validInfo.description.help}
                     >
                         <Input.TextArea
+                            key={dataConnect.newOne.description}
                             disabled={disabled}
                             autosize={{ minRows: 2 }}
                             defaultValue={dataConnect.newOne.description}
                             onChange={e => {
-                                let val = e.target.value;
+                                let val = e.target.value+'';
                                 window.clearTimeout(this.nameTimeout);
                                 this.nameTimeout = window.setTimeout(() => {
                                     this.setState({
-                                        validInfo: { ...validInfo, description: { status: (!!val && (val+'').trim().length > 150) ? 'error' : 'success', help: (!!val && (val+'').trim().length > 150) ? '说明不能超过150个字符' : '' } }
+                                        validInfo: { ...validInfo, description: { status: (!!val && val.length > 150) ? 'error' : 'success', help: (!!val && val.length > 150) ? '说明不能超过150个字符' : '' } }
                                     });
                                 }, 100);
                             }}
                             onBlur={(e) => {
-                                dispatch({ type: 'dataConnect/setNewModelField', name: 'description', value: e.target.value });
+                                dispatch({ type: 'dataConnect/setNewModelField', name: 'description', value: e.target.value+'' });
                             }}
                         />
                     </FormItem>

src/components/dataSourceDetail/header.jsx

@@ -22,8 +22,8 @@ class DataSourceDetailHeader extends React.Component {
     }
 
     isValid = () => {
-        const { dataSourceDetail, dispatch } = this.props;
-        const { code, type, name, columns, targetDirty, description } = dataSourceDetail; 
+        const { dataSourceDetail } = this.props;
+        const { type, name, columns, targetDirty, description } = dataSourceDetail; 
         return type === 'database' ? (
             !!name && name.length < 50 && !targetDirty && !!columns && columns.length > 0 && (description === undefined || description === null || description.length <= 150)
         ) : ( type === 'file' ? (
@@ -33,7 +33,7 @@ class DataSourceDetailHeader extends React.Component {
 
     render() {
         const { dataSourceDetail, dispatch } = this.props;
-        const { code, type, name, columns, targetDirty, description } = dataSourceDetail;
+        const { code, name } = dataSourceDetail;
 
         return (
             <div className='dataSourcedetail-header'>

src/components/logs/logs.jsx

@@ -1,11 +1,9 @@
 import React from 'react'
-import { Layout, Row, Col, Input, Table, Card } from 'antd'
+import { Layout, Row, Col, Table, Card } from 'antd'
 import { connect } from 'dva'
-import { dateFormat } from '../../utils/baseUtils'
 import './logs.less'
 import ListFilter from '../common/listFilter/index';
 const { Content } = Layout
-const { Search } = Input
 
 class Logs extends React.Component {
     constructor(props) {

src/models/chart.js

@@ -14,7 +14,7 @@ export default {
             currentGroup: null,
             filterItems: [ // 可选过滤字段
                 { name: 'name', label: '图表名称', type: 'string' },
-                { name: 'description', label: '备注', type: 'string' },
+                // { name: 'description', label: '备注', type: 'string' },
                 { name: 'creatorName', label: '创建人', type: 'string' },
                 { name: 'createTime', label: '创建时间', type: 'date' },
                 { name: 'dataSourceCode', label: '数据源', type: 'enum', options: () => {

src/models/parseChartOption.js

@@ -2,6 +2,7 @@
  * 将请求返回的图表展示数据解析为前台展示用的config
  */
 import moment from 'moment'
+import EllipsisTooltip from '../components/common/ellipsisTooltip/index'
 import STATISTICS_OPTION from '../components/chartDesigner/sections/statisticsOption.json'
 
 export default function(viewType, data, chartConfig) {
@@ -313,11 +314,24 @@ function dataViewOption(data, dataViewConfig) {
     let dataSource = list || [];
 
     let option = {
-        columns: columns.map(c => ({
-            title: c.label,
-            dataIndex: c.name,
-            render: c.type === 'time' ? ((v, r, i) => moment(v).isValid() ? moment(v).format('YYYY-MM-DD') : v) : void(0)
-        })),
+        columns: columns.map(c => {
+            let obj = {
+                title: c.label,
+                dataIndex: c.name,
+            }
+            if(c.type === 'time') {
+                obj.render = (v, r, i) => {
+                    let text = moment(v).isValid() ? moment(v).format('YYYY-MM-DD') : v
+                    return <EllipsisTooltip title={text}>{text}</EllipsisTooltip>
+                }
+            }else {
+                obj.render = v => {
+                    let text = v === null ? '空' : v
+                    return <EllipsisTooltip title={text}>{text}</EllipsisTooltip>
+                }
+            }
+            return obj;
+        }),
         dataSource: dataSource.map((d, i) => {
             return { ...d, key: i}
         }),