feat: 完成接口运行页面选择环境增加管理环境的弹层

client/components/Postman/Postman.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Button, Input, Checkbox, Modal, Select, Spin, Icon, Collapse, Tooltip, Tabs, Switch, Row, Col } from 'antd'
 import constants from '../../constants/variable.js'
 import AceEditor from 'client/components/AceEditor/AceEditor'
-
+import _ from 'underscore'
 import { isJson, handleParamsValue, deepCopyJson } from '../../common.js'
 import ModalPostman from '../ModalPostman/index.js'
 import CheckCrossInstall, { initCrossRequest } from './CheckCrossInstall.js'
@@ -84,9 +84,11 @@ export default class Run extends Component {
 
   // 整合header信息
   handleReqHeader = (value, env) => {
+
     let index = value ? env.findIndex(item => {
       return item.name === value;
     }) : 0;
+    index = index === -1 ? 0 : index
     let req_header = [].concat(this.props.data.req_headers);
     let header = [].concat(env[index].header);
     header.forEach(item => {
@@ -121,20 +123,29 @@ export default class Run extends Component {
     if (!this.checkInterfaceData(data)) {
       return null;
     }
-    let headers = this.handleReqHeader(this.state.case_env, this.state.env);
+    let headers = this.handleReqHeader(this.state.case_env, data.env);
     this.setState({
       ...this.state,
       ...data,
       resStatusCode: null,
       resStatusText: null,
       req_headers: headers
+    }, ()=>{
+      let s = !_.find(data.env, item => item.name === this.state.case_env);
+      if (!this.state.case_env || s) {
+        this.setState({
+          case_env: this.state.env[0].name
+        })
+      }
     })
-    if (!this.state.case_env) {
-      this.setState({
-        case_env: this.state.env[0].name
+  }
 
-      })
-    }
+  initEnvState(env) {
+    let headers = this.handleReqHeader(this.state.case_env, env);
+    this.setState({
+      req_headers: headers,
+      env: env
+    })
   }
 
   componentWillMount() {
@@ -157,9 +168,8 @@ export default class Run extends Component {
         this.initState(nextProps.data)
       }
       if (nextProps.data.env !== this.props.data.env) {
-        this.setState({
-          env: nextProps.data.env
-        })
+        this.initEnvState(nextProps.data.env)
+        
       }
     }
   }
@@ -300,12 +310,10 @@ export default class Run extends Component {
 
 
   handleEnvOk = (newEnv, index) => {
-    let headers = this.handleReqHeader(newEnv[index].name, newEnv);
+    
     this.setState({
       envModalVisible: false,
-      env: newEnv,
-      case_env: newEnv[index].name,
-      req_headers: headers
+      case_env: newEnv[index].name
     });
   }
 
@@ -329,6 +337,8 @@ export default class Run extends Component {
       inputValue,
       hasPlugin } = this.state;
 
+
+
     return (
       <div className="interface-test postman">
         <ModalPostman
@@ -341,19 +351,21 @@ export default class Run extends Component {
         >
         </ModalPostman>
         <Modal
-          title="Basic Modal"
+          title='环境设置'
           visible={this.state.envModalVisible}
           onOk={this.handleEnvOk}
           onCancel={this.handleEnvCancel}
           footer={null}
           width={800}
+          className='env-modal'
         >
-          <ProjectEnv projectId={this.props.data.project_id} onOk={this.handleEnvOk} />
+          <ProjectEnv
+            projectId={this.props.data.project_id}
+            onOk={this.handleEnvOk} />
         </Modal>
         <CheckCrossInstall hasPlugin={hasPlugin} />
 
         <div className="url">
-
           <InputGroup compact style={{ display: 'flex' }}>
             <Select disabled value={method} style={{ flexBasis: 60 }} >
               {Object.keys(HTTP_METHOD).map(name => {

client/components/Postman/Postman.scss

@@ -1,5 +1,9 @@
 @import '../../styles/mixin.scss';
 .postman {
+
+
+  
+
   .pretty-editor {
     border: 1px solid #d9d9d9;
     border-radius: 4px;
@@ -23,6 +27,8 @@
     }
   }
 
+  
+
   .insert-code{
     
     margin-right: 20px;
@@ -160,6 +166,10 @@
     color: #2395f1;
   }
 
-  
+}
 
+.env-modal{
+  .ant-modal-body{
+    padding: 0;
+  }
 }

client/containers/Project/Setting/ProjectEnv/ProjectEnvContent.js

@@ -7,12 +7,6 @@ const Option = Select.Option;
 import constants from 'client/constants/variable.js'
 
 
-const EmptyPrompt = () => {
-  return <div className="m-empty-prompt">
-    <span><Icon type="select"></Icon>请选择或创建新环境</span>
-  </div>
-}
-
 class ProjectEnvContent extends Component {
   static propTypes = {
     projectMsg: PropTypes.object,
@@ -222,14 +216,10 @@ class ProjectEnvContent extends Component {
 
     return (
       <div>
-        {projectMsg.name ?
-          <div>
-            {envTpl(projectMsg)}
-            <div className="btnwrap-changeproject">
-              <Button className="m-btn btn-save" icon="save" type="primary" size="large" onClick={this.handleOk} >保 存</Button>
-            </div>
-          </div>
-          : <EmptyPrompt />}
+        {envTpl(projectMsg)}
+        <div className="btnwrap-changeproject">
+          <Button className="m-btn btn-save" icon="save" type="primary" size="large" onClick={this.handleOk} >保 存</Button>
+        </div>
       </div>
     )
   }

client/containers/Project/Setting/ProjectEnv/index.js

@@ -5,7 +5,7 @@ import { Icon, Layout, Tooltip, message, Row, Popconfirm } from 'antd'
 const { Content, Sider } = Layout;
 import ProjectEnvContent from './ProjectEnvContent.js'
 import { connect } from 'react-redux';
-import { updateEnv, getProjectMsg } from '../../../../reducer/modules/project';
+import { updateEnv, getProject } from '../../../../reducer/modules/project';
 import EasyDragSort from '../../../../components/EasyDragSort/EasyDragSort.js';
 
 @connect(
@@ -16,7 +16,7 @@ import EasyDragSort from '../../../../components/EasyDragSort/EasyDragSort.js';
   },
   {
     updateEnv,
-    getProjectMsg
+    getProject
   }
 )
 class ProjectEnv extends Component {
@@ -24,7 +24,7 @@ class ProjectEnv extends Component {
   static propTypes = {
     projectId: PropTypes.number,
     updateEnv: PropTypes.func,
-    getProjectMsg: PropTypes.func,
+    getProject: PropTypes.func,
     projectMsg: PropTypes.object,
     onOk: PropTypes.func
   }
@@ -46,7 +46,8 @@ class ProjectEnv extends Component {
     this.state = this.initState(env, _id);
   }
   async componentWillMount() {
-    await this.props.getProjectMsg(this.props.projectId);
+    await this.props.getProject(this.props.projectId);
+    this.handleClick(0, this.state.env[0])
   }
 
   handleClick = (key, data) => {
@@ -68,7 +69,14 @@ class ProjectEnv extends Component {
   // 删除提示信息
   async showConfirm(key, name) {
     let assignValue = this.delParams(key, name)
-    await this.props.updateEnv(assignValue)
+    await this.props.updateEnv(assignValue).then((res) => {
+      if (res.payload.data.errcode == 0) {
+        this.props.getProject(this.props.projectId);
+        message.success('修改成功! ');
+      }
+    }).catch(() => {
+      message.error('环境设置不成功 ');
+    });
   }
 
   // 删除环境变量项
@@ -98,7 +106,7 @@ class ProjectEnv extends Component {
 
     this.props.updateEnv(assignValue).then((res) => {
       if (res.payload.data.errcode == 0) {
-        this.props.getProjectMsg(this.props.projectId);
+        this.props.getProject(this.props.projectId);
         message.success('修改成功! ');
         this.setState({ ...assignValue });
       }
@@ -128,7 +136,6 @@ class ProjectEnv extends Component {
   }
 
 
-
   render() {
     const { env, currentKey } = this.state;
     const envSettingItems = env.map((item, index) => {
@@ -149,7 +156,7 @@ class ProjectEnv extends Component {
               <Icon
                 type='delete'
                 className="interface-delete-icon"
-                style={{ display: this.state.delIcon == index ? 'block' : 'none' }}
+                style={{ display: this.state.delIcon == index && env.length - 1 !== 0 ? 'block' : 'none' }}
               />
             </Popconfirm>
 
@@ -161,7 +168,7 @@ class ProjectEnv extends Component {
     return (
       <div className="m-env-panel">
         <Layout className="project-env">
-          <Sider width={200} style={{ background: '#fff' }}>
+          <Sider width={195} style={{ background: '#fff' }}>
             <div
               style={{ height: '100%', borderRight: 0 }}
             >

client/containers/Project/Setting/ProjectEnv/index.scss

@@ -1,5 +1,5 @@
 .m-env-panel {
-  padding-top: 8px;
+  // padding-top: 8px;
   min-height: 4.68px;
   margin-top: 0;
   background-color: #fff;

client/reducer/modules/project.js

@@ -59,7 +59,6 @@ export default (state = initialState, action) => {
       };
     }
     case GET_PROJECT_MSG: {
-      console.log('get');
       return {
         ...state,
         projectMsg: action.payload.data.data