调整请求处理GET、POST逻辑/数据源、数据连接关联关系绑定/数据源详情页面可修改数据连接/

src/components/chart/list.jsx

@@ -206,7 +206,7 @@ class ChartList extends React.Component {
             </CardGrid>
         ));
         if(cards.length === 0) {
-            return (<div class="ant-empty ant-empty-normal"><div class="ant-empty-image"><img alt="暂无数据" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"/></div><p class="ant-empty-description">暂无数据</p></div>)
+            return (<div className="ant-empty ant-empty-normal"><div className="ant-empty-image"><img alt="暂无数据" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"/></div><p className="ant-empty-description">暂无数据</p></div>)
         }
         return cards;
     }

src/components/common/login/relogin.jsx

@@ -48,7 +48,7 @@ class Relogin extends React.Component {
     }
 
     render() {
-        const { main, visibleBox } = this.props;
+        const { main, visibleBox, dispatch } = this.props;
         const { autoLogin, fetching } = this.state;
         const { currentUser } = main;
         const { account, password: defaultPassword } = currentUser;
@@ -90,7 +90,12 @@ class Relogin extends React.Component {
                 <Checkbox defaultChecked={autoLogin} onChange={this.onRemanberChange}>记住密码</Checkbox>
             </div>
             <div className="relogin-item buttons">
-                <Button disabled={fetching} type="primary" onClick={this.onLogin}>
+                <Button disabled={fetching} type="primary" onClick={() => {
+                    dispatch({ type: 'main/logout' });
+                }}>
+                    切换用户
+                </Button>
+                <Button disabled={fetching} type="primary" onClick={this.onLogin} style={{ marginLeft: '16px' }}>
                     {fetching && <Icon type="loading" theme="outlined" />}
                     重新登录
                 </Button>

src/components/dashboard/list.jsx

@@ -177,7 +177,7 @@ class DashboardList extends React.Component {
             </CardGrid>
         ));
         if(cards.length === 0) {
-            return (<div class="ant-empty ant-empty-normal"><div class="ant-empty-image"><img alt="暂无数据" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"/></div><p class="ant-empty-description">暂无数据</p></div>)
+            return (<div className="ant-empty ant-empty-normal"><div className="ant-empty-image"><img alt="暂无数据" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"/></div><p className="ant-empty-description">暂无数据</p></div>)
         }
         return cards;
     }

src/components/dataSourceDetail/baseConfig.jsx

@@ -6,13 +6,25 @@ const SelectOption = Select.Option
 
 class DataSourceBaseConfig extends React.Component {
 
+    generateOptions () {
+        const { dataConnect } = this.props;
+        const { list } = dataConnect;
+
+        return list.map((l) => {
+            return <SelectOption value={l.code} key={l.code}>
+                { l.name }
+            </SelectOption>
+        });
+    }
+
     componentDidMount() {
         const { dispatch } = this.props;
         dispatch({ type: 'dataSource/remoteGroupList' });
+        dispatch({ type: 'dataConnect/fetchList' });
     }
 
     render() {
-        const { dataSource, dataSourceDetail, dispatch } = this.props;
+        const { dataConnect, dataSource, dataSourceDetail, dispatch } = this.props;
 
         const formItemLayout = {
             labelCol: { span: 4 },
@@ -58,6 +70,25 @@ class DataSourceBaseConfig extends React.Component {
                     ):(
                         <div>
                             <Divider orientation="left">连接配置</Divider>
+                            <div style={{ textAlign: 'end', color: '#F5222D' }}>*若只修改数据连接，请确认不同数据库取数逻辑一致</div>
+                            <FormItem label='数据连接' {...formItemLayout}>
+                                <Select
+                                    value={dataSourceDetail.connectCode}
+                                    onChange={(value) => {
+                                        let selectedDataConnect = dataConnect.list.filter((l) => l.code === value)[0];
+                                        dispatch({ type: 'dataSourceDetail/setFields', fields: [
+                                            { name: 'connectCode', value: selectedDataConnect.code },
+                                            { name: 'dbType', value: selectedDataConnect.dbType },
+                                            { name: 'address', value: selectedDataConnect.address },
+                                            { name: 'port', value: selectedDataConnect.port },
+                                            { name: 'dbName', value: selectedDataConnect.dbName },
+                                            { name: 'userName', value: selectedDataConnect.userName },
+                                        ] } );
+                                    }}
+                                >
+                                    { this.generateOptions() }
+                                </Select>
+                            </FormItem>
                             <FormItem label='数据库类型' {...formItemLayout}>
                                 <Select
                                     disabled={true}
@@ -201,4 +232,4 @@ class DataSourceBaseConfig extends React.Component {
     }
 }
 
-export default connect(({ present: { dataSource, dataSourceDetail } }) => ({ dataSource, dataSourceDetail }))(DataSourceBaseConfig);
+export default connect(({ present: { dataConnect, dataSource, dataSourceDetail } }) => ({ dataConnect, dataSource, dataSourceDetail }))(DataSourceBaseConfig);

src/components/dataSourceDetail/content.jsx

@@ -93,7 +93,7 @@ class DataSourceDetailContent extends React.Component {
                             {
                                 current < steps.length - 1
                                 && <Button disabled={
-                                    ( current === 0 && ( ( type === 'database' && !dataSourceDetail.address ) || ( type === 'file' && +1 === 2) ) ) ||
+                                    ( current === 0 && ( ( type === 'database' && !dataSourceDetail.connectCode ) || ( type === 'file' && +1 === 2) ) ) ||
                                     (current === 1 && (!dataSourceDetail.columns || dataSourceDetail.columns.length === 0))
                                 } type="primary" onClick={() => this.next()}>下一步</Button>
                             }

src/components/dataSourceDetail/dataConnectConfig.jsx

@@ -78,7 +78,16 @@ class DataConnectConfig extends React.Component {
                         <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', height: '100%' }}>
                             <Row>
                                 <Ellipsis lines={3}>
-                                    {l.description}
+                                    { filterLabel ?
+                                        ((l.description || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
+                                            return (
+                                                fragment.toLowerCase().replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1') === filterLabel.toLowerCase() ?
+                                                <span key={i} style={{fontWeight: 'bold', color: 'red'}} className="highlight">{fragment}</span> :
+                                                fragment
+                                            )
+                                        }
+                                        )) : l.description
+                                    }
                                 </Ellipsis>
                             </Row>
                             <Row type='flex' justify='space-between'>
@@ -109,7 +118,7 @@ class DataConnectConfig extends React.Component {
             // );
 
             if(cards.length === 0) {
-                return (<div class="ant-empty ant-empty-normal"><div class="ant-empty-image"><img alt="暂无数据" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"/></div><p class="ant-empty-description">暂无数据</p></div>)
+                return (<div className="ant-empty ant-empty-normal"><div className="ant-empty-image"><img alt="暂无数据" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K"/></div><p className="ant-empty-description">暂无数据</p></div>)
             }
             
             return cards;

src/models/dataSource.js

@@ -132,13 +132,14 @@ export default {
                 }
                 const res = yield call(service.fetch, {
                     url: URLS.DATASOURCE_LIST,
+                    method: 'GET',
                     body
                 });
                 
                 console.log('请求数据源列表', body, res);
                 if(!res.err && res.data.code > 0) {
                     let list = res.data.data.list.map((r, i) => {
-                        let dbConfig = JSON.parse(r.dbConfig);
+                        let dbConfig = r.dbConfig;
                         let tags = JSON.parse(r.dataTag);
                         return {
                             key: r.dataId + '',
@@ -167,8 +168,7 @@ export default {
         *remoteAdd(action, { select, call, put }) {
             const dataSourceDetail = yield select(state => state.present.dataSourceDetail);
             const currentUserName = yield select(state => state.present.main.currentUser.name)
-            const { name, description, target, tags, type, connectCode, address, port, dbType, dbName, userName,
-                password, columns, group } = dataSourceDetail;
+            const { name, description, target, tags, type, connectCode, columns, group } = dataSourceDetail;
             try {
                 const data = {
                     dataName: name,
@@ -177,15 +177,7 @@ export default {
                     dataTag: tags,
                     type: type,
                     createBy: currentUserName,
-                    dbConfig: {
-                        id: connectCode,
-                        addrass: address,
-                        port: port,
-                        databaseType: dbType,
-                        dataName: dbName,
-                        userName: userName,
-                        passWord: password
-                    },
+                    dbConId: connectCode,
                     columnConfig: columns.map((c, i) => {
                         return {
                             columnName: c.name,
@@ -224,19 +216,22 @@ export default {
 
                 const res = yield call(service.fetch, {
                     url: URLS.DATASOURCE_DETAIL,
-                    body: code
+                    method: 'GET',
+                    body: {
+                        id: code
+                    }
                 });
                 console.log('解析数据源', code, res);
                 if(!res.err && res.data.code > 0) {
                     let resData = res.data.data;
                     let columnConfig = JSON.parse(resData.columnConfig) || [];
-                    let dbConfig = JSON.parse(resData.dbConfig);
+                    let dbConfig = resData.dbConfig;
                     let tags = JSON.parse(resData.dataTag);
                     let data = {
                         code: resData.dataId + '',
                         name: resData.dataName,
                         type: resData.type,
-                        connectCode: dbConfig.id + '',
+                        connectCode: dbConfig.id,
                         dbType: dbConfig.databaseType,
                         dbName: dbConfig.dataName,
                         address: dbConfig.addrass,
@@ -312,7 +307,7 @@ export default {
             try{
                 const dataSourceDetail = yield select(state => state.present.dataSourceDetail);
                 const currentUserName = yield select(state => state.present.main.currentUser.name)
-                const { code, name, description, target, type, group, address, port, dbType, dbName,userName, password, columns } = dataSourceDetail;
+                const { code, name, description, target, type, group, connectCode, columns } = dataSourceDetail;
     
                 let data = {
                     dataId: code,
@@ -323,14 +318,7 @@ export default {
                     type: type,
                     createBy: currentUserName,
                     connectorGroup: group ? group : '-1',
-                    dbConfig: address ? {
-                        addrass: address,
-                        port: port,
-                        databaseType: dbType,
-                        dataName: dbName,
-                        userName: userName,
-                        passWord: password
-                    } : '',
+                    dbConId: connectCode,
                     columnConfig: columns ? columns.map((c, i) => {
                         return {
                             columnName: c.name,

src/services/index.js

@@ -2,19 +2,38 @@ import request from '../utils/request'
 import URLS from '../constants/url'
 
 export function fetch(option) {
-  const { url, body, timeout } = option;
-  const token = window.sessionStorage.getItem("token");
-  // 除登录请求外，Token不存在时不发送请求
-  if(token || ([URLS.LOGIN].indexOf(url) !== -1)) {
-    return request(url, {
-      method: 'POST',
-      headers: {
-        token: token,
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify(body),
-    }, timeout);
-  }else {
-    return new Promise(() => {});
-  }
+    let { url, method, body, timeout } = option;
+    const token = window.sessionStorage.getItem("token");
+    // 除登录请求外，Token不存在时不发送请求
+    if(token || ([URLS.LOGIN].indexOf(url) !== -1)) {
+        let opt = {
+            method: method || 'POST',
+        };
+        if(method === 'GET') {
+            opt.headers = {
+                token: token,
+                'Content-Type': 'application/json'
+            }
+            if (body) {  
+                let paramsArray = [];  
+                //拼接参数  
+                Object.keys(body).forEach(key => paramsArray.push(key + '=' + body[key]))  
+                if (url.search(/\?/) === -1) {  
+                    url += '?' + paramsArray.join('&')  
+                } else {  
+                    url += '&' + paramsArray.join('&')  
+                }  
+            }
+        }else {
+            opt.headers = {
+                token: token,
+                'Content-Type': 'application/json'
+            }
+            opt.body = JSON.stringify(body)
+        }
+
+        return request(url, opt, timeout);
+    }else {
+        return new Promise(() => {});
+    }
 }