fix(接口测试): 修复SQL请求编辑后用例变量显示错误问题

--bug=1008389 --user=赵勇 【github#7532】接口定义中，选择SQL，创建接口，自定义变量修改后，会把原有case的内容全部清空 https://www.tapd.cn/55049933/s/1076029

backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java

@@ -514,11 +514,13 @@ public class ApiDefinitionService {
         }
         this.setModule(test);
         apiDefinitionMapper.updateByPrimaryKeySelective(test);
-        // 同步修改用例
+
+        // 同步修改用例路径
+        if (StringUtils.equals(test.getProtocol(), "HTTP")) {
             List<String> ids = new ArrayList<>();
             ids.add(request.getId());
             apiTestCaseService.updateByApiDefinitionId(ids, test.getPath(), test.getMethod(), test.getProtocol());
-        //saveFollows(test.getId(), request.getFollows());
+        }
         return test;
     }
 

frontend/src/business/components/api/automation/scenario/ApiScenarioVariables.vue

@@ -56,12 +56,15 @@
     },
     methods: {
       remove: function (index) {
+        if(this.items) {
           this.items.splice(index, 1);
           this.$emit('change', this.items);
+        }
       },
       change: function () {
         let isNeedCreate = true;
         let removeIndex = -1;
+        if(this.items) {
           this.items.forEach((item, index) => {
             if (!item.name && !item.value) {
               // 多余的空行
@@ -72,6 +75,7 @@
               isNeedCreate = false;
             }
           });
+        }
         if (isNeedCreate) {
           this.items.push(new KeyValue({enable: true}));
         }

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

@@ -11,8 +11,16 @@
         </el-col>
 
         <el-col>
-          <ms-api-variable-input :show-copy="showCopy" :show-variable="showVariable" :is-read-only="isReadOnly" v-model="item.name" size="small" maxlength="200" @change="change"
-                                 :placeholder="$t('api_test.variable_name')" show-word-limit/>
+          <ms-api-variable-input
+            :show-copy="showCopy"
+            :show-variable="showVariable"
+            :is-read-only="isReadOnly"
+            :placeholder="$t('api_test.variable_name')"
+            v-model="item.name"
+            size="small"
+            maxlength="200"
+            @change="change"
+            show-word-limit/>
         </el-col>
         <el-col>
           <el-autocomplete
@@ -21,7 +29,7 @@
             :fetch-suggestions="funcSearch"
             :placeholder="$t('api_test.value')"
             value-key="name"
-            highlight-first-item>
+            highlight-first-item style="width: 100%">
             <i slot="suffix" class="el-input__icon el-icon-edit pointer" @click="advanced"></i>
           </el-autocomplete>
         </el-col>
@@ -70,13 +78,14 @@
     },
   },
   data() {
-      return {
-      }
+    return {}
   },
   methods: {
     remove: function (index) {
+      if (this.items) {
         this.items.splice(index, 1);
         this.$emit('change', this.items);
+      }
     },
     copy: function (item, index) {
       let copy = {};
@@ -86,6 +95,7 @@
     change: function () {
       let isNeedCreate = true;
       let removeIndex = -1;
+      if (this.items) {
         this.items.forEach((item, index) => {
           if (!item.name && !item.value) {
             // 多余的空行
@@ -96,11 +106,11 @@
             isNeedCreate = false;
           }
         });
+      }
       if (isNeedCreate) {
         this.items.push(new KeyValue({enable: true}));
       }
       this.$emit('change', this.items);
-        // TODO 检查key重复
     },
     isDisable: function (index) {
       return this.items.length - 1 === index;
@@ -140,7 +150,7 @@
 }
 
 .kv-checkbox {
-    width: 20px;
+  width: 70px;
   margin-right: 10px;
 }
 

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

@@ -78,12 +78,10 @@
     </div>
 
     <div v-if="showMock && (currentProtocol === 'HTTP')" class="ms-api-div">
-      <!--      <mock-config :base-mock-config-data="baseMockConfigData" type="http"/>-->
       <mock-tab :base-mock-config-data="baseMockConfigData" :is-tcp="false"/>
     </div>
     <div v-if="showMock && (currentProtocol === 'TCP')" class="ms-api-div">
       <mock-tab :base-mock-config-data="baseMockConfigData" :is-tcp="true"/>
-      <!--      <tcp-mock-config :base-mock-config-data="baseMockConfigData" type="tcp"/>-->
     </div>
     <div v-if="showTestCaseList">
       <!--测试用例列表-->
@@ -263,9 +261,6 @@ export default {
       this.$emit("refresh");
     },
     changeTab(tabType) {
-      if (this.$refs.apiConfig) {
-        this.$refs.apiConfig.handleSave();
-      }
       this.refreshButtonActiveClass(tabType);
     },
     removeListener() {