feat(系统管理): 环境新需求处理

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

@@ -126,7 +126,7 @@
                 <el-col :span="4">
                   <el-button :disabled="scenarioDefinition.length < 1" size="mini" type="primary" v-prevent-re-click @click="runDebug">{{$t('api_test.request.debug')}}</el-button>
                   <el-tooltip class="item" effect="dark" :content="$t('commons.refresh')" placement="right-start">
-                    <el-button :disabled="scenarioDefinition.length < 1" size="mini"  icon ="el-icon-refresh" v-prevent-re-click @click="getApiScenario"></el-button>
+                    <el-button :disabled="scenarioDefinition.length < 1" size="mini" icon="el-icon-refresh" v-prevent-re-click @click="getApiScenario"></el-button>
                   </el-tooltip>
                   <font-awesome-icon class="alt-ico" :icon="['fa', 'expand-alt']" size="lg" @click="fullScreen"/>
                 </el-col>
@@ -134,13 +134,19 @@
             </div>
             <!-- 场景步骤内容 -->
             <div>
+              <el-button class="ms-open-btn ms-open-btn-left" size="mini" v-prevent-re-click @click="openExpansion">
+                {{$t('api_test.automation.open_expansion')}}
+              </el-button>
+              <el-button class="ms-open-btn" size="mini" @click="closeExpansion">
+                {{$t('api_test.automation.close_expansion')}}
+              </el-button>
               <el-tree node-key="resourceId" :props="props" :data="scenarioDefinition" class="ms-tree"
                        :default-expanded-keys="expandedNode"
                        :expand-on-click-node="false"
                        highlight-current
                        @node-expand="nodeExpand"
                        @node-collapse="nodeCollapse"
-                       :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick" v-if="!loading" draggable>
+                       :allow-drop="allowDrop" @node-drag-end="allowDrag" @node-click="nodeClick" v-if="!loading" draggable ref="stepTree">
                     <span class="custom-tree-node father" slot-scope="{ node, data}" style="width: 96%">
                       <!-- 步骤组件-->
                        <ms-component-config :type="data.type" :scenario="data" :response="response" :currentScenario="currentScenario"
@@ -325,7 +331,8 @@
         projectList: [],
         debugResult: new Map,
         drawer: false,
-        isFullUrl: true
+        isFullUrl: true,
+        expandedStatus: false,
       }
     },
     created() {
@@ -597,6 +604,7 @@
       recursiveSorting(arr, scenarioProjectId) {
         for (let i in arr) {
           arr[i].index = Number(i) + 1;
+          arr[i].active = this.expandedStatus;
           if (arr[i].type === ELEMENT_TYPE.LoopController && arr[i].loopType === "LOOP_COUNT" && arr[i].hashTree && arr[i].hashTree.length > 1) {
             arr[i].countController.proceed = true;
           }
@@ -623,6 +631,7 @@
         for (let i in this.scenarioDefinition) {
           // 排序
           this.scenarioDefinition[i].index = Number(i) + 1;
+          this.scenarioDefinition[i].active = this.expandedStatus;
           // 设置循环控制
           if (this.scenarioDefinition[i].type === ELEMENT_TYPE.LoopController && this.scenarioDefinition[i].hashTree
             && this.scenarioDefinition[i].hashTree.length > 1) {
@@ -1149,6 +1158,44 @@
         this.getEnv(JSON.stringify(definition)).then(() => {
           this.$refs.envPopover.openEnvSelect();
         })
+      },
+      shrinkTreeNode() {
+        //改变每个节点的状态
+        for (let i in this.scenarioDefinition) {
+          if (this.scenarioDefinition[i]) {
+            if (this.expandedStatus) {
+              this.expandedNode.push(this.scenarioDefinition[i].resourceId);
+            }
+            this.scenarioDefinition[i].active = this.expandedStatus;
+            if (this.scenarioDefinition[i].hashTree && this.scenarioDefinition[i].hashTree.length > 0) {
+              this.changeNodeStatus(this.scenarioDefinition[i].hashTree);
+            }
+          }
+        }
+      },
+      changeNodeStatus(nodes) {
+        for (let i in nodes) {
+          if (nodes[i]) {
+            if (this.expandedStatus) {
+              this.expandedNode.push(nodes[i].resourceId);
+            }
+            nodes[i].active = this.expandedStatus;
+            if (nodes[i].hashTree != undefined && nodes[i].hashTree.length > 0) {
+              this.changeNodeStatus(nodes[i].hashTree);
+            }
+          }
+        }
+      },
+      openExpansion() {
+        this.expandedNode = [];
+        this.expandedStatus = true;
+        this.shrinkTreeNode();
+      },
+      closeExpansion() {
+        this.expandedStatus = false;
+        this.expandedNode = [];
+        this.shrinkTreeNode();
+        this.reload();
       }
     }
   }
@@ -1309,4 +1356,12 @@
     white-space: nowrap;
     width: 200px;
   }
+
+  .ms-open-btn {
+    margin: 5px 5px 0px;
+  }
+
+  .ms-open-btn-left {
+    margin-left: 30px;
+  }
 </style>

frontend/src/business/components/api/automation/scenario/maximize/MaximizeScenario.vue

@@ -2,9 +2,15 @@
   <div>
     <!-- 场景步骤-->
     <ms-container>
-      <ms-aside-container>
+      <ms-aside-container style="padding-top: 0px">
         <!-- 场景步骤内容 -->
         <div v-loading="loading">
+          <el-button class="ms-open-btn ms-open-btn-left" size="mini" @click="openExpansion">
+            {{$t('api_test.automation.open_expansion')}}
+          </el-button>
+          <el-button class="ms-open-btn" size="mini" @click="closeExpansion">
+            {{$t('api_test.automation.close_expansion')}}
+          </el-button>
           <el-tree node-key="resourceId"
                    :props="props"
                    :data="scenarioDefinition"
@@ -226,6 +232,7 @@
         projectEnvMap: new Map,
         projectList: [],
         debugResult: new Map,
+        expandedStatus: false,
       }
     },
     created() {
@@ -940,6 +947,44 @@
         // 把执行结果分发给各个请求
         this.debugResult = result;
         this.sort()
+      },
+      shrinkTreeNode() {
+        //改变每个节点的状态
+        for (let i in this.scenarioDefinition) {
+          if (this.scenarioDefinition[i]) {
+            if (this.expandedStatus) {
+              this.expandedNode.push(this.scenarioDefinition[i].resourceId);
+            }
+            this.scenarioDefinition[i].active = this.expandedStatus;
+            if (this.scenarioDefinition[i].hashTree && this.scenarioDefinition[i].hashTree.length > 0) {
+              this.changeNodeStatus(this.scenarioDefinition[i].hashTree);
+            }
+          }
+        }
+      },
+      changeNodeStatus(nodes) {
+        for (let i in nodes) {
+          if (nodes[i]) {
+            if (this.expandedStatus) {
+              this.expandedNode.push(nodes[i].resourceId);
+            }
+            nodes[i].active = this.expandedStatus;
+            if (nodes[i].hashTree != undefined && nodes[i].hashTree.length > 0) {
+              this.changeNodeStatus(nodes[i].hashTree);
+            }
+          }
+        }
+      },
+      openExpansion() {
+        this.expandedNode = [];
+        this.expandedStatus = true;
+        this.shrinkTreeNode();
+      },
+      closeExpansion() {
+        this.expandedStatus = false;
+        this.expandedNode = [];
+        this.shrinkTreeNode();
+        this.reload();
       }
     }
   }
@@ -1111,4 +1156,12 @@
   .father:hover .child {
     display: block;
   }
+
+  .ms-open-btn {
+    margin: 5px 5px 0px;
+  }
+
+  .ms-open-btn-left {
+    margin-left: 30px;
+  }
 </style>

frontend/src/business/components/api/test/components/ApiEnvironmentConfig.vue

@@ -6,7 +6,7 @@
       <ms-aside-item :enable-aside-hidden="false" :title="$t('api_test.environment.environment_list')"
                      :data="environments" :item-operators="environmentOperators" :add-fuc="addEnvironment"
                      :delete-fuc="deleteEnvironment" @itemSelected="environmentSelected" ref="environmentItems"/>
-      <environment-edit :environment="currentEnvironment" ref="environmentEdit" @close="close"/>
+      <environment-edit :project-id="projectId" :environment="currentEnvironment" ref="environmentEdit" @close="close"/>
     </el-container>
   </el-dialog>
 </template>

frontend/src/business/components/api/test/components/environment/EnvironmentEdit.vue

@@ -15,7 +15,7 @@
         </el-tab-pane>
 
         <el-tab-pane :label="$t('api_test.environment.http_config')" name="http">
-          <ms-environment-http-config :http-config="environment.config.httpConfig" ref="httpConfig"/>
+          <ms-environment-http-config :project-id="projectId" :http-config="environment.config.httpConfig" ref="httpConfig"/>
         </el-tab-pane>
         <el-tab-pane :label="$t('api_test.environment.database_config')" name="sql">
           <ms-database-config :configs="environment.config.databaseConfigs"/>
@@ -52,9 +52,11 @@
       MsTcpConfig,
       MsEnvironmentCommonConfig,
       MsEnvironmentHttpConfig,
-      MsDatabaseConfig, MsApiHostTable, MsDialogFooter, MsApiKeyValue, MsApiScenarioVariables},
+      MsDatabaseConfig, MsApiHostTable, MsDialogFooter, MsApiKeyValue, MsApiScenarioVariables
+    },
     props: {
       environment: new Environment(),
+      projectId: String,
     },
     data() {
 

frontend/src/business/components/api/test/components/environment/EnvironmentHttpConfig.vue

@@ -1,80 +1,238 @@
 <template>
-    <el-form :model="httpConfig" :rules="rules" ref="httpConfig">
-      <span>{{$t('api_test.environment.socket')}}</span>
-      <el-form-item prop="socket">
-        <el-input v-model="httpConfig.socket" :placeholder="$t('api_test.request.url_description')" clearable>
+  <el-form :model="condition" :rules="rules" ref="httpConfig">
+    <el-form-item prop="socket">
+      <span class="ms-env-span">{{$t('api_test.environment.socket')}}</span>
+      <el-input v-model="httpConfig.socket" style="width: 80%" :placeholder="$t('api_test.request.url_description')" clearable size="small">
+        <template v-slot:prepend>
+          <el-select v-model="httpConfig.protocol" class="request-protocol-select" size="small">
+            <el-option label="http://" value="http"/>
+            <el-option label="https://" value="https"/>
+          </el-select>
+        </template>
+      </el-input>
+    </el-form-item>
+    <el-form-item prop="enable">
+      <span class="ms-env-span">{{$t('api_test.environment.condition_enable')}}</span>
+      <el-radio-group v-model="condition.type" @change="typeChange">
+        <el-radio label="no">{{ $t('api_test.definition.document.data_set.none') }}</el-radio>
+        <el-radio label="module">{{$t('test_track.module.module')}}</el-radio>
+        <el-radio label="path">{{$t('api_test.definition.api_path')}}</el-radio>
+      </el-radio-group>
+      <el-button type="primary" style="float: right" size="mini" @click="add">{{$t('commons.add')}}</el-button>
+      <div v-if="condition.type === 'module'">
+        <ms-select-tree size="small" :data="moduleOptions" :default-key="condition.value" @getValue="setModule" :obj="moduleObj" clearable checkStrictly multiple/>
+      </div>
+      <div v-if="condition.type === 'path'">
+        <el-input v-model="pathDetails.name" :placeholder="$t('api_test.value')" clearable size="small">
           <template v-slot:prepend>
-            <el-select v-model="httpConfig.protocol" class="request-protocol-select">
-              <el-option label="http://" value="http"/>
-              <el-option label="https://" value="https"/>
+            <el-select v-model="pathDetails.value" class="request-protocol-select" size="small">
+              <el-option :label="$t('api_test.request.assertions.contains')" value="contains"/>
+              <el-option :label="$t('commons.adv_search.operators.equals')" value="equals"/>
             </el-select>
           </template>
         </el-input>
-      </el-form-item>
-
-      <span>{{$t('api_test.request.headers')}}</span>
-      <ms-api-key-value :items="httpConfig.headers" :isShowEnable="true" :suggestions="headerSuggestions"/>
-    </el-form>
+      </div>
+    </el-form-item>
+    <div class="el-form-item">
+      <el-table :data="httpConfig.conditions" style="width: 100%">
+        <el-table-column prop="domain" :label="$t('load_test.domain')" width="180">
+        </el-table-column>
+        <el-table-column prop="type"
+                         :label="$t('api_test.environment.condition_enable')"
+                         show-overflow-tooltip
+                         min-width="120px">
+          <template v-slot:default="{row}">
+            {{getName(row)}}
+          </template>
+        </el-table-column>
+        <el-table-column prop="details"
+                         show-overflow-tooltip
+                         min-width="120px"
+                         :label="$t('api_test.value')">
+          <template v-slot:default="{row}">
+            {{getDetails(row)}}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('commons.operating')" width="100px">
+          <template v-slot:default="{row}">
+            <ms-table-operator-button
+              :tip="$t('api_test.automation.copy')"
+              icon="el-icon-document-copy"
+              @exec="copy(row)"/>
+            <ms-table-operator-button
+              :tip="$t('api_test.automation.remove')"
+              icon="el-icon-delete"
+              @exec="remove(row)"
+              type="danger"
+              v-tester/>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <span>{{$t('api_test.request.headers')}}</span>
+    <ms-api-key-value :items="httpConfig.headers" :isShowEnable="true" :suggestions="headerSuggestions"/>
+  </el-form>
 </template>
 
 <script>
-    import {HttpConfig} from "../../model/EnvironmentModel";
-    import MsApiKeyValue from "../ApiKeyValue";
-    import {REQUEST_HEADERS} from "../../../../../../common/js/constants";
+  import {HttpConfig} from "../../model/EnvironmentModel";
+  import MsApiKeyValue from "../ApiKeyValue";
+  import {REQUEST_HEADERS} from "../../../../../../common/js/constants";
+  import MsSelectTree from "../../../../common/select-tree/SelectTree";
+  import MsTableOperatorButton from "@/business/components/common/components/MsTableOperatorButton";
+  import {getUUID} from "@/common/js/utils";
+  import {KeyValue} from "../../../definition/model/ApiTestModel";
 
-    export default {
-      name: "MsEnvironmentHttpConfig",
-      components: {MsApiKeyValue},
-      props: {
-        httpConfig: new HttpConfig(),
-      },
-      data() {
-        let socketValidator = (rule, value, callback) => {
-          if (!this.validateSocket(value)) {
-            callback(new Error(this.$t('commons.formatErr')));
-            return false;
-          } else {
-            callback();
-            return true;
-          }
-        }
-        return {
-          headerSuggestions: REQUEST_HEADERS,
-          rules: {
-            socket: [{required: false, validator: socketValidator, trigger: 'blur'}],
-          },
-        }
-      },
-      methods: {
-        validateSocket(socket) {
-          if (!socket) return true;
-          let urlStr = this.httpConfig.protocol + '://' + socket;
-          let url = {};
-          try {
-            url = new URL(urlStr);
-          } catch (e) {
-            return false;
-          }
-          this.httpConfig.domain = decodeURIComponent(url.hostname);
-
-          this.httpConfig.port = url.port;
-          let path = url.pathname === '/' ? '' : url.pathname;
-          if (url.port) {
-            this.httpConfig.socket = this.httpConfig.domain + ':' + url.port + path;
-          } else {
-            this.httpConfig.socket = this.httpConfig.domain + path;
-          }
+  export default {
+    name: "MsEnvironmentHttpConfig",
+    components: {MsApiKeyValue, MsSelectTree, MsTableOperatorButton},
+    props: {
+      httpConfig: new HttpConfig(),
+      projectId: String,
+    },
+    created() {
+      this.list();
+    },
+    data() {
+      let socketValidator = (rule, value, callback) => {
+        if (!this.validateSocket(value)) {
+          callback(new Error(this.$t('commons.formatErr')));
+          return false;
+        } else {
+          callback();
           return true;
-        },
-        validate() {
-          let isValidate = false;
-          this.$refs['httpConfig'].validate((valid) => {
-            isValidate = valid;
-          });
-          return isValidate;
         }
       }
+      return {
+        headerSuggestions: REQUEST_HEADERS,
+        rules: {
+          socket: [{required: false, validator: socketValidator, trigger: 'blur'}],
+        },
+        moduleOptions: [],
+        moduleObj: {
+          id: 'id',
+          label: 'name',
+        },
+        pathDetails: new KeyValue({name: "", value: "contains"}),
+        condition: {type: 'no', details: [new KeyValue({name: "", value: "contains"})], domain: ""},
+      }
+    },
+    watch: {
+      projectId() {
+        this.list();
+      }
+    },
+    methods: {
+      getName(row) {
+        switch (row.type) {
+          case 'no':
+            return this.$t('api_test.definition.document.data_set.none');
+          case 'module':
+            return this.$t('test_track.module.module');
+          case 'path':
+            return this.$t('api_test.definition.api_path');
+        }
+      },
+      getDetails(row) {
+        if (row && row.type === 'module') {
+          if (row.details && row.details instanceof Array) {
+            let value = "";
+            row.details.forEach(item => {
+              value += item.name + ",";
+            })
+            if (value.endsWith(",")) {
+              value = value.substr(0, value.length - 1);
+            }
+            return value;
+          }
+        } else if (row && row.type === 'path' && row.details.length > 0 && row.details[0].name) {
+          return row.details[0].value === 'equals' ? this.$t('commons.adv_search.operators.equals')
+            : this.$t('api_test.request.assertions.contains') + "/" + row.details[0].name;
+        }
+        else {
+          return "";
+        }
+      },
+      typeChange() {
+        switch (this.condition.type) {
+          case 'no':
+            this.condition.details = [];
+            break;
+          case 'module':
+            this.condition.details = [];
+            break;
+          case 'path':
+            this.pathDetails = new KeyValue({name: "", value: "contains"});
+            break;
+        }
+      },
+      list() {
+        let url = "/api/automation/module/list/" + this.projectId;
+        this.result = this.$get(url, response => {
+          if (response.data !== undefined && response.data !== null) {
+            this.moduleOptions = response.data;
+          }
+        });
+      },
+      setModule(id, data) {
+        if (data && data.length > 0) {
+          this.condition.details = [];
+          data.forEach(item => {
+            this.condition.details.push(new KeyValue({name: item.name, value: item.id}));
+          })
+        }
+      },
+      add() {
+        let obj = {id: getUUID(), type: this.condition.type, domain: this.httpConfig.socket};
+        if (this.condition.type === 'path') {
+          obj.details = [JSON.parse(JSON.stringify(this.pathDetails))];
+        } else {
+          obj.details = this.condition.details ? JSON.parse(JSON.stringify(this.condition.details)) : this.condition.details;
+        }
+        this.httpConfig.conditions.push(obj);
+      },
+      remove(row) {
+        const index = this.httpConfig.conditions.findIndex(d => d.id === row.id);
+        this.httpConfig.conditions.splice(index, 1);
+      },
+      copy(row) {
+        const index = this.httpConfig.conditions.findIndex(d => d.id === row.id);
+        let obj = {id: getUUID(), type: row.type, domain: row.domain, details: row.details};
+        if (index != -1) {
+          this.httpConfig.conditions.splice(index + 1, 0, obj);
+        } else {
+          this.httpConfig.conditions.push(obj);
+        }
+      },
+      validateSocket(socket) {
+        if (!socket) return true;
+        let urlStr = this.httpConfig.protocol + '://' + socket;
+        let url = {};
+        try {
+          url = new URL(urlStr);
+        } catch (e) {
+          return false;
+        }
+        this.httpConfig.domain = decodeURIComponent(url.hostname);
+
+        this.httpConfig.port = url.port;
+        let path = url.pathname === '/' ? '' : url.pathname;
+        if (url.port) {
+          this.httpConfig.socket = this.httpConfig.domain + ':' + url.port + path;
+        } else {
+          this.httpConfig.socket = this.httpConfig.domain + path;
+        }
+        return true;
+      },
+      validate() {
+        let isValidate = false;
+        this.$refs['httpConfig'].validate((valid) => {
+          isValidate = valid;
+        });
+        return isValidate;
+      }
     }
+  }
 </script>
 
 <style scoped>
@@ -83,4 +241,11 @@
     width: 90px;
   }
 
+  .ms-env-span {
+    margin-right: 10px;
+  }
+
+  /deep/ .el-form-item {
+    margin-bottom: 10px;
+  }
 </style>

frontend/src/business/components/api/test/model/EnvironmentModel.js

@@ -69,7 +69,7 @@ export class HttpConfig extends BaseConfig {
     this.headers = [];
     this.protocol = 'https';
     this.port = undefined;
-
+    this.conditions = [];
     this.set(options);
     this.sets({headers: KeyValue}, options);
   }

frontend/src/i18n/en-US.js

@@ -711,6 +711,8 @@ export default {
       }
     },
     automation: {
+      open_expansion: "One-click expansion",
+      close_expansion: "One-click storage",
       constant: "constant",
       counter: "counter",
       random: "random",
@@ -774,6 +776,7 @@ export default {
     environment: {
       name: "Environment Name",
       socket: "Socket",
+      condition_enable: "Activation conditions",
       globalVariable: "Global Variable",
       environment_list: "Environment List",
       environment_config: "Environment Config",

frontend/src/i18n/zh-CN.js

@@ -712,6 +712,8 @@ export default {
       }
     },
     automation: {
+      open_expansion: "一键展开",
+      close_expansion: "一键收起",
       constant: "常量",
       counter: "计数器",
       random: "随机数",
@@ -775,6 +777,7 @@ export default {
     environment: {
       name: "环境名称",
       socket: "环境域名",
+      condition_enable: "启用条件",
       globalVariable: "全局变量",
       environment_list: "环境列表",
       environment_config: "环境配置",

frontend/src/i18n/zh-TW.js

@@ -711,6 +711,8 @@ export default {
       }
     },
     automation: {
+      open_expansion: "一鍵展開",
+      close_expansion: "一鍵收起",
       constant: "常量",
       counter: "計數器",
       random: "随机器",
@@ -774,6 +776,7 @@ export default {
     environment: {
       name: "環境名稱",
       socket: "環境域名",
+      condition_enable: "啟用條件",
       globalVariable: "全局變量",
       environment_list: "環境列表",
       environment_config: "環境配置",