refactor: 重构模式搜索框

2021-03-26 17:06:22 +08:00 · 2021-03-26 17:06:22 +08:00 · cc5ff944d1
parent b515322331
commit cc5ff944d1
8 changed files with 236 additions and 157 deletions
--- a/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
+++ b/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
@ -533,12 +533,15 @@ public class TestCaseService {
                    }
                }

-                for (int j = 0; j < jsonArray.size(); j++) {
-                    int num = j + 1;
-                    step.append(num + "." + jsonArray.getJSONObject(j).getString("desc") + "\r\n");
-                    result.append(num + "." + jsonArray.getJSONObject(j).getString("result") + "\r\n");
+                if (CollectionUtils.isNotEmpty(jsonArray)) {
+                    for (int j = 0; j < jsonArray.size(); j++) {
+                        int num = j + 1;
+                        step.append(num + "." + jsonArray.getJSONObject(j).getString("desc") + "\r\n");
+                        result.append(num + "." + jsonArray.getJSONObject(j).getString("result") + "\r\n");

+                    }
                }
+
                data.setStepDesc(step.toString());
                data.setStepResult(result.toString());
                step.setLength(0);
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue
@ -16,32 +16,9 @@
      ref="nodeTree">

      <template v-slot:header>
-        <el-input :placeholder="$t('test_track.module.search')" v-model="condition.filterText" size="small">
-          <template v-slot:append>
-            <el-dropdown v-if="!isReadOnly" size="small" split-button type="primary" class="ms-api-button" @click="handleCommand('add-api')"
-                         v-tester
-                         @command="handleCommand" trigger="click">
-              <el-button icon="el-icon-folder-add" @click="addScenario"></el-button>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item command="add-scenario">{{ $t('api_test.automation.add_scenario') }}</el-dropdown-item>
-                <el-dropdown-item command="import">{{ $t('api_test.api_import.label') }}</el-dropdown-item>
-                <el-dropdown-item command="exports">
-                  <el-dropdown placement="right-start" @command="chooseExportType">
-                <span>
-                  {{ $t('report.export') }} <i class="el-icon-arrow-down el-icon--right"></i>
-                </span>
-                    <el-dropdown-menu slot="dropdown">
-                      <template>
-                        <el-dropdown-item command="export">{{ $t('report.export_to_ms_format') }}</el-dropdown-item>
-                        <el-dropdown-item command="exportJmx">{{ $t('report.export') }} JMETER 格式</el-dropdown-item>
-                      </template>
-                    </el-dropdown-menu>
-                  </el-dropdown>
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </template>
-        </el-input>
+        <ms-search-bar
+          :condition="condition"
+          :commands="operators"/>
        <module-trash-button v-if="!isReadOnly" :condition="condition" :exe="enableTrash"/>
      </template>

@ -64,10 +41,12 @@
  import {buildNodePath} from "../../definition/model/NodeTree";
  import ModuleTrashButton from "../../definition/components/module/ModuleTrashButton";
  import ApiImport from "./common/ScenarioImport";
+  import MsSearchBar from "@/business/components/common/components/search/MsSearchBar";

  export default {
    name: 'MsApiScenarioModule',
    components: {
+      MsSearchBar,
      ApiImport,
      ModuleTrashButton,
      MsNodeTree,
@ -105,6 +84,33 @@
        data: [],
        currentModule: undefined,
        moduleOptions: [],
+        operators:  [
+          {
+            label: this.$t('api_test.automation.add_scenario'),
+            callback: this.addScenario
+          },
+          {
+            label: this.$t('api_test.api_import.label'),
+            callback: this.handleImport
+          },
+          {
+            label: this.$t('report.export'),
+            children: [
+              {
+                label: this.$t('report.export_to_ms_format') ,
+                callback: () => {
+                  this.$emit('exportAPI');
+                }
+              },
+              {
+                label: this.$t('report.export') + 'JMETER 格式',
+                callback: () => {
+                  this.$emit('exportJmx');
+                }
+              }
+            ]
+          }
+        ]
      }
    },
    mounted() {
@ -151,14 +157,19 @@
            break;
        }
      },
-      chooseExportType(e) {
-        switch (e) {
-          case "export":
-            this.$emit('exportAPI');
-            break;
-          case "exportJmx":
-            this.$emit('exportJmx');
-            break;
+      handleImport() {
+        if (this.projectId) {
+          this.result = this.$get("/api/automation/module/list/" + this.projectId, response => {
+            if (response.data != undefined && response.data != null) {
+              this.data = response.data;
+              let moduleOptions = [];
+              this.data.forEach(node => {
+                buildNodePath(node, {path: ''}, moduleOptions);
+              });
+              this.moduleOptions = moduleOptions
+            }
+          });
+          this.$refs.apiImport.open(this.currentModule);
        }
      },
      list(projectId) {
--- a/frontend/src/business/components/api/definition/components/module/ApiModuleHeader.vue
+++ b/frontend/src/business/components/api/definition/components/module/ApiModuleHeader.vue
@ -1,46 +1,23 @@
 <template>
  <div>
-    <el-select class="protocol-select" size="small" v-model="condition.protocol">
-      <el-option
-        v-for="item in options"
-        :key="item.value"
-        :name="item.name"
-        :value="item.value"
-        :disabled="item.disabled">
-      </el-option>
-    </el-select>
-    <el-input class="filter-input" :class="{'read-only': isReadOnly}" :placeholder="$t('test_track.module.search')" v-model="condition.filterText"
-              size="small">
-      <template v-slot:append>
-        <el-dropdown v-if="!isReadOnly" size="small" split-button type="primary" class="ms-api-button" @click="handleCommand('add-api')"
-                     v-tester
-                     @command="handleCommand"
-                     :hide-on-click='false'
-                     trigger="click">
-          <el-button icon="el-icon-folder-add" @click="addApi"></el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item command="add-api">{{ $t('api_test.definition.request.title') }}</el-dropdown-item>
-            <el-dropdown-item command="debug">{{ $t('api_test.definition.request.fast_debug') }}</el-dropdown-item>
-            <el-dropdown-item command="import">{{ $t('api_test.api_import.label') }}</el-dropdown-item>
-            <el-dropdown-item command="export">
-              <el-dropdown placement="right-start" @command="chooseExportType">
-                <span>
-                  {{ $t('report.export') }} <i class="el-icon-arrow-down el-icon--right"></i>
-                </span>
-                <el-dropdown-menu slot="dropdown">
-                  <template>
-                    <el-dropdown-item command="export-MS">{{ $t('report.export_to_ms_format') }}</el-dropdown-item>
-                    <el-dropdown-item command="export-Swagger" v-show="condition.protocol=='HTTP'">
-                      {{ $t('report.export_to_swagger3_format') }}
-                    </el-dropdown-item>
-                  </template>
-                </el-dropdown-menu>
-              </el-dropdown>
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </template>
-    </el-input>
+    <el-row>
+      <el-col class="protocol-col" :span="9">
+        <el-select class="protocol-select" size="small" v-model="condition.protocol">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :name="item.name"
+            :value="item.value"
+            :disabled="item.disabled">
+          </el-option>
+        </el-select>
+      </el-col>
+      <el-col :span="15">
+        <ms-search-bar
+          :condition="condition"
+          :commands="operators"/>
+      </el-col>
+    </el-row>

    <module-trash-button v-if="!isReadOnly" :condition="condition" :exe="enableTrash"/>

@ -60,14 +37,54 @@ import ApiImport from "../import/ApiImport";
 import ModuleTrashButton from "./ModuleTrashButton";
 import {buildNodePath} from "@/business/components/api/definition/model/NodeTree";
 import TemplateComponent from "../../../../track/plan/view/comonents/report/TemplateComponent/TemplateComponent";
+import MsSearchBar from "@/business/components/common/components/search/MsSearchBar";

 export default {
  name: "ApiModuleHeader",
-  components: {TemplateComponent, ModuleTrashButton, ApiImport, MsAddBasisApi},
+  components: {MsSearchBar, TemplateComponent, ModuleTrashButton, ApiImport, MsAddBasisApi},
  data() {
    return {
      options: OPTIONS,
-      moduleOptions: {}
+      moduleOptions: {},
+      operators:  [
+        {
+          label: this.$t('api_test.definition.request.title'),
+          callback: this.addApi
+        },
+        {
+          label: this.$t('api_test.definition.request.fast_debug'),
+          callback: () => {this.$emit('debug')}
+        },
+        {
+          label: this.$t('api_test.api_import.label'),
+          callback: this.handleImport
+        },
+        {
+          label: this.$t('report.export'),
+          children: [
+            {
+              label: this.$t('report.export_to_ms_format') ,
+              callback: () => {
+                if (!this.projectId) {
+                  this.$warning(this.$t('commons.check_project_tip'));
+                  return;
+                }
+                this.$emit('exportAPI', 'MS');
+              }
+            },
+            {
+              label: this.$t('report.export_to_swagger3_format'),
+              callback: () => {
+                if (!this.projectId) {
+                  this.$warning(this.$t('commons.check_project_tip'));
+                  return;
+                }
+                this.$emit('exportAPI', 'Swagger');
+              }
+            }
+          ]
+        }
+      ]
    }
  },
  props: {
@ -96,50 +113,23 @@ export default {
    },
  },
  methods: {
-
-    handleCommand(e) {
-      switch (e) {
-        case "debug":
-          this.$emit('debug');
-          break;
-        case "add-api":
-          this.addApi();
-          break;
-        case "add-module":
-          break;
-        case "import":
-          if (!this.projectId) {
-            this.$warning(this.$t('commons.check_project_tip'));
-            return;
-          }
-          this.protocol = "HTTP";
-          this.result = this.$get("/api/module/list/" + this.projectId + "/" + this.condition.protocol, response => {
-            if (response.data != undefined && response.data != null) {
-              this.data = response.data;
-              let moduleOptions = [];
-              this.data.forEach(node => {
-                buildNodePath(node, {path: ''}, moduleOptions);
-              });
-              this.moduleOptions = moduleOptions
-            }
-            this.$refs.apiImport.open(this.moduleOptions);
-          });
-          break;
-      }
-    },
-    chooseExportType(e) {
+    handleImport() {
      if (!this.projectId) {
        this.$warning(this.$t('commons.check_project_tip'));
        return;
      }
-      switch (e) {
-        case "export-MS":
-          this.$emit('exportAPI', 'MS');
-          break;
-        case "export-Swagger":
-          this.$emit('exportAPI', 'Swagger');
-          break;
-      }
+      this.protocol = "HTTP";
+      this.result = this.$get("/api/module/list/" + this.projectId + "/" + this.condition.protocol, response => {
+        if (response.data != undefined && response.data != null) {
+          this.data = response.data;
+          let moduleOptions = [];
+          this.data.forEach(node => {
+            buildNodePath(node, {path: ''}, moduleOptions);
+          });
+          this.moduleOptions = moduleOptions
+        }
+        this.$refs.apiImport.open(this.moduleOptions);
+      });
    },
    addApi() {
      if (!this.projectId) {
@ -168,6 +158,10 @@ export default {
  height: 30px;
 }

+.protocol-col {
+  min-width: 93px;
+}
+
 .read-only {
  width: 150px !important;
 }
@ -176,5 +170,4 @@ export default {
  width: 174px;
  padding-left: 3px;
 }
-
 </style>
--- a/frontend/src/business/components/common/components/search/MsSearchBar.vue
+++ b/frontend/src/business/components/common/components/search/MsSearchBar.vue
@ -0,0 +1,78 @@
+<template>
+    <el-input class="ms-search-bar" :placeholder="$t('test_track.module.search')" v-model="condition.filterText" size="small">
+      <template v-slot:append>
+        <el-dropdown>
+          <el-button type="primary">
+            <span class="tip-font">{{ $t('commons.more_operator') }}</span>
+            <i class="el-icon-arrow-down el-icon--right"/>
+          </el-button>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item v-for="(item, index) in commands" :key="index" @click.native.stop="click(item)">
+             <span class="tip-font" v-if="!item.children">
+               {{ item.label }}
+             </span>
+              <el-dropdown placement="right-start" v-else>
+                <span class="tip-font">
+                  {{ item.label }}
+                  <i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                  <template>
+                    <el-dropdown-item v-for="(child, index) in item.children" :key="index" @click.native.stop="click(child)">
+                      <span class="tip-font">
+                        {{child.label}}
+                      </span>
+                    </el-dropdown-item>
+                  </template>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+
+      </template>
+    </el-input>
+</template>
+
+<script>
+export default {
+  name: "MsSearchBar",
+  props: {
+    condition: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    commands: {
+      type: Array,
+      default() {
+        return [
+          {
+            label: this.$t('api_test.api_import.label'),
+            callback: () => {}
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    click(item) {
+      if (item.callback) {
+        item.callback();
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tip-font {
+  font-size: 13px;
+}
+
+.el-dropdown .el-button {
+  padding: 8px;
+}
+
+</style>
--- a/frontend/src/business/components/track/common/TestCaseNodeTree.vue
+++ b/frontend/src/business/components/track/common/TestCaseNodeTree.vue
@ -14,22 +14,9 @@
      @refresh="list"
      ref="nodeTree">
      <template v-slot:header>
-        <el-input :placeholder="$t('test_track.module.search')" v-model="condition.filterText" size="small">
-          <template v-slot:append>
-            <el-dropdown  size="small" split-button type="primary" class="ms-api-button"
-                         @click="handleCommand('add-api')"
-                         v-tester
-                         @command="handleCommand">
-              <el-button icon="el-icon-folder-add" @click="addTestCase"></el-button>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item command="add-testcase">{{ $t('test_track.case.create') }}</el-dropdown-item>
-                <el-dropdown-item command="import">{{ $t('api_test.api_import.label') }}</el-dropdown-item>
-                <el-dropdown-item command="export">{{ $t('api_test.export_config') }}</el-dropdown-item>
-
-              </el-dropdown-menu>
-            </el-dropdown>
-          </template>
-        </el-input>
+        <ms-search-bar
+          :condition="condition"
+          :commands="operators"/>
      </template>
    </ms-node-tree>
    <test-case-import @refreshAll="refreshAll" ref="testCaseImport"></test-case-import>
@ -49,10 +36,11 @@ import NodeEdit from "./NodeEdit";
 import MsNodeTree from "./NodeTree";
 import TestCaseCreate from "@/business/components/track/case/components/TestCaseCreate";
 import TestCaseImport from "@/business/components/track/case/components/TestCaseImport";
+import MsSearchBar from "@/business/components/common/components/search/MsSearchBar";

 export default {
  name: "TestCaseNodeTree",
-  components: {TestCaseImport, TestCaseCreate, MsNodeTree, NodeEdit},
+  components: {MsSearchBar, TestCaseImport, TestCaseCreate, MsNodeTree, NodeEdit},
  data() {
    return {
      defaultProps: {
@ -65,6 +53,20 @@ export default {
        filterText: "",
        trashEnable: false
      },
+      operators: [
+        {
+          label: this.$t('test_track.case.create'),
+          callback: this.addTestCase
+        },
+        {
+          label: this.$t('api_test.api_import.label'),
+          callback: this.handleImport
+        },
+        {
+          label: this.$t('api_test.export_config'),
+          callback: () => {this.$emit('exportTestCase')}
+        }
+      ]
    };
  },
  props: {
@ -109,24 +111,6 @@ export default {
    refreshAll() {
      this.$emit('refreshAll');
    },
-    handleCommand(e) {
-      switch (e) {
-        case "add-testcase":
-          this.addTestCase();
-          break;
-        case "import":
-          if (!this.projectId) {
-            this.$warning(this.$t('commons.check_project_tip'));
-            return;
-          }
-          this.$refs.testCaseImport.open();
-          break;
-        case "export":
-          this.$emit('exportTestCase')
-          break;
-
-      }
-    },
    list() {
      if (this.projectId) {
        this.result = this.$get("/case/node/list/" + this.projectId, response => {
@ -156,6 +140,13 @@ export default {
        this.list();
      });
    },
+    handleImport() {
+      if (!this.projectId) {
+        this.$warning(this.$t('commons.check_project_tip'));
+        return;
+      }
+      this.$refs.testCaseImport.open();
+    },
    remove(nodeIds) {
      this.$post("/case/node/delete", nodeIds, () => {
        this.list();
--- a/frontend/src/i18n/en-US.js
+++ b/frontend/src/i18n/en-US.js
@ -145,6 +145,7 @@ export default {
    auth_redirect_tip: 'Jump to the authentication source page for authentication',
    tag_tip: "Enter Enter to Add Label",
    node_name_tip: "The name cannot contain'\\'",
+    more_operator: "More operator",
    table: {
      select_tip: "Item {0} data is selected"
    },
--- a/frontend/src/i18n/zh-CN.js
+++ b/frontend/src/i18n/zh-CN.js
@ -146,6 +146,7 @@ export default {
    auth_redirect_tip: '即将跳转到认证源页面进行认证',
    tag_tip: "输入回车添加标签",
    node_name_tip: "名称不能包含'\\'",
+    more_operator: "更多操作",
    table: {
      select_tip: "已选中 {0} 条数据"
    },
--- a/frontend/src/i18n/zh-TW.js
+++ b/frontend/src/i18n/zh-TW.js
@ -146,6 +146,7 @@ export default {
    auth_redirect_tip: '即將跳轉到認證源頁面進行認證',
    tag_tip: "輸入回車添加標簽",
    node_name_tip: "名稱不能包含'\\'",
+    more_operator: "更多操作",
    table: {
      select_tip: "已选中 {0} 条数据"
    },