数据源详情页支持搜索、分页器每页展示行数适应可视区域高度

src/components/dashboardDesigner/content.jsx

@@ -25,13 +25,12 @@ class DashboardDesignerContent extends React.Component {
     }
 
     componentDidMount() {
-        window.addEventListener("resize", () => {
-            this.refreshContentSize(true);
-        });
+        // this.refreshContentSize();
+        window.addEventListener("resize", this.refreshContentSize);
     }
 
     componentWillUnmount() {
-        window.removeEventListener('resize', this.onWindowResize);
+        window.removeEventListener('resize', this.refreshContentSize);
     }
 
     showFilterBox = (e) => {

src/components/dataSourceDetail/columnConfig.jsx

@@ -7,7 +7,7 @@ import './columnConfig.less'
 const FormItem = Form.Item
 const SelectOption = Select.Option
 
-const ResizeableTitle = (props) => {
+const resizeableTitle = (props) => {
     const { onResize, width, ...restProps } = props;
 
     if (!width) {
@@ -19,7 +19,7 @@ const ResizeableTitle = (props) => {
             <th {...restProps} />
         </Resizable>
     );
-};
+}
 
 class DataSourceColumnConfig extends React.Component {
 
@@ -27,13 +27,38 @@ class DataSourceColumnConfig extends React.Component {
         super(props);
         this.state = {
             widths: [ 80, 300, 200, 100, 100 ],
+            pageSize: 10,
             visibleConfirm: false,
+            searchText: '',
         }
     }
 
+    componentDidMount() {
+        this.resetTablePageSize();
+        window.addEventListener('resize', this.resetTablePageSize);
+    }
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.resetTablePageSize);
+    }
+
+    resetTablePageSize = () => {
+        let el = this.columnConfigRef;
+        let parent = el.parentElement;
+        let tableHeight = el.getElementsByClassName('ant-table-thead')[0];
+        // let tableRow = el.getElementsByClassName('ant-table-row')[0];
+        let ph = parent.offsetHeight;
+        let padding = el.getBoundingClientRect().top - parent.getBoundingClientRect().top;
+        // (可视区域高度 - 上下padding - 分页器高度 - 表头高度 - 容差值) / 行高
+        // let pageSize = ~~((ph - padding * 2 - 64 - tableHeight.offsetHeight) / tableRow.offsetHeight) // 数据未加载时拿不到行高
+        let pageSize = ~~((ph - padding * 2 - 64 - tableHeight.offsetHeight - 12) / 41)
+        this.setState({
+            pageSize,
+        });
+    }
+
     components = {
         header: {
-            cell: ResizeableTitle,
+            cell: resizeableTitle,
         },
     };
 
@@ -50,10 +75,76 @@ class DataSourceColumnConfig extends React.Component {
         });
     };
 
+    handleSearch = (dataIndex, selectedKeys, confirm) => {
+        confirm();
+        let obj = {};
+        obj[`searchText${dataIndex}`] = selectedKeys[0];
+        this.setState(obj);
+    };
+
+    handleReset = (dataIndex, clearFilters) => {
+        clearFilters();
+        let obj = {};
+        obj[`searchText${dataIndex}`] = '';
+        this.setState(obj);
+    };
+
+    getColumnSearchProps = dataIndex => ({
+        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
+            <div style={{ padding: 8 }}>
+                <Input
+                    ref={node => { this.searchInput = node; }}
+                    placeholder={`请输入关键字`}
+                    value={selectedKeys[0]}
+                    onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+                    onPressEnter={() => this.handleSearch(dataIndex, selectedKeys, confirm)}
+                    style={{ width: 188, marginBottom: 8, display: 'block' }}
+                />
+                <Button
+                    type="primary"
+                    onClick={() => this.handleSearch(dataIndex, selectedKeys, confirm)}
+                    icon="search"
+                    size="small"
+                    style={{ width: 90, marginRight: 8 }}
+                >
+                    搜索
+                </Button>
+                <Button onClick={() => this.handleReset(dataIndex, clearFilters)} size="small" style={{ width: 90 }}>
+                    重置
+                </Button>
+            </div>
+        ),
+        filterIcon: filtered => (
+            <span ><a className='label'>{this.state[`searchText${dataIndex}`]}</a><Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} /></span>
+        ),
+        onFilter: (value, record) =>
+            record[dataIndex]
+            .toString()
+            .toLowerCase()
+            .includes(value.toLowerCase()),
+        onFilterDropdownVisibleChange: visible => {
+            if (visible) {
+                setTimeout(() => this.searchInput.select());
+            }
+        },
+        render: text => {
+            const { searchText } = this.state;
+            return (searchText) ?
+                ((text || '').split(new RegExp(`(${searchText})`, 'i')).map((fragment, i) => {
+                    return (
+                        fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'), '\\$1') === searchText.toLowerCase() ?
+                        <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
+                        fragment
+                    )
+                }
+            )) : text
+        }
+    });
+
     render() {
 
         const { dataSourceDetail, dispatch, fetching } = this.props;
-        const { widths } = this.state;
+        const { widths, pageSize } = this.state;
 
         const columns = [{
             title: <div><Checkbox
@@ -94,6 +185,7 @@ class DataSourceColumnConfig extends React.Component {
             dataIndex: 'name',
             key: 'name',
             width: widths[1],
+            ...this.getColumnSearchProps('name'),
         // }, {
         //     title: '备注',
         //     dataIndex: 'description',
@@ -248,6 +340,7 @@ class DataSourceColumnConfig extends React.Component {
             dataIndex: 'alias',
             key: 'alias',
             // width: widths[5],
+            ...this.getColumnSearchProps('alias'),
             render: (text, record) => {
                 return(
                     <Input
@@ -283,7 +376,7 @@ class DataSourceColumnConfig extends React.Component {
         }));
 
         return (
-            <div className='column-config'>
+            <div ref={node => this.columnConfigRef = node}className='column-config'>
                 {
                     dataSourceDetail.type==='database'?(
                         <div className='sql-area'>
@@ -377,6 +470,9 @@ class DataSourceColumnConfig extends React.Component {
                     locale={{
                         emptyText: '未连接到数据对象'
                     }}
+                    pagination={{
+                        pageSize,
+                    }}
                 />
             </div>
         );

src/components/dataSourceDetail/columnConfig.less

@@ -22,6 +22,23 @@
         table {
             overflow: hidden;
         }
+        .ant-table-thead > tr > th .anticon-filter, .ant-table-thead > tr > th .ant-table-filter-icon {
+            width: 100px;
+            font-size: 14px;
+            max-width: 50%;
+            line-height: 100%;
+            margin-top: 12px;
+            /* vertical-align: middle; */
+            height: auto;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            >.label {
+                color: rgb(24, 144, 255);
+            }
+            >i {
+                margin-left: 8px;
+            }
+        }
         .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
             padding: 4px 8px;
         }