refactor: 重构模式搜索框

backend/src/main/java/io/metersphere/track/service/TestCaseService.java

@@ -533,12 +533,15 @@ public class TestCaseService {
                     }
                 }
 
+                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);

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">
+        <ms-search-bar
-          <template v-slot:append>
+          :condition="condition"
-            <el-dropdown v-if="!isReadOnly" size="small" split-button type="primary" class="ms-api-button" @click="handleCommand('add-api')"
+          :commands="operators"/>
-                         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>
         <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) {
+      handleImport() {
-        switch (e) {
+        if (this.projectId) {
-          case "export":
+          this.result = this.$get("/api/automation/module/list/" + this.projectId, response => {
-            this.$emit('exportAPI');
+            if (response.data != undefined && response.data != null) {
-            break;
+              this.data = response.data;
-          case "exportJmx":
+              let moduleOptions = [];
-            this.$emit('exportJmx');
+              this.data.forEach(node => {
-            break;
+                buildNodePath(node, {path: ''}, moduleOptions);
+              });
+              this.moduleOptions = moduleOptions
+            }
+          });
+          this.$refs.apiImport.open(this.currentModule);
         }
       },
       list(projectId) {

frontend/src/business/components/api/definition/components/module/ApiModuleHeader.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
+    <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"
@@ -9,38 +11,13 @@
             :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"
+      </el-col>
-              size="small">
+      <el-col :span="15">
-      <template v-slot:append>
+        <ms-search-bar
-        <el-dropdown v-if="!isReadOnly" size="small" split-button type="primary" class="ms-api-button" @click="handleCommand('add-api')"
+          :condition="condition"
-                     v-tester
+          :commands="operators"/>
-                     @command="handleCommand"
+      </el-col>
-                     :hide-on-click='false'
+    </el-row>
-                     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>
 
     <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,18 +113,7 @@ export default {
     },
   },
   methods: {
-
+    handleImport() {
-    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;
@@ -124,22 +130,6 @@ export default {
         }
         this.$refs.apiImport.open(this.moduleOptions);
       });
-          break;
-      }
-    },
-    chooseExportType(e) {
-      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;
-      }
     },
     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>

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>

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">
+        <ms-search-bar
-          <template v-slot:append>
+          :condition="condition"
-            <el-dropdown  size="small" split-button type="primary" class="ms-api-button"
+          :commands="operators"/>
-                         @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>
       </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();

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"
     },

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} 条数据"
     },

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} 条数据"
     },