refactor: 增加一个 v-tester 指令，当用户只有当前工作空间的只读权限的时候隐藏操作按钮

frontend/src/business/components/api/definition/components/list/ApiList.vue

@@ -39,7 +39,8 @@
           :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">
+            <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>
@@ -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="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">{{$t('commons.delete')}}</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>
@@ -101,7 +102,6 @@
 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";
@@ -109,7 +109,7 @@
 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 {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";

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

@@ -9,9 +9,11 @@
         :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">
+    <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">

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,

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()