From 838927a32143cc5fd688419045c9497d912403e8 Mon Sep 17 00:00:00 2001
From: "Captain.B" <bin@fit2cloud.com>
Date: Thu, 24 Dec 2020 13:57:37 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=E4=B8=80?=
 =?UTF-8?q?=E4=B8=AA=20v-tester=20=E6=8C=87=E4=BB=A4=EF=BC=8C=E5=BD=93?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E5=8F=AA=E6=9C=89=E5=BD=93=E5=89=8D=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E7=A9=BA=E9=97=B4=E7=9A=84=E5=8F=AA=E8=AF=BB=E6=9D=83?=
 =?UTF-8?q?=E9=99=90=E7=9A=84=E6=97=B6=E5=80=99=E9=9A=90=E8=97=8F=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../definition/components/list/ApiList.vue    | 588 +++++++++---------
 .../components/module/ApiModuleHeader.vue     | 214 +++----
 frontend/src/business/main.js                 |   4 +-
 frontend/src/business/permission.js           |  16 +-
 4 files changed, 420 insertions(+), 402 deletions(-)

diff --git a/frontend/src/business/components/api/definition/components/list/ApiList.vue b/frontend/src/business/components/api/definition/components/list/ApiList.vue
index 000f4a6cb8..9f52e3bf0b 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiList.vue
@@ -39,8 +39,9 @@
           :label="$t('api_test.definition.api_type')"
           show-overflow-tooltip>
           <template v-slot:default="scope" class="request-method">
-            <el-tag size="mini" :style="{'background-color': getColor(true, scope.row.method), border: getColor(true, scope.row.method)}" class="api-el-tag">
-              {{ scope.row.method}}
+            <el-tag size="mini" :style="{'background-color': getColor(true, scope.row.method), border: getColor(true, scope.row.method)}"
+                    class="api-el-tag">
+              {{ scope.row.method }}
             </el-tag>
           </template>
         </el-table-column>
@@ -78,10 +79,10 @@
 
         <el-table-column v-if="!isReadOnly && !isRelevance" :label="$t('commons.operating')" min-width="130" align="center">
           <template v-slot:default="scope">
-            <el-button type="text" @click="reductionApi(scope.row)" v-if="trashEnable">恢复</el-button>
-            <el-button type="text" @click="editApi(scope.row)" v-else>{{$t('commons.edit')}}</el-button>
-            <el-button type="text" @click="handleTestCase(scope.row)">{{$t('api_test.definition.request.case')}}</el-button>
-            <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">{{$t('commons.delete')}}</el-button>
+            <el-button type="text" @click="reductionApi(scope.row)" v-if="trashEnable" v-tester>恢复</el-button>
+            <el-button type="text" @click="editApi(scope.row)" v-else v-tester>{{ $t('commons.edit') }}</el-button>
+            <el-button type="text" @click="handleTestCase(scope.row)">{{ $t('api_test.definition.request.case') }}</el-button>
+            <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C" v-tester>{{ $t('commons.delete') }}</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -97,326 +98,325 @@
 
 <script>
 
-  import MsTableHeader from '../../../../common/components/MsTableHeader';
-  import MsTableOperator from "../../../../common/components/MsTableOperator";
-  import MsTableOperatorButton from "../../../../common/components/MsTableOperatorButton";
-  import MsTableButton from "../../../../common/components/MsTableButton";
-  import {LIST_CHANGE, TrackEvent} from "@/business/components/common/head/ListEvent";
-  import MsTablePagination from "../../../../common/pagination/TablePagination";
-  import MsTag from "../../../../common/components/MsTag";
-  import MsApiCaseList from "../case/ApiCaseList";
-  import MsContainer from "../../../../common/components/MsContainer";
-  import MsBottomContainer from "../BottomContainer";
-  import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn";
-  import MsBatchEdit from "../basis/BatchEdit";
-  import {API_METHOD_COLOUR, REQ_METHOD, API_STATUS} from "../../model/JsonData";
-  import {getCurrentProjectID} from "@/common/js/utils";
-  import {WORKSPACE_ID} from '../../../../../../common/js/constants';
-  import ApiListContainer from "./ApiListContainer";
-  import MsEnvironmentSelect from "../case/MsEnvironmentSelect";
+import MsTableHeader from '../../../../common/components/MsTableHeader';
+import MsTableOperator from "../../../../common/components/MsTableOperator";
+import MsTableOperatorButton from "../../../../common/components/MsTableOperatorButton";
+import MsTableButton from "../../../../common/components/MsTableButton";
+import MsTablePagination from "../../../../common/pagination/TablePagination";
+import MsTag from "../../../../common/components/MsTag";
+import MsApiCaseList from "../case/ApiCaseList";
+import MsContainer from "../../../../common/components/MsContainer";
+import MsBottomContainer from "../BottomContainer";
+import ShowMoreBtn from "../../../../track/case/components/ShowMoreBtn";
+import MsBatchEdit from "../basis/BatchEdit";
+import {API_METHOD_COLOUR, API_STATUS, REQ_METHOD} from "../../model/JsonData";
+import {getCurrentProjectID} from "@/common/js/utils";
+import {WORKSPACE_ID} from '../../../../../../common/js/constants';
+import ApiListContainer from "./ApiListContainer";
+import MsEnvironmentSelect from "../case/MsEnvironmentSelect";
 
-  export default {
-    name: "ApiList",
-    components: {
-      MsEnvironmentSelect,
-      ApiListContainer,
-      MsTableButton,
-      MsTableOperatorButton,
-      MsTableOperator,
-      MsTableHeader,
-      MsTablePagination,
-      MsTag,
-      MsApiCaseList,
-      MsContainer,
-      MsBottomContainer,
-      ShowMoreBtn,
-      MsBatchEdit
+export default {
+  name: "ApiList",
+  components: {
+    MsEnvironmentSelect,
+    ApiListContainer,
+    MsTableButton,
+    MsTableOperatorButton,
+    MsTableOperator,
+    MsTableHeader,
+    MsTablePagination,
+    MsTag,
+    MsApiCaseList,
+    MsContainer,
+    MsBottomContainer,
+    ShowMoreBtn,
+    MsBatchEdit
+  },
+  data() {
+    return {
+      condition: {},
+      selectApi: {},
+      result: {},
+      moduleId: "",
+      deletePath: "/test/case/delete",
+      selectRows: new Set(),
+      buttons: [
+        {name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
+        {name: this.$t('api_test.definition.request.batch_edit'), handleClick: this.handleEditBatch}
+      ],
+      typeArr: [
+        {id: 'status', name: this.$t('api_test.definition.api_status')},
+        {id: 'method', name: this.$t('api_test.definition.api_type')},
+        {id: 'userId', name: this.$t('api_test.definition.api_principal')},
+      ],
+      valueArr: {
+        status: API_STATUS,
+        method: REQ_METHOD,
+        userId: [],
+      },
+      methodColorMap: new Map(API_METHOD_COLOUR),
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      screenHeight: document.documentElement.clientHeight - 330,//屏幕高度,
+      environmentId: undefined
+    }
+  },
+  props: {
+    currentProtocol: String,
+    selectNodeIds: Array,
+    visible: {
+      type: Boolean,
+      default: false,
     },
-    data() {
-      return {
-        condition: {},
-        selectApi: {},
-        result: {},
-        moduleId: "",
-        deletePath: "/test/case/delete",
-        selectRows: new Set(),
-        buttons: [
-          {name: this.$t('api_test.definition.request.batch_delete'), handleClick: this.handleDeleteBatch},
-          {name: this.$t('api_test.definition.request.batch_edit'), handleClick: this.handleEditBatch}
-        ],
-        typeArr: [
-          {id: 'status', name: this.$t('api_test.definition.api_status')},
-          {id: 'method', name: this.$t('api_test.definition.api_type')},
-          {id: 'userId', name: this.$t('api_test.definition.api_principal')},
-        ],
-        valueArr: {
-          status: API_STATUS,
-          method: REQ_METHOD,
-          userId: [],
-        },
-        methodColorMap: new Map(API_METHOD_COLOUR),
-        tableData: [],
-        currentPage: 1,
-        pageSize: 10,
-        total: 0,
-        screenHeight: document.documentElement.clientHeight - 330,//屏幕高度,
-        environmentId: undefined
-      }
+    isCaseRelevance: {
+      type: Boolean,
+      default: false,
     },
-    props: {
-      currentProtocol: String,
-      selectNodeIds: Array,
-      visible: {
-        type: Boolean,
-        default: false,
-      },
-      isCaseRelevance: {
-        type: Boolean,
-        default: false,
-      },
-      trashEnable: {
-        type: Boolean,
-        default: false,
-      },
-      isApiListEnable: Boolean,
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      },
-      relevanceProjectId: String,
-      isRelevance: Boolean
+    trashEnable: {
+      type: Boolean,
+      default: false,
     },
-    created: function () {
+    isApiListEnable: Boolean,
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    },
+    relevanceProjectId: String,
+    isRelevance: Boolean
+  },
+  created: function () {
+    this.initTable();
+    this.getMaintainerOptions();
+  },
+  watch: {
+    selectNodeIds() {
       this.initTable();
-      this.getMaintainerOptions();
     },
-    watch: {
-      selectNodeIds() {
-        this.initTable();
-      },
-      currentProtocol() {
-        this.initTable();
-      },
-      trashEnable() {
-        if (this.trashEnable) {
-          this.initTable();
-        }
-      },
-      relevanceProjectId() {
+    currentProtocol() {
+      this.initTable();
+    },
+    trashEnable() {
+      if (this.trashEnable) {
         this.initTable();
       }
     },
-    methods: {
-      isApiListEnableChange(data) {
-        this.$emit('isApiListEnableChange', data);
-      },
-      initTable() {
-        this.selectRows = new Set();
-        this.condition.filters = ["Prepare", "Underway", "Completed"];
+    relevanceProjectId() {
+      this.initTable();
+    }
+  },
+  methods: {
+    isApiListEnableChange(data) {
+      this.$emit('isApiListEnableChange', data);
+    },
+    initTable() {
+      this.selectRows = new Set();
+      this.condition.filters = ["Prepare", "Underway", "Completed"];
 
-        this.condition.moduleIds = this.selectNodeIds;
-        if (this.trashEnable) {
-          this.condition.filters = ["Trash"];
-          this.condition.moduleIds = [];
-        }
+      this.condition.moduleIds = this.selectNodeIds;
+      if (this.trashEnable) {
+        this.condition.filters = ["Trash"];
+        this.condition.moduleIds = [];
+      }
 
-        this.condition.projectId = this.getProjectId();
+      this.condition.projectId = this.getProjectId();
 
-        if (this.currentProtocol != null) {
-          this.condition.protocol = this.currentProtocol;
-        }
-        this.result = this.$post("/api/definition/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
-          this.total = response.data.itemCount;
-          this.tableData = response.data.listObject;
-        });
-      },
-      getMaintainerOptions() {
-        let workspaceId = localStorage.getItem(WORKSPACE_ID);
-        this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
-          this.valueArr.userId = response.data;
-        });
-      },
-      handleSelect(selection, row) {
-        row.hashTree = [];
-        if (this.selectRows.has(row)) {
-          this.$set(row, "showMore", false);
-          this.selectRows.delete(row);
-        } else {
+      if (this.currentProtocol != null) {
+        this.condition.protocol = this.currentProtocol;
+      }
+      this.result = this.$post("/api/definition/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
+        this.total = response.data.itemCount;
+        this.tableData = response.data.listObject;
+      });
+    },
+    getMaintainerOptions() {
+      let workspaceId = localStorage.getItem(WORKSPACE_ID);
+      this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
+        this.valueArr.userId = response.data;
+      });
+    },
+    handleSelect(selection, row) {
+      row.hashTree = [];
+      if (this.selectRows.has(row)) {
+        this.$set(row, "showMore", false);
+        this.selectRows.delete(row);
+      } else {
+        this.$set(row, "showMore", true);
+        this.selectRows.add(row);
+      }
+      let arr = Array.from(this.selectRows);
+      // 选中1个以上的用例时显示更多操作
+      if (this.selectRows.size === 1) {
+        this.$set(arr[0], "showMore", true);
+      } else if (this.selectRows.size === 2) {
+        arr.forEach(row => {
           this.$set(row, "showMore", true);
-          this.selectRows.add(row);
-        }
-        let arr = Array.from(this.selectRows);
-        // 选中1个以上的用例时显示更多操作
-        if (this.selectRows.size === 1) {
-          this.$set(arr[0], "showMore", true);
-        } else if (this.selectRows.size === 2) {
-          arr.forEach(row => {
-            this.$set(row, "showMore", true);
-          })
-        }
-      },
-      handleSelectAll(selection) {
-        if (selection.length > 0) {
-          if (selection.length === 1) {
-            selection.hashTree = [];
-            this.selectRows.add(selection[0]);
-          } else {
-            this.tableData.forEach(item => {
-              item.hashTree = [];
-              this.$set(item, "showMore", true);
-              this.selectRows.add(item);
-            });
-          }
+        })
+      }
+    },
+    handleSelectAll(selection) {
+      if (selection.length > 0) {
+        if (selection.length === 1) {
+          selection.hashTree = [];
+          this.selectRows.add(selection[0]);
         } else {
-          this.selectRows.clear();
-          this.tableData.forEach(row => {
-            this.$set(row, "showMore", false);
-          })
+          this.tableData.forEach(item => {
+            item.hashTree = [];
+            this.$set(item, "showMore", true);
+            this.selectRows.add(item);
+          });
         }
-      },
-      search() {
-        this.initTable();
-      },
-      buildPagePath(path) {
-        return path + "/" + this.currentPage + "/" + this.pageSize;
-      },
+      } else {
+        this.selectRows.clear();
+        this.tableData.forEach(row => {
+          this.$set(row, "showMore", false);
+        })
+      }
+    },
+    search() {
+      this.initTable();
+    },
+    buildPagePath(path) {
+      return path + "/" + this.currentPage + "/" + this.pageSize;
+    },
 
-      editApi(row) {
-        this.$emit('editApi', row);
-      },
-      reductionApi(row) {
-        row.request = null;
-        row.response = null;
-        let rows = [row];
-        this.$post('/api/definition/reduction/', rows, () => {
-          this.$success(this.$t('commons.save_success'));
-          this.search();
-        });
-      },
-      handleDeleteBatch() {
-        if (this.trashEnable) {
-          this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
-            confirmButtonText: this.$t('commons.confirm'),
-            callback: (action) => {
-              if (action === 'confirm') {
-                let ids = Array.from(this.selectRows).map(row => row.id);
-                this.$post('/api/definition/deleteBatch/', ids, () => {
-                  this.selectRows.clear();
-                  this.initTable();
-                  this.$success(this.$t('commons.delete_success'));
-                });
-              }
-            }
-          });
-        } else {
-          this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
-            confirmButtonText: this.$t('commons.confirm'),
-            callback: (action) => {
-              if (action === 'confirm') {
-                let ids = Array.from(this.selectRows).map(row => row.id);
-                this.$post('/api/definition/removeToGc/', ids, () => {
-                  this.selectRows.clear();
-                  this.initTable();
-                  this.$success(this.$t('commons.delete_success'));
-                  this.$refs.caseList.apiCaseClose();
-                });
-              }
-            }
-          });
-        }
-      },
-      handleEditBatch() {
-        this.$refs.batchEdit.open();
-      },
-      batchEdit(form) {
-        let arr = Array.from(this.selectRows);
-        let ids = arr.map(row => row.id);
-        let param = {};
-        param[form.type] = form.value;
-        param.ids = ids;
-        this.$post('/api/definition/batch/edit', param, () => {
-          this.$success(this.$t('commons.save_success'));
-          this.initTable();
-        });
-      },
-      handleTestCase(api) {
-        this.selectApi = api;
-        let request = {};
-        if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
-          request = api.request;
-        } else {
-          request = JSON.parse(api.request);
-        }
-        if (!request.hashTree) {
-          request.hashTree = [];
-        }
-        this.selectApi.url = request.path;
-        this.$refs.caseList.open(this.selectApi);
-      },
-      handleDelete(api) {
-        if (this.trashEnable) {
-          this.$get('/api/definition/delete/' + api.id, () => {
-            this.$success(this.$t('commons.delete_success'));
-            this.initTable();
-          });
-          return;
-        }
-        this.$alert(this.$t('api_test.definition.request.delete_confirm') + ' ' + api.name + " ？", '', {
+    editApi(row) {
+      this.$emit('editApi', row);
+    },
+    reductionApi(row) {
+      row.request = null;
+      row.response = null;
+      let rows = [row];
+      this.$post('/api/definition/reduction/', rows, () => {
+        this.$success(this.$t('commons.save_success'));
+        this.search();
+      });
+    },
+    handleDeleteBatch() {
+      if (this.trashEnable) {
+        this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
           confirmButtonText: this.$t('commons.confirm'),
           callback: (action) => {
             if (action === 'confirm') {
-              let ids = [api.id];
-              this.$post('/api/definition/removeToGc/', ids, () => {
-                this.$success(this.$t('commons.delete_success'));
+              let ids = Array.from(this.selectRows).map(row => row.id);
+              this.$post('/api/definition/deleteBatch/', ids, () => {
+                this.selectRows.clear();
                 this.initTable();
+                this.$success(this.$t('commons.delete_success'));
+              });
+            }
+          }
+        });
+      } else {
+        this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
+          confirmButtonText: this.$t('commons.confirm'),
+          callback: (action) => {
+            if (action === 'confirm') {
+              let ids = Array.from(this.selectRows).map(row => row.id);
+              this.$post('/api/definition/removeToGc/', ids, () => {
+                this.selectRows.clear();
+                this.initTable();
+                this.$success(this.$t('commons.delete_success'));
                 this.$refs.caseList.apiCaseClose();
               });
             }
           }
         });
-      },
-      getColor(enable, method) {
-        if (enable) {
-          return this.methodColorMap.get(method);
-        }
-      },
-      showExecResult(row) {
-        this.$emit('showExecResult', row);
-      },
-      getProjectId() {
-        if (!this.isCaseRelevance) {
-          return getCurrentProjectID();
-        } else {
-          return this.relevanceProjectId;
-        }
-      },
-      setEnvironment(data) {
-        this.environmentId = data.id;
       }
     },
-  }
+    handleEditBatch() {
+      this.$refs.batchEdit.open();
+    },
+    batchEdit(form) {
+      let arr = Array.from(this.selectRows);
+      let ids = arr.map(row => row.id);
+      let param = {};
+      param[form.type] = form.value;
+      param.ids = ids;
+      this.$post('/api/definition/batch/edit', param, () => {
+        this.$success(this.$t('commons.save_success'));
+        this.initTable();
+      });
+    },
+    handleTestCase(api) {
+      this.selectApi = api;
+      let request = {};
+      if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
+        request = api.request;
+      } else {
+        request = JSON.parse(api.request);
+      }
+      if (!request.hashTree) {
+        request.hashTree = [];
+      }
+      this.selectApi.url = request.path;
+      this.$refs.caseList.open(this.selectApi);
+    },
+    handleDelete(api) {
+      if (this.trashEnable) {
+        this.$get('/api/definition/delete/' + api.id, () => {
+          this.$success(this.$t('commons.delete_success'));
+          this.initTable();
+        });
+        return;
+      }
+      this.$alert(this.$t('api_test.definition.request.delete_confirm') + ' ' + api.name + " ？", '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        callback: (action) => {
+          if (action === 'confirm') {
+            let ids = [api.id];
+            this.$post('/api/definition/removeToGc/', ids, () => {
+              this.$success(this.$t('commons.delete_success'));
+              this.initTable();
+              this.$refs.caseList.apiCaseClose();
+            });
+          }
+        }
+      });
+    },
+    getColor(enable, method) {
+      if (enable) {
+        return this.methodColorMap.get(method);
+      }
+    },
+    showExecResult(row) {
+      this.$emit('showExecResult', row);
+    },
+    getProjectId() {
+      if (!this.isCaseRelevance) {
+        return getCurrentProjectID();
+      } else {
+        return this.relevanceProjectId;
+      }
+    },
+    setEnvironment(data) {
+      this.environmentId = data.id;
+    }
+  },
+}
 </script>
 
 <style scoped>
-  .operate-button > div {
-    display: inline-block;
-    margin-left: 10px;
-  }
+.operate-button > div {
+  display: inline-block;
+  margin-left: 10px;
+}
 
-  .request-method {
-    padding: 0 5px;
-    color: #1E90FF;
-  }
+.request-method {
+  padding: 0 5px;
+  color: #1E90FF;
+}
 
-  .api-el-tag {
-    color: white;
-  }
+.api-el-tag {
+  color: white;
+}
 
-  .search-input {
-    float: right;
-    width: 300px;
-    /*margin-bottom: 20px;*/
-    margin-right: 20px;
-  }
+.search-input {
+  float: right;
+  width: 300px;
+  /*margin-bottom: 20px;*/
+  margin-right: 20px;
+}
 
 </style>
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 27bc01b314..ae018299fd 100644
--- a/frontend/src/business/components/api/definition/components/module/ApiModuleHeader.vue
+++ b/frontend/src/business/components/api/definition/components/module/ApiModuleHeader.vue
@@ -1,123 +1,125 @@
 <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')"
-                       @command="handleCommand">
-            <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">{{$t('report.export')}}</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </template>
-      </el-input>
+  <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">
+          <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">{{ $t('report.export') }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </template>
+    </el-input>
 
-      <module-trash-button v-if="!isReadOnly" :condition="condition" :exe="enableTrash"/>
+    <module-trash-button v-if="!isReadOnly" :condition="condition" :exe="enableTrash"/>
 
-      <ms-add-basis-api
-        :current-protocol="condition.protocol"
-        @saveAsEdit="saveAsEdit"
-        @refresh="refresh"
-        ref="basisApi"/>
-      <api-import ref="apiImport" @refresh="refresh"/>
-    </div>
+    <ms-add-basis-api
+      :current-protocol="condition.protocol"
+      @saveAsEdit="saveAsEdit"
+      @refresh="refresh"
+      ref="basisApi"/>
+    <api-import ref="apiImport" @refresh="refresh"/>
+  </div>
 </template>
 
 <script>
-    import {OPTIONS} from "../../model/JsonData";
-    import MsAddBasisApi from "../basis/AddBasisApi";
-    import ApiImport from "../import/ApiImport";
-    import ModuleTrashButton from "./ModuleTrashButton";
+import {OPTIONS} from "../../model/JsonData";
+import MsAddBasisApi from "../basis/AddBasisApi";
+import ApiImport from "../import/ApiImport";
+import ModuleTrashButton from "./ModuleTrashButton";
 
-    export default {
-      name: "ApiModuleHeader",
-      components: {ModuleTrashButton, ApiImport, MsAddBasisApi},
-      data() {
-        return {
-          options: OPTIONS,
-        }
-      },
-      props: {
-        condition: {
-          type: Object,
-          default() {
-            return {}
-          }
-        },
-        currentModule: {
-          type: Object,
-          default() {
-            return {}
-          }
-        },
-        isReadOnly: {
-          type: Boolean,
-          default() {
-            return false
-          }
-        }
-      },
-      methods: {
-        handleCommand(e) {
-          switch (e) {
-            case "debug":
-              this.$emit('debug');
-              break;
-            case "add-api":
-              this.addApi();
-              break;
-            case "add-module":
-              break;
-            case "import":
-              this.$refs.apiImport.open(this.currentModule);
-              break;
-            default:
-              this.$emit('exportAPI');
-              break;
-          }
-        },
-        addApi() {
-          this.$refs.basisApi.open(this.currentModule);
-        },
-        saveAsEdit(data) {
-          this.$emit('saveAsEdit', data);
-        },
-        refresh() {
-          this.$emit('refresh');
-        },
-        enableTrash() {
-          this.condition.trashEnable = true;
-        }
+export default {
+  name: "ApiModuleHeader",
+  components: {ModuleTrashButton, ApiImport, MsAddBasisApi},
+  data() {
+    return {
+      options: OPTIONS,
+    }
+  },
+  props: {
+    condition: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    currentModule: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    isReadOnly: {
+      type: Boolean,
+      default() {
+        return false
       }
     }
+  },
+  methods: {
+    handleCommand(e) {
+      switch (e) {
+        case "debug":
+          this.$emit('debug');
+          break;
+        case "add-api":
+          this.addApi();
+          break;
+        case "add-module":
+          break;
+        case "import":
+          this.$refs.apiImport.open(this.currentModule);
+          break;
+        default:
+          this.$emit('exportAPI');
+          break;
+      }
+    },
+    addApi() {
+      this.$refs.basisApi.open(this.currentModule);
+    },
+    saveAsEdit(data) {
+      this.$emit('saveAsEdit', data);
+    },
+    refresh() {
+      this.$emit('refresh');
+    },
+    enableTrash() {
+      this.condition.trashEnable = true;
+    }
+  }
+}
 </script>
 
 <style scoped>
 
-  .protocol-select {
-    width: 95px;
-    height: 30px;
-  }
+.protocol-select {
+  width: 95px;
+  height: 30px;
+}
 
-  .read-only {
-    width: 150px !important;
-  }
+.read-only {
+  width: 150px !important;
+}
 
-  .filter-input {
-    width: 175px;
-    padding-left: 3px;
-  }
+.filter-input {
+  width: 175px;
+  padding-left: 3px;
+}
 
 </style>
diff --git a/frontend/src/business/main.js b/frontend/src/business/main.js
index aa30149491..5fa89340c7 100644
--- a/frontend/src/business/main.js
+++ b/frontend/src/business/main.js
@@ -11,7 +11,7 @@ import YanProgress from 'yan-progress';
 import './permission' // permission control
 import i18n from "../i18n/i18n";
 import store from "./store";
-import {permission, roles, xpack} from './permission'
+import {permission, roles, tester, xpack} from './permission'
 import chart from "../common/js/chart";
 import CalendarHeatmap from "../common/js/calendar-heatmap";
 import '../common/css/menu-header.css';
@@ -41,6 +41,8 @@ Vue.directive('roles', roles);
 
 Vue.directive('xpack', xpack);
 
+Vue.directive('tester', tester);
+
 new Vue({
   el: '#app',
   router,
diff --git a/frontend/src/business/permission.js b/frontend/src/business/permission.js
index c8d98f5bb6..2d9b98d271 100644
--- a/frontend/src/business/permission.js
+++ b/frontend/src/business/permission.js
@@ -1,6 +1,6 @@
 import router from './components/common/router/router'
 import {TokenKey} from '@/common/js/constants';
-import {hasLicense, hasRolePermissions, hasRoles} from "@/common/js/utils";
+import {checkoutTestManagerOrTestUser, hasLicense, hasRolePermissions, hasRoles} from "@/common/js/utils";
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
 const whiteList = ['/login']; // no redirect whitelist
@@ -25,6 +25,20 @@ export const xpack = {
   }
 };
 
+export const tester = {
+  inserted(el, binding) {
+    checkTestManagerOrTestUser(el, binding);
+  }
+};
+
+function checkTestManagerOrTestUser(el, binding) {
+  let v = checkoutTestManagerOrTestUser();
+
+  if (!v) {
+    el.parentNode && el.parentNode.removeChild(el)
+  }
+}
+
 function checkLicense(el, binding, type) {
   let v = hasLicense()