refactor(系统设置): 优化环境配置相关设置

--bug=1016095 --user=王孝刚 【系统设置】工作空间 - 环境管理 - 创建环境页面，通用配置处，点击"高级设置"的相关问题
https://www.tapd.cn/55049933/s/1230602

backend/src/main/java/io/metersphere/api/dto/definition/request/sampler/MsHTTPSamplerProxy.java

@@ -397,7 +397,7 @@ public class MsHTTPSamplerProxy extends MsTestElement {
                         url = url.replace(this.getPort(), "10990");
                     }
                     try {
-                        if (StringUtils.startsWithAny(url, "http://", "https://")) {
+                        if (!StringUtils.startsWithAny(url, "http://", "https://")) {
                             url = "http://" + url;
                         }
                         URL urlObject = new URL(url);

frontend/src/business/components/api/definition/components/ApiVariableAdvance.vue

@@ -227,15 +227,15 @@
 </template>
 
 <script>
-  import {calculate, Scenario} from "../model/ApiTestModel";
-  import {JMETER_FUNC, MOCKJS_FUNC} from "@/common/js/constants";
-  import {STEP} from "../../automation/scenario/Setting";
-  import MsMainContainer from "../../../common/components/MsMainContainer";
-  import MsAsideContainer from "@/business/components/common/components/MsAsideContainer";
-  import MsContainer from "../../../common/components/MsContainer";
-  import OutsideClick from "@/common/js/outside-click";
+import {calculate, Scenario} from "../model/ApiTestModel";
+import {JMETER_FUNC, MOCKJS_FUNC} from "@/common/js/constants";
+import {STEP} from "../../automation/scenario/Setting";
+import MsMainContainer from "../../../common/components/MsMainContainer";
+import MsAsideContainer from "@/business/components/common/components/MsAsideContainer";
+import MsContainer from "../../../common/components/MsContainer";
+import OutsideClick from "@/common/js/outside-click";
 
-  export default {
+export default {
   name: "MsApiVariableAdvance",
   props: {
     parameters: Array,
@@ -570,7 +570,7 @@
         this.$warning(this.$t('api_test.request.parameters_advance_add_mock_error'));
         return;
       }
-        if (this.itemValue.indexOf('@') == -1) {
+      if (this.currentTab === 0 && this.itemValue.indexOf('@') == -1) {
         this.itemValue = '@' + this.itemValue;
       } else {
         this.itemValue = this.itemValue;
@@ -599,7 +599,7 @@
     saveAdvanced() {
       if (this.itemValue != null && this.itemValue != undefined
         && this.itemValue.indexOf('@') == -1
-          && this.itemValue.indexOf('$') == -1) {
+        && this.itemValue.indexOf('$') == -1 && this.currentTab === 0) {
         this.$set(this.currentItem, 'value', '@' + this.itemValue);
       } else {
         this.$set(this.currentItem, 'value', this.itemValue);
@@ -737,56 +737,56 @@
       }
     },
   }
-  }
+}
 </script>
 
 <style scoped>
 
-  .col-height {
+.col-height {
   height: 40vh;
   overflow: auto;
-  }
+}
 
-  .maximize-container .ms-aside-container {
+.maximize-container .ms-aside-container {
   min-width: 680px;
-  }
+}
 
-  .ms-aside-container {
+.ms-aside-container {
   height: calc(100vh - 50px) !important;
-  }
+}
 
-  .ms-open-btn-left {
+.ms-open-btn-left {
   margin-left: 35px;
-  }
+}
 
-  .father .child {
+.father .child {
   display: none;
-  }
+}
 
-  .father:hover .child {
+.father:hover .child {
   display: block;
-  }
+}
 
-  .ms-col-one {
+.ms-col-one {
   margin-top: 10px;
-  }
+}
 
-  .custom-tree-node {
+.custom-tree-node {
   width: 1000px;
-  }
+}
 
-  .kv-row {
+.kv-row {
   margin-top: 10px;
-  }
+}
 
-  .extract-add {
+.extract-add {
   padding: 10px;
   border: #DCDFE6 solid 1px;
   margin: 5px 0;
   border-radius: 5px;
-  }
+}
 
-  .extract-item {
+.extract-item {
   width: 100%;
-  }
+}
 </style>

frontend/src/business/components/api/test/components/ApiVariableAdvance.vue

@@ -36,7 +36,7 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('api_test.variable')">
         <el-row>
-          <el-col :span="6" class="col-height">
+          <el-col :span="6" class="col-height" v-if="environment || scenario || preRequestParams.length > 0">
             <div v-if="environment">
               <p>{{ $t('api_test.environment.environment') }}</p>
               <el-tree :data="environmentParams" :props="treeProps" @node-click="selectVariable"></el-tree>
@@ -45,7 +45,7 @@
               <p>{{ $t('api_test.scenario.scenario') }}</p>
               <el-tree :data="scenarioParams" :props="treeProps" @node-click="selectVariable"></el-tree>
             </div>
-            <div v-if="preRequestParams">
+            <div v-if="preRequestParams && preRequestParams.length > 0">
               <p>{{ $t('api_test.request.parameters_pre_request') }}</p>
               <el-tree :data="preRequestParams" :props="treeProps" @node-click="selectVariable"></el-tree>
             </div>
@@ -53,7 +53,8 @@
           <el-col :span="18" class="col-height">
             <div>
               <h1>{{ $t('api_test.request.jmeter_func') }}</h1>
-              <el-table border :data="jmeterFuncs" class="adjust-table table-content" height="400">
+              <el-table border :data="jmeterFuncs" class="adjust-table table-content" height="400"
+                        @row-click="handleRowClick">
                 <el-table-column prop="type" label="Type" width="150"/>
                 <el-table-column prop="name" label="Functions" width="250"/>
                 <el-table-column prop="description" label="Description"/>
@@ -63,15 +64,15 @@
         </el-row>
       </el-tab-pane>
     </el-tabs>
-    <el-form>
-      <el-form-item>
-        <el-input :placeholder="valueText" size="small"
-                  v-model="itemValue"/>
-      </el-form-item>
-    </el-form>
     <div style="padding-top: 10px;">
-      <el-row type="flex" align="middle">
-        <el-col :span="12">
+      <el-row type="flex">
+        <el-col :span="16">
+          <div>
+            <el-form :inline="true" class="demo-form-inline">
+              <el-form-item>
+                <el-input :placeholder="valueText" size="small" v-model="itemValue"/>
+              </el-form-item>
+              <el-form-item>
                 <el-button size="small" type="primary" plain @click="saveAdvanced()">
                   {{ $t('commons.save') }}
                 </el-button>
@@ -81,6 +82,9 @@
                 <el-button size="small" type="success" plain @click="showPreview()" v-if="currentTab === 0">
                   {{ $t('api_test.request.parameters_preview') }}
                 </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
         </el-col>
         <el-col>
           <div> {{ itemValuePreview }}</div>
@@ -255,14 +259,14 @@ export default {
         let index = this.mockVariableFuncs.indexOf(itemFunc);
         this.mockVariableFuncs = this.mockVariableFuncs.slice(0, index);
         this.mockVariableFuncs.push({name: '', params: []});
-        let valindex = this.itemValue.indexOf('|'+func.name);
-        this.itemValue = this.itemValue.slice(0,valindex);
-      }else {
+        let valindex = this.itemValue.indexOf('|' + func.name);
+        this.itemValue = this.itemValue.slice(0, valindex);
+      } else {
         this.methodChange(itemFunc, func);
       }
     },
     addFunc() {
-      if (this.itemValue.indexOf('@') == -1) {
+      if (this.currentTab === 0 && this.itemValue.indexOf('@') == -1) {
         this.itemValue = '@' + this.itemValue;
       } else {
         this.itemValue = this.itemValue;
@@ -289,7 +293,7 @@ export default {
       this.mockVariableFuncs.push({name: '', params: []});
     },
     saveAdvanced() {
-      if (this.itemValue.indexOf('@') == -1) {
+      if (this.currentTab === 0 && this.itemValue.indexOf('@') == -1) {
         this.currentItem.value = '@' + this.itemValue;
       } else {
         this.currentItem.value = this.itemValue;
@@ -298,7 +302,12 @@ export default {
       this.mockVariableFuncs = [];
       this.$emit('advancedRefresh', this.currentItem.value);
 
+    },
+    handleRowClick(row) {
+      if (row && row.name) {
+        this.itemValue = row.name;
       }
+    },
   }
 }
 </script>

frontend/src/business/components/api/test/components/environment/ApiScenarioVariables.vue

@@ -54,15 +54,15 @@
           </template>
         </ms-table-column>
 
-        <ms-table-column prop="value" :label="$t('api_test.value')"
-                         min-width="200px" sortable>
+        <el-table-column prop="value" :label="$t('api_test.value')"
+                         min-width="200px" sortable show-overflow-tooltip>
           <template slot-scope="scope">
             <el-input v-model="scope.row.value" size="mini" v-if="scope.row.type !=='CSV'"
                       :placeholder="valueText(scope.row)"
                       :disabled="scope.row.type === 'COUNTER' || scope.row.type === 'RANDOM'"/>
             <csv-file-upload :parameter="scope.row" v-if="scope.row.type ==='CSV'"/>
           </template>
-        </ms-table-column>
+        </el-table-column>
         <ms-table-column prop="description" :label="$t('commons.remark')"
                          min-width="160" sortable>
           <template slot-scope="scope">

frontend/src/business/components/api/test/components/environment/ApiVariableAdvance.vue

@@ -32,24 +32,11 @@
       </el-tab-pane>
       <el-tab-pane :label="$t('api_test.variable')">
         <el-row>
-          <el-col :span="6" class="col-height">
-            <div v-if="environment">
-              <p>{{ $t('api_test.environment.environment') }}</p>
-              <el-tree :data="environmentParams" :props="treeProps" @node-click="selectVariable"></el-tree>
-            </div>
-            <div v-if="scenario">
-              <p>{{ $t('api_test.scenario.scenario') }}</p>
-              <el-tree :data="scenarioParams" :props="treeProps" @node-click="selectVariable"></el-tree>
-            </div>
-            <div v-if="preRequestParams">
-              <p>{{ $t('api_test.request.parameters_pre_request') }}</p>
-              <el-tree :data="preRequestParams" :props="treeProps" @node-click="selectVariable"></el-tree>
-            </div>
-          </el-col>
-          <el-col :span="18" class="col-height">
+          <el-col class="col-height">
             <div>
               <h1>{{ $t('api_test.request.jmeter_func') }}</h1>
-              <el-table border :data="jmeterFuncs" class="adjust-table table-content" height="400">
+              <el-table border :data="jmeterFuncs" class="adjust-table table-content" height="400"
+                        @row-click="handleRowClick">
                 <el-table-column prop="type" label="Type" width="150"/>
                 <el-table-column prop="name" label="Functions" width="250"/>
                 <el-table-column prop="description" label="Description"/>
@@ -59,21 +46,27 @@
         </el-row>
       </el-tab-pane>
     </el-tabs>
-    <el-form>
-      <el-form-item>
-        <el-input :placeholder="valueText" size="small"
-                  v-model="itemValue"/>
-      </el-form-item>
-    </el-form>
     <div style="padding-top: 10px;">
-      <el-row type="flex" align="middle">
-        <el-col :span="12">
+      <el-row type="flex">
+        <el-col :span="16">
+          <div>
+            <el-form :inline="true" class="demo-form-inline">
+              <el-form-item>
+                <el-input :placeholder="valueText" size="small" v-model="itemValue"/>
+              </el-form-item>
+              <el-form-item>
+                <el-button size="small" type="primary" plain @click="saveAdvanced()">
+                  {{ $t('commons.save') }}
+                </el-button>
                 <el-button size="small" type="info" plain @click="addFunc()" v-if="currentTab === 0">
                   {{ $t('api_test.request.parameters_advance_add_func') }}
                 </el-button>
                 <el-button size="small" type="success" plain @click="showPreview()" v-if="currentTab === 0">
                   {{ $t('api_test.request.parameters_preview') }}
                 </el-button>
+              </el-form-item>
+            </el-form>
+          </div>
         </el-col>
         <el-col>
           <div> {{ itemValuePreview }}</div>
@@ -293,7 +286,12 @@ export default {
       this.mockVariableFuncs = [];
       this.$emit('advancedRefresh', this.currentItem.value);
 
+    },
+    handleRowClick(row) {
+      if (row && row.name) {
+        this.itemValue = row.name;
       }
+    },
   }
 }
 </script>

frontend/src/business/components/api/test/components/environment/ApiVariableSetting.vue

@@ -1,7 +1,7 @@
 <template>
   <ms-edit-dialog
     :visible.sync="visible"
-    width="700px"
+    width="70%"
     :title="$t('schema.adv_setting')"
     :with-footer="false"
     append-to-body