数据源界面数据流控制调整

app/components/datasource/baseConfig.jsx

@@ -24,7 +24,7 @@ const DataSourceBaseConfig = ({ dataSource, dispatch }) => {
             onClick={() => {
                 dispatch({ type: 'dataSource/setNewModelField', name: 'address', value: '1111adddd' });
                 dispatch({ type: 'dataSource/setNewModelField', name: 'port', value: '1234' });
-                dispatch({ type: 'dataSource/setNewModelField', name: 'type', value: {
+                dispatch({ type: 'dataSource/setNewModelField', name: 'dbType', value: {
                     key: 'oracle',
                     label: 'ORACLE'
                 } });

app/components/datasource/columnConfig.jsx

@@ -43,7 +43,7 @@ class DataSourceColumnConfig extends React.Component {
             />启用</div>,
             dataIndex: 'using',
             key: 'using',
-            width: 100,
+            width: 50,
             render: (v, r) => <Checkbox
                 dataKey={r.key}
                 onChange={(e) => {
@@ -64,27 +64,41 @@ class DataSourceColumnConfig extends React.Component {
             title: '列名',
             dataIndex: 'name',
             key: 'name',
-            width: 180
+            width: 80
         }, {
             title: '别名',
             dataIndex: 'alias',
             key: 'alias',
-            width: 180,
+            width: 100,
             render: (text, record) => {
-                return (<EditableCell
-                    dispatch={dispatch}
-                    dataSource={dataSource}
-                    fieldName='alias'
-                    dataKey={record.key}
-                    type='input'
-                    value={text}
-                />)
+                return(
+                    <Input
+                        value={text}
+                        onChange={(e) => {
+                            const value = e.target.value;
+                            let columns = dataSource.newOne.columns.map(c => {
+                                if(c.key == record.key) {
+                                    c['alias'] = value;
+                                }
+                                return c;
+                            });
+                            
+                            dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
+                        }}
+                    >
+                    </Input>
+                )
             }
         }, {
-            title: '类型',
-            dataIndex: 'type',
-            key: 'type',
-            width: 120,
+            title: '数据类型',
+            dataIndex: 'columnType',
+            key: 'columnType',
+            width: 80
+        }, {
+            title: '分析类型',
+            dataIndex: 'dataType',
+            key: 'dataType',
+            width: 80,
             render: (text, record) => {
                 return (
                     <Select
@@ -93,21 +107,35 @@ class DataSourceColumnConfig extends React.Component {
                         onChange={(value) => {
                             let columns = dataSource.newOne.columns.map(c => {
                                 if(c.key == record.key) {
-                                    c.type = value;
-                                    c.groupable = c.type == 'categorical';
-                                    c.bucketizable = ['time', 'scale', 'ordinal'].indexOf(record.type) != -1;
+                                    c.dataType = value;
+                                    c.groupable = c.dataType == 'categorical';
+                                    c.bucketizable = ['time', 'scale', 'ordinal'].indexOf(record.dataType) != -1;
                                 }
                                 return c;
                             });
                             dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
                         }}
                     >
-                        <SelectOption value='index'>索引</SelectOption>
-                        <SelectOption value='time'>时间</SelectOption>
-                        <SelectOption value='categorical'>类别</SelectOption>
-                        <SelectOption value='scale'>标量</SelectOption>
-                        <SelectOption value='ordinal'>序值</SelectOption>
-                        <SelectOption value='string'>字符串</SelectOption>
+                    {
+                        [
+                            <SelectOption value='index' key='index'>索引</SelectOption>,
+                            <SelectOption value='time' key='time'>时间</SelectOption>,
+                            <SelectOption value='categorical' key='categorical'>类别</SelectOption>,
+                            <SelectOption value='scale' key='scale'>标量</SelectOption>,
+                            <SelectOption value='ordinal' key='ordinal'>序值</SelectOption>,
+                            <SelectOption value='string' key='string'>字符串</SelectOption>
+                        ].map((s, i) => {
+                            if(record.columnType=='VARCHAR2' && [0,2,5].indexOf(i) != -1) {
+                                return s;
+                            }else if(record.columnType=='DATE' && [1].indexOf(i) != -1) {
+                                return s;
+                            }else if(record.columnType=='NUMBER' && [0,2,3,4,5].indexOf(i) != -1) {
+                                return s;
+                            }else {
+                                return null
+                            }
+                        }).filter((s)=>s!=null)
+                    }
                     </Select>
                 )
             }
@@ -115,8 +143,9 @@ class DataSourceColumnConfig extends React.Component {
             title: '允许分组',
             dataIndex: 'groupable',
             key: 'groupable',
-            width: 100,
-            render: (value, record) => <Switch disabled={record.type!='categorical'} checked={value} onChange={(checked) => {
+            width: 50,
+            className: 'column-groupable',
+            render: (value, record) => <Switch disabled={record.dataType!='categorical'} checked={value} onChange={(checked) => {
                 let columns = dataSource.newOne.columns.map(c => {
                     if(c.key == record.key) {
                         c.groupable = checked;
@@ -129,29 +158,42 @@ class DataSourceColumnConfig extends React.Component {
             title: '允许分段',
             dataIndex: 'bucketizable',
             key: 'bucketizable',
-            width: 100,
-            render: (value, record) => <Switch disabled={['time', 'scale', 'ordinal'].indexOf(record.type)==-1} checked={value} onChange={(checked) => {
-                let columns = dataSource.newOne.columns.map(c => {
-                    if(c.key == record.key) {
-                        c.bucketizable = checked;
-                    }
-                    return c;
-                });
-                dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
-            }}/>
+            width: 50,
+            className: 'column-bucketizable',
+            render: (value, record) => <Switch
+                disabled={['time', 'scale', 'ordinal'].indexOf(record.dataType)==-1}
+                checked={value}
+                defaultChecked={true}
+                onChange={(checked) => {
+                    let columns = dataSource.newOne.columns.map(c => {
+                        if(c.key == record.key) {
+                            c.bucketizable = checked;
+                        }
+                        return c;
+                    });
+                    dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
+                }}
+            />
         }, {
             title: '备注',
             dataIndex: 'description',
             key: 'description',
+            width: 200,
             render: (text, record) => {
-                return (<EditableCell
-                    dispatch={dispatch}
-                    dataSource={dataSource}
-                    fieldName='description'
-                    dataKey={record.key}
-                    type='input'
+                return <Input
                     value={text}
-                />)
+                    onChange={(e) => {
+                        let columns = dataSource.newOne.columns.map(c => {
+                            if(c.key == record.key) {
+                                c['description'] = e.target.value;
+                            }
+                            return c;
+                        });
+                        
+                        dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
+                    }}
+                >
+                </Input>
             }
         }];
 
@@ -174,26 +216,7 @@ class DataSourceColumnConfig extends React.Component {
                                 </FormItem>
                                 <div className='buttons'>
                                     <Button onClick={() => {
-                                        dispatch({
-                                            type: 'dataSource/setNewModelField', name: 'columns', value: [
-                                                { key: 30, name: 'rrrrrr', type: 'ordinal', using: false},
-                                                { key: 40, name: 'rrrrrr', type: 'ordinal', using: false},
-                                                { key: 50, name: 'rrrrrr', type: 'ordinal', using: false},
-                                                { key: 60, name: 'rrrrrr', type: 'ordinal', using: false},
-                                                { key: 70, name: 'rrrrrr', type: 'ordinal', using: false},
-                                                { key: 80, name: 'rrrrrr', type: 'ordinal', using: false},
-                                                { key: 120, name: 'rrrrrr', type: 'ordinal', using: false},
-                                                { key: 64, name: 'rrrrrr', type: 'ordinal', using: false},
-                                                { key: 12, name: 'rrrrrr', type: 'ordinal', using: false},
-                                                { key: 98, name: 'rrrrrr', type: 'ordinal', using: false},
-                                                { key: 630, name: 'rrrrrr', type: 'ordinal', using: false},
-                                                { key: 1, name: 'ttttt', type: 'scale', using: true},
-                                                { key: 2, name: 'ssssss', type: 'index', using: true },
-                                                { key: 3, name: 'yyyyyy', type: 'categorical', using: true, description: 'hhhhhhhhh' },
-                                                { key: 4, name: 'uuuuuuu', type: 'string', using: true },
-                                                { key: 5, name: 'ggggg', type: 'time', alias: 'gg', using: true }
-                                            ]
-                                        });
+                                        dispatch({ type: 'dataSource/importNewModelColumns' })
                                     }}>刷新</Button>
                                 </div>
                             </Form>
@@ -218,92 +241,4 @@ function mapStateToProps({ present: { dataSource } }) {
     return { dataSource }
 }
 
-export default connect(mapStateToProps)(DataSourceColumnConfig);
-
-class EditableCell extends React.Component {
-    state = {
-        dispatch: this.props.dispatch,
-        dataSource: this.props.dataSource,
-        fieldName: this.props.fieldName,
-        dataKey: this.props.dataKey,
-        type: this.props.type,
-        value: this.props.value,
-        editable: false,
-    }
-
-    getEditor = (e) => {
-        const { type, value } = this.state;
-        if(type == 'input') {
-            return (
-                <Input
-                    value={value}
-                    onChange={this.handleChange}
-                    onPressEnter={this.check}
-                    suffix={(
-                        <Icon
-                            type="check"
-                            className="editable-cell-icon-check"
-                            onClick={this.check}
-                        />
-                    )}
-                />
-            )
-        }else if(type == 'select') {
-            return (
-                <Select
-                    onChange={this.check}
-                >
-                    <SelectOption value='index'>索引</SelectOption>
-                    <SelectOption value='time'>时间</SelectOption>
-                    <SelectOption value='categorical'>类别</SelectOption>
-                    <SelectOption value='scale'>标量</SelectOption>
-                    <SelectOption value='ordinal'>序值</SelectOption>
-                    <SelectOption value='string'>字符串</SelectOption>
-                </Select>
-            )
-        }
-    }
-
-    handleChange = (e) => {
-        const value = e.target.value;
-        this.setState({ value });
-    }
-
-    check = () => {
-        const { dispatch, dataSource, fieldName, dataKey, value } = this.state;
-        this.setState({ editable: false });
-
-        let columns = dataSource.newOne.columns.map(c => {
-            if(c.key == dataKey) {
-                c[fieldName] = value;
-            }
-            return c;
-        });
-
-        dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
-    }
-
-    edit = () => {
-        this.setState({ editable: true });
-    }
-
-    render() {
-        const { value, editable } = this.state;
-        return (
-            <div className="editable-cell">
-                {
-                    editable ? this.getEditor() : (
-                        <div style={{ paddingRight: 24 }}>
-                            {value || ' '}
-                            <Icon
-                                type="edit"
-                                className="editable-cell-icon"
-                                onClick={this.edit}
-                            />
-                        </div>
-                    )
-                }
-            </div>
-        );
-    }
-}
+export default connect(mapStateToProps)(DataSourceColumnConfig);

app/components/datasource/createBox.jsx

@@ -1,72 +0,0 @@
-import React from 'react'
-import { Steps, Button } from 'antd'
-const { Step } = Steps
-import { connect } from 'dva'
-import dataSource from '../../models/dataSource'
-
-class CreateBox extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            current: 0
-        }
-    };
-
-    next() {
-        const current = this.state.current + 1;
-        this.setState({ current });
-    }
-
-    prev() {
-        const current = this.state.current - 1;
-        this.setState({ current });
-    }
-
-    render() {
-        const { current } = this.state;
-
-        const steps = [{
-            title: 'First',
-            content: 'First-content',
-        }, {
-            title: 'Second',
-            content: 'Second-content',
-        }, {
-            title: 'Last',
-            content: 'Last-content',
-        }];
-
-        return (
-            <div>
-                <Steps current={current}>
-                    {steps.map(item => <Step key={item.title} title={item.title} />)}
-                </Steps>
-                <div className="steps-content">{steps[current].content}</div>
-                <div className="steps-action">
-                    {
-                        current < steps.length - 1
-                        && <Button type="primary" onClick={() => this.next()}>Next</Button>
-                    }
-                    {
-                        current === steps.length - 1
-                        && <Button type="primary" onClick={() => message.success('Processing complete!')}>Done</Button>
-                    }
-                    {
-                        current > 0
-                        && (
-                            <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
-                                Previous
-            </Button>
-                        )
-                    }
-                </div>
-            </div>
-        );
-    }
-}
-
-function mapStateToProps({present: {dataSource}}) {
-    return { dataSource }
-}
-
-export default connect(mapStateToProps)(CreateBox)

app/components/datasource/dataConnectBox.jsx

@@ -19,34 +19,12 @@ const DataConnectBox = ({operation, dispatch, dataConnect, visibleBox, hideBox,
     const okHandler = () => {
         if(operation == 'create') {
             dispatch({ type: 'dataConnect/add' });
-        }else if(operation == 'edit') {
+        }else if(operation == 'modify') {
             dispatch({ type: 'dataConnect/modify' });
         }
         hideBox();
     }
 
-    const dataConnectLinkMenu = (
-        <Menu
-            className='menu-dataconnect-link'
-            onClick={() => {
-                dispatch({ type: 'dataConnect/setNewModelField', name: 'address', value: '1111adddd' });
-                dispatch({ type: 'dataConnect/setNewModelField', name: 'port', value: '1234' });
-                dispatch({ type: 'dataConnect/setNewModelField', name: 'type', value: {
-                    key: 'oracle',
-                    label: 'ORACLE'
-                } });
-                dispatch({ type: 'dataConnect/setNewModelField', name: 'dbName', value: 'orcl' });
-                dispatch({ type: 'dataConnect/setNewModelField', name: 'userName', value: 'UAS' });
-                dispatch({ type: 'dataConnect/setNewModelField', name: 'password', value: 'select!#%*(' });
-            }}
-        >
-            <MenuItem>1111</MenuItem>
-            <MenuItem>2222</MenuItem>
-            <MenuItem>33333</MenuItem>
-            <MenuItem>44</MenuItem>
-        </Menu>
-    );
-
     return (
         <Modal
             className='newdataconnect-box'

app/components/datasource/dataSourceDetail.jsx

@@ -39,6 +39,7 @@ class DataSourceDetail extends React.Component {
     }
 
     render() {
+        const { dispatch } = this.props;
         const { mode, current } = this.state;
         const steps = [{
             title: '属性配置',
@@ -73,7 +74,10 @@ class DataSourceDetail extends React.Component {
                             }
                             {
                                 current === steps.length - 1
-                                && <Button type="primary" onClick={() => message.success('Processing complete!')}>完成</Button>
+                                && <Button type="primary" onClick={() => {
+                                    dispatch({ type: 'dataSource/add' })
+                                    dispatch({ type: 'main/redirect', path: { pathname: '/dataSource' } });
+                                }}>完成</Button>
                             }
                         </div>
                     </div>) : (

app/components/datasource/dataSourceDetail.less

@@ -56,36 +56,10 @@
             }
             .table-columnconfig {
                 .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
-                    padding: 10px 16px;
+                    padding: 4px 8px;
                 }
-                .editable-cell {
-                    position: relative;
-                    input {
-                        padding-top: 0;
-                        padding-bottom: 0;
-                    }
-                }
-                  
-                .editable-cell-icon,
-                .editable-cell-icon-check {
-                    cursor: pointer;
-                }
-                  
-                .editable-cell-icon {
-                    line-height: 14px;
-                    position: absolute;
-                    right: 0;
-                    top: 50%;
-                    margin-top: -7px;
-                    display: inline-block;
-                }
-                  
-                td:hover .editable-cell-icon {
-                }
-                  
-                .editable-cell-icon:hover,
-                .editable-cell-icon-check:hover {
-                    color: #108ee9;
+                .column-groupable, .column-bucketizable {
+                    text-align: center;
                 }
             }
         }

app/components/datasource/datasource.jsx

@@ -6,7 +6,6 @@ const { Search } = Input
 import { connect } from 'dva'
 import { Link } from 'react-router-dom'
 import DataConnectBox from './dataConnectBox'
-import CreateBox from './createBox'
 import dataSource from '../../models/dataSource'
 import dataConnect from '../../models/dataConnect'
 import './dataSource.less'
@@ -15,6 +14,7 @@ class DataSource extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
+            loading: false,
             activeTab: 'dataSource',
             operation: 'create', // 打开数据编辑界面的类型
             visibleCreateBox: false,
@@ -27,13 +27,19 @@ class DataSource extends React.Component {
     };
 
     componentDidMount() {
+        this.setScrollTableHeight();
+    }
+
+    /**
+     * 根据视图设置表格高度以呈现滚动条
+     */
+    setScrollTableHeight() {
         const mainContent = document.getElementsByClassName('main-content')[0];
         const tabBar = mainContent.getElementsByClassName('ant-tabs-bar')[0];
         const tableHeader = mainContent.getElementsByClassName('ant-table-header')[0];
         const tableBody = mainContent.getElementsByClassName('ant-table-body')[0];
 
         tableBody.style.maxHeight=`${mainContent.offsetHeight - tabBar.offsetHeight - tableHeader.offsetHeight - 38}px`;
-        console.log(tableBody.style.maxHeight);
     }
 
     showCreateBox = () => {
@@ -73,14 +79,14 @@ class DataSource extends React.Component {
     render() {
         
         const { dataSource, dataConnect, dispatch } = this.props;
-        const { activeTab, search, visibleBox, operation, selectedDataSourceCode, selectedDataConnectCode } = this.state;
+        const { loading, activeTab, search, visibleBox, operation, selectedDataSourceCode, selectedDataConnectCode } = this.state;
         
         const moreOperatingMenu = (
             <Menu className='operationmenu'>
                 <Menu.Item
                     onClick={(e) => {
-
                         let selectedModel = dataSource.list.find((i) => { return i.code == selectedDataSourceCode })
+                        dispatch({ type: 'dataSource/setNewModel', model: selectedModel });
                         dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ selectedModel.type +'/' + selectedModel.code}});
                     }}>
                     <Icon type="info-circle-o" />属性设置
@@ -199,13 +205,20 @@ class DataSource extends React.Component {
             title: '操作',
             key: 'action',
             width: 300,
-            render: () => (
+            render: (text, record) => (
                 <div className='action-col'>
-                    <div className='operation'><Icon type="info-circle-o"/>属性</div>
+                    <div className='operation' onClick={() => {
+                        let selectedModel = dataConnect.list.find((i) => { return i.code == record.code });
+                        dispatch({ type: 'dataConnect/setNewModel', model: selectedModel });
+                        this.showDataConnectBox('modify')
+                    }}><Icon type="info-circle-o"/>属性</div>
                     <div className='operation'><Divider type="vertical" /></div>
                     <div className='operation'><Icon type="plus"/>创建数据源</div>
                     <div className='operation'><Divider type="vertical" /></div>
-                    <div className='operation'><Icon type="delete"/>删除</div>
+                    <div className='operation' onClick={() => {
+                        let selectedModel = dataConnect.list.find((i) => { return i.code == record.code });
+                        dispatch({ type: 'dataConnect/delete', model: selectedModel });
+                    }}><Icon type="delete"/>删除</div>
                 </div>
             ),
             width: 80
@@ -228,6 +241,7 @@ class DataSource extends React.Component {
                         <Dropdown overlay={(
                             <Menu onClick={(item, key, keyPath) => {
                                 const type = item.key;
+                                dispatch({ type: 'dataSource/resetNewModel' });
                                 dispatch({ type: 'dataSource/setNewModelField', name: 'type', value: type });
                                 dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ type +'/create'}});
                             }}>
@@ -240,7 +254,7 @@ class DataSource extends React.Component {
                             </Button>
                         </Dropdown>
                         <Button style={{ display: activeTab=='dataConnect'?'inline-block':'none' }} onClick={(e) => {
-                            this.showDataConnectBox()
+                            this.showDataConnectBox('create')
                         }}>
                             <Icon type="plus" />添加数据连接
                         </Button>
@@ -258,7 +272,7 @@ class DataSource extends React.Component {
                         className='datasource-table datasource-table'
                         columns={dataSourceColumns}
                         dataSource={dataSource.list}
-                        loading={false}
+                        loading={loading}
                         size='small'
                         scroll={{x: false, y: 471}}
                         pagination={false}
@@ -274,15 +288,10 @@ class DataSource extends React.Component {
                         className='dataconnect-table dataconnect-table'
                         columns={dataConnectColumns}
                         dataSource={dataConnect.list}
-                        loading={false}
+                        loading={loading}
                         size='small'
                         scroll={{x: false, y: 471}}
                         pagination={false}
-                        onRow={(record) => {
-                            return {
-                                onClick: () => {this.setState({ selectedDataConnectCode:  record.code})}
-                            }
-                        }}
                     />
                 </TabPane>
             </Tabs>

app/constants/url.js

@@ -2,6 +2,11 @@ const BASE_URL = 'http://192.168.253.129:8080';
 
 /**后台接口地址 */
 const URLS = {
+    
+    DATASOURCE_LIST: BASE_URL + '/getListDataConnector', // 获得数据源列表
+
+    DATASOURCE_QUERY_COLUMNS: BASE_URL + '/implementSql', // 根据sql请求列数据信息
+
     CHART_BAR_OPTION: BASE_URL + '/showHistogram', // 请求柱状图展示数据
 }
 export default URLS

app/models/chartDesigner.js

@@ -1,5 +1,5 @@
 import { routerRedux } from 'dva/router'
-import * as service from '../services/chartDesigner'
+import * as service from '../services/index'
 import { delay } from '../utils/baseUtils'
 import URLS from '../constants/url'
 

app/models/dataConnect.js

@@ -9,7 +9,7 @@ export default {
             let list = state.list;
             for(let i = 0; i < 4; i++) {
                 let newOne = {
-                    name: 'tttttt',
+                    name: 'tttttt'+i,
                     type: {key: 'oracle', label: 'ORACLE'},
                     address: '2',
                     port: '3',
@@ -28,8 +28,6 @@ export default {
             let list = state.list;
             newOne.key = new Date().getMilliseconds()+(Math.random()*100).toFixed(0);
             newOne.code = new Date().getMilliseconds()+(Math.random()*100).toFixed(0);
-            newOne.creator = 'zhuth';
-            newOne.createTime = new Date();
             list.push(newOne);
             return Object.assign({}, state, {list});
         },

app/models/dataSource.js

@@ -1,3 +1,7 @@
+import { routerRedux } from 'dva/router'
+import * as service from '../services/index'
+import URLS from '../constants/url'
+
 export default {
     namespace: 'dataSource',
     state: {
@@ -28,6 +32,26 @@ export default {
             }
             return Object.assign({}, state, {list});
         },
+        loadList(state, action) {
+            let data = action.data;
+            data = data.map((d, i) => {
+                return {
+                    name: d.dataName,
+                    type: d.type,
+                    dbType: d.dbType,
+                    address: '2',
+                    port: '3',
+                    target: 'select * from employee',
+                    creator: 'zhuth',
+                    createTime: new Date(),
+                    userName: '2222',
+                    password: 'aaaww',
+                    tags: ['tttt', 'accc'],
+                    description: ' dddddddddddddddddddddd'
+                }
+            });
+            return Object.assign({}, state, {list});
+        },
         add(state, action) {
             let newOne = Object.assign({}, state.newOne);
             let list = state.list;
@@ -75,6 +99,72 @@ export default {
         },
         resetNewModel(state, action) {
             return Object.assign({}, state, {newOne: {}});
+        },
+        printNewOne(state, action) {
+            console.log(state.newOne);
+            return state;
+        }
+    },
+    effects: {
+        *getList(action, { select, call, put, takeEvery, takeLatest }) {
+            try {
+                const res = yield call(service.fetch, {
+                    url: URLS.DATASOURCE_LIST,
+                    body: {
+                        "String": URLS.DATASOURCE_LIST
+                    }
+                });
+                console.log(res);
+                yield takeLatest({ type: 'loadList', data: [] });
+            }catch(e) {
+                yield takeLatest({ type: 'loadList', data: [] });
+            }
+            
+        },
+        *importNewModelColumns(action, { select, call, put }) {
+            const dataSource = yield select(state => state.present.dataSource);
+            const sqlStr = dataSource.newOne.target;
+            const res = yield call(service.fetch, {
+                url: URLS.DATASOURCE_QUERY_COLUMNS,
+                body: {
+                    "String": sqlStr
+                }
+            });
+            console.log(res);
+
+            const getDataType = (columnType) => {
+                let dataType = 'string';
+                if(columnType == 'VARCHAR2') {
+                    dataType = 'categorical';
+                }else if(columnType == 'NUMBER') {
+                    dataType = 'scale'
+                }else if(columnType == 'DATE') {
+                    dataType = 'time'
+                }else if(columnType == 'NUMBER') {
+                    dataType = 'scale'
+                }
+                return dataType;
+            }
+
+            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.remarks.substring(0, 10),
+                        columnType: d.columnType,
+                        dataType: getDataType(d.columnType),
+                        groupable: d.columnType == 'VARCHAR2',
+                        bucketizable: d.columnType == 'NUMBER',
+                        description: d.remarks
+                    }
+                });
+                yield put({ type: 'setNewModelField', name: 'columns', value: columns });
+            }else {
+                yield put({ type: 'setNewModelField', name: 'columns', value: [] });
+                // 弹出错误提示
+            }
         }
     }
 };