数据连接校验保存状态控制闭环

src/components/dataSourceDetail/dataConnectBox.jsx

@@ -16,12 +16,12 @@ class DataConnectBox extends React.Component {
         const { dispatch, dataConnect} = this.props;
         const operation = dataConnect.newOne.boxOperation;
         if(operation === 'create') {
-            dispatch({ type: 'dataConnect/remoteAdd' }).then(() => {
-                this.hideBox()
+            dispatch({ type: 'dataConnect/remoteAdd' }).then((success) => {
+                success && this.hideBox()
             });
         }else if(operation === 'modify') {
-            dispatch({ type: 'dataConnect/remoteModify', code: dataConnect.newOne.code }).then(() => {
-                this.hideBox();
+            dispatch({ type: 'dataConnect/remoteModify', code: dataConnect.newOne.code }).then((success) => {
+                success && this.hideBox();
             });
         }
     }
@@ -54,17 +54,17 @@ class DataConnectBox extends React.Component {
                     operation === 'view' ? null : (
                         <Row>
                             <Col className='validatemessage' span={12}>
-                                {dataConnect.newOne.invalid !== undefined ? (dataConnect.newOne.invalid ? <span style={{ color: '#F5222D' }}>数据连接配置有误</span> : <span style={{ color: '#52C41A' }}>测试通过</span>) : ''}
+                                {/* {dataConnect.newOne.invalid !== undefined ? (dataConnect.newOne.invalid ? <span style={{ color: '#F5222D' }}>{dataConnect.newOne.invalidText}</span> : <span style={{ color: '#52C41A' }}>测试通过</span>) : ''} */}
                             </Col>
                             <Col span={12}>
-                                <Button disabled={dataConnect.newOne.validating} onClick={() => dispatch({ type:'dataConnect/remoteValidate'})}>
+                                <Button disabled={dataConnect.newOne.validating || dataConnect.newOne.saving} onClick={() => dispatch({ type:'dataConnect/remoteValidate'})}>
                                 {dataConnect.newOne.validating ? (<Icon type='loading' />) : ''}{dataConnect.newOne.validating ? '测试中' : '测试'}
                                 </Button>
-                                <Button onClick={() => dispatch({ type:'dataConnect/resetNewModel'})}>清空</Button>
+                                <Button disabled={dataConnect.newOne.validating || dataConnect.newOne.saving} onClick={() => dispatch({ type:'dataConnect/resetNewModel'})}>清空</Button>
                                 {/* <Button onClick={() => {this.hideBox()}}>取 消</Button> */}
-                                <Button className={dataConnect.newOne.validating ? 'ant-btn-loading' : ''} type="primary" disabled={dataConnect.newOne.validating} onClick={() => {this.okHandler()}}>
-                                    {dataConnect.newOne.validating ? (<Icon type='loading' />) : ''}
-                                    {dataConnect.newOne.validating ? '校验中' : '保存'}
+                                <Button className={dataConnect.newOne.validating ? 'ant-btn-loading' : ''} type="primary" disabled={dataConnect.newOne.validating || dataConnect.newOne.saving} onClick={() => {this.okHandler()}}>
+                                    {dataConnect.newOne.saving ? (<Icon type='loading' />) : ''}
+                                    {dataConnect.newOne.saving ? '校验中' : '保存'}
                                 </Button>
                             </Col>
                         </Row>

src/constants/url.js

@@ -1,5 +1,5 @@
-const BASE_URL = 'http://10.1.1.168:8094/BI';
-// const BASE_URL = 'http://10.1.80.36:8011';
+// const BASE_URL = 'http://10.1.1.168:8094/BI';
+const BASE_URL = 'http://10.1.80.36:8011';
 
 /**后台接口地址 */
 const URLS = {

src/models/dataConnect.js

@@ -170,8 +170,6 @@ export default {
                     body: validBody
                 });
 
-                console.log('校验数据连接配置', validBody, res);
-
                 // 设置validating为false
                 yield put({ type: 'setNewModelField', name: 'validating', value: false });
 
@@ -179,13 +177,14 @@ export default {
                     // 如果合法
                     // 设置valid为true
                     yield put({ type: 'setNewModelInvalid', name: 'invalid', value: false });
+                    message.success('测试通过');
                 }else {
                     message.error('校验失败: ' + (res.err || res.data.msg));
                     yield put({ type: 'setNewModelInvalid', name: 'invalid', value: true });
                 }
             }catch(e) {
-                console.log(e);
                 message.error('校验失败: ' + e);
+                yield put({ type: 'setNewModelField', name: 'validating', value: false });
             }
         },
         *remoteAdd(action, { select, call, put, takeEvery, takeLatest }) {
@@ -193,32 +192,24 @@ export default {
                 const dataConnect = yield select(state => state.present.dataConnect);
                 const model = dataConnect.newOne;
 
-                let flag = false;
-                if(model.invalid === false) {
-                    flag = true;
-                }else {
-                    // 设置validating为true
-                    yield put({ type: 'setNewModelField', name: 'validating', value: true });
-                    // 调用检测接口检测连接配置是否合法
-                    let validBody = {
-                        id: model.code,
-                        name: model.name,
-                        addrass: model.address,
-                        port: model.port,
-                        databaseType: model.dbType,
-                        dataName: model.dbName,
-                        userName: model.userName,
-                        passWord: model.password
-                    }
-                    const validRes = yield call(service.fetch, {
-                        url: URLS.DATACONNECT_VALIDATE,
-                        body: validBody
-                    });
-                    flag = !validRes.err && validRes.data.code > 0
-                    // 设置validating为false
-                    yield put({ type: 'setNewModelField', name: 'validating', value: false });
+                // 设置validating为true
+                yield put({ type: 'setNewModelField', name: 'saving', value: true });
+                // 调用检测接口检测连接配置是否合法
+                let validBody = {
+                    id: model.code,
+                    name: model.name,
+                    addrass: model.address,
+                    port: model.port,
+                    databaseType: model.dbType,
+                    dataName: model.dbName,
+                    userName: model.userName,
+                    passWord: model.password
                 }
-
+                const validRes = yield call(service.fetch, {
+                    url: URLS.DATACONNECT_VALIDATE,
+                    body: validBody
+                });
+                let flag = !validRes.err && validRes.data.code > 0;
                 if(flag) {
                     // 如果合法
                     // 设置valid为true
@@ -239,19 +230,26 @@ export default {
                         url: URLS.DATACONNECT_ADD,
                         body: body
                     });
+                    yield put({ type: 'setNewModelField', name: 'saving', value: false });
+
                     if(!res.err && res.data.code > 0) {
                         yield put({ type: 'add' });
-                        yield put({ type: 'setNewModelField', name: 'visibleBox', value: false });
                         message.success('新增成功');
+                        return true;
                     }else {
                         message.error('新增失败: ' + (res.err || res.data.msg));
+                        return false;
                     }
                 }else {
+                    message.error('新增失败: ' + validRes.data.msg);
                     yield put({ type: 'setNewModelInvalid', name: 'invalid', value: true });
+                    yield put({ type: 'setNewModelField', name: 'saving', value: false });
+                    return false;
                 }
             }catch(e) {
-                console.log(e);
                 message.error('新增失败: ' + e);
+                yield put({ type: 'setNewModelField', name: 'saving', value: false });
+                return false;
             }
         },
         *remoteModify(action, { select, call, put }) {
@@ -259,31 +257,25 @@ export default {
                 const dataConnect = yield select(state => state.present.dataConnect);
                 const model = dataConnect.newOne;
 
-                let flag = false;
-                if(model.invalid === false) {
-                    flag = true;
-                }else {
-                    // 设置validating为true
-                    yield put({ type: 'setNewModelField', name: 'validating', value: true });
-                    // 调用检测接口检测连接配置是否合法
-                    let validBody = {
-                        id: model.code,
-                        name: model.name,
-                        addrass: model.address,
-                        port: model.port,
-                        databaseType: model.dbType,
-                        dataName: model.dbName,
-                        userName: model.userName,
-                        passWord: model.password
-                    }
-                    const validRes = yield call(service.fetch, {
-                        url: URLS.DATACONNECT_VALIDATE,
-                        body: validBody
-                    });
-                    flag = !validRes.err && validRes.data.code > 0;
-                    // 设置validating为false
-                    yield put({ type: 'setNewModelField', name: 'validating', value: false });
+                // 设置validating为true
+                yield put({ type: 'setNewModelField', name: 'saving', value: true });
+                // 调用检测接口检测连接配置是否合法
+                let validBody = {
+                    id: model.code,
+                    name: model.name,
+                    addrass: model.address,
+                    port: model.port,
+                    databaseType: model.dbType,
+                    dataName: model.dbName,
+                    userName: model.userName,
+                    passWord: model.password
                 }
+                const validRes = yield call(service.fetch, {
+                    url: URLS.DATACONNECT_VALIDATE,
+                    body: validBody
+                });
+                let flag = !validRes.err && validRes.data.code > 0;
+
                 if(flag) {
                     // 如果合法
                     // 设置valid为true
@@ -307,7 +299,9 @@ export default {
                         url: URLS.DATACONNECT_UPDATE,
                         body: data
                     });
-                    console.log('修改数据连接配置', data, res);
+
+                    yield put({ type: 'setNewModelField', name: 'saving', value: false });
+
                     if(!res.err && res.data.code > 0) {
                         let list = dataConnect.list;
                         list = list.map(l => {
@@ -318,15 +312,21 @@ export default {
                         });
                         yield put({ type: 'list', data: list });
                         message.success('修改成功');
-                        yield put({ type: 'setNewModelField', name: 'visibleBox', value: false });
+                        return true;
                     }else {
                         message.error('修改失败: ' + (res.err || res.data.msg));
+                        return false;
                     }
                 }else {
+                    message.error('修改失败: ' + validRes.data.msg);
                     yield put({ type: 'setNewModelInvalid', name: 'invalid', value: true });
+                    yield put({ type: 'setNewModelField', name: 'saving', value: false });
+                    return false;
                 }
             }catch(e) {
                 message.error('修改失败: ' + e);
+                yield put({ type: 'setNewModelField', name: 'saving', value: false });
+                return false;
             }
         },
         *remoteDelete(action, { select, call, put, takeEvery, takeLatest }) {