From cc5ff944d1ed0ac524591553486cdc6a6effaadf Mon Sep 17 00:00:00 2001
From: chenjianxing <jianxing.chen@fit2cloud.com>
Date: Fri, 26 Mar 2021 17:06:22 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=E6=90=9C=E7=B4=A2=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../track/service/TestCaseService.java        |  11 +-
 .../automation/scenario/ApiScenarioModule.vue |  79 +++++----
 .../components/module/ApiModuleHeader.vue     | 161 +++++++++---------
 .../common/components/search/MsSearchBar.vue  |  78 +++++++++
 .../track/common/TestCaseNodeTree.vue         |  61 +++----
 frontend/src/i18n/en-US.js                    |   1 +
 frontend/src/i18n/zh-CN.js                    |   1 +
 frontend/src/i18n/zh-TW.js                    |   1 +
 8 files changed, 236 insertions(+), 157 deletions(-)
 create mode 100644 frontend/src/business/components/common/components/search/MsSearchBar.vue

diff --git a/backend/src/main/java/io/metersphere/track/service/TestCaseService.java b/backend/src/main/java/io/metersphere/track/service/TestCaseService.java
index 0829f73e25..fe7164524f 100644
--- 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);
diff --git a/frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue b/frontend/src/business/components/api/automation/scenario/ApiScenarioModule.vue
index 34d27cba63..3208861566 100644
--- 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) {
diff --git a/frontend/src/business/components/api/definition/components/module/ApiModuleHeader.vue b/frontend/src/business/components/api/definition/components/module/ApiModuleHeader.vue
index 2c100c9edf..c1a13a07fb 100644
--- 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>
diff --git a/frontend/src/business/components/common/components/search/MsSearchBar.vue b/frontend/src/business/components/common/components/search/MsSearchBar.vue
new file mode 100644
index 0000000000..43188da64f
--- /dev/null
+++ 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>
diff --git a/frontend/src/business/components/track/common/TestCaseNodeTree.vue b/frontend/src/business/components/track/common/TestCaseNodeTree.vue
index 44907cc490..64c1186200 100644
--- 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();
diff --git a/frontend/src/i18n/en-US.js b/frontend/src/i18n/en-US.js
index a563e26c77..41b1b9507c 100644
--- 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"
     },
diff --git a/frontend/src/i18n/zh-CN.js b/frontend/src/i18n/zh-CN.js
index 8c5bcc9afc..23235c27f4 100644
--- 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} 条数据"
     },
diff --git a/frontend/src/i18n/zh-TW.js b/frontend/src/i18n/zh-TW.js
index 61aaa62a43..87e9735fbd 100644
--- 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} 条数据"
     },