数据源table过滤排序调整

app/components/chartDesigner/sections/baseConfigForm.jsx

@@ -1,16 +1,17 @@
-import React from 'react';
-import { Form, Select, Input, Icon, Dropdown, Menu, Row, Col, Card } from 'antd';
-const FormItem = Form.Item;
-const { Option } = Select;
-const { Search } = Input;
-import { connect } from 'dva';
-import chartDesigner from '../../../models/chartDesigner';
-import './baseConfigForm.less';
+import React from 'react'
+import { Form, Select, Input, Icon, Dropdown, Menu, Row, Col, Card } from 'antd'
+const FormItem = Form.Item
+const { Option } = Select
+const { Search } = Input
+import { connect } from 'dva'
+import chartDesigner from '../../../models/chartDesigner'
+import dataSource from '../../../models/dataSource'
+import './baseConfigForm.less'
 
 class baseConfigForm extends React.Component {
 	render() {
 		const props = this.props;
-		const allDataSource = props.chartDesigner.allDataSource;
+		const allDataSource = props.dataSource.list;
 		const { formItemLayout } = props
 
 		const menu = (
@@ -33,7 +34,7 @@ class baseConfigForm extends React.Component {
 						}}
 					>
 						{allDataSource.map((dataSource, i)=>{
-							return (<Option key={`dataSource-${i}`} value={dataSource.id}>{dataSource.name}</Option>)
+							return (<Option key={`dataSource-${i}`} value={dataSource.code}>{dataSource.name}</Option>)
 						})}
 					</Select>
 				</FormItem>
@@ -107,8 +108,8 @@ class baseConfigForm extends React.Component {
 	}
 }
 
-function mapStateToProps({ present: { chartDesigner } }) {
-    return { chartDesigner: chartDesigner }
+function mapStateToProps({ present: { chartDesigner, dataSource } }) {
+    return { chartDesigner, dataSource }
 }
 
 export default Form.create()(connect(mapStateToProps)(baseConfigForm));

app/components/datasource/dataColumn.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Tabs, Input, Button, Table, Icon, Tag, Menu, Dropdown } from 'antd'
+const { TabPane } = Tabs
+const { Search } = Input
+import { connect } from 'dva'
+import { Link } from 'react-router-dom'
+
+class DataColumn extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+        }
+    };
+
+    render() {
+        console.log(this.props);
+        return (
+            <div>
+                <Button>
+                    <Link to='/dataSource'>back</Link>
+                </Button>
+                111111
+            </div>
+        )
+    }
+}
+
+function mapStateToProps({present: {dataSource}}) {
+    return { dataSource }
+}
+
+export default connect(mapStateToProps)(DataColumn)

app/components/datasource/dataSource.less

@@ -15,31 +15,60 @@
         .datasource-table {
             .ant-table {
                 margin-top: 5px;
-                table {
-                    padding: 8px;
-                    .ant-table-row {
-                        td {
-                            padding: 8px;
-                            .datasource-name {
-                                display: flex;
-                                .datasource-type {
-                                    width: 20px;
-                                    height: 20px;
-                                    background-size: cover;
-                                    background-repeat: no-repeat;
-                                    background-image: url('https://test-feapp.oss-cn-beijing.aliyuncs.com/feapp/s70f_180613_fix_a_t/images/trdservices/44_2.png');
+                .ant-table-scroll {
+                    .ant-table-header {
+                        overflow: hidden;
+                        table {
+                            thead {
+                                th {
+                                    .ant-table-column-sorter, .ant-table-filter-icon {
+                                        opacity: 0;
+                                    }
+                                    :hover {
+                                        .ant-table-column-sorter, .ant-table-filter-icon {
+                                            opacity: 1;
+                                        }
+                                    }
                                 }
-                                .type-oracle {
-                                    background-position: 0 -731px;
+                                .column-filtered {
+                                    .ant-table-filter-icon {
+                                        opacity: 1;
+                                        color: red;
+                                    }
                                 }
                             }
-                            .datasource-tag {
-                                margin: 2px;
-                                cursor: default;
-                            }
-                            .ant-dropdown-trigger {
-                                font-size: 18px;
-                                cursor: pointer;
+                        }
+                    }
+                    .ant-table-body {
+                        margin-top: 17px;
+                        overflow-y: auto !important;
+                        table {
+                            padding: 0;
+                            .ant-table-row {
+                                td {
+                                    padding: 8px;
+                                    .datasource-name {
+                                        display: flex;
+                                        .datasource-type {
+                                            width: 20px;
+                                            height: 20px;
+                                            background-size: cover;
+                                            background-repeat: no-repeat;
+                                            background-image: url('https://test-feapp.oss-cn-beijing.aliyuncs.com/feapp/s70f_180613_fix_a_t/images/trdservices/44_2.png');
+                                        }
+                                        .type-oracle {
+                                            background-position: 0 -731px;
+                                        }
+                                    }
+                                    .datasource-tag {
+                                        margin: 2px;
+                                        cursor: default;
+                                    }
+                                    .ant-dropdown-trigger {
+                                        font-size: 18px;
+                                        cursor: pointer;
+                                    }
+                                }
                             }
                         }
                     }
@@ -78,9 +107,47 @@
             .textarea-desc {
                 margin-top: 4px;
             }
+            .input-port {
+                .ant-input-number {
+                    width: 100% !important;
+                    .ant-input-number-handler-wrap {
+                        display: none;
+                    }
+                }
+            }
         }
         .ant-modal-footer {
             height: 32px;
         }
     }
-}
+}
+.ant-table-body::-webkit-scrollbar {/*滚动条整体样式*/
+    width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
+    height: 4px;
+}
+.ant-table-body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+    border-radius: 5px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    background: rgba(0,0,0,0.2);
+}
+.ant-table-body::-webkit-scrollbar-track {/*滚动条里面轨道*/
+    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    border-radius: 0;
+    background: rgba(0,0,0,0.1);
+}
+
+.custom-filter-dropdown {
+    padding: 8px;
+    border-radius: 6px;
+    background: #fff;
+    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
+  }
+  
+  .custom-filter-dropdown input {
+    width: 130px;
+    margin-right: 8px;
+  }
+  
+  .highlight {
+    color: #f50;
+  }

app/components/datasource/dataSourceBox.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Modal, Form, Row, Col, Input, Select, Icon, Menu, Dropdown } from 'antd'
+import { Modal, Form, Row, Col, Input, InputNumber, Select, Icon, Menu, Dropdown } from 'antd'
 const FormItem = Form.Item
 const SelectOption = Select.Option
 const OptionGroup = Select.OptGroup
@@ -18,9 +18,9 @@ const DataSourceBox = ({operation, dispatch, dataSource, visibleBox, hideBox, fo
 
     const okHandler = () => {
         if(operation == 'create') {
-            dispatch({ type: 'dataSource/addDataSource' });
+            dispatch({ type: 'dataSource/add' });
         }else if(operation == 'edit') {
-            dispatch({ type: 'dataSource/modifyDataSource' });
+            dispatch({ type: 'dataSource/modify' });
         }
         hideBox();
     }
@@ -75,26 +75,26 @@ const DataSourceBox = ({operation, dispatch, dataSource, visibleBox, hideBox, fo
                                 onChange={(e) => {
                                     dispatch({ type: 'dataSource/setNewModelField', name: 'address', value: e.target.value });
                                 }}
-                                addonBefore={
+                                prefix={
                                     <Dropdown
                                         trigger={['click']}
                                         overlay={dataSourceLinkMenu}
                                     >
-                                        <div style={{cursor: 'pointer'}}>导入<Icon type='down' /></div>
+                                        <div style={{cursor: 'pointer'}}><Icon type='down' /></div>
                                     </Dropdown>
                                 }
                             />
                         </FormItem>
                     </Col>
                     <Col span={5}>
-                        <FormItem label='端口' {...{
+                        <FormItem className='input-port' label='端口' {...{
                             labelCol: { span: 12 },
                             wrapperCol: { span: 12 }
                         }}>
-                            <Input
+                            <InputNumber
                                 value={dataSource.newOne.port}
-                                onChange={(e) => {
-                                    dispatch({ type: 'dataSource/setNewModelField', name: 'port', value: e.target.value });
+                                onChange={(value) => {
+                                    dispatch({ type: 'dataSource/setNewModelField', name: 'port', value: value });
                                 }}
                             />
                         </FormItem>

app/components/datasource/datasource.jsx

@@ -2,8 +2,9 @@ import React from 'react'
 import { Tabs, Input, Button, Table, Icon, Tag, Menu, Dropdown } from 'antd'
 const { TabPane } = Tabs
 const { Search } = Input
-import DataSourceBox from './dataSourceBox'
 import { connect } from 'dva'
+import { Link } from 'react-router-dom'
+import DataSourceBox from './dataSourceBox'
 import dataSource from '../../models/dataSource'
 import './dataSource.less'
 
@@ -13,7 +14,9 @@ class DataSource extends React.Component {
         this.state = {
             operation: 'create', // 打开数据编辑界面的类型
             visibleBox: false, // 数据编辑界面显示标识
-            selectedCode: -1 // 当前选中的table行code
+            selectedCode: -1, // 当前选中的table行code
+            filterDropdownVisible: false,
+            search: {} // 搜索条件
         }
     };
 
@@ -30,10 +33,25 @@ class DataSource extends React.Component {
         });
     }
 
+    onInputChange = (name, value) => {
+        const { search } = this.state;
+        let newSearch = Object.assign({}, search );
+        newSearch[name] = value;
+        this.setState({ search: newSearch });
+    }
+
+    onSearch = () => {
+        const { search } = this.state;
+        const reg = new RegExp(search.name, 'gi');
+        this.setState({
+          filterDropdownVisible: false
+        });
+      }
+
     render() {
         
         const { dataSource, dispatch } = this.props;
-        const { visibleBox, operation, selectedCode } = this.state;
+        const { search, visibleBox, operation, selectedCode } = this.state;
         
         console.log(dataSource.list);
         const moreOperatingMenu = (
@@ -46,23 +64,48 @@ class DataSource extends React.Component {
                     }}>
                     <Icon type="info-circle-o" />属性设置
                 </Menu.Item>
-                <Menu.Item
-                    onClick={(e) => {
-                        let selectedModel = dataSource.list.find((i) => { return i.code == selectedCode })
-                        this.showColumnBox();
-                    }}>
-                    <Icon type="table" />数据列设置
+                <Menu.Item>
+                    {/* <Link to='/dataSource/1111'> */}
+                        <Icon type="home" /><Icon type="table" />数据列设置
+                    {/* </Link> */}
                 </Menu.Item>
                 <Menu.Item><Icon type="search" />预览数据</Menu.Item>
                 <Menu.Item><Icon type="lock" />权限设置</Menu.Item>
                 <Menu.Divider />
-                <Menu.Item><Icon type="delete" />删除</Menu.Item>
+                <Menu.Item
+                    onClick={(e) => {
+                        let selectedModel = dataSource.list.find((i) => { return i.code == selectedCode })
+                        dispatch({ type: 'dataSource/delete', model: selectedModel });
+                    }}
+                ><Icon type="delete" />删除</Menu.Item>
             </Menu>
         );
         const columns = [{
             title: '名称',
             dataIndex: 'name',
             key: 'name',
+            width: 100,
+            sorter: (a, b) => a.name.localeCompare(b.name, 'zh-Hans-CN', {sensitivity: 'accent'}),
+            filterDropdown: (
+                <div className="custom-filter-dropdown">
+                    <Input
+                        ref={ele => this.searchInput = ele}
+                        placeholder="Search name"
+                        value={this.state.search.name}
+                        onChange={(e) => { this.onInputChange('name', e.target.value) }}
+                        onPressEnter={this.onSearch}
+                    />
+                    <Button type="primary" onClick={this.onSearch}>Search</Button>
+                </div>
+            ),
+            className: `column-${this.state.search.name?'filtered':'nofiltered'}`,
+            filterIcon: <Icon type="smile-o"/>,
+            filterDropdownVisible: this.state.filterDropdownVisible,
+            onFilterDropdownVisibleChange: (visible) => {
+                this.setState({
+                    filterDropdownVisible: visible,
+                }, () => this.searchInput && this.searchInput.focus());
+            },
             render: (text, record) => {
                 return <div className='datasource-name'>
                     <div className={`datasource-type type-${record.type.key}`}></div>
@@ -73,6 +116,7 @@ class DataSource extends React.Component {
             title: '标签',
             dataIndex: 'tags',
             key: 'tag',
+            width: 150,
             render: (text, record) => {
                 text=text.join(',');
                 let tags = text ? text.split(',').map((t, i) => {
@@ -85,20 +129,24 @@ class DataSource extends React.Component {
         }, {
             title: '说明',
             dataIndex: 'description',
-            key: 'description'
+            key: 'description',
+            width: 200
         }, {
             title: '创建人',
             dataIndex: 'creator',
-            key: 'creator'
+            key: 'creator',
+            width: 100
         }, {
             title: '创建时间',
             dataIndex: 'createTime',
             key: 'createTime',
-            render: (text, record) => text.format('yyyy-MM-dd hh:mm:ss')
+            render: (text, record) => text.format('yyyy-MM-dd hh:mm:ss'),
+            width: 100
         }, {
             title: '图表',
             dataIndex: 'chartSum',
-            key: 'chartSum'
+            key: 'chartSum',
+            width: 80
         }, {
             title: '操作',
             key: 'action',
@@ -107,6 +155,7 @@ class DataSource extends React.Component {
                     <Icon type="setting" />
                 </Dropdown>
             ),
+            width: 80
         }];
         const data = [{
             key: '1',
@@ -135,6 +184,9 @@ class DataSource extends React.Component {
                 defaultActiveKey="1"
                 tabBarExtraContent={
                     <div className='datasource-tabs-tools'>
+                        <Button onClick={()=>{
+                            dispatch({type: 'dataSource/testData'});
+                        }}>测试数据</Button>
                         <Search
                             placeholder="请输入关键字"
                             onSearch={value => console.log(value)}
@@ -143,7 +195,9 @@ class DataSource extends React.Component {
                             dispatch({ type: 'dataSource/resetNewModel' });
                             this.showDataSourceBox('create')}
                         }>
-                            <Icon type="plus" />添加数据源
+                            {/* <Link to='./'> */}
+                                <Icon type="plus" />添加数据源
+                            {/* </Link> */}
                         </Button>
                         <DataSourceBox operation={operation} visibleBox={visibleBox} hideBox={this.hideBox} />
                     </div>
@@ -156,6 +210,8 @@ class DataSource extends React.Component {
                         dataSource={dataSource.list}
                         loading={false}
                         size='small'
+                        scroll={{x: false, y: 471}} // TODO 需要计算
+                        pagination={false}
                         onRow={(record) => {
                             return {
                                 onClick: () => {this.setState({ selectedCode:  record.code})}

app/models/chartDesigner.js

@@ -52,25 +52,17 @@ export default {
 			{ value: 'owner', name: '创建人' },
 			{ value: 'anyone', name: '所有人' }
         ],
-        allDataSource: [
-			{ id: 'd1', name: '数据源1' },
-			{ id: 'd2', name: '数据源2' },
-			{ id: 'd3', name: '数据源3' },
-			{ id: 'd4', name: '数据源4' },
-			{ id: 'd5', name: '数据源5' },
-			{ id: 'd6', name: '数据源6' },
-		],
         header: {
             label: '标题'
         },
         baseConfig: {
             dataSource: {
-                key: 'd4',
-                label: '数据源4'
+                key: '',
+                label: ''
             },
             viewType: {
-                key: 'bar',
-                label: '柱状图'
+                key: '',
+                label: ''
             }
         },
         preparing: {

app/models/dataSource.js

@@ -3,40 +3,34 @@ export default {
     state: {
         origin: { type:{key:'',label:''}, address:'', port:'', dbName:'', table:[], userName:'', password:'', desc:'' },
         newOne: {},
-        list: [{
-            key: 'c1',
-            code: 'd0001',
-            name: '1',
-            type: {key: 'oracle', label: 'ORACLE'},
-            address: '2',
-            port: '3',
-            table: ['aa', 'b'],
-            creator: 'zhuth',
-            createTime: new Date(),
-            userName: '2222',
-            password: 'aaaww',
-            tags: ['tttt', 'accc'],
-            desc: ' dddddddddddddddddddddd'
-        }, {
-            key: 'c2',
-            code: 'd0002',
-            name: 'aldjalsdal',
-            type: {key: 'oracle', label: 'ORACLE'},
-            address: '2',
-            port: '3',
-            table: ['aa', 'b'],
-            creator: 'zhuth',
-            createTime: new Date(),
-            userName: '2222',
-            password: 'aaaww',
-            tags: ['tttt', 'accc'],
-            desc: ' dddddddddddddddddddddd'
-        }],
+        list: [],
         public: [],
         my: []
     },
     reducers: {
-        addDataSource(state, action) {
+        testData(state, action) {
+            let list = state.list;
+            for(let i = 0; i < 4; i++) {
+                let newOne = {
+                    name: 'aldjalsdal',
+                    type: {key: 'oracle', label: 'ORACLE'},
+                    address: '2',
+                    port: '3',
+                    table: ['aa', 'b'],
+                    creator: 'zhuth',
+                    createTime: new Date(),
+                    userName: '2222',
+                    password: 'aaaww',
+                    tags: ['tttt', 'accc'],
+                    desc: ' dddddddddddddddddddddd'
+                };
+                newOne.key = new Date().getMilliseconds()+(Math.random()*100).toFixed(0)+i;
+                newOne.code = new Date().getMilliseconds()+(Math.random()*100).toFixed(0);
+                list.push(newOne);
+            }
+            return Object.assign({}, state, {list});
+        },
+        add(state, action) {
             let newOne = Object.assign({}, state.newOne);
             let list = state.list;
             newOne.key = new Date().getMilliseconds()+(Math.random()*100).toFixed(0);
@@ -46,7 +40,7 @@ export default {
             list.push(newOne);
             return Object.assign({}, state, {list});
         },
-        modifyDataSource(state, action) {
+        modify(state, action) {
             const { newOne } = state;
             let list = state.list;
             for(let i = 0; i < list.length; i++) {
@@ -57,6 +51,17 @@ export default {
             }
             return Object.assign({}, state, {list});
         },
+        delete(state, action) {
+            const { model } = action;
+            let { list } = state;
+            for(let i = 0; i < list.length; i++) {
+                if(list[i].code == model.code) {
+                    list.splice(i, 1);
+                }
+            }
+            return Object.assign({}, state, {list});
+
+        },
         setNewModelField(state, action) {
             const { name, value } = action;
             let newOne = state.newOne;

app/routes/mainLayout.js

@@ -6,6 +6,8 @@ import Navigator from '../components/common/navigator'
 import Welcome from '../components/myPage/welcome'
 import ChartDesigner from '../components/chartDesigner/layout'
 import DataSource from '../components/datasource/dataSource'
+import DataColumn from '../components/datasource/dataColumn'
+
 import './mainLayout.less';
 
 const MainLayout = (history) => {
@@ -19,6 +21,7 @@ const MainLayout = (history) => {
                     <Route exact path='/' component={Welcome}/>
                     <Route path='/chartDesigner' component={ChartDesigner}/>
                     <Route path='/dataSource' component={DataSource}/>
+                    <Route path='/dataSourceDetail' component={DataSource}/>
                 </Switch>
             </Content>
         </Layout>