fix(接口测试): 修复接口环境显示变量问题

--bug=1034069 --user=王孝刚 【接口测试】api、case、场景自定义请求通过后置脚本设置环境变量-执行成功第一次查看环境变量未显示 https://www.tapd.cn/55049933/s/1448742

framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue

@@ -32,7 +32,8 @@
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item command="exportApi">{{
                 $t("envrionment.export_variable_tip")
-            }}</el-dropdown-item>
+              }}
+            </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
 
@@ -72,7 +73,7 @@
           @refresh="onChange"
           ref="variableTable"
       >
-        <ms-table-column prop="num" sortable label="ID" min-width="60" />
+        <ms-table-column prop="num" sortable label="ID" min-width="60"/>
         <ms-table-column
             prop="scope"
             sortable
@@ -232,7 +233,7 @@
           :total="total"
       />
     </div>
-    <batch-add-parameter @batchSave="batchSave" ref="batchAdd" />
+    <batch-add-parameter @batchSave="batchSave" ref="batchAdd"/>
     <api-variable-setting
         ref="apiVariableSetting"
         @changeData="change"
@@ -245,7 +246,7 @@
 </template>
 
 <script>
-import { KeyValue } from "../../../model/EnvTestModel";
+import {KeyValue} from "../../../model/EnvTestModel";
 import MsApiVariableInput from "./ApiVariableInput";
 import BatchAddParameter from "./BatchAddParameter";
 import MsTableButton from "../../MsTableButton";
@@ -253,9 +254,9 @@ import MsTable from "../../table/MsTable";
 import MsTableColumn from "../../table/MsTableColumn";
 import ApiVariableSetting from "./ApiVariableSetting";
 import CsvFileUpload from "./variable/CsvFileUpload";
-import { downloadFile, getUUID, operationConfirm } from "../../../utils";
+import {downloadFile, getUUID, operationConfirm} from "../../../utils";
 import VariableImport from "./variable/VariableImport";
-import { forEach } from "lodash-es";
+import {forEach} from "lodash-es";
 import MsTablePagination from "../../pagination/TablePagination";
 
 export default {
@@ -301,17 +302,17 @@ export default {
         },
       ],
       typeSelectOptions: [
-        { value: "CONSTANT", label: this.$t("api_test.automation.constant") },
+        {value: "CONSTANT", label: this.$t("api_test.automation.constant")},
-        { value: "LIST", label: this.$t("test_track.case.list") },
+        {value: "LIST", label: this.$t("test_track.case.list")},
-        { value: "CSV", label: "CSV" },
+        {value: "CSV", label: "CSV"},
-        { value: "COUNTER", label: this.$t("api_test.automation.counter") },
+        {value: "COUNTER", label: this.$t("api_test.automation.counter")},
-        { value: "RANDOM", label: this.$t("api_test.automation.random") },
+        {value: "RANDOM", label: this.$t("api_test.automation.random")},
       ],
       uiTypeSelectOptions: [
-        { value: "STRING", label: this.$t("api_test.automation.string") },
+        {value: "STRING", label: this.$t("api_test.automation.string")},
-        { value: "ARRAY", label: this.$t("api_test.automation.array") },
+        {value: "ARRAY", label: this.$t("api_test.automation.array")},
-        { value: "JSON", label: this.$t("api_test.automation.json") },
+        {value: "JSON", label: this.$t("api_test.automation.json")},
-        { value: "NUMBER", label: this.$t("api_test.automation.number") },
+        {value: "NUMBER", label: this.$t("api_test.automation.number")},
       ],
       pageData: [],
       selectVariable: "",
@@ -319,8 +320,8 @@ export default {
       allData: [],
       lastPage: 1,
       scopeTypeFilters: [
-        { text: this.$t("commons.api"), value: "api" },
+        {text: this.$t("commons.api"), value: "api"},
-        { text: this.$t("commons.ui_test"), value: "ui" },
+        {text: this.$t("commons.ui_test"), value: "ui"},
       ],
       condition: {
         selectAll: false,
@@ -331,7 +332,7 @@ export default {
   watch: {
     items: {
       handler(v) {
-        this.sortParameters();
+        this.initData(v);
       },
       immediate: true,
       deep: true,
@@ -378,7 +379,7 @@ export default {
           repeatKey = item.name;
         } else {
           itemNames.add(item.name);
-          if(row && item.id === row.id) {
+          if (row && item.id === row.id) {
             item.name = row.name;
           }
         }
@@ -426,7 +427,7 @@ export default {
       this.$emit("change", this.items);
     },
     // 接口/UI change
-    changeScope: function(value,row) {
+    changeScope: function (value, row) {
       if (value === "ui") {
         row.type = "STRING";
       } else {
@@ -455,7 +456,7 @@ export default {
         if (item.id === data.id) {
           item.type = value;
           item.value = data.value;
-          if(notDelimiters) {
+          if (notDelimiters) {
             item.delimiter = data.delimiter;
             item.files = data.files;
             item.quotedData = data.quotedData;
@@ -510,11 +511,11 @@ export default {
     },
     querySearch(queryString, cb) {
       let restaurants = [
-        { value: "UTF-8" },
+        {value: "UTF-8"},
-        { value: "UTF-16" },
+        {value: "UTF-16"},
-        { value: "GB2312" },
+        {value: "GB2312"},
-        { value: "ISO-8859-15" },
+        {value: "ISO-8859-15"},
-        { value: "US-ASCll" },
+        {value: "US-ASCll"},
       ];
       let results = queryString
           ? restaurants.filter(this.createFilter(queryString))
@@ -768,23 +769,24 @@ export default {
     handleExportCommand(command) {
       this.exportJSON();
     },
-  },
+    initData(v) {
-  created() {
+      if (v.length === 0) {
-    if (this.items.length === 0) {
+        v.push(new KeyValue({enable: true, scope: "api"}));
-      this.items.push(new KeyValue({ enable: true, scope: "api" }));
       } else {
         //历史数据默认是 api 应用场景
-      forEach(this.items, (item) => {
+        forEach(v, (item) => {
           delete item.hidden;
           if (!item.scope) {
             this.$set(item, "scope", "api");
           }
         });
-      this.allData = this.items;
+        this.allData = v;
         this.sortParameters();
         this.queryPage();
       }
+    }
   },
+
 };
 </script>