fix(测试跟踪): 测试计划接口测试模块树缺少协议选项

--bug=1018428 --user=陈建星 【测试跟踪】测试计划不能关联tcp/sql/dubbo接口了 https://www.tapd.cn/55049933/s/1267924

test-track/frontend/src/business/plan/view/comonents/api/module/ApiModule.vue

@@ -22,10 +22,18 @@
       ref="nodeTree">
 
       <template v-slot:header>
-        <ms-search-bar
+        <api-module-header
           :show-operator="showOperator"
           :condition="condition"
-          :commands="null"/>
+          :current-module="currentModule"
+          :is-read-only="isReadOnly"
+          :moduleOptions="data"
+          :options="options"
+          :total="total"
+          :select-project-id="projectId"
+          @refreshTable="$emit('refreshTable')"
+          @schedule="$emit('schedule')"
+          @refresh="refresh"/>
       </template>
 
     </ms-node-tree>
@@ -42,12 +50,14 @@ import {apiModuleGetUserDefaultApiType, apiModuleProjectList} from "@/api/remote
 import MsSearchBar from "metersphere-frontend/src/components/search/MsSearchBar";
 import {getCurrentProjectID} from "@/business/utils/sdk-utils";
 import {apiCaseModulePlanList} from "@/api/remote/plan/test-plan-api-case";
+import ApiModuleHeader from "./ApiModuleHeader";
 
 export default {
   name: 'MsApiModule',
   components: {
     MsNodeTree,
-    MsSearchBar
+    MsSearchBar,
+    ApiModuleHeader
   },
   data() {
     return {
@@ -91,6 +101,12 @@ export default {
       default() {
         return OPTIONS;
       }
+    },
+    selectProjectId: {
+      type: String,
+      default() {
+        return getCurrentProjectID();
+      }
     }
   },
   mounted() {
@@ -102,6 +118,13 @@ export default {
     },
     isRelevanceModel() {
       return !!this.relevanceProjectId;
+    },
+    projectId() {
+      if (this.selectProjectId) {
+        return this.selectProjectId;
+      } else {
+        return getCurrentProjectID();
+      }
     }
   },
   watch: {

test-track/frontend/src/business/plan/view/comonents/api/module/ApiModuleHeader.vue

@@ -0,0 +1,116 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="8">
+        <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
+            :show-operator="showOperator"
+            :condition="condition"/>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+import MsSearchBar from "metersphere-frontend/src/components/search/MsSearchBar";
+import {getCurrentProjectID} from "metersphere-frontend/src/utils/token";
+
+export default {
+  name: "ApiModuleHeader",
+  components: {MsSearchBar},
+  data() {
+    return {};
+  },
+  props: {
+    condition: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    showOperator: Boolean,
+    moduleOptions: Array,
+    total: Number,
+    currentModule: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    isReadOnly: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    options: {
+      type: Array,
+      default() {
+        return [
+          {value: 'HTTP', name: 'HTTP'},
+          {value: 'TCP', name: 'TCP'},
+          {value: 'SQL', name: 'SQL'},
+          {value: 'DUBBO', name: 'DUBBO'}
+        ];
+      }
+    },
+    selectProjectId: {
+      type: String,
+      default() {
+        return getCurrentProjectID();
+      }
+    }
+  },
+  computed: {
+    projectId() {
+      if (this.selectProjectId) {
+        return this.selectProjectId;
+      } else {
+        return getCurrentProjectID();
+      }
+    },
+    showTrashNode() {
+      return (!this.isReadOnly);
+    }
+  },
+  methods: {
+    refresh() {
+      this.$emit('refresh');
+    },
+    enableTrash() {
+      this.condition.trashEnable = true;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.protocol-select {
+  width: 85px;
+  height: 30px;
+}
+
+.protocol-col {
+  min-width: 93px;
+}
+
+.read-only {
+  width: 150px !important;
+}
+
+.filter-input {
+  width: 174px;
+  padding-left: 3px;
+}
+</style>