feat(接口测试): 完善多数据源切换功能

2022-04-21 09:56:44 +08:00 · 2022-04-21 09:56:44 +08:00 · 9a0db1e2af
parent 89c20c810c
commit 9a0db1e2af
9 changed files with 204 additions and 169 deletions
--- a/frontend/src/business/components/api/automation/scenario/common/JDBCProcessorContent.vue
+++ b/frontend/src/business/components/api/automation/scenario/common/JDBCProcessorContent.vue
@ -1,5 +1,5 @@
 <template>
-  <div v-loading="isReloadData">
+  <div v-loading="isReloadData || result.loading">
    <el-row>
      <el-col :span="21" style="padding-bottom: 20px">
        <div style="border:1px #DCDFE6 solid; height: 100%;border-radius: 4px ;width: 100% ;margin: 20px">
@ -73,13 +73,10 @@

 <script>
 import MsApiKeyValue from "@/business/components/api/definition/components/ApiKeyValue";
-import ApiAssertions from "@/business/components/api/definition/components/assertion/ApiAssertions";
 import MsApiExtract from "@/business/components/api/definition/components/extract/ApiExtract";
 import ApiRequestMethodSelect from "@/business/components/api/definition/components/collapse/ApiRequestMethodSelect";
 import MsCodeEdit from "@/business/components/common/components/MsCodeEdit";
 import MsApiScenarioVariables from "@/business/components/api/definition/components/ApiScenarioVariables";
-import {createComponent} from "@/business/components/api/definition/components/jmeter/components";
-import {Assertions, Extract} from "@/business/components/api/definition/model/ApiTestModel";
 import {parseEnvironment} from "@/business/components/api/definition/model/EnvironmentModel";
 import ApiEnvironmentConfig from "@/business/components/api/test/components/ApiEnvironmentConfig";
 import {getCurrentProjectID, objToStrMap} from "@/common/js/utils";
@ -113,6 +110,7 @@ export default {
  },
  data() {
    return {
+      result: {},
      environments: [],
      currentEnvironment: {},
      databaseConfigsOptions: [],
@ -122,9 +120,10 @@ export default {
    }
  },
  created() {
-    this.$nextTick(() => {
-      this.getEnvironments();
-    });
+    if (!this.isScenario) {
+      this.request.environmentId = this.$store.state.useEnvironment;
+    }
+    this.getEnvironments();
  },
  computed: {
    projectId() {
@ -297,9 +296,11 @@ export default {
      }

      this.databaseConfigsOptions = [];
-      environment.config.databaseConfigs.forEach(item => {
-        this.databaseConfigsOptions.push(item);
-      })
+      if (environment.config && environment.config.databaseConfigs) {
+        environment.config.databaseConfigs.forEach(item => {
+          this.databaseConfigsOptions.push(item);
+        })
+      }
    },
    environmentConfigClose() {
      this.getEnvironments();
--- a/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue
@ -84,6 +84,7 @@
              :isShowEnable="true"
              :response="response"
              :referenced="true"
+              :isScenario="true"
              :headers="request.headers "
              :is-read-only="isCompReadOnly"
              :request="request"/>
@ -100,6 +101,7 @@
              :is-read-only="isCompReadOnly"
              :response="response"
              :show-pre-script="true"
+              :isScenario="true"
              :show-script="true" :request="request"/>

            <ms-sql-basis-parameters
@ -113,6 +115,7 @@
            <ms-dubbo-basis-parameters
              v-if="request.protocol==='DUBBO' || request.protocol==='dubbo://'|| request.type==='DubboSampler'"
              :request="request"
+              :isScenario="true"
              :response="response"
              :is-read-only="isCompReadOnly"
              :showScript="true"/>
--- a/frontend/src/business/components/api/automation/scenario/component/JDBCProcessor.vue
+++ b/frontend/src/business/components/api/automation/scenario/component/JDBCProcessor.vue
@ -15,6 +15,7 @@
    <template v-slot:request>
      <jdbc-processor-content
        :showScript="false"
+        :isScenario="isScenario"
        :request="request"/>
    </template>
  </api-base-component>
@ -34,6 +35,10 @@ export default {
    ApiBaseComponent, MsDropdown, MsInstructionsIcon, MsCodeEdit
  },
  props: {
+    isScenario: {
+      type: Boolean,
+      default: false,
+    },
    draggable: {
      type: Boolean,
      default: false,
--- a/frontend/src/business/components/api/definition/components/request/database/BasisParameters.vue
+++ b/frontend/src/business/components/api/definition/components/request/database/BasisParameters.vue
@ -76,7 +76,7 @@
                    <div class="el-step__icon-inner">{{ request.preSize }}</div>
                  </div>
                </span>
-                <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'pre'"
+                <ms-jmx-step :request="request" :isScenario="isScenario" :apiId="request.id" :response="response" :tab-type="'pre'"
                             ref="preStep"/>
              </el-tab-pane>
              <el-tab-pane :label="$t('api_test.definition.request.post_operation')" name="postOperate"
@ -87,7 +87,7 @@
                    <div class="el-step__icon-inner">{{ request.postSize }}</div>
                  </div>
                  </span>
-                <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'post'"
+                <ms-jmx-step :request="request" :isScenario="isScenario" :apiId="request.id" :response="response" :tab-type="'post'"
                             ref="postStep"/>
              </el-tab-pane>
              <el-tab-pane :label="$t('api_test.definition.request.assertions_rule')" name="assertionsRule"
--- a/frontend/src/business/components/api/definition/components/request/dubbo/BasisParameters.vue
+++ b/frontend/src/business/components/api/definition/components/request/dubbo/BasisParameters.vue
@ -46,7 +46,7 @@
              <div class="el-step__icon-inner">{{ request.preSize }}</div>
              </div>
                  </span>
-                <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'pre'"
+                <ms-jmx-step :request="request" :apiId="request.id" :response="response" :is-scenario="isScenario" :tab-type="'pre'"
                             ref="preStep"/>
              </el-tab-pane>
              <el-tab-pane :label="$t('api_test.definition.request.post_operation')" name="postOperate"
@ -57,7 +57,8 @@
                  <div class="el-step__icon-inner">{{ request.postSize }}</div>
                 </div>
                </span>
-                <ms-jmx-step :request="request" :apiId="request.id" :response="response" :tab-type="'post'"
+                <ms-jmx-step :request="request" :apiId="request.id" :isScenario="isScenario"
+                             :response="response" :tab-type="'post'"
                             ref="postStep"/>
              </el-tab-pane>
              <el-tab-pane :label="$t('api_test.definition.request.assertions_rule')" name="assertionsRule"
@ -68,7 +69,8 @@
                  <div class="el-step__icon-inner">{{ request.ruleSize }}</div>
                </div>
              </span>
-                <ms-jmx-step :request="request" :apiId="request.id" :response="response" @reload="reloadBody"
+                <ms-jmx-step :request="request" :apiId="request.id" :isScenario="isScenario"
+                             :response="response" @reload="reloadBody"
                             :tab-type="'assertionsRule'" ref="assertionsRule"/>
              </el-tab-pane>
            </el-tabs>
@ -84,173 +86,177 @@
 </template>

 <script>
-  import MsApiKeyValue from "../../ApiKeyValue";
-  import MsApiAssertions from "../../assertion/ApiAssertions";
-  import MsApiExtract from "../../extract/ApiExtract";
-  import ApiRequestMethodSelect from "../../collapse/ApiRequestMethodSelect";
-  import MsCodeEdit from "../../../../../common/components/MsCodeEdit";
-  import MsApiScenarioVariables from "../../ApiScenarioVariables";
-  import {createComponent} from "../../jmeter/components";
-  import {Assertions, Extract, DubboRequest} from "../../../model/ApiTestModel";
-  import MsDubboInterface from "../../request/dubbo/Interface";
-  import MsDubboRegistryCenter from "../../request/dubbo/RegistryCenter";
-  import MsDubboConfigCenter from "../../request/dubbo/ConfigCenter";
-  import MsDubboConsumerService from "../../request/dubbo/ConsumerAndService";
-  import {getUUID} from "@/common/js/utils";
-  import MsJsr233Processor from "../../../../automation/scenario/component/Jsr233Processor";
-  import MsJmxStep from "../../step/JmxStep";
-  import {stepCompute, hisDataProcessing} from "@/business/components/api/definition/api-definition";
+import MsApiKeyValue from "../../ApiKeyValue";
+import MsApiAssertions from "../../assertion/ApiAssertions";
+import MsApiExtract from "../../extract/ApiExtract";
+import ApiRequestMethodSelect from "../../collapse/ApiRequestMethodSelect";
+import MsCodeEdit from "../../../../../common/components/MsCodeEdit";
+import MsApiScenarioVariables from "../../ApiScenarioVariables";
+import {createComponent} from "../../jmeter/components";
+import {Assertions, Extract, DubboRequest} from "../../../model/ApiTestModel";
+import MsDubboInterface from "../../request/dubbo/Interface";
+import MsDubboRegistryCenter from "../../request/dubbo/RegistryCenter";
+import MsDubboConfigCenter from "../../request/dubbo/ConfigCenter";
+import MsDubboConsumerService from "../../request/dubbo/ConsumerAndService";
+import {getUUID} from "@/common/js/utils";
+import MsJsr233Processor from "../../../../automation/scenario/component/Jsr233Processor";
+import MsJmxStep from "../../step/JmxStep";
+import {stepCompute, hisDataProcessing} from "@/business/components/api/definition/api-definition";

-  export default {
-    name: "MsDatabaseConfig",
-    components: {
-      MsJsr233Processor,
-      MsApiScenarioVariables,
-      MsCodeEdit,
-      ApiRequestMethodSelect, MsApiExtract, MsApiAssertions, MsApiKeyValue, MsDubboConsumerService,
-      MsDubboConfigCenter,
-      MsDubboRegistryCenter,
-      MsDubboInterface,
-      MsJmxStep
+export default {
+  name: "MsDatabaseConfig",
+  components: {
+    MsJsr233Processor,
+    MsApiScenarioVariables,
+    MsCodeEdit,
+    ApiRequestMethodSelect, MsApiExtract, MsApiAssertions, MsApiKeyValue, MsDubboConsumerService,
+    MsDubboConfigCenter,
+    MsDubboRegistryCenter,
+    MsDubboInterface,
+    MsJmxStep
+  },
+  props: {
+    isScenario: {
+      type: Boolean,
+      default: false,
    },
-    props: {
-      request: {},
-      basisData: {},
-      moduleOptions: Array,
-      response: {},
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      },
-      showScript: {
-        type: Boolean,
-        default: true,
-      }
+    request: {},
+    basisData: {},
+    moduleOptions: Array,
+    response: {},
+    isReadOnly: {
+      type: Boolean,
+      default: false
    },
-    data() {
-      return {
-        spanNum: 24,
-        activeName: "interface",
-        activeName2: "args",
-        isBodyShow: true,
-        protocols: DubboRequest.PROTOCOLS,
-        isReloadData: false,
-      }
-    },
-    created() {
-      if (this.request.hashTree) {
-        this.initStepSize(this.request.hashTree);
-        this.historicalDataProcessing(this.request.hashTree);
-      }
-    },
-    watch: {
-      'request.hashTree': {
-        handler(v) {
-          this.initStepSize(this.request.hashTree);
-        },
-        deep: true
-      }
-    },
-    methods: {
-      tabClick() {
-        if (this.activeName === 'preOperate') {
-          this.$refs.preStep.filter();
-        }
-        if (this.activeName === 'postOperate') {
-          this.$refs.postStep.filter();
-        }
-        if (this.activeName === 'assertionsRule') {
-          this.$refs.assertionsRule.filter();
-        }
-      },
-      historicalDataProcessing(array) {
-        hisDataProcessing(array, this.request);
-      },
-      initStepSize(array) {
-        stepCompute(array, this.request);
-        this.reloadBody();
-      },
-      reloadBody() {
-        // 解决修改请求头后 body 显示错位
-        this.isBodyShow = false;
-        this.$nextTick(() => {
-          this.isBodyShow = true;
-        });
-      },
-      remove(row) {
-        let index = this.request.hashTree.indexOf(row);
-        this.request.hashTree.splice(index, 1);
-        this.reload();
-      },
-      copyRow(row) {
-        let obj = JSON.parse(JSON.stringify(row));
-        obj.id = getUUID();
-        this.request.hashTree.push(obj);
-        this.reload();
-      },
-      reload() {
-        this.isReloadData = true
-        this.$nextTick(() => {
-          this.isReloadData = false
-        })
-      },
-      validateApi() {
-        this.$refs['basicForm'].validate();
-      },
-      saveApi() {
-        this.basisData.method = this.basisData.protocol;
-        this.$emit('saveApi', this.basisData);
-      },
-      runTest() {
-
-      },
+    showScript: {
+      type: Boolean,
+      default: true,
    }
+  },
+  data() {
+    return {
+      spanNum: 24,
+      activeName: "interface",
+      activeName2: "args",
+      isBodyShow: true,
+      protocols: DubboRequest.PROTOCOLS,
+      isReloadData: false,
+    }
+  },
+  created() {
+    if (this.request.hashTree) {
+      this.initStepSize(this.request.hashTree);
+      this.historicalDataProcessing(this.request.hashTree);
+    }
+  },
+  watch: {
+    'request.hashTree': {
+      handler(v) {
+        this.initStepSize(this.request.hashTree);
+      },
+      deep: true
+    }
+  },
+  methods: {
+    tabClick() {
+      if (this.activeName === 'preOperate') {
+        this.$refs.preStep.filter();
+      }
+      if (this.activeName === 'postOperate') {
+        this.$refs.postStep.filter();
+      }
+      if (this.activeName === 'assertionsRule') {
+        this.$refs.assertionsRule.filter();
+      }
+    },
+    historicalDataProcessing(array) {
+      hisDataProcessing(array, this.request);
+    },
+    initStepSize(array) {
+      stepCompute(array, this.request);
+      this.reloadBody();
+    },
+    reloadBody() {
+      // 解决修改请求头后 body 显示错位
+      this.isBodyShow = false;
+      this.$nextTick(() => {
+        this.isBodyShow = true;
+      });
+    },
+    remove(row) {
+      let index = this.request.hashTree.indexOf(row);
+      this.request.hashTree.splice(index, 1);
+      this.reload();
+    },
+    copyRow(row) {
+      let obj = JSON.parse(JSON.stringify(row));
+      obj.id = getUUID();
+      this.request.hashTree.push(obj);
+      this.reload();
+    },
+    reload() {
+      this.isReloadData = true
+      this.$nextTick(() => {
+        this.isReloadData = false
+      })
+    },
+    validateApi() {
+      this.$refs['basicForm'].validate();
+    },
+    saveApi() {
+      this.basisData.method = this.basisData.protocol;
+      this.$emit('saveApi', this.basisData);
+    },
+    runTest() {
+
+    },
  }
+}
 </script>

 <style scoped>
-  .one-row .el-form-item {
-    display: inline-block;
-  }
+.one-row .el-form-item {
+  display: inline-block;
+}

-  .one-row .el-form-item:nth-child(2) {
-    margin-left: 60px;
-  }
+.one-row .el-form-item:nth-child(2) {
+  margin-left: 60px;
+}

-  .ms-left-cell {
-    margin-top: 40px;
-  }
+.ms-left-cell {
+  margin-top: 40px;
+}

-  .ms-left-buttion {
-    margin: 6px 0px 8px 30px;
-  }
+.ms-left-buttion {
+  margin: 6px 0px 8px 30px;
+}

-  /deep/ .el-form-item {
-    margin-bottom: 15px;
-  }
+/deep/ .el-form-item {
+  margin-bottom: 15px;
+}

-  .ms-header {
-    background: #783887;
-    color: white;
-    height: 18px;
-    font-size: xx-small;
-    border-radius: 50%;
-  }
+.ms-header {
+  background: #783887;
+  color: white;
+  height: 18px;
+  font-size: xx-small;
+  border-radius: 50%;
+}

-  .ms-left-cell {
-    margin-top: 40px;
-  }
+.ms-left-cell {
+  margin-top: 40px;
+}

-  .ms-left-buttion {
-    margin: 6px 0px 8px 30px;
-  }
+.ms-left-buttion {
+  margin: 6px 0px 8px 30px;
+}

-  /deep/ .el-form-item {
-    margin-bottom: 15px;
-  }
+/deep/ .el-form-item {
+  margin-bottom: 15px;
+}

-  .ms-el-tabs__nav-scroll >>> .el-tabs__nav-scroll {
-    width: calc(100% - 10px);
-  }
+.ms-el-tabs__nav-scroll >>> .el-tabs__nav-scroll {
+  width: calc(100% - 10px);
+}

 </style>
--- a/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
+++ b/frontend/src/business/components/api/definition/components/request/http/ApiHttpRequestForm.vue
@ -121,6 +121,7 @@
            :apiId="request.id"
            :response="response"
            :tab-type="'pre'"
+            :isScenario="isScenario"
            ref="preStep"
            v-if="activeName === 'preOperate'"
          />
@ -137,6 +138,7 @@
            :apiId="request.id"
            :response="response"
            :tab-type="'post'"
+            :isScenario="isScenario"
            ref="postStep"
            v-if="activeName === 'postOperate'"
          />
@ -151,6 +153,7 @@
          <ms-jmx-step
            :request="request"
            :apiId="request.id"
+            :isScenario="isScenario"
            :response="response"
            @reload="reloadBody"
            :tab-type="'assertionsRule'"
@ -207,6 +210,10 @@ export default {
        return false;
      }
    },
+    isScenario: {
+      type: Boolean,
+      default: false,
+    },
    showScript: {
      type: Boolean,
      default: true,
--- a/frontend/src/business/components/api/definition/components/request/tcp/TcpFormatParameters.vue
+++ b/frontend/src/business/components/api/definition/components/request/tcp/TcpFormatParameters.vue
@ -128,7 +128,8 @@
                    <div class="el-step__icon-inner">{{ request.preSize }}</div>
                  </div>
                </span>
-                <ms-jmx-step :request="request" :apiId="request.id" protocol="TCP" :response="response"
+                <ms-jmx-step :request="request" :isScenario="isScenario"
+                             :apiId="request.id" protocol="TCP" :response="response"
                             :tab-type="'pre'"
                             ref="preStep"/>
              </el-tab-pane>
@ -140,7 +141,8 @@
                    <div class="el-step__icon-inner">{{ request.postSize }}</div>
                  </div>
                </span>
-                <ms-jmx-step :request="request" :apiId="request.id" protocol="TCP" :response="response"
+                <ms-jmx-step :request="request" :isScenario="isScenario"
+                             :apiId="request.id" protocol="TCP" :response="response"
                             :tab-type="'post'"
                             ref="postStep"/>
              </el-tab-pane>
@ -152,7 +154,7 @@
                    <div class="el-step__icon-inner">{{ request.ruleSize }}</div>
                  </div>
                </span>
-                <ms-jmx-step :request="request" :apiId="request.id" protocol="TCP" :response="response"
+                <ms-jmx-step :request="request" :apiId="request.id" protocol="TCP" :is-scenario="isScenario" :response="response"
                             @reload="reloadBody"
                             :tab-type="'assertionsRule'" ref="assertionsRule"/>
              </el-tab-pane>
@ -200,6 +202,10 @@ export default {
    MsJmxStep
  },
  props: {
+    isScenario: {
+      type: Boolean,
+      default: false,
+    },
    request: {},
    basisData: {},
    response: {},
--- a/frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue
+++ b/frontend/src/business/components/api/definition/components/runtest/RunTestTCPPage.vue
@ -126,6 +126,11 @@ export default {
    }
  },
  props: {apiData: {}, currentProtocol: String, syncTabs: Array, projectId: String},
+  watch: {
+    '$store.state.useEnvironment': function () {
+      this.api.environmentId = this.$store.state.useEnvironment;
+    }
+  },
  methods: {
    setRequestParam(param, isEnvironmentMock) {
      this.init();
--- a/frontend/src/business/components/api/definition/components/step/JmxStep.vue
+++ b/frontend/src/business/components/api/definition/components/step/JmxStep.vue
@ -49,6 +49,7 @@
            @remove="remove"
            :title="$t('api_test.definition.request.pre_sql')"
            :is-read-only="false"
+            :isScenario="isScenario"
            :request="data"
            :jdbc-processor="data"
            color="#B8741A"
@ -79,6 +80,7 @@
            :title="$t('api_test.definition.request.post_sql')"
            :is-read-only="false"
            :request="data"
+            :isScenario="isScenario"
            :jdbc-processor="data"
            color="#783887"
            background-color="#F2ECF3"/>