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

--bug=1008389 --user=赵勇【github#7532】接口定义中，选择SQL，创建接口，自定义变量修改后，会把原有case的内容全部清空 https://www.tapd.cn/55049933/s/1076029
2021-11-29 16:09:18 +08:00 · 2021-11-29 16:09:18 +08:00 · 0d65bdc8ff
parent 2c67075c32
commit 0d65bdc8ff
4 changed files with 117 additions and 106 deletions
--- a/backend/src/main/java/io/metersphere/api/service/ApiDefinitionService.java
+++ b/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());
-        apiTestCaseService.updateByApiDefinitionId(ids, test.getPath(), test.getMethod(), test.getProtocol());
-        //saveFollows(test.getId(), request.getFollows());
+
+        // 同步修改用例路径
+        if (StringUtils.equals(test.getProtocol(), "HTTP")) {
+            List<String> ids = new ArrayList<>();
+            ids.add(request.getId());
+            apiTestCaseService.updateByApiDefinitionId(ids, test.getPath(), test.getMethod(), test.getProtocol());
+        }
        return test;
    }

--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioVariables.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioVariables.vue
@ -56,22 +56,26 @@
    },
    methods: {
      remove: function (index) {
-        this.items.splice(index, 1);
-        this.$emit('change', this.items);
+        if(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 (!item.name && !item.value) {
-            // 多余的空行
-            if (index !== this.items.length - 1) {
-              removeIndex = index;
+        if(this.items) {
+          this.items.forEach((item, index) => {
+            if (!item.name && !item.value) {
+              // 多余的空行
+              if (index !== this.items.length - 1) {
+                removeIndex = index;
+              }
+              // 没有空行，需要创建空行
+              isNeedCreate = false;
            }
-            // 没有空行，需要创建空行
-            isNeedCreate = false;
-          }
-        });
+          });
+        }
        if (isNeedCreate) {
          this.items.push(new KeyValue({enable: true}));
        }
--- a/frontend/src/business/components/api/definition/components/ApiScenarioVariables.vue
+++ b/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"
-                                 :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>
@ -45,47 +53,49 @@
 </template>

 <script>
-  import {KeyValue} from "../model/ApiTestModel";
-  import MsApiVariableInput from "./ApiVariableInput";
-  import {JMETER_FUNC, MOCKJS_FUNC} from "@/common/js/constants";
-  import MsApiVariableAdvance from "../../test/components/ApiVariableAdvance";
+import {KeyValue} from "../model/ApiTestModel";
+import MsApiVariableInput from "./ApiVariableInput";
+import {JMETER_FUNC, MOCKJS_FUNC} from "@/common/js/constants";
+import MsApiVariableAdvance from "../../test/components/ApiVariableAdvance";

-  export default {
-    name: "MsApiScenarioVariables",
-    components: {MsApiVariableInput, MsApiVariableAdvance},
-    props: {
-      description: String,
-      items: Array,
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      },
-      showVariable: {
-        type: Boolean,
-        default: true
-      },
-      showCopy: {
-        type: Boolean,
-        default: true
-      },
+export default {
+  name: "MsApiScenarioVariables",
+  components: {MsApiVariableInput, MsApiVariableAdvance},
+  props: {
+    description: String,
+    items: Array,
+    isReadOnly: {
+      type: Boolean,
+      default: false
    },
-    data() {
-      return {
-      }
+    showVariable: {
+      type: Boolean,
+      default: true
    },
-    methods: {
-      remove: function (index) {
+    showCopy: {
+      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 = {};
-        Object.assign(copy, item);
-        this.items.splice(index + 1, 0, copy);
-      },
-      change: function () {
-        let isNeedCreate = true;
-        let removeIndex = -1;
+      }
+    },
+    copy: function (item, index) {
+      let copy = {};
+      Object.assign(copy, item);
+      this.items.splice(index + 1, 0, copy);
+    },
+    change: function () {
+      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}));
-        }
-        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) {
+      }
+      if (isNeedCreate) {
        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 {
-    font-size: 13px;
-  }
+.kv-description {
+  font-size: 13px;
+}

-  .kv-checkbox {
-    width: 20px;
-    margin-right: 10px;
-  }
+.kv-checkbox {
+  width: 70px;
+  margin-right: 10px;
+}

-  .kv-row {
-    margin-top: 10px;
-  }
+.kv-row {
+  margin-top: 10px;
+}

-  .kv-delete,.kv-copy {
-    width: 60px;
-  }
+.kv-delete, .kv-copy {
+  width: 60px;
+}
 </style>
--- a/frontend/src/business/components/api/definition/components/EditCompleteContainer.vue
+++ b/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() {