重新设计数据源详细页面结构、调整文件结构/调整filterBox类别多选逻辑

src/components/chart/distributeBox.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Modal, Layout, Card, Table, Col, Row, Button, Input, Icon, Tag, Checkbox } from 'antd'
 import { connect } from 'dva'
 import FilterBox from '../common/filterBox/filterBox'
-import AccessObjectBox from '../datasource/accessObjectBox'
+import AccessObjectBox from '../common/accessObjectBox/accessObjectBox'
 import moment from 'moment'
 import './distributeBox.less'
 const { Content } = Layout

src/components/chart/list.jsx

@@ -9,7 +9,7 @@ import ChooseDataSourceBox from './chooseDataSourceBox'
 import moment from 'moment'
 import Ellipsis from 'ant-design-pro/lib/Ellipsis'
 import 'ant-design-pro/dist/ant-design-pro.css'
-import GroupSelector from '../datasource/groupSelector'
+import GroupSelector from '../dataSource/groupSelector'
 import Thumbnail from './thumbnail'
 import DistributeBox from './distributeBox';
 import TransferBox from '../common/selectUserBox/selectUserBox'
@@ -164,7 +164,7 @@ class ChartList extends React.Component {
                             <Row className='thumb' onClick={l.access ? () => {
                                 dispatch({ type: 'chartDesigner/reset' });
                                 dispatch({ type: 'main/redirect', path: '/chart/' + l.code });
-                                dispatch({ type: 'main/addRecentRecord', tarId: l.code, recordType: 0});
+                                dispatch({ type: 'recent/addRecentRecord', tarId: l.code, recordType: 0});
                             } : () => {}}>
                                 {!l.access && <div className='deny-body'>
                                     <div className='deny-tip'>无数据权限</div>

src/components/chart/resolveChartOption.js

@@ -53,12 +53,12 @@ export default (option, silent, thumbnail) => {
     // x轴
     _option.xAxis ? _option.xAxis[0] = {
         ..._option.xAxis[0],
-        show: !thumbnail
+        // show: !thumbnail
     } : void 0;
     // y轴
     _option.yAxis ? _option.yAxis[0] = {
         ..._option.yAxis[0],
-        show: !thumbnail
+        // show: !thumbnail
     } : void 0;
     // 图形
     if(viewType ==='bar' ) { // 柱状图

src/components/common/filterBox/filterBox.jsx

@@ -225,12 +225,11 @@ class FilterBox extends React.Component {
             field = <DatePicker onChange={(value) => {this.changeFilterValue(filter, value, index)}}/>
         }else if(type === 'categorical') {
             field = (<Select 
-                mode={(operator==='in' || operator === 'noIn' ) ? 'multiple' : ''}
+                mode={(operator==='contain' || operator === 'notContain' ) ? 'multiple' : 'single'}
                 showSearch
                 notFoundContent={fetching ? <Spin size="small" /> : '无'}
                 onFocus={() => {this.fetchColumnData(column)}}
-                // onChange={(value) => {this.changeFilterValue(filter, value, index)}}
-                onBlur={(value) => {this.changeFilterValue(filter, value, index)}}
+                onChange={(value) => {this.changeFilterValue(filter, value, index)}}
             >
                 { columnData.map((s, i) => {
                     return <SelectOption key={i} value={s}>{s}</SelectOption>

src/components/common/filterBox/filterOperators.js

@@ -100,13 +100,13 @@ export default {
         value: "=",
         label: "等于"
     }, {
-        value: "in",
+        value: "contain",
         label: "包含"
     }, {
         value: "<>",
         label: "不等于"
     }, {
-        value: "noIn",
+        value: "notContain",
         label: "不包含"
     }, {
         value: "null",

src/components/dashboard/list.jsx

@@ -3,7 +3,7 @@ import { Layout, Button, Icon, Input, Menu, Dropdown, Card, Col, Row } from 'ant
 import { connect } from 'dva'
 import moment from 'moment'
 import TransferBox from '../common/selectUserBox/selectUserBox';
-import AccessObjectBox from '../datasource/accessObjectBox'
+import AccessObjectBox from '../common/accessObjectBox/accessObjectBox'
 import Thumbnail from './thumbnail'
 import './list.less'
 import DeleteBox from '../common/deleteBox/deleteBox'
@@ -122,7 +122,7 @@ class DashboardList extends React.Component {
                             <Row className='thumb' onClick={() => {
                                 dispatch({ type: 'dashboardDesigner/reset' });
                                 dispatch({ type: 'main/redirect', path: '/dashboard/' + l.code });
-                                dispatch({ type: 'main/addRecentRecord', tarId: l.code, recordType: 1});
+                                dispatch({ type: 'recent/addRecentRecord', tarId: l.code, recordType: 1});
                             }}>
                                 <Thumbnail type={l.type} code={l.code} option={l.chartOption} thumbnail={l.thumbnail}/>
                             </Row>

src/components/dashboardDesigner/header.jsx

@@ -59,7 +59,7 @@ class Header extends React.Component {
                             console.log(dashboardDesigner.dirty);
                             if(!dashboardDesigner.dirty) {
                                 dispatch({ type: 'dashboardDesigner/reset' });
-                                dispatch({ type: 'main/goBack', path: '/chart' });
+                                dispatch({ type: 'main/goBack', path: '/dashboard' });
                             }
                         }}>
                             <Icon type='left' />返回

src/components/datasource/dataSource.jsx → src/components/dataSource/list.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import { Layout, Row, Col, Input, Button, Table, Icon, Menu, Dropdown, Card, Breadcrumb, Popover, Tree, Tag } from 'antd'
 import { connect } from 'dva'
-import './dataSource.less'
 import { dateFormat } from '../../utils/baseUtils'
 import GroupSelector from './groupSelector'
 import TransferBox from '../common/selectUserBox/selectUserBox'
 import DeleteBox from '../common/deleteBox/deleteBox'
 import DataPreview from '../common/dataPreview/dataPreview'
+import './list.less'
 const { Content } = Layout
 const { Search } = Input
 const { TreeNode } = Tree
@@ -439,7 +439,7 @@ class DataSource extends React.Component {
                                             dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ type +'/create/base'}});
                                         }}>
                                             { currentUser.role === 'admin' && <Menu.Item key='database'>数据库</Menu.Item>}
-                                            <Menu.Item key='file'>文件</Menu.Item>
+                                            <Menu.Item disabled key='file'>文件</Menu.Item>
                                         </Menu>
                                     )} trigger={['click']}>
                                         <Button>

src/components/datasource/accessConfig.jsx → src/components/dataSourceDetail/accessConfig.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { connect } from 'dva'
 import { Layout, Card, Row, Col, Table, Input, Checkbox, Button, Switch, Icon, Tag } from 'antd'
 import FilterBox from '../common/filterBox/filterBox'
-import AccessObjectBox from './accessObjectBox'
+import AccessObjectBox from '../common/accessObjectBox/accessObjectBox'
 import moment from 'moment'
 import './accessConfig.less'
 const { Content } = Layout
@@ -110,7 +110,7 @@ class DataSourceAccessConfig extends React.Component{
     }
     
     render() {
-        const { dataSourcePolicy, dataSource, dispatch } = this.props;
+        const { dataSourcePolicy, dataSourceDetail,  dispatch } = this.props;
         const { visibleAccessObjectBox, visiblePolicyRuleBox, currentPolicy } = this.state;
         
         const polices = dataSourcePolicy.list;
@@ -119,9 +119,9 @@ class DataSourceAccessConfig extends React.Component{
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = (this.state.filterLabel || '').replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
         
-        // let owner = user.list.find(l => l.code === dataSource.newOne.creator); // 数据源拥有者
+        // let owner = user.list.find(l => l.code === dataSourceDetail.creator); // 数据源拥有者
         // console.log(owner);
-        const columnData = dataSource.newOne.columns ? dataSource.newOne.columns.filter(c => c.using).map(c => ({
+        const columnData = dataSourceDetail.columns ? dataSourceDetail.columns.filter(c => c.using).map(c => ({
             key: c.key,
             label: c.alias,
             name: c.name,
@@ -285,7 +285,7 @@ class DataSourceAccessConfig extends React.Component{
                             }}
                         />
                     </Card>
-                    <FilterBox key={Math.random()} type='dataSource' code={dataSource.newOne.code} columns={columnData} filterData={currentPolicy.filters} visibleFilterBox={visiblePolicyRuleBox} hideFilterBox={this.hidePolicyRuleBox} createFilters={this.createFilters} />
+                    <FilterBox key={Math.random()} type='dataSource' code={dataSourceDetail.code} columns={columnData} filterData={currentPolicy.filters} visibleFilterBox={visiblePolicyRuleBox} hideFilterBox={this.hidePolicyRuleBox} createFilters={this.createFilters} />
                     <AccessObjectBox key={Math.random()} visibleBox={visibleAccessObjectBox} hideBox={this.hideAccessObjectBox} okHandler={this.setAccessObject} group={group} geren={geren} />
                 </Content>
             </Layout>
@@ -293,8 +293,8 @@ class DataSourceAccessConfig extends React.Component{
     }
 }
         
-function mapStateToProps({ present: { user, dataSourcePolicy, dataSource } }) {
-    return { user, dataSourcePolicy, dataSource }
+function mapStateToProps({ present: { user, dataSourcePolicy, dataSourceDetail } }) {
+    return { user, dataSourcePolicy, dataSourceDetail }
 }
 
 export default connect(mapStateToProps)(DataSourceAccessConfig);

src/components/datasource/baseConfig.jsx → src/components/dataSourceDetail/baseConfig.jsx

@@ -6,20 +6,13 @@ const SelectOption = Select.Option
 
 class DataSourceBaseConfig extends React.Component {
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            timeout: null
-        }
-    }
-
     componentDidMount() {
         const { dispatch } = this.props;
         dispatch({ type: 'dataSource/remoteGroupList' });
     }
 
     render() {
-        const { dataSource, dispatch } = this.props;
+        const { dataSource, dataSourceDetail, dispatch } = this.props;
 
         const formItemLayout = {
             labelCol: { span: 4 },
@@ -28,7 +21,7 @@ class DataSourceBaseConfig extends React.Component {
     
         let getGroup = () => {
             const { groupList } = dataSource;
-            const { group } = dataSource.newOne;
+            const { group } = dataSourceDetail;
             let g1 = groupList.filter(g => g.code+'' === group+'')[0];
             if(!g1) {
                 return ['-1']
@@ -46,25 +39,18 @@ class DataSourceBaseConfig extends React.Component {
                 <Divider orientation="left">基本配置</Divider>
                 <FormItem label='数据源名称' {...formItemLayout}>
                     <Input
-                        value={dataSource.newOne.name}
+                        value={dataSourceDetail.name}
                         onBlur={(e) => {
-                            dispatch({ type: 'dataSource/setNewModelField', name: 'name', value: e.target.value });
-                            dispatch({ type: 'dataSource/remoteModify' });
+                            // dispatch({ type: 'dataSourceDetail/setField', name: 'name', value: e.target.value });
+                            // dispatch({ type: 'dataSource/remoteModify' });
                         }}
                         onChange={(e) => {
-                            dispatch({ type: 'dataSource/setNewModelField', name: 'name', value: e.target.value });
-                            // const timeout = this.state.timeout;
-                            // timeout && window.clearTimeout(timeout);
-                            // this.setState({
-                            //     timeout: window.setTimeout(() => {
-                            //         dispatch({ type: 'dataSource/remoteModify' });
-                            //     }, 500)
-                            // });
+                            dispatch({ type: 'dataSourceDetail/setField', name: 'name', value: e.target.value });
                         }}>
                     </Input>
                 </FormItem>
                 {
-                    dataSource.newOne.type==='file'?(
+                    dataSourceDetail.type==='file'?(
                         <div>
                             <Divider orientation="left">文件</Divider>
                             <div>此处显示文件名</div>
@@ -75,16 +61,9 @@ class DataSourceBaseConfig extends React.Component {
                             <FormItem label='数据库类型' {...formItemLayout}>
                                 <Select
                                     disabled={true}
-                                    value={dataSource.newOne.dbType}
+                                    value={dataSourceDetail.dbType}
                                     onChange={(value) => {
-                                        dispatch({ type: 'dataSource/setNewModelField', name: 'dbType', value: value} );
-                                        const timeout = this.state.timeout;
-                                        timeout && window.clearTimeout(timeout);
-                                        this.setState({
-                                            timeout: window.setTimeout(() => {
-                                                dispatch({ type: 'dataSource/remoteModify' });
-                                            }, 500)
-                                        });
+                                        dispatch({ type: 'dataSourceDetail/setField', name: 'dbType', value: value} );
                                     }}
                                 >
                                     <SelectOption value='oracle'>
@@ -109,16 +88,9 @@ class DataSourceBaseConfig extends React.Component {
                                     }}>
                                         <Input
                                             disabled={true}
-                                            value={dataSource.newOne.address}
+                                            value={dataSourceDetail.address}
                                             onChange={(e) => {
-                                                dispatch({ type: 'dataSource/setNewModelField', name: 'address', value: e.target.value });
-                                                const timeout = this.state.timeout;
-                                                timeout && window.clearTimeout(timeout);
-                                                this.setState({
-                                                    timeout: window.setTimeout(() => {
-                                                        dispatch({ type: 'dataSource/remoteModify' });
-                                                    }, 500)
-                                                });
+                                                dispatch({ type: 'dataSourceDetail/setField', name: 'address', value: e.target.value });
                                             }}
                                         />
                                     </FormItem>
@@ -130,16 +102,9 @@ class DataSourceBaseConfig extends React.Component {
                                     }}>
                                         <InputNumber
                                             disabled={true}
-                                            value={dataSource.newOne.port}
+                                            value={dataSourceDetail.port}
                                             onChange={(value) => {
-                                                dispatch({ type: 'dataSource/setNewModelField', name: 'port', value: value });
-                                                const timeout = this.state.timeout;
-                                                timeout && window.clearTimeout(timeout);
-                                                this.setState({
-                                                    timeout: window.setTimeout(() => {
-                                                        dispatch({ type: 'dataSource/remoteModify' });
-                                                    }, 500)
-                                                });
+                                                dispatch({ type: 'dataSourceDetail/setField', name: 'port', value: value });
                                             }}
                                         />
                                     </FormItem>
@@ -148,16 +113,9 @@ class DataSourceBaseConfig extends React.Component {
                             <FormItem label='数据库名' {...formItemLayout}>
                                 <Input
                                     disabled={true}
-                                    value={dataSource.newOne.dbName}
+                                    value={dataSourceDetail.dbName}
                                     onChange={(e) => {
-                                        dispatch({ type: 'dataSource/setNewModelField', name: 'dbName', value: e.target.value });
-                                        const timeout = this.state.timeout;
-                                        timeout && window.clearTimeout(timeout);
-                                        this.setState({
-                                            timeout: window.setTimeout(() => {
-                                                dispatch({ type: 'dataSource/remoteModify' });
-                                            }, 500)
-                                        });
+                                        dispatch({ type: 'dataSourceDetail/setField', name: 'dbName', value: e.target.value });
                                     }}
                                 />
                             </FormItem>
@@ -169,16 +127,9 @@ class DataSourceBaseConfig extends React.Component {
                                     }}>
                                         <Input
                                             disabled={true}
-                                            value={dataSource.newOne.userName}
+                                            value={dataSourceDetail.userName}
                                             onChange={(e) => {
-                                                dispatch({ type: 'dataSource/setNewModelField', name: 'userName', value: e.target.value });
-                                                const timeout = this.state.timeout;
-                                                timeout && window.clearTimeout(timeout);
-                                                this.setState({
-                                                    timeout: window.setTimeout(() => {
-                                                        dispatch({ type: 'dataSource/remoteModify' });
-                                                    }, 500)
-                                                });
+                                                dispatch({ type: 'dataSourceDetail/setField', name: 'userName', value: e.target.value });
                                             }}
                                         />
                                     </FormItem>
@@ -190,17 +141,10 @@ class DataSourceBaseConfig extends React.Component {
                                     }}>
                                         <Input
                                             disabled={true}
-                                            // value={dataSource.newOne.password}
+                                            // value={dataSourceDetail.password}
                                             onChange={(e) => {
                                                 let value = e.target.value;
-                                                dispatch({ type: 'dataSource/setNewModelField', name: 'password', value: value });
-                                                const timeout = this.state.timeout;
-                                                timeout && window.clearTimeout(timeout);
-                                                this.setState({
-                                                    timeout: window.setTimeout(() => {
-                                                        dispatch({ type: 'dataSource/remoteModify' });
-                                                    }, 500)
-                                                });
+                                                dispatch({ type: 'dataSourceDetail/setField', name: 'password', value: value });
                                                 e.target.removeAttribute('value')
                                             }}
                                         />
@@ -234,15 +178,7 @@ class DataSourceBaseConfig extends React.Component {
                         })}
                         onChange={(value, items) => {
                             let v = value[1] !== undefined ? value[1] : value[0];
-                            dispatch({ type: 'dataSource/setNewModelField', name: 'group', value: v });
-                            
-                            const timeout = this.state.timeout;
-                            timeout && window.clearTimeout(timeout);
-                            this.setState({
-                                timeout: window.setTimeout(() => {
-                                    dispatch({ type: 'dataSource/remoteModify' });
-                                }, 500)
-                            });
+                            dispatch({ type: 'dataSourceDetail/setField', name: 'group', value: v });
                         }}
                         
                     >
@@ -251,12 +187,12 @@ class DataSourceBaseConfig extends React.Component {
                 <FormItem className='textarea-desc' label='说明' {...formItemLayout}>
                     <Input.TextArea
                         autosize={{ minRows: 2, maxRows: 5 }}
-                        value={dataSource.newOne.description}
+                        value={dataSourceDetail.description}
                         onChange={(e) => {
-                            dispatch({ type: 'dataSource/setNewModelField', name: 'description', value: e.target.value });
+                            dispatch({ type: 'dataSourceDetail/setField', name: 'description', value: e.target.value });
                         }}
                         onBlur={(e) => {
-                            dispatch({ type: 'dataSource/remoteModify' });
+                            // dispatch({ type: 'dataSource/remoteModify' });
                         }}
                     />
                 </FormItem>
@@ -265,8 +201,4 @@ class DataSourceBaseConfig extends React.Component {
     }
 }
 
-function mapStateToProps({ present: {dataSource, dataConnect} }) {
-    return { dataSource, dataConnect }
-}
-
-export default connect(mapStateToProps)(DataSourceBaseConfig);
+export default connect(({ present: { dataSource, dataSourceDetail } }) => ({ dataSource, dataSourceDetail }))(DataSourceBaseConfig);

src/components/datasource/columnConfig.jsx → src/components/dataSourceDetail/columnConfig.jsx

@@ -25,7 +25,7 @@ class DataSourceColumnConfig extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            widths: [ 80, 150, 150, 80, 80 ],
+            widths: [ 80, 300, 200, 100, 100 ],
             visibleConfirm: false
         }
     }
@@ -37,7 +37,7 @@ class DataSourceColumnConfig extends React.Component {
     };
 
     handleVisibleChange = (visible) => {
-        const { columns } = this.props.dataSource.newOne;
+        const { columns } = this.props.dataSourceDetail;
         this.setState({ visibleConfirm: visible && (columns && columns.length > 0) });
     }
 
@@ -51,22 +51,22 @@ class DataSourceColumnConfig extends React.Component {
 
     render() {
 
-        const { dataSource, dispatch, loading } = this.props;
+        const { dataSourceDetail, dispatch, fetching } = this.props;
         const { widths } = this.state;
 
         const columns = [{
             title: <div><Checkbox
-                style={{ margin: '0 8px 0 0', display: dataSource.newOne.columns ? (dataSource.newOne.columns.length > 0 ? 'inline-block' : 'none') : 'none'}}
-                indeterminate={dataSource.newOne.columns ? (dataSource.newOne.columns.filter(c => c.using).length > 0 && dataSource.newOne.columns.filter(c => c.using).length < dataSource.newOne.columns.length) : false}
-                checked={dataSource.newOne.columns ? (dataSource.newOne.columns.filter(c => c.using).length === dataSource.newOne.columns.length) : false}
+                style={{ margin: '0 8px 0 0', display: dataSourceDetail.columns ? (dataSourceDetail.columns.length > 0 ? 'inline-block' : 'none') : 'none'}}
+                indeterminate={dataSourceDetail.columns ? (dataSourceDetail.columns.filter(c => c.using).length > 0 && dataSourceDetail.columns.filter(c => c.using).length < dataSourceDetail.columns.length) : false}
+                checked={dataSourceDetail.columns ? (dataSourceDetail.columns.filter(c => c.using).length === dataSourceDetail.columns.length) : false}
                 onChange={(e) => {
                     let target = e.target;
-                    let columns = dataSource.newOne.columns ? dataSource.newOne.columns.map(c => {
+                    let columns = dataSourceDetail.columns ? dataSourceDetail.columns.map(c => {
                         c.using = target.checked;
                         return c;
                     }) : [];
 
-                    dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
+                    dispatch({ type: 'dataSourceDetail/setField', name: 'columns', value: columns });
                 }}
             />启用</div>,
             dataIndex: 'using',
@@ -77,14 +77,14 @@ class DataSourceColumnConfig extends React.Component {
                 onChange={(e) => {
                     let target = e.target;
                     let key = target.dataKey;
-                    let columns = dataSource.newOne.columns.map(c => {
+                    let columns = dataSourceDetail.columns.map(c => {
                         if(c.key === key) {
                             c.using = target.checked;
                         }
                         return c;
                     });
 
-                    dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
+                    dispatch({ type: 'dataSourceDetail/setField', name: 'columns', value: columns });
                 }}
                 checked={v}
             />
@@ -114,7 +114,7 @@ class DataSourceColumnConfig extends React.Component {
                         style={{ width: '100%' }}
                         value={text}
                         onChange={(value) => {
-                            let columns = dataSource.newOne.columns.map(c => {
+                            let columns = dataSourceDetail.columns.map(c => {
                                 if(c.key === record.key) {
                                     c.columnType = value;
                                     c.groupable = c.columnType === 'categorical';
@@ -122,7 +122,7 @@ class DataSourceColumnConfig extends React.Component {
                                 }
                                 return c;
                             });
-                            dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
+                            dispatch({ type: 'dataSourceDetail/setField', name: 'columns', value: columns });
                         }}
                     >
                     {
@@ -141,17 +141,17 @@ class DataSourceColumnConfig extends React.Component {
             }
         }, {
             title: <div><Checkbox
-                style={{ margin: '0 8px 0 0', display: dataSource.newOne.columns ? (dataSource.newOne.columns.length > 0 ? 'inline-block' : 'none') : 'none'}}
-                indeterminate={dataSource.newOne.columns ? (dataSource.newOne.columns.filter(c => c.groupable).length > 0 && dataSource.newOne.columns.filter(c => c.groupable).length < dataSource.newOne.columns.length) : false}
-                checked={dataSource.newOne.columns ? (dataSource.newOne.columns.filter(c => c.groupable).length === dataSource.newOne.columns.length) : false}
+                style={{ margin: '0 8px 0 0', display: dataSourceDetail.columns ? (dataSourceDetail.columns.length > 0 ? 'inline-block' : 'none') : 'none'}}
+                indeterminate={dataSourceDetail.columns ? (dataSourceDetail.columns.filter(c => c.groupable).length > 0 && dataSourceDetail.columns.filter(c => c.groupable).length < dataSourceDetail.columns.length) : false}
+                checked={dataSourceDetail.columns ? (dataSourceDetail.columns.filter(c => c.groupable).length === dataSourceDetail.columns.length) : false}
                 onChange={(e) => {
                     let target = e.target;
-                    let columns = dataSource.newOne.columns ? dataSource.newOne.columns.map(c => {
+                    let columns = dataSourceDetail.columns ? dataSourceDetail.columns.map(c => {
                         c.groupable = target.checked;
                         return c;
                     }) : [];
 
-                    dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
+                    dispatch({ type: 'dataSourceDetail/setField', name: 'columns', value: columns });
                 }}
             />允许分组</div>,
             dataIndex: 'groupable',
@@ -162,30 +162,30 @@ class DataSourceColumnConfig extends React.Component {
                 onChange={(e) => {
                     let target = e.target;
                     let key = target.dataKey;
-                    let columns = dataSource.newOne.columns.map(c => {
+                    let columns = dataSourceDetail.columns.map(c => {
                         if(c.key === key) {
                             c.groupable = target.checked;
                         }
                         return c;
                     });
 
-                    dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
+                    dispatch({ type: 'dataSourceDetail/setField', name: 'columns', value: columns });
                 }}
                 checked={v}
             />
         }, {
             title: <div><Checkbox
-                style={{ margin: '0 8px 0 0', display: dataSource.newOne.columns ? (dataSource.newOne.columns.length > 0 ? 'inline-block' : 'none') : 'none'}}
-                indeterminate={dataSource.newOne.columns ? (dataSource.newOne.columns.filter(c => c.filterable).length > 0 && dataSource.newOne.columns.filter(c => c.filterable).length < dataSource.newOne.columns.length) : false}
-                checked={dataSource.newOne.columns ? (dataSource.newOne.columns.filter(c => c.filterable).length === dataSource.newOne.columns.length) : false}
+                style={{ margin: '0 8px 0 0', display: dataSourceDetail.columns ? (dataSourceDetail.columns.length > 0 ? 'inline-block' : 'none') : 'none'}}
+                indeterminate={dataSourceDetail.columns ? (dataSourceDetail.columns.filter(c => c.filterable).length > 0 && dataSourceDetail.columns.filter(c => c.filterable).length < dataSourceDetail.columns.length) : false}
+                checked={dataSourceDetail.columns ? (dataSourceDetail.columns.filter(c => c.filterable).length === dataSourceDetail.columns.length) : false}
                 onChange={(e) => {
                     let target = e.target;
-                    let columns = dataSource.newOne.columns ? dataSource.newOne.columns.map(c => {
+                    let columns = dataSourceDetail.columns ? dataSourceDetail.columns.map(c => {
                         c.filterable = target.checked;
                         return c;
                     }) : [];
 
-                    dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
+                    dispatch({ type: 'dataSourceDetail/setField', name: 'columns', value: columns });
                 }}
             />允许过滤</div>,
             dataIndex: 'filterable',
@@ -196,14 +196,14 @@ class DataSourceColumnConfig extends React.Component {
                 onChange={(e) => {
                     let target = e.target;
                     let key = target.dataKey;
-                    let columns = dataSource.newOne.columns.map(c => {
+                    let columns = dataSourceDetail.columns.map(c => {
                         if(c.key === key) {
                             c.filterable = target.checked;
                         }
                         return c;
                     });
 
-                    dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
+                    dispatch({ type: 'dataSourceDetail/setField', name: 'columns', value: columns });
                 }}
                 checked={v}
             />
@@ -214,13 +214,13 @@ class DataSourceColumnConfig extends React.Component {
         //     width: 50,
         //     className: 'column-groupable',
         //     render: (value, record) => <Switch disabled={record.columnType!=='categorical'} checked={value} onChange={(checked) => {
-        //         let columns = dataSource.newOne.columns.map(c => {
+        //         let columns = dataSourceDetail.columns.map(c => {
         //             if(c.key === record.key) {
         //                 c.groupable = checked;
         //             }
         //             return c;
         //         });
-        //         dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
+        //         dispatch({ type: 'dataSourceDetail/setField', name: 'columns', value: columns });
         //     }}/>
         // }, {
         //     title: '允许分段',
@@ -233,13 +233,13 @@ class DataSourceColumnConfig extends React.Component {
         //         checked={value}
         //         defaultChecked={true}
         //         onChange={(checked) => {
-        //             let columns = dataSource.newOne.columns.map(c => {
+        //             let columns = dataSourceDetail.columns.map(c => {
         //                 if(c.key === record.key) {
         //                     c.bucketizable = checked;
         //                 }
         //                 return c;
         //             });
-        //             dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
+        //             dispatch({ type: 'dataSourceDetail/setField', name: 'columns', value: columns });
         //         }}
         //     />
         }, {
@@ -254,14 +254,14 @@ class DataSourceColumnConfig extends React.Component {
                         placeholder={record.description ? record.description.substring(0, 10) : record.name}
                         onChange={(e) => {
                             const value = e.target.value;
-                            let columns = dataSource.newOne.columns.map(c => {
+                            let columns = dataSourceDetail.columns.map(c => {
                                 if(c.key === record.key) {
                                     c['alias'] = value;
                                 }
                                 return c;
                             });
                             
-                            dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
+                            dispatch({ type: 'dataSourceDetail/setField', name: 'columns', value: columns });
                         }}
                     >
                     </Input>
@@ -283,24 +283,24 @@ class DataSourceColumnConfig extends React.Component {
         return (
             <div>
                 {
-                    dataSource.newOne.type==='database'?(
+                    dataSourceDetail.type==='database'?(
                         <div>
                             <Form size='small'>
                                 <Divider orientation="left">数据对象</Divider>
                                 <FormItem className='textarea-target'>
                                     <Input.TextArea
-                                        disabled={!dataSource.newOne.address}
-                                        placeholder={dataSource.newOne.address ? '输入表名或查询SQL，注意不能以分号结尾' : '请返回上一步选择数据库连接'}
+                                        disabled={!dataSourceDetail.address}
+                                        placeholder={dataSourceDetail.address ? '输入表名或查询SQL，注意不能以分号结尾' : '请返回上一步选择数据库连接'}
                                         autosize={{ minRows: 3 }}
-                                        value={dataSource.newOne.target}
+                                        value={dataSourceDetail.target}
                                         onChange={(e) => {
-                                            dispatch({ type: 'dataSource/setNewModelInvalidSQL', value: false });
-                                            dispatch({ type: 'dataSource/setNewModelField', name: 'target', value: e.target.value });
+                                            dispatch({ type: 'dataSource/setInvalidSQL', value: false });
+                                            dispatch({ type: 'dataSourceDetail/setField', name: 'target', value: e.target.value });
                                         }}
                                     />
                                 </FormItem>
                                 <div className='buttons'>
-                                    <div className='errormessage' style={{ cursor: dataSource.newOne.invalidSQL ? 'text' : 'default', opacity: dataSource.newOne.invalidSQL ? '1' : '0' }}>未查询到列数据，请检查SQL是否正确</div>
+                                    <div className='errormessage' style={{ cursor: dataSourceDetail.invalidSQL ? 'text' : 'default', opacity: dataSourceDetail.invalidSQL ? '1' : '0' }}>未查询到列数据，请检查SQL是否正确</div>
                                     <Tooltip
                                         title={
                                             <div>
@@ -320,7 +320,7 @@ class DataSourceColumnConfig extends React.Component {
                                                         this.setState({
                                                             visibleConfirm: false
                                                         });
-                                                        dispatch({ type: 'dataSource/importNewModelColumns', cover: true });
+                                                        dispatch({ type: 'dataSourceDetail/importColumns', cover: true });
                                                     }}>
                                                         <span>全部覆盖</span>
                                                     </button>
@@ -328,7 +328,7 @@ class DataSourceColumnConfig extends React.Component {
                                                         this.setState({
                                                             visibleConfirm: false
                                                         });
-                                                        dispatch({ type: 'dataSource/importNewModelColumns', cover: false });
+                                                        dispatch({ type: 'dataSourceDetail/importColumns', cover: false });
                                                     }}>
                                                         <span>保留重复</span>
                                                     </button>
@@ -339,15 +339,13 @@ class DataSourceColumnConfig extends React.Component {
                                         onVisibleChange={this.handleVisibleChange}
                                         trigger='click'
                                     >
-                                        <Button disabled={!dataSource.newOne.address || loading.models.dataSource} onClick={() => {
-                                            if(!dataSource.newOne.columns || dataSource.newOne.columns.length === 0) {
-                                                dispatch({ type: 'dataSource/importNewModelColumns', cover: true });
+                                        <Button disabled={!dataSourceDetail.address || fetching} onClick={() => {
+                                            if(!dataSourceDetail.columns || dataSourceDetail.columns.length === 0) {
+                                                dispatch({ type: 'dataSourceDetail/importColumns', cover: true });
                                             }
                                         }}>
-                                        {
-                                            loading.models.dataSource ? <Icon type="loading" /> : ''
-                                        }
-                                        {'获取数据列'}
+                                        {fetching && <Icon type="loading" theme="outlined" />}
+                                        获取数据列
                                         </Button>
                                     </Tooltip>
                                 </div>
@@ -360,7 +358,7 @@ class DataSourceColumnConfig extends React.Component {
                     className='table-columnconfig'
                     bordered
                     components={this.components}
-                    dataSource={dataSource.newOne.columns}
+                    dataSource={dataSourceDetail.columns}
                     columns={columns}
                     locale={{
                         emptyText: '未连接到数据对象'
@@ -371,8 +369,13 @@ class DataSourceColumnConfig extends React.Component {
     }
 }
 
-function mapStateToProps({ present: { dataSource, dataConnect, loading } }) {
-    return { dataSource, dataConnect, loading }
+function mapStateToProps({ present: { dataSourceDetail, loading } }) {
+    const fetching = loading.effects['dataSourceDetail/importColumns'];
+    console.log(loading);
+    return {
+        fetching,
+        dataSourceDetail
+    }
 }
 
 export default connect(mapStateToProps)(DataSourceColumnConfig);

src/components/datasource/columnType.json → src/components/dataSourceDetail/columnType.json

@@ -7,7 +7,7 @@
     "columnType": "time",
     "label": "时间"
 }, {
-    "dataType": ["String", "BigDecimal", "Double", "Long", "Float", "Int", "Boolean", "Byte", "Short"],
+    "dataType": ["String", "BigDecimal", "Double", "Long", "Float", "Int", "Boolean", "Byte", "Short", null],
     "columnType": "categorical",
     "label": "类别"
 }, {
@@ -15,11 +15,11 @@
     "columnType": "scale",
     "label": "标量"
 }, {
-    "dataType": ["String", "BigDecimal", "Double", "Long", "Float", "Int"],
+    "dataType": ["BigDecimal", "Double", "Long", "Float", "Int"],
     "columnType": "ordinal",
     "label": "序值"
 }, {
-    "dataType": ["String", "BigDecimal", "Double", "Long", "Float", "Int", "Boolean", "Byte", "Short"],
+    "dataType": ["String", "BigDecimal", "Double", "Long", "Float", "Int", "Boolean", "Byte", "Short", null],
     "columnType": "string",
     "label": "文本"
 }]

src/components/datasource/dataSourceDetail.jsx → src/components/dataSourceDetail/content.jsx

@@ -6,37 +6,22 @@ import BaseConfig from './baseConfig'
 import ColumnConfig from './columnConfig'
 import AccessConfig from './accessConfig'
 import OtherConfig from './otherConfig'
-import './dataSourceDetail.less'
+import './content.less'
 const { Content } = Layout
 const Step = Steps.Step
 const TabPane = Tabs.TabPane
 
-class DataSourceDetail extends React.Component {
+class DataSourceDetailContent extends React.Component {
 
     constructor(props) {
         super(props);
         this.state = {
-            mode: props.match.params.code&&props.match.params.code==='create'?'create':'modify',
-            type: props.match.params.type,
-            code: props.match.params.code,
-            tab: props.match.params.tab,
+            mode: props.params.code && props.params.code==='create'?'create':'modify',
+            type: props.params.type,
+            code: props.params.code,
+            tab: props.params.tab,
             // current: ['base', 'column', 'access', 'other'].indexOf(props.match.params.tab)
-            current: ['base', 'column', 'access', 'other'].indexOf(props.match.params.tab)
-        }
-    }
-
-    componentDidMount() {
-        const { dispatch } = this.props;
-        const { type, code } = this.props.match.params;
-        
-        if(code !== 'create') {
-            dispatch({ type: 'dataSource/remoteDetail', code: code })
-            dispatch({ type: 'dataSourcePolicy/fetchList', dataSourceCode: code });
-        }else {
-            dispatch({ type: 'dataSource/setNewModelFields', fields: [
-                { name: 'type', value: type },
-                { name: 'code', value: code }
-            ] });
+            current: ['base', 'column', 'other'].indexOf(props.params.tab)
         }
     }
 
@@ -57,42 +42,41 @@ class DataSourceDetail extends React.Component {
     }
 
     render() {
-        const { dispatch, dataSource, dataConnect } = this.props;
-        const { type, mode, code, tab, current } = this.state;
+        const { dispatch, dataSourceDetail, dataConnect } = this.props;
+        const { type, code, tab } = dataSourceDetail;
+        const { mode, current } = this.state;
+
         const steps = [{
             tabName: 'base',
             title: type === 'database' ? '数据连接配置' : '文件选择',
-            content: <DataConnectConfig mode={mode} />
+            content: <DataConnectConfig mode={mode} />,
         }, {
             tabName: 'column',
             title: '数据列配置',
-            content: <ColumnConfig mode={mode} />
+            content: <ColumnConfig mode={mode} />,
         }, {
-        //     tabName: 'access',
-        //     title: '数据开放策略',
-        //     content: <AccessConfig mode={mode} />
-        // }, {
             tabName: 'other',
             title: '完成',
-            content: <OtherConfig mode={mode} />
+            content: <OtherConfig mode={mode} />,
         }];
+
         const tabs = [{
             tabName: 'base',
             title: '属性配置',
-            content: <BaseConfig mode={mode} />
+            content: <BaseConfig mode={mode} />,
         }, {
             tabName: 'column',
             title: '数据列配置',
-            content: <ColumnConfig mode={mode} />
+            content: <ColumnConfig mode={mode} />,
         }, {
             tabName: 'access',
             title: '数据开放策略',
-            content: <AccessConfig mode={mode} />
+            content: <AccessConfig mode={mode} />,
         }];
         return (
             <Layout className='layout-datasource-detail'>
                 <Content className='content'>
-                    {mode === 'create' ? (<div>
+                    {mode === 'create' ? (<div className='datasource-steps-container'>
                         <Steps className='steps-body' current={current}>
                             {steps.map((item,index) => <Step key={'step-' + index} title={item.title} />)}
                         </Steps>
@@ -109,16 +93,16 @@ class DataSourceDetail extends React.Component {
                             {
                                 current < steps.length - 1
                                 && <Button disabled={
-                                    ( current === 0 && ( ( type === 'database' && !dataSource.newOne.address ) || ( type === 'file' && +1 === 2) ) ) ||
-                                    (current === 1 && (!dataSource.newOne.columns || dataSource.newOne.columns.length === 0))
+                                    ( current === 0 && ( ( type === 'database' && !dataSourceDetail.address ) || ( type === 'file' && +1 === 2) ) ) ||
+                                    (current === 1 && (!dataSourceDetail.columns || dataSourceDetail.columns.length === 0))
                                 } type="primary" onClick={() => this.next()}>下一步</Button>
                             }
                             {
                                 current === steps.length - 1
                                 && <Button disabled={
-                                    !dataSource.newOne.name || 
+                                    !dataSourceDetail.name || 
                                     !dataConnect.selected ||
-                                    (!dataSource.newOne.columns || dataSource.newOne.columns.length === 0)
+                                    (!dataSourceDetail.columns || dataSourceDetail.columns.length === 0)
                                 } type="primary" onClick={() => {
                                     dispatch({ type: 'dataSource/remoteAdd' })
                                 }}>完成</Button>
@@ -130,16 +114,8 @@ class DataSourceDetail extends React.Component {
                                 dispatch({ type: 'main/redirect', path: '/datasource/' + type + '/' + code + '/' + key })
                                 this.setState({
                                     tab: key,
-                                    current: ['base', 'column', 'access', 'other'].indexOf(key)
                                 })
                             }}
-                            tabBarExtraContent={
-                                current === 1 ? (<Button disabled={ ( ( type === 'database' && !dataSource.newOne.name) || ( type === 'file' && +1 === 2) ) ||
-                                    (!dataSource.newOne.columns || dataSource.newOne.columns.length === 0)
-                                } type="primary" onClick={() => {
-                                    dispatch({ type: 'dataSource/remoteModify' });
-                                }}>保存修改</Button>) : null
-                            }
                         >
                             {tabs.map((item, index) => {
                                 return <TabPane className='tab-datasource' key={item.tabName} tab={item.title}>
@@ -154,8 +130,4 @@ class DataSourceDetail extends React.Component {
     }
 }
 
-function mapStateToProps({ present: { dataSource, dataConnect } }) {
-    return { dataSource, dataConnect }
-}
-
-export default connect(mapStateToProps)(DataSourceDetail);
+export default connect(({ present: { dataSourceDetail, dataConnect } }) => ({ dataSourceDetail, dataConnect }))(DataSourceDetailContent);

src/components/datasource/dataSourceDetail.less → src/components/dataSourceDetail/content.less

@@ -1,11 +1,38 @@
 .layout-datasource-detail {
+    height: 100%;
     .content {
+        height: 100%;
         padding: 10px;
+        .datasource-steps-container {
+            height: 100%;
+            padding-top: 32px;
+            padding-bottom: 60px;
+            .ant-steps {
+                margin-top: -32px;
+            }
+        }
+        &>.ant-tabs {
+            height: 100%;
+            padding-top: 40px;
+            &>.ant-tabs-bar {
+                margin: -40px 0 0 0;
+            }
+            &>.ant-tabs-content {
+                height: 100%;
+            }
+        }
         .steps-body {
+            height: 40px;
+            display: flex;
+            align-items: center;
+            border: 1px solid #CCCCCC;
             padding: 0 20%;
         }
         .steps-content,.tab-datasource {
+            height: 100%;
+            overflow: auto;
             padding: 10px 30px;
+            border: 1px solid #CCCCCC;
             .ant-divider {
                 margin: 10px 0;
                 .ant-divider-inner-text {
@@ -125,6 +152,9 @@
             }
         }
         .steps-action {
+            height: 50px;
+            display: flex;
+            align-items: center;
             float: right;
             button {
                 margin-left: 8px;

src/components/datasource/dataConnectConfig.jsx → src/components/dataSourceDetail/dataConnectConfig.jsx

@@ -16,7 +16,7 @@ class DataConnectConfig extends React.Component {
     }
 
     render() {
-        const { dataSource, dataConnect, dispatch } = this.props;
+        const { dataSourceDetail, dataConnect, dispatch } = this.props;
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = dataConnect.filterLabel.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
         
@@ -55,7 +55,7 @@ class DataConnectConfig extends React.Component {
                         onClick={() => {
                             // 选中项设置
                             dispatch({ type: 'dataConnect/setSelected', selected: l });
-                            dispatch({ type: 'dataSource/setNewModelFields', fields: [
+                            dispatch({ type: 'dataSourceDetail/setFields', fields: [
                                 { name: 'connectCode', value: l.code },
                                 { name: 'dbType', value: l.dbType },
                                 { name: 'address', value: l.address },
@@ -105,13 +105,13 @@ class DataConnectConfig extends React.Component {
         return (
             <Form className='form-base' size='small'>
                 {
-                    dataSource.newOne.type==='file'?(
+                    dataSourceDetail.type==='file'?(
                         <div>
                             <Divider orientation="left">选择文件</Divider>
                             <UploadDragger
                                 className='upload'
                                 name='file' // 上传到后台的文件名
-                                fileList={dataSource.newOne.fileList}
+                                fileList={dataSourceDetail.fileList}
                                 accept='application/vnd.ms-excel,.csv' // 只支持excel和csv格式文件
                                 action='//jsonplaceholder.typicode.com/posts/'
                                 headers={{authorization: 'authorization-text'}}
@@ -144,7 +144,7 @@ class DataConnectConfig extends React.Component {
                                         fileList = [];
                                         message.error(`${file.name} 文件上传失败.`);
                                     }
-                                    dispatch({ type: 'dataSource/setNewModelField', name: 'fileList', value: fileList })
+                                    dispatch({ type: 'dataSourceDetail/setField', name: 'fileList', value: fileList })
                                 }}
                             >
                                 <p className="ant-upload-drag-icon">
@@ -183,8 +183,4 @@ class DataConnectConfig extends React.Component {
     }
 }
 
-function mapStateToProps({ present: {dataSource, dataConnect} }) {
-    return { dataSource, dataConnect }
-}
-
-export default connect(mapStateToProps)(DataConnectConfig);
+export default connect(({ present: { dataSourceDetail, dataConnect } }) => ({ dataSourceDetail, dataConnect }))(DataConnectConfig);

src/components/dataSourceDetail/header.jsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Icon, Button } from 'antd'
+import { connect } from 'dva'
+
+class DataSourceDetailHeader extends React.Component {
+
+    render() {
+        const { dataSourceDetail, dispatch } = this.props;
+        const { code, type, name, columns } = dataSourceDetail;
+
+        return (
+            <div className='dataSourcedetail-header'>
+                <div className='header-item toolbar-back'>
+                    <Button onClick={(e) => {
+                        dispatch({ type: 'main/redirect', path: '/datasource' });
+                    }}>
+                        <Icon type='left' />返回
+                    </Button>
+                    {code && <Button disabled={ ( ( type === 'database' && !name) || ( type === 'file' && +1 === 2) ) ||
+                        (!columns || columns.length === 0)
+                    } onClick={() => {
+                        dispatch({ type: 'dataSource/remoteModify' });
+                    }}>
+                        <Icon type='save' />保存
+                    </Button>}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default connect(({ present: { dataSourceDetail } }) => ({ dataSourceDetail }))(DataSourceDetailHeader);

src/components/dataSourceDetail/layout.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import { connect } from 'dva'
+import { Icon, Layout, Spin } from 'antd'
+import DataSourceDetailHeader from './header'
+import DataSourceDetailContent from './content'
+import './layout.less'
+const { Header, Content } = Layout
+
+
+class DataSourceDetail extends React.Component {
+
+    componentDidMount() {
+        const { dispatch } = this.props;
+        const { type, code } = this.props.match.params;
+        
+        dispatch({ type: 'dataSourceDetail/reset' });
+        if(code !== 'create') {
+            dispatch({ type: 'dataSource/remoteDetail', code: code })
+            dispatch({ type: 'dataSourcePolicy/fetchList', dataSourceCode: code });
+        }else {
+            dispatch({ type: 'dataSourceDetail/setFields', fields: [
+                { name: 'type', value: type }
+            ] });
+        }
+    }
+
+    render() {
+        return <Layout className='datasourcedetail-layout'>
+            <Header>
+                <DataSourceDetailHeader updateThumbnail={this.updateThumbnail} />
+            </Header>
+            <Content style={{ height: 0 }}>
+                <DataSourceDetailContent params={this.props.match.params}/>
+            </Content>
+            <div style={{ display:'none', position: 'absolute', height: '100%', width: '100%', zIndex: '4', background: 'rgba(51,51,51,.1)' }}>
+                <Spin style={{ display: 'inline-block', position: 'absolute', top: '50%', left: '50%', margin: '-10px' }} indicator={<Icon type="loading" style={{ fontSize: 24 }} spin />} />
+            </div>
+        </Layout>
+    }
+
+}
+
+export default connect(({ present: { dataSourceDetail } }) => ({ dataSourceDetail }))(DataSourceDetail)

src/components/dataSourceDetail/layout.less

@@ -0,0 +1,26 @@
+.datasourcedetail-layout {
+    height: 100%;
+    overflow: hidden;
+    &>.ant-layout-header {
+        background: none;
+        padding: 0 10px;
+        height: 40px;
+        line-height: 40px;
+        border-width: 1px 0;
+        border-style: solid;
+        border-color: #CCCCCC;
+    }
+    &>.ant-layout-content {
+        flex: 1;
+    }
+    .ant-layout-sider {
+        background: none;
+        border-width: 0 1px 0 1px;
+        border-style: solid;
+        border-color: #CCCCCC;
+        .ant-form-item {
+            margin-bottom: 0;
+        }
+    }
+}
+  

src/components/datasource/otherConfig.jsx → src/components/dataSourceDetail/otherConfig.jsx

@@ -3,7 +3,7 @@ import { Form, Input, Cascader } from 'antd'
 import { connect } from 'dva'
 const FormItem = Form.Item
 
-const OtherConfig = ({ dataSource, dataConnect, dispatch, mode }) => {
+const OtherConfig = ({ dataSourceDetail, dataSource, dataConnect, dispatch, mode }) => {
     
     dispatch({ type: 'dataSource/remoteGroupList' });
     
@@ -13,7 +13,7 @@ const OtherConfig = ({ dataSource, dataConnect, dispatch, mode }) => {
     };
 
     let getGroup = () => {
-        const { group } = dataSource.newOne;
+        const { group } = dataSourceDetail;
         const { groupList } = dataSource;
         let g1 = groupList.filter(g => g.code+'' === group+'')[0];
         if(!g1) {
@@ -31,8 +31,8 @@ const OtherConfig = ({ dataSource, dataConnect, dispatch, mode }) => {
         <Form className='form-base' size='small'>
             <FormItem label='数据源名称' {...formItemLayout}>
                 <Input
-                    value={dataSource.newOne.name}
-                    onChange={(e) => { dispatch({ type: 'dataSource/setNewModelField', name: 'name', value: e.target.value }) }}>
+                    value={dataSourceDetail.name}
+                    onChange={(e) => { dispatch({ type: 'dataSourceDetail/setField', name: 'name', value: e.target.value }) }}>
                 </Input>
             </FormItem>
             <FormItem label='所属分组' {...formItemLayout}>
@@ -58,7 +58,7 @@ const OtherConfig = ({ dataSource, dataConnect, dispatch, mode }) => {
 					})}
 					onChange={(value, items) => {
                         let v = value[1] !== undefined ? value[1] : value[0];
-                        dispatch({ type: 'dataSource/setNewModelField', name: 'group', value: v });
+                        dispatch({ type: 'dataSourceDetail/setField', name: 'group', value: v });
 					}}
 					
 				>
@@ -67,9 +67,9 @@ const OtherConfig = ({ dataSource, dataConnect, dispatch, mode }) => {
             <FormItem className='textarea-desc' label='说明' {...formItemLayout}>
                 <Input.TextArea
                     autosize={{ minRows: 2, maxRows: 5 }}
-                    value={dataSource.newOne.description}
+                    value={dataSourceDetail.description}
                     onChange={(e) => {
-                        dispatch({ type: 'dataSource/setNewModelField', name: 'description', value: e.target.value });
+                        dispatch({ type: 'dataSourceDetail/setField', name: 'description', value: e.target.value });
                     }}
                 />
             </FormItem>
@@ -77,8 +77,8 @@ const OtherConfig = ({ dataSource, dataConnect, dispatch, mode }) => {
     );
 }
 
-function mapStateToProps({ present: {dataSource, dataConnect} }) {
-    return { dataSource, dataConnect }
+function mapStateToProps({ present: {dataSource, dataSourceDetail, dataConnect} }) {
+    return { dataSource, dataSourceDetail, dataConnect }
 }
 
 export default connect(mapStateToProps)(OtherConfig);

src/index.js

@@ -2,11 +2,12 @@ import dva from 'dva'
 import undoable, { includeAction } from 'redux-undo'
 import indexRouter from './routes/router'
 import mainModel from './models/main'
-import chartDesigner from './models/chartDesigner'
 import dataSource from './models/dataSource'
+import dataSourceDetail from './models/dataSourceDetail'
 import dataConnect from './models/dataConnect'
-import dashboard from './models/dashboard'
 import chart from './models/chart'
+import chartDesigner from './models/chartDesigner'
+import dashboard from './models/dashboard'
 import dashboardDesigner from './models/dashboardDesigner';
 import userGroup from './models/userGroup'
 import user from './models/user'
@@ -36,6 +37,7 @@ app.use(createLoading());
 app.model(mainModel); // 通用action
 app.model(dataConnect); // 数据连接
 app.model(dataSource); // 数据源
+app.model(dataSourceDetail); // 数据源详细数据
 app.model(chart);  // 图表
 app.model(chartDesigner); // 图表设计
 app.model(dashboard);  //报告与看板

src/models/chartDesigner.js

@@ -24,6 +24,8 @@ function getBodyFilters(filters) {
             }else {
                 bodyFilter['value'] = v1;
             }
+        }else if(type === 'categorical' && (operator === 'contain' || operator === 'notContain')) {
+            bodyFilter['value'] = JSON.stringify(value1);
         }
         return bodyFilter;
     }); 
@@ -369,6 +371,7 @@ export default {
                     filters: getBodyFilters(filters)
                 };
                 
+                console.log('请求柱状图数据', body);
                 let res = yield call(service.fetch, {
                     url: URLS.CHART_BAR_OPTION,
                     body: body,
@@ -407,6 +410,8 @@ export default {
                     },
                     filters: getBodyFilters(filters)
                 };
+
+                console.log('请求饼图数据', body);
                 let res = yield call(service.fetch, {
                     url: URLS.CHART_PIE_OPTION,
                     body: body,
@@ -444,6 +449,8 @@ export default {
                     groups: lineConfig.groupBy && lineConfig.groupBy.key ? [lineConfig.groupBy.key] : [],
                     filters: getBodyFilters(filters)
                 };
+
+                console.log('请求折线图数据', body);
                 let res = yield call(service.fetch, {
                     url: URLS.CHART_LINE_OPTION,
                     body: body,
@@ -481,6 +488,8 @@ export default {
                     groups: scatterConfig.groupBy && scatterConfig.groupBy.key ? [scatterConfig.groupBy.key] : [],
                     filters: getBodyFilters(filters)
                 };
+
+                console.log('请求散点图数据', body);
                 let res = yield call(service.fetch, {
                     url: URLS.CHART_SCATTER_OPTION,
                     body: body,
@@ -517,6 +526,8 @@ export default {
                         pageSize: 999999,
                     }
                 };
+
+                console.log('请求表格数据', body);
                 let res = yield call(service.fetch, {
                     url: URLS.CHART_DATAVIEW_OPTION,
                     body: body,
@@ -554,6 +565,8 @@ export default {
                         pageSize: 999,
                     }
                 };
+
+                console.log('获得总体统计数据', body);
                 let res = yield call(service.fetch, {
                     url: URLS.CHART_AGGREGATETABLE_OPTION,
                     body: body,

src/models/dashboardDesigner.js

@@ -52,6 +52,8 @@ function getBodyFilters(filters) {
             }else {
                 bodyFilter['value'] = v1;
             }
+        }else if(type === 'categorical' && (operator === 'contain' || operator === 'notContain')) {
+            bodyFilter['value'] = JSON.stringify(value1);
         }
         return bodyFilter;
     }); 

src/models/dataSource.js

@@ -1,12 +1,10 @@
 import { message } from 'antd'
 import * as service from '../services/index'
 import URLS from '../constants/url'
-import DEFAULT_COLUMN_TYPE from './defaultColumnType.json'
 
 export default {
     namespace: 'dataSource',
     state: {
-        newOne: {},
         list: [],
         filterLabel: '',
         invalidSQL: false,
@@ -22,17 +20,6 @@ export default {
             const { list } = action;
             return { ...state, list };
         },
-        modify(state, action) {
-            const { newOne } = state;
-            let list = state.list;
-            for(let i = 0; i < list.length; i++) {
-                if(list[i].code === newOne.code) {
-                    list[i] = Object.assign({}, newOne);
-                    break;
-                }
-            }
-            return Object.assign({}, state, {list});
-        },
         delete(state, action) {
             const { model } = action;
             let { list } = state;
@@ -44,40 +31,10 @@ export default {
             return Object.assign({}, state, {list});
 
         },
-        setNewModelFields(state, action) {
-            const { fields } = action;
-            let newOne = state.newOne;
-            for(let i = 0; i < fields.length; i++) {
-                newOne[fields[i]['name']] = fields[i]['value'];
-            }
-            let obj = Object.assign({}, state, {newOne});
-            return obj;
-        },
-        setNewModelField(state, action) {
-            const { name, value } = action;
-            let newOne = state.newOne;
-            newOne[name] = value;
-            let obj = Object.assign({}, state, {newOne});
-            return obj;
-        },
-        setNewModel(state, action) {
-            const { model } = action;
-            let newOne = Object.assign({}, model);
-            return Object.assign({}, state, {newOne});
-        },
-        resetNewModel(state, action) {
-            return Object.assign({}, state, {newOne: {}});
-        },
         setFilterLabel(state, action) {
             const { label } = action;
             return Object.assign({}, state, {filterLabel: label});
         },
-        setNewModelInvalidSQL(state, action) {
-            const { value } = action;
-            let newOne = state.newOne;
-            newOne.invalidSQL = value;
-            return Object.assign({}, state, {newOne});
-        },
         groupList(state, action) {
             let data = action.data;
             return Object.assign({}, state, {groupList: data});
@@ -201,26 +158,27 @@ export default {
             
         },
         *remoteAdd(action, { select, call, put }) {
-            const dataSource = yield select(state => state.present.dataSource);
-            const model = dataSource.newOne;
+            const dataSourceDetail = yield select(state => state.present.dataSourceDetail);
+            const { name, description, target, tags, type, connectCode, address, port, dbType, dbName, userName,
+                password, columns, group } = dataSourceDetail;
             try {
                 const data = {
-                    dataName: model.name,
-                    note: model.description,
-                    loadObject: model.target,
-                    dataTag: model.tags,
-                    type: model.type,
+                    dataName: name,
+                    note: description,
+                    loadObject: target,
+                    dataTag: tags,
+                    type: type,
                     createBy: 'admin',
                     dbConfig: {
-                        id: model.connectCode,
-                        addrass: model.address,
-                        port: model.port,
-                        databaseType: model.dbType,
-                        dataName: model.dbName,
-                        userName: model.userName,
-                        passWord: model.password
+                        id: connectCode,
+                        addrass: address,
+                        port: port,
+                        databaseType: dbType,
+                        dataName: dbName,
+                        userName: userName,
+                        passWord: password
                     },
-                    columnConfig: model.columns.map((c, i) => {
+                    columnConfig: columns.map((c, i) => {
                         return {
                             columnName: c.name,
                             columnLable: c.alias || c.description || c.name,
@@ -233,7 +191,7 @@ export default {
                             remarks: c.description
                         }
                     }),
-                    connectorGroup: model.group ? model.group : '-1'
+                    connectorGroup: group ? group : '-1'
                 };
                 const res = yield call(service.fetch, {
                     url: URLS.DATASOURCE_ADD,
@@ -255,11 +213,7 @@ export default {
         *remoteDetail(action, { select, call, put }) {
             try {
                 const code = action.code;
-                const dataSource = yield select(state => state.present.dataSource);
-                const model = dataSource.newOne;
-                if((code + '') === (model.code + '')) {
-                    return;
-                }
+
                 const res = yield call(service.fetch, {
                     url: URLS.DATASOURCE_DETAIL,
                     body: code
@@ -303,7 +257,14 @@ export default {
                             }
                         })
                     }
-                    yield put({ type: 'setNewModel', model: data });
+                    let fields = [];
+                    for(let key in data) {
+                        fields.push({
+                            name: key,
+                            value: data[key]
+                        })
+                    }
+                    yield put({ type: 'dataSourceDetail/setFields', fields: fields });
                 }else {
                     message.error('数据源解析错误: ' + (res.err || res.data.msg));
                 }
@@ -313,84 +274,6 @@ export default {
                 yield put({ type: 'list', list: [] });
             }
         },
-        *importNewModelColumns(action, { select, call, put }) {
-            const dataSource = yield select(state => state.present.dataSource);
-            const sqlStr = dataSource.newOne.target;
-            const oldColumns = dataSource.newOne.columns;
-            const { cover } = action;
-            let body = {
-                id: dataSource.newOne.connectCode,
-                strSql: sqlStr
-            };
-            try{
-                const res = yield call(service.fetch, {
-                    url: URLS.DATASOURCE_QUERY_SQLCOLUMNS,
-                    body: body,
-                    timeout: 120000
-                });
-    
-                const getColumnType = (dataType) => {
-                    return DEFAULT_COLUMN_TYPE[dataType] || 'categorical';
-                }
-    
-                console.log('请求列数据', body, res);
-
-                if(!res.err && res.data.code > 0) {
-                    // let columns = res.data.data.map((d, i) => {
-                    //     return {
-                    //         key: i,
-                    //         using: true,
-                    //         name: d,
-                    //         alias: d.remarks ? d.remarks.substring(0, 10) : (d),
-                    //         dataType: d.columnType,
-                    //         columnType: getColumnType(d.columnType),
-                    //         // groupable: d.columnType === 'VARCHAR2',
-                    //         groupable: true,
-                    //         filterable: true,
-                    //         bucketizable: d.columnType === 'NUMBER',
-                    //         description: d.remarks
-                    //     }
-                    // });
-                    let columns = res.data.data.map((d, i) => {
-                        return {
-                            key: i,
-                            using: true,
-                            name: d.columnName,
-                            alias: d.columnName,
-                            dataType: d.columnType,
-                            columnType: getColumnType(d.columnType),
-                            groupable: d.columnType === 'String',
-                            filterable: true,
-                            // bucketizable: d.columnType === 'BigDecimal',
-                        }
-                    });
-                    yield put({ type: 'setNewModelInvalidSQL', value: columns.length === 0 });
-                    // yield put({ type: 'setNewModelField', name: 'columns', value: columns });
-                    if(cover) {
-                        yield put({ type: 'setNewModelField', name: 'columns', value: columns });
-                    }else {
-                        let mergeColumns = [];
-                        columns.forEach(c => {
-                            let tc = oldColumns.find(o => o.name === c.name );
-                            if(tc) {
-                                mergeColumns.push(tc);
-                            }else {
-                                mergeColumns.push(c); 
-                            }
-                        });
-                        yield put({ type: 'setNewModelField', name: 'columns', value: mergeColumns });
-                    }
-                }else {
-                    yield put({ type: 'setNewModelInvalidSQL', value: true });
-                    yield put({ type: 'setNewModelField', name: 'columns', value: [] });
-                }
-            }catch(e) {
-                console.log(body)
-                yield put({ type: 'setNewModelInvalidSQL', value: true });
-                yield put({ type: 'setNewModelField', name: 'columns', value: [] });
-                message.error('请求列数据错误: ' + e);
-            }
-        },
         *remoteDelete(action, { select, call, put }) {
             const dataSource = yield select(state => state.present.dataSource);
             const code = action.code;
@@ -419,28 +302,27 @@ export default {
         },
         *remoteModify(action, { select, call, put }) {
             try{
-                const dataSource = yield select(state => state.present.dataSource);
-                let model = action.model || dataSource.newOne;
-                const code = model.code;
+                const dataSourceDetail = yield select(state => state.present.dataSourceDetail);
+                const { code, name, description, target, type, group, address, port, dbType, dbName,userName, password, columns } = dataSourceDetail;
     
                 let data = {
                     dataId: code,
-                    dataName: model.name,
-                    note: model.description,
-                    loadObject: model.target,
-                    dataTag: model.tags,
-                    type: model.type,
+                    dataName: name,
+                    note: description,
+                    loadObject: target,
+                    dataTag: null,
+                    type: type,
                     createBy: 'admin',
-                    connectorGroup: model.group ? model.group : '-1',
-                    dbConfig: model.address ? {
-                        addrass: model.address,
-                        port: model.port,
-                        databaseType: model.dbType,
-                        dataName: model.dbName,
-                        userName: model.userName,
-                        passWord: model.password
+                    connectorGroup: group ? group : '-1',
+                    dbConfig: address ? {
+                        addrass: address,
+                        port: port,
+                        databaseType: dbType,
+                        dataName: dbName,
+                        userName: userName,
+                        passWord: password
                     } : '',
-                    columnConfig: model.columns ? model.columns.map((c, i) => {
+                    columnConfig: columns ? columns.map((c, i) => {
                         return {
                             columnName: c.name,
                             columnLable: c.alias || c.description || c.name,
@@ -461,14 +343,14 @@ export default {
                 console.log('修改数据源', data, res);
                 if(!res.err && res.data.code > 0) {
                     yield put({ type: 'fetchList', mandatory: true });
-                    message.success('修改成功');
+                    message.success('保存成功');
                 }else {
-                    message.error('修改失败: ' + (res.err || res.data.msg));
+                    message.error('保存失败: ' + (res.err || res.data.msg));
     
                 }
             }catch(e) {
                 console.log(e);
-                message.error('修改失败: ' + e);
+                message.error('保存失败: ' + e);
             }
         },
 

src/models/dataSourceDetail.js

@@ -0,0 +1,172 @@
+import { message } from 'antd'
+import * as service from '../services/index'
+import URLS from '../constants/url'
+import DEFAULT_COLUMN_TYPE from './defaultColumnType.json'
+
+export default {
+    namespace: 'dataSourceDetail',
+    state: {
+        originData: {
+            code: null,
+            name: '未命名',
+            type: null,
+            connectCode: null,
+            dbType: null,
+            dbName: null,
+            address: null,
+            port: null,
+            target: null,
+            creatorCode: null,
+            creatorName: null,
+            createTime: null,
+            userName: null,
+            password: null,
+            description: '',
+            group: '-1',
+            columns: [],
+        },
+        code: null,
+        name: '未命名',
+        type: null,
+        connectCode: null,
+        dbType: null,
+        dbName: null,
+        address: null,
+        port: null,
+        target: null,
+        creatorCode: null,
+        creatorName: null,
+        createTime: null,
+        userName: null,
+        password: null,
+        description: '',
+        group: '-1',
+        columns: [],
+    },
+    reducers: {
+        setField(state, action) {
+            const { name, value } = action;
+            let obj = {};
+            obj[name] = value;
+            let newState = Object.assign({}, state, obj);
+            return Object.assign({}, newState, {dirty: true});
+        },
+        setFields(state, action) {
+            const { fields } = action;
+            let obj = {};
+            fields.map(f => (obj[f.name] = f.value));
+            let newState = Object.assign({}, state, obj);
+            return Object.assign({}, newState, {dirty: true});
+        },
+        silentSetField(state, action) {
+            const { name, value } = action;
+            let obj = {};
+            obj[name] = value;
+            let newState = Object.assign({}, state, obj);
+            return newState;
+        },
+        silentSetFields(state, action) {
+            const { fields } = action;
+            let obj = {};
+            fields.map(f => (obj[f.name] = f.value));
+            let newState = Object.assign({}, state, obj);
+            return newState;
+        },
+        reset(state, action) {
+            let newState = Object.assign({}, state, state.originData);
+            return Object.assign({}, newState);
+        },
+        setDirty(state, action) {
+            const { dirty } = action;
+            let newState = Object.assign({}, state, { dirty });
+            return newState;
+        },
+        setInvalidSQL(state, action) {
+            const { value } = action;
+            return { ...state, invalidSQL: value };
+        },
+    },
+    effects: {
+        *importColumns(action, { select, call, put }) {
+            const dataSourceDetail = yield select(state => state.present.dataSourceDetail);
+            const sqlStr = dataSourceDetail.target;
+            const oldColumns = dataSourceDetail.columns;
+            const { cover } = action;
+            let body = {
+                id: dataSourceDetail.connectCode,
+                strSql: sqlStr
+            };
+            try{
+                const res = yield call(service.fetch, {
+                    url: URLS.DATASOURCE_QUERY_SQLCOLUMNS,
+                    body: body,
+                    timeout: 120000
+                });
+    
+                const getColumnType = (dataType) => {
+                    return DEFAULT_COLUMN_TYPE[dataType] || 'categorical';
+                }
+    
+                console.log('请求列数据', body, res);
+
+                if(!res.err && res.data.code > 0) {
+                    let columns = res.data.data.map((d, i) => {
+                        return {
+                            key: i,
+                            using: true,
+                            name: d.columnName,
+                            alias: d.columnName,
+                            dataType: d.columnType,
+                            columnType: getColumnType(d.columnType),
+                            groupable: d.columnType === 'String',
+                            filterable: true,
+                        }
+                    });
+                    yield put({ type: 'setInvalidSQL', value: columns.length === 0 });
+                    // yield put({ type: 'setField', name: 'columns', value: columns });
+                    if(cover) {
+                        yield put({ type: 'setField', name: 'columns', value: columns });
+                    }else {
+                        let mergeColumns = [];
+                        columns.forEach(c => {
+                            let tc = oldColumns.find(o => o.name === c.name );
+                            if(tc) {
+                                mergeColumns.push(tc);
+                            }else {
+                                mergeColumns.push(c); 
+                            }
+                        });
+                        yield put({ type: 'setField', name: 'columns', value: mergeColumns });
+                    }
+                }else {
+                    yield put({ type: 'setInvalidSQL', value: true });
+                    yield put({ type: 'setField', name: 'columns', value: [] });
+                }
+            }catch(e) {
+                console.log(body)
+                yield put({ type: 'setInvalidSQL', value: true });
+                yield put({ type: 'setField', name: 'columns', value: [] });
+                message.error('请求列数据错误: ' + e);
+            }
+        },
+    },
+    subscriptions: {
+        setup({ dispatch, history }) {
+            return history.listen(({ pathname }) => {
+                if(pathname.startsWith('/datasource')) {
+                    const temp = pathname.split('/');
+                    if(temp.length === 5) {
+                        const type = temp[2];
+                        const code = temp[3];
+                        const tab = temp[4];
+                        dispatch({ type: 'setFields', fields: [
+                            { name: 'type', value: type },
+                            { name: 'code', value: code },
+                            { name: 'tab', value: tab },
+                        ] });
+                    }
+                }
+            })
+        }
+    }
+};

src/routes/mainLayout.js

@@ -5,8 +5,7 @@ import { Redirect } from 'dva/router'
 import Navigator from '../components/common/navigator'
 import HomePage from '../components/homePage/homePage'
 import Loading from '../components/common/loading/loading'
-import DataSourceDetail from '../components/datasource/dataSourceDetail'
-import DataSource from '../components/datasource/dataSource'
+import DataSource from '../components/dataSource/list'
 import Dashboard from '../components/dashboard/list'
 import Chart from '../components/chart/list'
 import './mainLayout.less';
@@ -25,7 +24,6 @@ const MainLayout = ({ isAuthenticated }) => {
                 <Switch>
                     <Route sensitive path='/demo' component={Demo}/>
                     <Route sensitive path='/home' component={HomePage}/>
-                    <Route sensitive path='/datasource/:type/:code/:tab' component={DataSourceDetail}/>
                     <Route sensitive path='/datasource' component={DataSource}/>
                     <Route sensitive path='/dashboard' component={Dashboard} />
                     <Route sensitive path='/chart' component={Chart} />

src/routes/router.js

@@ -5,6 +5,7 @@ import PrivateRoute from './privateRoute'
 import Login from '../components/common/login/login'
 import Register from '../components/common/login/register'
 import MainLayout from './mainLayout'
+import DataSourceDetail from '../components/dataSourceDetail/layout'
 import ChartDesigner from '../components/chartDesigner/layout'
 import DashboardDesigner from '../components/dashboardDesigner/layout'
 // 由于 antd 组件的默认文案是英文，所以需要修改为中文
@@ -22,6 +23,7 @@ function RouterConfig({ history }) {
                     <Route sensitive path='/register' component={Register} />
                     <Route sensitive path='/demo' component={Demo} />
                     <Route sensitive path='/xiaomi' component={Xiaomi} />
+                    <PrivateRoute sensitive path='/datasource/:type/:code/:tab' component={DataSourceDetail}/>
                     <PrivateRoute sensitive path='/chart/:code' component={ChartDesigner} />
                     <PrivateRoute sensitive path='/dashboard/:code/' component={DashboardDesigner} />
                     <PrivateRoute path='/' component={MainLayout} />