数据连接配置接口解析/数据源接口待调整

app/components/datasource/baseConfig.jsx

@@ -10,8 +10,9 @@ const MenuItemGroup = Menu.ItemGroup
 const UploadDragger = Upload.Dragger
 import { connect } from 'dva'
 import dataSource from '../../models/dataSource'
+import dataConnect from '../../models/dataConnect'
 
-const DataSourceBaseConfig = ({ dataSource, dispatch }) => {
+const DataSourceBaseConfig = ({ dataSource, dataConnect, dispatch }) => {
 
     const formItemLayout = {
         labelCol: { span: 4 },
@@ -21,22 +22,23 @@ const DataSourceBaseConfig = ({ dataSource, dispatch }) => {
     const dataSourceLinkMenu = (
         <Menu
             className='menu-datasource-link'
-            onClick={() => {
-                dispatch({ type: 'dataSource/setNewModelField', name: 'address', value: '1111adddd' });
-                dispatch({ type: 'dataSource/setNewModelField', name: 'port', value: '1234' });
-                dispatch({ type: 'dataSource/setNewModelField', name: 'dbType', value: {
-                    key: 'oracle',
-                    label: 'ORACLE'
-                } });
-                dispatch({ type: 'dataSource/setNewModelField', name: 'dbName', value: 'orcl' });
-                dispatch({ type: 'dataSource/setNewModelField', name: 'userName', value: 'UAS' });
-                dispatch({ type: 'dataSource/setNewModelField', name: 'password', value: 'select!#%*(' });
+            onClick={(e) => {
+                const model = dataConnect.list[e.key];
+                dispatch({ type: 'dataSource/setNewModelFields', fields: [
+                    { name: 'address', value: model.address },
+                    { name: 'port', value: model.port },
+                    { name: 'dbType', value: model.dbType },
+                    { name: 'dbName', value: model.dbName },
+                    { name: 'userName', value: model.userName },
+                    { name: 'password', value: model.password }
+                ] });
             }}
         >
-            <MenuItem>1111</MenuItem>
-            <MenuItem>2222</MenuItem>
-            <MenuItem>33333</MenuItem>
-            <MenuItem>44</MenuItem>
+            {
+                dataConnect.list.map((l, i) => {
+                    return <MenuItem key={i}>{l.name}</MenuItem>
+                })
+            }
         </Menu>
     );
 
@@ -110,7 +112,6 @@ const DataSourceBaseConfig = ({ dataSource, dispatch }) => {
                         <FormItem label='数据库类型' {...formItemLayout}>
                             <Select
                                 value={dataSource.newOne.dbType}
-                                labelInValue={true}
                                 onChange={(value) => {
                                     dispatch({ type: 'dataSource/setNewModelField', name: 'dbType', value: value} );
                                 }}
@@ -228,8 +229,8 @@ const DataSourceBaseConfig = ({ dataSource, dispatch }) => {
     );
 }
 
-function mapStateToProps({ present: {dataSource} }) {
-    return { dataSource }
+function mapStateToProps({ present: {dataSource, dataConnect} }) {
+    return { dataSource, dataConnect }
 }
 
 export default connect(mapStateToProps)(DataSourceBaseConfig);

app/components/datasource/dataConnectBox.jsx

@@ -18,7 +18,7 @@ const DataConnectBox = ({operation, dispatch, dataConnect, visibleBox, hideBox,
 
     const okHandler = () => {
         if(operation == 'create') {
-            dispatch({ type: 'dataConnect/add' });
+            dispatch({ type: 'dataConnect/fetchAdd' });
         }else if(operation == 'modify') {
             dispatch({ type: 'dataConnect/modify' });
         }
@@ -44,10 +44,9 @@ const DataConnectBox = ({operation, dispatch, dataConnect, visibleBox, hideBox,
                 </FormItem>
                 <FormItem label='数据库类型' {...formItemLayout}>
                     <Select
-                        value={dataConnect.newOne.type}
-                        labelInValue={true}
+                        value={dataConnect.newOne.dbType}
                         onChange={(value) => {
-                            dispatch({ type: 'dataConnect/setNewModelField', name: 'type', value: value} );
+                            dispatch({ type: 'dataConnect/setNewModelField', name: 'dbType', value: value} );
                         }}
                     >
                         <SelectOption value='oracle'>

app/components/datasource/datasource.jsx

@@ -192,7 +192,7 @@ class DataSource extends React.Component {
             width: 100,
             render: (text, record) => {
                 return <div className='datasource-name'>
-                    <div className={`datasource-type type-${record.type.key}`}></div>
+                    <div className={`datasource-type type-${record.type}`}></div>
                     <div>{text}</div>
                 </div>
             }
@@ -213,11 +213,23 @@ class DataSource extends React.Component {
                         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' onClick={() => {
+                         dispatch({ type: 'dataSource/resetNewModel' });
+                         dispatch({ type: 'dataSource/setNewModelField', fields: [
+                             { name: 'dbType', value: record.dbType },
+                             { name: 'address', value: record.address },
+                             { name: 'port', value: record.port },
+                             { name: 'dbName', value: record.dbName },
+                             { name: 'userName', value: record.userName },
+                             { name: 'password', value: record.password }
+                         ] });
+
+                         dispatch({type: 'main/redirect', path: {pathname: '/datasource/database/create'}});
+                    }}><Icon type="plus"/>创建数据源</div>
                     <div className='operation'><Divider type="vertical" /></div>
                     <div className='operation' onClick={() => {
                         let selectedModel = dataConnect.list.find((i) => { return i.code == record.code });
-                        dispatch({ type: 'dataConnect/delete', model: selectedModel });
+                        dispatch({ type: 'dataConnect/fetchDelete', model: selectedModel });
                     }}><Icon type="delete"/>删除</div>
                 </div>
             ),
@@ -232,7 +244,7 @@ class DataSource extends React.Component {
                 tabBarExtraContent={
                     <div className='datasource-tabs-tools'>
                         <Button onClick={()=>{
-                            dispatch({type: activeTab=='dataConnect'?'dataConnect/testData':'dataSource/testData'});
+                            dispatch({type: activeTab=='dataConnect'?'dataConnect/fetchList':'dataSource/testData'});
                         }}>测试数据</Button>
                         <Search
                             placeholder="请输入关键字"

app/constants/url.js

@@ -1,12 +1,20 @@
-const BASE_URL = 'http://192.168.253.129:8080';
+const BASE_URL = 'http://192.168.253.38:8080';
 
 /**后台接口地址 */
 const URLS = {
     
+    DATASOURCE_ADD: BASE_URL + '/inputDataConnector', // 新增数据源
+
+    DATASOURCE_UPDATE: BASE_URL + '/updateDate', // 修改数据源
+
     DATASOURCE_LIST: BASE_URL + '/getListDataConnector', // 获得数据源列表
 
     DATASOURCE_QUERY_COLUMNS: BASE_URL + '/implementSql', // 根据sql请求列数据信息
 
+    DATACONNECT_ADD: BASE_URL + '/inputDatabases', // 新增数据连接配置
+
+    DATACONNECT_LIST: BASE_URL + '/getDatabases', // 获得数据连接列表
+
     CHART_BAR_OPTION: BASE_URL + '/showHistogram', // 请求柱状图展示数据
 }
 export default URLS

app/models/dataConnect.js

@@ -1,3 +1,7 @@
+import { message } from 'antd'
+import * as service from '../services/index'
+import URLS from '../constants/url'
+
 export default {
     namespace: 'dataConnect',
     state: {
@@ -10,12 +14,12 @@ export default {
             for(let i = 0; i < 4; i++) {
                 let newOne = {
                     name: 'tttttt'+i,
-                    type: {key: 'oracle', label: 'ORACLE'},
+                    type: 'oracle',
                     address: '2',
                     port: '3',
                     userName: '2222',
                     password: 'aaaww',
-                    desc: ' dddddddddddddddddddddd'
+                    description: ' dddddddddddddddddddddd'
                 };
                 newOne.key = new Date().getMilliseconds()+(Math.random()*100).toFixed(0)+i;
                 newOne.code = new Date().getMilliseconds()+(Math.random()*100).toFixed(0)+i;
@@ -23,6 +27,10 @@ export default {
             }
             return Object.assign({}, state, {list});
         },
+        list(state, action) {
+            const data = action.data;
+            return Object.assign({}, state, {list: data});
+        },
         add(state, action) {
             let newOne = Object.assign({}, state.newOne);
             let list = state.list;
@@ -67,5 +75,81 @@ export default {
         resetNewModel(state, action) {
             return Object.assign({}, state, {newOne: {}});
         }
+    },
+    effects: {
+        *fetchList(action, { select, call, put, takeEvery, takeLatest }) {
+            try {
+                const res = yield call(service.fetch, {
+                    url: URLS.DATACONNECT_LIST,
+                    body: {}
+                });
+                let data = res.data.data.map((r, i) => {
+                    return {
+                        key: i,
+                        id: r.id,
+                        name: r.name,
+                        dbName: r.dataName,
+                        dbType: r.databaseType,
+                        address: r.addrass,
+                        port: r.port,
+                        userName: r.userName,
+                        password: r.passWord,
+                        description: r.note
+                    }
+                });
+                console.log(data);
+                yield put({ type: 'list', data });
+            }catch(e) {
+                message.error(e);
+                //yield takeLatest({ type: 'loadList', data: [] });
+            }
+        },
+        *fetchAdd(action, { select, call, put, takeEvery, takeLatest }) {
+            const dataConnect = yield select(state => state.present.dataConnect);
+            const model = dataConnect.newOne;
+            try {
+                const res = yield call(service.fetch, {
+                    url: URLS.DATACONNECT_ADD,
+                    body: {
+                        "name": model.name,
+                        "addrass": model.address,
+                        "port": model.port,
+                        "databaseType": model.dbType,
+                        "dataName": model.dbName,
+                        "userName": model.userName,
+                        "passWord": model.password,
+                        "note": model.description
+                    }
+                });
+                yield put({ type: 'add' });
+                message.success('新增成功');
+            }catch(e) {
+                message.error('新增失败');
+                //yield takeLatest({ type: 'loadList', data: [] });
+            }
+        },
+        *fetchDelete(action, { select, call, put, takeEvery, takeLatest }) {
+            const model = action.model;
+            try {
+                const res = yield call(service.fetch, {
+                    url: URLS.DATACONNECT_ADD,
+                    body: {
+                    }
+                });
+                // yield put({ type: 'add' });
+                message.success('删除成功');
+            }catch(e) {
+                message.error('删除失败');
+            }
+        }
+    },
+    subscriptions: {
+        setup({ dispatch, history }) {
+            return history.listen(({ pathname, query }) => {
+                if (pathname.startsWith('/datasource')) {
+                    dispatch({ type: 'fetchList' })
+                }
+            })
+        }
     }
 };

app/models/dataSource.js

@@ -1,4 +1,5 @@
 import { routerRedux } from 'dva/router'
+import { message } from 'antd'
 import * as service from '../services/index'
 import URLS from '../constants/url'
 
@@ -32,25 +33,9 @@ export default {
             }
             return Object.assign({}, state, {list});
         },
-        loadList(state, action) {
+        list(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});
+            return Object.assign({}, state, {list: data});
         },
         add(state, action) {
             let newOne = Object.assign({}, state.newOne);
@@ -84,6 +69,16 @@ 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});
+            console.log(obj);
+            return obj;
+        },
         setNewModelField(state, action) {
             const { name, value } = action;
             let newOne = state.newOne;
@@ -106,18 +101,31 @@ export default {
         }
     },
     effects: {
-        *getList(action, { select, call, put, takeEvery, takeLatest }) {
+        *fetchList(action, { select, call, put, takeEvery, takeLatest }) {
             try {
                 const res = yield call(service.fetch, {
                     url: URLS.DATASOURCE_LIST,
-                    body: {
-                        "String": URLS.DATASOURCE_LIST
+                    body: {}
+                });
+                let data = res.data.data.map((r, i) => {
+                    // r.dbConfig = JSON.parse(r.dbConfig);
+                    return {
+                        key: i,
+                        name: r.dataName,
+                        type: r.type || 'unknown',
+                        dbType: 'oracle',
+                        creator: r.createBy,
+                        createTime: new Date(r.createDate),
+                        tags: ['tttt', 'accc'],
+                        description: r.note
                     }
                 });
-                console.log(res);
-                yield takeLatest({ type: 'loadList', data: [] });
+                console.log(data);
+                yield put({ type: 'list', data });
             }catch(e) {
-                yield takeLatest({ type: 'loadList', data: [] });
+                message.error('失败');
+                console.log(e);
+                yield put({ type: 'list', data: [] });
             }
             
         },
@@ -152,7 +160,7 @@ export default {
                         key: i,
                         using: true,
                         name: d.columnName,
-                        alias: d.remarks.substring(0, 10),
+                        alias: d.remarks?d.remarks.substring(0, 10):'',
                         columnType: d.columnType,
                         dataType: getDataType(d.columnType),
                         groupable: d.columnType == 'VARCHAR2',
@@ -166,5 +174,14 @@ export default {
                 // 弹出错误提示
             }
         }
+    },
+    subscriptions: {
+        setup({ dispatch, history }) {
+            return history.listen(({ pathname, query }) => {
+                if (pathname.startsWith('/datasource')) {
+                    dispatch({ type: 'fetchList' })
+                }
+            })
+        }
     }
 };