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);
-        // 同步修改用例
+
-        List<String> ids = new ArrayList<>();
+        // 同步修改用例路径
-        ids.add(request.getId());
+        if (StringUtils.equals(test.getProtocol(), "HTTP")) {
-        apiTestCaseService.updateByApiDefinitionId(ids, test.getPath(), test.getMethod(), test.getProtocol());
+            List<String> ids = new ArrayList<>();
-        //saveFollows(test.getId(), request.getFollows());
+            ids.add(request.getId());
+            apiTestCaseService.updateByApiDefinitionId(ids, test.getPath(), test.getMethod(), test.getProtocol());
+        }
         return test;
     }
 

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

@@ -56,22 +56,26 @@
     },
     methods: {
       remove: function (index) {
-        this.items.splice(index, 1);
+        if(this.items) {
-        this.$emit('change', this.items);
+          this.items.splice(index, 1);
+          this.$emit('change', this.items);
+        }
       },
       change: function () {
         let isNeedCreate = true;
         let removeIndex = -1;
-        this.items.forEach((item, index) => {
+        if(this.items) {
-          if (!item.name && !item.value) {
+          this.items.forEach((item, index) => {
-            // 多余的空行
+            if (!item.name && !item.value) {
-            if (index !== this.items.length - 1) {
+              // 多余的空行
-              removeIndex = index;
+              if (index !== this.items.length - 1) {
+                removeIndex = index;
+              }
+              // 没有空行，需要创建空行
+              isNeedCreate = false;
             }
-            // 没有空行，需要创建空行
+          });
-            isNeedCreate = false;
+        }
-          }
-        });
         if (isNeedCreate) {
           this.items.push(new KeyValue({enable: true}));
         }

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <span class="kv-description" v-if="description">
-      {{description}}
+      {{ description }}
     </span>
     <div class="kv-row" v-for="(item, index) in items" :key="index">
       <el-row type="flex" :gutter="5" justify="space-between" align="middle">
@@ -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"
+          <ms-api-variable-input
-                                 :placeholder="$t('api_test.variable_name')" show-word-limit/>
+            :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>
@@ -45,47 +53,49 @@
 </template>
 
 <script>
-  import {KeyValue} from "../model/ApiTestModel";
+import {KeyValue} from "../model/ApiTestModel";
-  import MsApiVariableInput from "./ApiVariableInput";
+import MsApiVariableInput from "./ApiVariableInput";
-  import {JMETER_FUNC, MOCKJS_FUNC} from "@/common/js/constants";
+import {JMETER_FUNC, MOCKJS_FUNC} from "@/common/js/constants";
-  import MsApiVariableAdvance from "../../test/components/ApiVariableAdvance";
+import MsApiVariableAdvance from "../../test/components/ApiVariableAdvance";
 
-  export default {
+export default {
-    name: "MsApiScenarioVariables",
+  name: "MsApiScenarioVariables",
-    components: {MsApiVariableInput, MsApiVariableAdvance},
+  components: {MsApiVariableInput, MsApiVariableAdvance},
-    props: {
+  props: {
-      description: String,
+    description: String,
-      items: Array,
+    items: Array,
-      isReadOnly: {
+    isReadOnly: {
-        type: Boolean,
+      type: Boolean,
-        default: false
+      default: false
-      },
-      showVariable: {
-        type: Boolean,
-        default: true
-      },
-      showCopy: {
-        type: Boolean,
-        default: true
-      },
     },
-    data() {
+    showVariable: {
-      return {
+      type: Boolean,
-      }
+      default: true
     },
-    methods: {
+    showCopy: {
-      remove: function (index) {
+      type: Boolean,
+      default: true
+    },
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    remove: function (index) {
+      if (this.items) {
         this.items.splice(index, 1);
         this.$emit('change', this.items);
-      },
+      }
-      copy: function (item, index) {
+    },
-        let copy = {};
+    copy: function (item, index) {
-        Object.assign(copy, item);
+      let copy = {};
-        this.items.splice(index + 1, 0, copy);
+      Object.assign(copy, item);
-      },
+      this.items.splice(index + 1, 0, copy);
-      change: function () {
+    },
-        let isNeedCreate = true;
+    change: function () {
-        let removeIndex = -1;
+      let isNeedCreate = true;
+      let removeIndex = -1;
+      if (this.items) {
         this.items.forEach((item, index) => {
           if (!item.name && !item.value) {
             // 多余的空行
@@ -96,59 +106,59 @@
             isNeedCreate = false;
           }
         });
-        if (isNeedCreate) {
+      }
-          this.items.push(new KeyValue({enable: true}));
+      if (isNeedCreate) {
-        }
-        this.$emit('change', this.items);
-        // TODO 检查key重复
-      },
-      isDisable: function (index) {
-        return this.items.length - 1 === index;
-      },
-      advanced() {
-        this.$refs.variableAdvance.open();
-      },
-      createFilter(queryString) {
-        return (variable) => {
-          return (variable.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
-        };
-      },
-      funcFilter(queryString) {
-        return (func) => {
-          return (func.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
-        };
-      },
-      funcSearch(queryString, cb) {
-        let funcs = MOCKJS_FUNC.concat(JMETER_FUNC);
-        let results = queryString ? funcs.filter(this.funcFilter(queryString)) : funcs;
-        // 调用 callback 返回建议列表的数据
-        cb(results);
-      },
-    },
-
-    created() {
-      if (this.items.length === 0) {
         this.items.push(new KeyValue({enable: true}));
       }
+      this.$emit('change', this.items);
+    },
+    isDisable: function (index) {
+      return this.items.length - 1 === index;
+    },
+    advanced() {
+      this.$refs.variableAdvance.open();
+    },
+    createFilter(queryString) {
+      return (variable) => {
+        return (variable.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+      };
+    },
+    funcFilter(queryString) {
+      return (func) => {
+        return (func.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
+      };
+    },
+    funcSearch(queryString, cb) {
+      let funcs = MOCKJS_FUNC.concat(JMETER_FUNC);
+      let results = queryString ? funcs.filter(this.funcFilter(queryString)) : funcs;
+      // 调用 callback 返回建议列表的数据
+      cb(results);
+    },
+  },
+
+  created() {
+    if (this.items.length === 0) {
+      this.items.push(new KeyValue({enable: true}));
     }
   }
+}
 </script>
 
 <style scoped>
-  .kv-description {
+.kv-description {
-    font-size: 13px;
+  font-size: 13px;
-  }
+}
 
-  .kv-checkbox {
+.kv-checkbox {
-    width: 20px;
+  width: 70px;
-    margin-right: 10px;
+  margin-right: 10px;
-  }
+}
 
-  .kv-row {
+.kv-row {
-    margin-top: 10px;
+  margin-top: 10px;
-  }
+}
 
-  .kv-delete,.kv-copy {
+.kv-delete, .kv-copy {
-    width: 60px;
+  width: 60px;
-  }
+}
 </style>

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() {