fix(接口测试): 解决环境配置报错&更改scope后类型异常

framework/sdk-parent/frontend/src/components/environment/ApiEnvironmentConfig.vue

@@ -1,17 +1,41 @@
 <template>
   <div>
-    <el-dialog :close-on-click-modal="false" :title="$t('api_test.environment.environment_config')"
+    <el-dialog
-               :visible.sync="visible" class="environment-dialog" width="80%"
+      :close-on-click-modal="false"
-               @close="close" append-to-body destroy-on-close ref="environmentConfig" top="2vh">
+      :title="$t('api_test.environment.environment_config')"
+      :visible.sync="visible"
+      class="environment-dialog"
+      width="80%"
+      @close="close"
+      append-to-body
+      destroy-on-close
+      ref="environmentConfig"
+      top="2vh"
+    >
       <el-container v-loading="result">
-        <ms-aside-item :enable-aside-hidden="false" :title="$t('api_test.environment.environment_list')"
+        <ms-aside-item
-                       :data="environments" :item-operators="environmentOperators" :add-fuc="addEnvironment"
+          :enable-aside-hidden="false"
-                       :env-add-permission="ENV_CREATE"
+          :title="$t('api_test.environment.environment_list')"
-                       :delete-fuc="openDelEnv" @itemSelected="environmentSelected" ref="environmentItems"/>
+          :data="environments"
-        <environment-edit :if-create="ifCreate" :environment="currentEnvironment" v-if="visible"
+          :item-operators="environmentOperators"
-                          ref="environmentEdit" :is-read-only="isReadOnly"
+          :add-fuc="addEnvironment"
-                          @confirm="save" :is-project="true" :key="currentEnvironment.id"
+          :env-add-permission="ENV_CREATE"
-                          @close="close" @refreshAfterSave="refresh">
+          :delete-fuc="openDelEnv"
+          @itemSelected="environmentSelected"
+          ref="environmentItems"
+        />
+        <environment-edit
+          :if-create="ifCreate"
+          :environment="currentEnvironment"
+          v-if="visible"
+          ref="environmentEdit"
+          :is-read-only="isReadOnly"
+          @confirm="save"
+          :is-project="true"
+          :key="currentEnvironment.id"
+          @close="close"
+          @refreshAfterSave="refresh"
+        >
         </environment-edit>
       </el-container>
     </el-dialog>
@@ -19,14 +43,17 @@
 </template>
 
 <script>
-import draggable from 'vuedraggable';
+import draggable from "vuedraggable";
 import MsAsideItem from "../../components/MsAsideItem";
 import EnvironmentEdit from "../../components/environment/EnvironmentEdit";
-import {listenGoBack, removeGoBackListener, getUUID} from "../../utils";
+import { listenGoBack, removeGoBackListener, getUUID } from "../../utils";
-import {hasPermission} from "../../utils/permission";
+import { hasPermission } from "../../utils/permission";
-import {Environment, parseEnvironment} from "../../model/EnvironmentModel";
+import { Environment, parseEnvironment } from "../../model/EnvironmentModel";
 import MsDialogHeader from "../../components/MsDialogHeader";
-import {delApiEnvironment, getEnvironmentByProjectId} from "../../api/environment";
+import {
+  delApiEnvironment,
+  getEnvironmentByProjectId,
+} from "../../api/environment";
 import EnvironmentGlobalScript from "./EnvironmentGlobalScript";
 import GlobalAssertions from "./assertion/GlobalAssertions";
 
@@ -38,75 +65,88 @@ export default {
     EnvironmentGlobalScript,
     GlobalAssertions,
     draggable,
-    MsDialogHeader
+    MsDialogHeader,
   },
   data() {
     return {
       result: false,
       visible: false,
-      projectId: '',
+      projectId: "",
       environments: [],
       currentEnvironment: new Environment(),
       environmentOperators: [
         {
-          icon: 'el-icon-document-copy',
+          icon: "el-icon-document-copy",
           func: this.copyEnvironment,
-          permissions: this.type === 'project' ?
+          permissions:
-            ['PROJECT_ENVIRONMENT:READ+COPY'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+COPY']
+            this.type === "project"
+              ? ["PROJECT_ENVIRONMENT:READ+COPY"]
+              : ["WORKSPACE_PROJECT_ENVIRONMENT:READ+COPY"],
         },
         {
-          icon: 'el-icon-delete',
+          icon: "el-icon-delete",
           func: this.deleteEnvironment,
-          permissions: this.type === 'project' ?
+          permissions:
-            ['PROJECT_ENVIRONMENT:READ+DELETE'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+DELETE']
+            this.type === "project"
-        }
+              ? ["PROJECT_ENVIRONMENT:READ+DELETE"]
+              : ["WORKSPACE_PROJECT_ENVIRONMENT:READ+DELETE"],
+        },
       ],
-      selectEnvironmentId: '',
+      selectEnvironmentId: "",
       ifCreate: false, //是否是创建环境
       currentIndex: -1,
-      isCopy: false
+      isCopy: false,
-    }
+    };
   },
   props: {
     type: {
       type: String,
       default() {
         return "project";
-      }
+      },
-    }
+    },
   },
   computed: {
     ENV_CREATE() {
-      return this.type === 'project' ?
+      return this.type === "project"
-        ['PROJECT_ENVIRONMENT:READ+CREATE'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+CREATE'];
+        ? ["PROJECT_ENVIRONMENT:READ+CREATE"]
+        : ["WORKSPACE_PROJECT_ENVIRONMENT:READ+CREATE"];
     },
     ENV_EDIT() {
-      return this.type === 'project' ?
+      return this.type === "project"
-        ['PROJECT_ENVIRONMENT:READ+EDIT'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT'];
+        ? ["PROJECT_ENVIRONMENT:READ+EDIT"]
+        : ["WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT"];
     },
     isReadOnly() {
       // 区分 工作空间下的环境相关菜单/项目下的环境相关菜单
-      return this.type === 'project' ?
+      return this.type === "project"
-        !hasPermission('PROJECT_ENVIRONMENT:READ+EDIT') : !hasPermission('WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT');
+        ? !hasPermission("PROJECT_ENVIRONMENT:READ+EDIT")
-    }
+        : !hasPermission("WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT");
+    },
   },
   methods: {
     updateGlobalScript(currentEnvironment, isPreScript, filedName, value) {
       if (isPreScript) {
         if (filedName === "connScenario") {
-          currentEnvironment.config.globalScriptConfig.connScenarioPreScript = value;
+          currentEnvironment.config.globalScriptConfig.connScenarioPreScript =
+            value;
         } else if (filedName === "execAfterPrivateScript") {
-          currentEnvironment.config.globalScriptConfig.isPreScriptExecAfterPrivateScript = value;
+          currentEnvironment.config.globalScriptConfig.isPreScriptExecAfterPrivateScript =
+            value;
         } else if (filedName === "filterRequest") {
-          currentEnvironment.config.globalScriptConfig.filterRequestPreScript = value;
+          currentEnvironment.config.globalScriptConfig.filterRequestPreScript =
+            value;
         }
       } else {
         if (filedName === "connScenario") {
-          currentEnvironment.config.globalScriptConfig.connScenarioPostScript = value;
+          currentEnvironment.config.globalScriptConfig.connScenarioPostScript =
+            value;
         } else if (filedName === "execAfterPrivateScript") {
-          currentEnvironment.config.globalScriptConfig.isPostScriptExecAfterPrivateScript = value;
+          currentEnvironment.config.globalScriptConfig.isPostScriptExecAfterPrivateScript =
+            value;
         } else if (filedName === "filterRequest") {
-          currentEnvironment.config.globalScriptConfig.filterRequestPostScript = value;
+          currentEnvironment.config.globalScriptConfig.filterRequestPostScript =
+            value;
         }
       }
     },
@@ -118,23 +158,30 @@ export default {
       listenGoBack(this.close);
     },
     deleteEnvironment(environment, index) {
-      this.$alert(this.$t('commons.delete') + "(" + environment.name + ")" + this.$t('project.del_env_tip'), '', {
+      this.$alert(
-        confirmButtonText: this.$t('commons.confirm'),
+        this.$t("commons.delete") +
-        cancelButtonText: this.$t('commons.cancel'),
+          "(" +
-        callback: (action) => {
+          environment.name +
-          if (action === 'confirm') {
+          ")" +
-            if (environment.id) {
+          this.$t("project.del_env_tip"),
-              this.result = delApiEnvironment(environment.id).then(() => {
+        "",
-                this.$success(this.$t('commons.delete_success'));
+        {
-                this.getEnvironments();
+          confirmButtonText: this.$t("commons.confirm"),
-              });
+          cancelButtonText: this.$t("commons.cancel"),
-            } else {
+          callback: (action) => {
-              this.environments.splice(index, 1);
+            if (action === "confirm") {
+              if (environment.id) {
+                this.result = delApiEnvironment(environment.id).then(() => {
+                  this.$success(this.$t("commons.delete_success"));
+                  this.getEnvironments();
+                });
+              } else {
+                this.environments.splice(index, 1);
+              }
             }
-          }
+          },
         }
-      });
+      );
-
     },
     copyEnvironment(environment) {
       this.ifCreate = false;
@@ -143,32 +190,32 @@ export default {
       this.environmentSelected(environment);
       this.currentEnvironment = environment;
       if (!environment.id) {
-        this.$warning(this.$t('commons.please_save'));
+        this.$warning(this.$t("commons.please_save"));
         return;
       }
       let newEnvironment = {};
       newEnvironment = new Environment(environment);
       newEnvironment.id = null;
-      newEnvironment.config.databaseConfigs.forEach(dataSource => {
+      newEnvironment.config.databaseConfigs.forEach((dataSource) => {
         if (dataSource.id) {
           dataSource.id = getUUID();
         }
-      })
+      });
       newEnvironment.name = this.getNoRepeatName(newEnvironment.name);
       if (!this.validateEnvironment(newEnvironment)) {
         return;
       }
-      newEnvironment.config.databaseConfigs.forEach(dataSource => {
+      newEnvironment.config.databaseConfigs.forEach((dataSource) => {
         if (dataSource.id) {
           dataSource.id = getUUID();
         }
-      })
+      });
       this.$refs.environmentEdit._save(newEnvironment);
       this.getEnvironments();
     },
     validateEnvironment(environment) {
       if (!this.$refs.environmentEdit.validate()) {
-        this.$error(this.$t('commons.formatErr'));
+        this.$error(this.$t("commons.formatErr"));
         return false;
       }
       return true;
@@ -176,7 +223,7 @@ export default {
     getNoRepeatName(name) {
       for (let i in this.environments) {
         if (this.environments[i].name === name) {
-          return this.getNoRepeatName(name + ' copy');
+          return this.getNoRepeatName(name + " copy");
         }
       }
       return name;
@@ -184,10 +231,13 @@ export default {
     addEnvironment() {
       this.ifCreate = true;
       let newEnvironment = new Environment({
-        projectId: this.projectId
+        projectId: this.projectId,
       });
       this.environments.push(newEnvironment);
-      this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
+      this.$refs.environmentItems.itemSelected(
+        this.environments.length - 1,
+        newEnvironment
+      );
     },
     environmentSelected(environment) {
       if (this.$refs.environmentEdit) {
@@ -197,27 +247,40 @@ export default {
     },
     getEnvironments() {
       if (this.projectId) {
-        this.result = getEnvironmentByProjectId(this.projectId).then(response => {
+        this.result = getEnvironmentByProjectId(this.projectId).then(
-          this.environments = response.data;
+          (response) => {
-          if (this.environments.length > 0) {
+            this.environments = response.data;
-            if (this.selectEnvironmentId) {
+            if (this.environments.length > 0) {
-              const index = this.environments.findIndex(e => e.id === this.selectEnvironmentId);
+              if (this.selectEnvironmentId) {
-              if (index !== -1) {
+                const index = this.environments.findIndex(
-                this.$refs.environmentItems.itemSelected(index, this.environments[index]);
+                  (e) => e.id === this.selectEnvironmentId
+                );
+                if (index !== -1) {
+                  this.$refs.environmentItems.itemSelected(
+                    index,
+                    this.environments[index]
+                  );
+                } else {
+                  this.$refs.environmentItems.itemSelected(
+                    0,
+                    this.environments[0]
+                  );
+                }
               } else {
-                this.$refs.environmentItems.itemSelected(0, this.environments[0]);
+                this.$refs.environmentItems.itemSelected(
+                  0,
+                  this.environments[0]
+                );
               }
             } else {
-              this.$refs.environmentItems.itemSelected(0, this.environments[0]);
+              let item = new Environment({
+                projectId: this.projectId,
+              });
+              this.environments.push(item);
+              this.$refs.environmentItems.itemSelected(0, item);
             }
-          } else {
-            let item = new Environment({
-              projectId: this.projectId
-            });
-            this.environments.push(item);
-            this.$refs.environmentItems.itemSelected(0, item);
           }
-        });
+        );
       }
     },
     getEnvironment(environment) {
@@ -229,10 +292,9 @@ export default {
     },
     save() {
       this.$refs.environmentEdit.save();
-      this.currentEnvironment = null;
     },
     close() {
-      this.$emit('close');
+      this.$emit("close");
       if (!this.isCopy) {
         this.visible = false;
       }
@@ -246,18 +308,17 @@ export default {
       this.currentIndex = index;
     },
     delEnvironment() {
-      this.deleteEnvironment(this.currentEnvironment, this.currentIndex)
+      this.deleteEnvironment(this.currentEnvironment, this.currentIndex);
     },
     refresh() {
       this.getEnvironments();
-      this.$emit('saveRefresh');
+      this.$emit("saveRefresh");
     },
-  }
+  },
-}
+};
 </script>
 
 <style scoped>
-
 .environment-dialog :deep(.el-dialog__body) {
   padding-top: 20px;
 }
@@ -270,5 +331,4 @@ export default {
   height: 100%;
   position: absolute;
 }
-
 </style>

framework/sdk-parent/frontend/src/components/environment/EnvironmentCommonConfig.vue

@@ -1,49 +1,79 @@
 <template>
   <div>
-    <el-form :model="commonConfig" :rules="rules" ref="commonConfig" :disabled="isReadOnly" label-width="30px">
+    <el-form
-      <ms-api-scenario-variables :show-copy="false" :items="commonConfig.variables" :is-read-only="isReadOnly" ref="apiScenario"/>
+      :model="commonConfig"
+      :rules="rules"
+      ref="commonConfig"
+      :disabled="isReadOnly"
+      label-width="30px"
+    >
+      <ms-api-scenario-variables
+        :show-copy="false"
+        :items="commonConfig.variables"
+        :is-read-only="isReadOnly"
+        ref="apiScenario"
+      />
       <el-form-item>
-        <el-switch v-model="commonConfig.enableHost" active-text="Hosts"/>
+        <el-switch v-model="commonConfig.enableHost" active-text="Hosts" />
-        <el-tooltip class="hostItem" effect="dark" :content="$t('api_test.home_page.host_config')" placement="right">
+        <el-tooltip
+          class="hostItem"
+          effect="dark"
+          :content="$t('api_test.home_page.host_config')"
+          placement="right"
+        >
           <i class="el-icon-info"></i>
         </el-tooltip>
       </el-form-item>
       <el-form-item>
-        <span>{{ $t('api_test.environment.request_timeout') }}:</span>
+        <span>{{ $t("api_test.environment.request_timeout") }}:</span>
-        <el-input-number style="margin-left: 20px" controls-position="right" size="small"
+        <el-input-number
-                         v-model="commonConfig.requestTimeout"
+          style="margin-left: 20px"
-                         onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
+          controls-position="right"
-                         :precision="0">
+          size="small"
-          {{ $t('api_test.environment.globalVariable') }}
+          v-model="commonConfig.requestTimeout"
+          onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
+          :precision="0"
+        >
+          {{ $t("api_test.environment.globalVariable") }}
         </el-input-number>
-        <span style="margin-left: 30px">{{ $t('api_test.environment.response_timeout') }}:</span>
+        <span style="margin-left: 30px"
-        <el-input-number style="margin-left: 20px" controls-position="right" size="small"
+          >{{ $t("api_test.environment.response_timeout") }}:</span
-                         v-model="commonConfig.responseTimeout"
+        >
-                         onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
+        <el-input-number
-                         :precision="0">
+          style="margin-left: 20px"
-          {{ $t('api_test.environment.globalVariable') }}
+          controls-position="right"
+          size="small"
+          v-model="commonConfig.responseTimeout"
+          onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
+          :precision="0"
+        >
+          {{ $t("api_test.environment.globalVariable") }}
         </el-input-number>
       </el-form-item>
       <el-form-item>
-        <ms-api-host-table v-if="commonConfig.enableHost" :hostTable="commonConfig.hosts" ref="refHostTable"/>
+        <ms-api-host-table
+          v-if="commonConfig.enableHost"
+          :hostTable="commonConfig.hosts"
+          ref="refHostTable"
+        />
       </el-form-item>
     </el-form>
   </div>
 </template>
 
 <script>
-import {CommonConfig} from "../../model/EnvironmentModel";
+import { CommonConfig } from "../../model/EnvironmentModel";
 import MsApiScenarioVariables from "./commons/ApiScenarioVariables";
 import MsApiHostTable from "./commons/ApiHostTable";
 
 export default {
   name: "MsEnvironmentCommonConfig",
-  components: {MsApiHostTable, MsApiScenarioVariables},
+  components: { MsApiHostTable, MsApiScenarioVariables },
   props: {
     commonConfig: new CommonConfig(),
     isReadOnly: {
       type: Boolean,
-      default: false
+      default: false,
     },
   },
   data() {
@@ -53,37 +83,39 @@ export default {
   },
   created() {
     if (!this.commonConfig.requestTimeout) {
-      this.$set(this.commonConfig, 'requestTimeout', 60000);
+      this.$set(this.commonConfig, "requestTimeout", 60000);
     }
     if (!this.commonConfig.responseTimeout) {
-      this.$set(this.commonConfig, 'responseTimeout', 60000);
+      this.$set(this.commonConfig, "responseTimeout", 60000);
     }
   },
   watch: {
     commonConfig() {
       if (!this.commonConfig.requestTimeout) {
-        this.$set(this.commonConfig, 'requestTimeout', 60000);
+        this.$set(this.commonConfig, "requestTimeout", 60000);
       }
       if (!this.commonConfig.responseTimeout) {
-        this.$set(this.commonConfig, 'responseTimeout', 60000);
+        this.$set(this.commonConfig, "responseTimeout", 60000);
       }
-    }
+    },
   },
   methods: {
     mergeData() {
       if (this.$refs.apiScenario) {
-        this.commonConfig.variables = this.$refs['apiScenario'].allData;
+        this.commonConfig.variables = this.$refs["apiScenario"].allData;
       }
     },
     validate() {
       let isValidate = false;
-      this.$refs['commonConfig'].validate((valid) => {
+      this.$refs["commonConfig"].validate((valid) => {
         if (valid) {
           // 校验host列表
           let valHost = true;
           if (this.commonConfig.enableHost) {
             for (let i = 0; i < this.commonConfig.hosts.length; i++) {
-              valHost = this.$refs['refHostTable'].confirm(this.commonConfig.hosts[i]);
+              valHost = this.$refs["refHostTable"].confirm(
+                this.commonConfig.hosts[i]
+              );
             }
           }
           if (valHost) {
@@ -96,8 +128,8 @@ export default {
         }
       });
       return isValidate;
-    }
+    },
-  }
+  },
 };
 </script>
 

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

@@ -85,7 +85,7 @@
               v-model="scope.row.scope"
               :placeholder="$t('commons.please_select')"
               size="mini"
-              @change="changeType($event, scope.row)"
+              @change="changeScope($event, scope.row)"
             >
               <el-option
                 v-for="item in scopeTypeFilters"
@@ -424,26 +424,41 @@ export default {
       // 触发变更事件
       this.$emit("change", this.items);
     },
-
+    // 接口/UI change
+    changeScope: function(value,row) {
+      if (value === "ui") {
+        row.type = "STRING";
+      } else {
+        row.type = "CONSTANT";
+      }
+      this.items.forEach((item) => {
+        if (item.id === row.id) {
+          item.scope = value;
+        }
+      });
+      this.changeType(row.type, row);
+    },
     changeType(value, data) {
-      data.value = "";
+      data.value = ''
-      if (
+      const notDelimiters = !data.delimiter ||
-        !data.delimiter ||
         (!data.files && data.files.length === 0) ||
         !data.quotedData
+      if (
+        notDelimiters
       ) {
         data.delimiter = ",";
         data.files = [];
         data.quotedData = "false";
       }
-      if (!data.scope || data.scope == "ui") {
-        data.type = "STRING";
-      }
       this.items.forEach((item) => {
         if (item.id === data.id) {
-          item.scope = value;
+          item.type = value;
-          item.type = data.type;
           item.value = data.value;
+          if(notDelimiters) {
+            item.delimiter = data.delimiter;
+            item.files = data.files;
+            item.quotedData = data.quotedData;
+          }
         }
       });
     },