From 03556344922acc5f621c1841711d8e82e7affaeb Mon Sep 17 00:00:00 2001
From: fit2-zhao <yong.zhao@fit2cloud.com>
Date: Wed, 24 Feb 2021 10:13:09 +0800
Subject: [PATCH] =?UTF-8?q?style(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA?=
 =?UTF-8?q?=EF=BC=8C=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20=E6=89=80?=
 =?UTF-8?q?=E6=9C=89TAG=E6=A0=87=E7=AD=BE=E6=98=BE=E7=A4=BA=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../automation/scenario/ApiScenarioList.vue   |    4 +-
 .../components/list/ApiCaseSimpleList.vue     |    4 +-
 .../definition/components/list/ApiList.vue    | 1025 ++++++++---------
 .../track/case/components/TestCaseList.vue    |    4 +-
 .../comonents/api/RelevanceScenarioList.vue   |    6 +-
 .../comonents/api/TestPlanApiCaseList.vue     |    4 +-
 .../comonents/api/TestPlanApiScenarioList.vue |    4 +-
 .../functional/FunctionalTestCaseList.vue     |    4 +-
 .../component/ScenarioFailureCasesList.vue    |    4 +-
 9 files changed, 520 insertions(+), 539 deletions(-)

diff --git a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
index 0514b8985e..1d88e26b71 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
@@ -68,9 +68,7 @@
           <el-table-column v-if="item.id == 'tags'" prop="tags" min-width="120px"
                            :label="$t('api_test.automation.tag')" :key="index">
             <template v-slot:default="scope">
-              <div v-for="(itemName,index)  in scope.row.tags" :key="index">
-                <ms-tag type="success" effect="plain" :content="itemName"/>
-              </div>
+              <ms-tag v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain" :content="itemName" style="margin-left: 5px"/>
             </template>
           </el-table-column>
           <el-table-column v-if="item.id == 'userId'" prop="userId" min-width="120px"
diff --git a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
index a138866023..b70ca19242 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
@@ -72,9 +72,7 @@
           <el-table-column v-if="item.id=='tags'" prop="tags" min-width="120px" :label="$t('commons.tag')"
                            :key="index">
             <template v-slot:default="scope">
-              <div v-for="(itemName,index)  in scope.row.tags" :key="index">
-                <ms-tag type="success" effect="plain" :content="itemName"/>
-              </div>
+                <ms-tag  v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain" :content="itemName" style="margin-left: 5px"/>
             </template>
           </el-table-column>
 
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 3b1ff4faa2..8a350023f9 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiList.vue
@@ -114,13 +114,10 @@
             v-if="item.id == 'tags'"
             prop="tags"
             :label="$t('commons.tag')"
-            min-width="80px"
-            :key="index"
-          >
+            min-width="120px"
+            :key="index">
             <template v-slot:default="scope">
-              <div v-for="(itemName,index)  in scope.row.tags" :key="index">
-                <ms-tag type="success" effect="plain" :content="itemName"/>
-              </div>
+              <ms-tag v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain" :content="itemName" style="margin-left: 5px"/>
             </template>
           </el-table-column>
 
@@ -209,555 +206,555 @@
 
 <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 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, DUBBO_METHOD, REQ_METHOD, SQL_METHOD, TCP_METHOD} from "../../model/JsonData";
-import {downloadFile} from "@/common/js/utils";
-import {PROJECT_NAME} from '@/common/js/constants';
-import {getCurrentProjectID, getCurrentUser} from "@/common/js/utils";
-import {API_LIST, TEST_CASE_LIST, WORKSPACE_ID} from '@/common/js/constants';
-import ApiListContainer from "./ApiListContainer";
-import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
-import ApiStatus from "@/business/components/api/definition/components/list/ApiStatus";
-import MsTableAdvSearchBar from "@/business/components/common/components/search/MsTableAdvSearchBar";
-import {API_DEFINITION_CONFIGS} from "@/business/components/common/components/search/search-components";
-import MsTipButton from "@/business/components/common/components/MsTipButton";
-import CaseBatchMove from "@/business/components/api/definition/components/basis/BatchMove";
-import ApiListContainerWithDoc from "@/business/components/api/definition/components/list/ApiListContainerWithDoc";
-import {
-  _handleSelect,
-  _handleSelectAll, getLabel,
-  getSelectDataCounts, initCondition,
-  setUnSelectIds, toggleAllSelection
-} from "@/common/js/tableUtils";
-import {_filter, _sort} from "@/common/js/tableUtils";
-import {Api_List, Track_Test_Case} from "@/business/components/common/model/JsonData";
-import HeaderCustom from "@/business/components/common/head/HeaderCustom";
+  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, DUBBO_METHOD, REQ_METHOD, SQL_METHOD, TCP_METHOD} from "../../model/JsonData";
+  import {downloadFile} from "@/common/js/utils";
+  import {PROJECT_NAME} from '@/common/js/constants';
+  import {getCurrentProjectID, getCurrentUser} from "@/common/js/utils";
+  import {API_LIST, TEST_CASE_LIST, WORKSPACE_ID} from '@/common/js/constants';
+  import ApiListContainer from "./ApiListContainer";
+  import MsTableHeaderSelectPopover from "@/business/components/common/components/table/MsTableHeaderSelectPopover";
+  import ApiStatus from "@/business/components/api/definition/components/list/ApiStatus";
+  import MsTableAdvSearchBar from "@/business/components/common/components/search/MsTableAdvSearchBar";
+  import {API_DEFINITION_CONFIGS} from "@/business/components/common/components/search/search-components";
+  import MsTipButton from "@/business/components/common/components/MsTipButton";
+  import CaseBatchMove from "@/business/components/api/definition/components/basis/BatchMove";
+  import ApiListContainerWithDoc from "@/business/components/api/definition/components/list/ApiListContainerWithDoc";
+  import {
+    _handleSelect,
+    _handleSelectAll, getLabel,
+    getSelectDataCounts, initCondition,
+    setUnSelectIds, toggleAllSelection
+  } from "@/common/js/tableUtils";
+  import {_filter, _sort} from "@/common/js/tableUtils";
+  import {Api_List, Track_Test_Case} from "@/business/components/common/model/JsonData";
+  import HeaderCustom from "@/business/components/common/head/HeaderCustom";
 
 
-export default {
-  name: "ApiList",
-  components: {
-    HeaderCustom,
-    CaseBatchMove,
-    ApiStatus,
-    MsTableHeaderSelectPopover,
-    ApiListContainerWithDoc,
-    MsTableButton,
-    MsTableOperatorButton,
-    MsTableOperator,
-    MsTableHeader,
-    MsTablePagination,
-    MsTag,
-    MsApiCaseList,
-    MsContainer,
-    MsBottomContainer,
-    ShowMoreBtn,
-    MsBatchEdit,
-    MsTipButton,
-    MsTableAdvSearchBar
-  },
-  data() {
-    return {
-      type: API_LIST,
-      headerItems: Api_List,
-      tableLabel: Api_List,
-      condition: {
-        components: API_DEFINITION_CONFIGS
+  export default {
+    name: "ApiList",
+    components: {
+      HeaderCustom,
+      CaseBatchMove,
+      ApiStatus,
+      MsTableHeaderSelectPopover,
+      ApiListContainerWithDoc,
+      MsTableButton,
+      MsTableOperatorButton,
+      MsTableOperator,
+      MsTableHeader,
+      MsTablePagination,
+      MsTag,
+      MsApiCaseList,
+      MsContainer,
+      MsBottomContainer,
+      ShowMoreBtn,
+      MsBatchEdit,
+      MsTipButton,
+      MsTableAdvSearchBar
+    },
+    data() {
+      return {
+        type: API_LIST,
+        headerItems: Api_List,
+        tableLabel: Api_List,
+        condition: {
+          components: API_DEFINITION_CONFIGS
+        },
+        selectApi: {},
+        result: {},
+        moduleId: "",
+        selectDataRange: "all",
+        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},
+          {
+            name: this.$t('api_test.definition.request.batch_move'), handleClick: this.handleBatchMove
+          }
+        ],
+        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')},
+        ],
+        statusFilters: [
+          {text: this.$t('test_track.plan.plan_status_prepare'), value: 'Prepare'},
+          {text: this.$t('test_track.plan.plan_status_running'), value: 'Underway'},
+          {text: this.$t('test_track.plan.plan_status_completed'), value: 'Completed'},
+          {text: this.$t('test_track.plan.plan_status_trash'), value: 'Trash'},
+        ],
+        methodFilters: [
+          {text: 'GET', value: 'GET'},
+          {text: 'POST', value: 'POST'},
+          {text: 'PUT', value: 'PUT'},
+          {text: 'PATCH', value: 'PATCH'},
+          {text: 'DELETE', value: 'DELETE'},
+          {text: 'OPTIONS', value: 'OPTIONS'},
+          {text: 'HEAD', value: 'HEAD'},
+          {text: 'CONNECT', value: 'CONNECT'},
+          {text: 'DUBBO', value: 'DUBBO'},
+          {text: 'dubbo://', value: 'dubbo://'},
+          {text: 'SQL', value: 'SQL'},
+          {text: 'TCP', value: 'TCP'},
+        ],
+        userFilters: [],
+        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 - 270,//屏幕高度,
+        environmentId: undefined,
+        selectDataCounts: 0,
+      }
+    },
+    props: {
+      currentProtocol: String,
+      selectNodeIds: Array,
+      isSelectThisWeek: String,
+      activeDom: String,
+      visible: {
+        type: Boolean,
+        default: false,
       },
-      selectApi: {},
-      result: {},
-      moduleId: "",
-      selectDataRange: "all",
-      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},
-        {
-          name: this.$t('api_test.definition.request.batch_move'), handleClick: this.handleBatchMove
-        }
-      ],
-      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')},
-      ],
-      statusFilters: [
-        {text: this.$t('test_track.plan.plan_status_prepare'), value: 'Prepare'},
-        {text: this.$t('test_track.plan.plan_status_running'), value: 'Underway'},
-        {text: this.$t('test_track.plan.plan_status_completed'), value: 'Completed'},
-        {text: this.$t('test_track.plan.plan_status_trash'), value: 'Trash'},
-      ],
-      methodFilters: [
-        {text: 'GET', value: 'GET'},
-        {text: 'POST', value: 'POST'},
-        {text: 'PUT', value: 'PUT'},
-        {text: 'PATCH', value: 'PATCH'},
-        {text: 'DELETE', value: 'DELETE'},
-        {text: 'OPTIONS', value: 'OPTIONS'},
-        {text: 'HEAD', value: 'HEAD'},
-        {text: 'CONNECT', value: 'CONNECT'},
-        {text: 'DUBBO', value: 'DUBBO'},
-        {text: 'dubbo://', value: 'dubbo://'},
-        {text: 'SQL', value: 'SQL'},
-        {text: 'TCP', value: 'TCP'},
-      ],
-      userFilters: [],
-      valueArr: {
-        status: API_STATUS,
-        method: REQ_METHOD,
-        userId: [],
+      isCaseRelevance: {
+        type: Boolean,
+        default: false,
       },
-      methodColorMap: new Map(API_METHOD_COLOUR),
-      tableData: [],
-      currentPage: 1,
-      pageSize: 10,
-      total: 0,
-      screenHeight: document.documentElement.clientHeight - 270,//屏幕高度,
-      environmentId: undefined,
-      selectDataCounts: 0,
-    }
-  },
-  props: {
-    currentProtocol: String,
-    selectNodeIds: Array,
-    isSelectThisWeek: String,
-    activeDom:String,
-    visible: {
-      type: Boolean,
-      default: false,
-    },
-    isCaseRelevance: {
-      type: Boolean,
-      default: false,
-    },
-    trashEnable: {
-      type: Boolean,
-      default: false,
-    },
-    isApiListEnable: Boolean,
-    isReadOnly: {
-      type: Boolean,
-      default: false
-    },
-    moduleTree: {
-      type: Array,
-      default() {
-        return []
+      trashEnable: {
+        type: Boolean,
+        default: false,
       },
-    },
-    moduleOptions: {
-      type: Array,
-      default() {
-        return []
+      isApiListEnable: Boolean,
+      isReadOnly: {
+        type: Boolean,
+        default: false
       },
-    }
-  },
-  created: function () {
-    if (this.trashEnable) {
-      this.condition.filters = {status: ["Trash"]};
-    } else {
-      this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
-    }
-    this.initTable();
-    this.getMaintainerOptions();
-  },
-  watch: {
-    selectNodeIds() {
-      this.initTable();
+      moduleTree: {
+        type: Array,
+        default() {
+          return []
+        },
+      },
+      moduleOptions: {
+        type: Array,
+        default() {
+          return []
+        },
+      }
     },
-    currentProtocol() {
-      this.initTable();
-    },
-    trashEnable() {
+    created: function () {
       if (this.trashEnable) {
         this.condition.filters = {status: ["Trash"]};
-        this.condition.moduleIds = [];
       } else {
         this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
       }
       this.initTable();
-    }
-  },
-  methods: {
-    customHeader() {
-      this.$refs.headerCustom.open(this.tableLabel)
+      this.getMaintainerOptions();
     },
-    handleBatchMove() {
-      this.$refs.testCaseBatchMove.open(this.moduleTree, [], this.moduleOptions);
-    },
-    isApiListEnableChange(data) {
-      this.$emit('isApiListEnableChange', data);
-    },
-    activeDomChange(tabType){
-      this.$emit("activeDomChange",tabType);
-    },
-    initTable() {
-      getLabel(this, API_LIST);
-      this.selectRows = new Set();
-      initCondition(this.condition);
-      this.selectDataCounts = 0;
-      this.condition.moduleIds = this.selectNodeIds;
-      this.condition.projectId = getCurrentProjectID();
-      if (this.currentProtocol != null) {
-        this.condition.protocol = this.currentProtocol;
+    watch: {
+      selectNodeIds() {
+        this.initTable();
+      },
+      currentProtocol() {
+        this.initTable();
+      },
+      trashEnable() {
+        if (this.trashEnable) {
+          this.condition.filters = {status: ["Trash"]};
+          this.condition.moduleIds = [];
+        } else {
+          this.condition.filters = {status: ["Prepare", "Underway", "Completed"]};
+        }
+        this.initTable();
       }
+    },
+    methods: {
+      customHeader() {
+        this.$refs.headerCustom.open(this.tableLabel)
+      },
+      handleBatchMove() {
+        this.$refs.testCaseBatchMove.open(this.moduleTree, [], this.moduleOptions);
+      },
+      isApiListEnableChange(data) {
+        this.$emit('isApiListEnableChange', data);
+      },
+      activeDomChange(tabType) {
+        this.$emit("activeDomChange", tabType);
+      },
+      initTable() {
+        getLabel(this, API_LIST);
+        this.selectRows = new Set();
+        initCondition(this.condition);
+        this.selectDataCounts = 0;
+        this.condition.moduleIds = this.selectNodeIds;
+        this.condition.projectId = getCurrentProjectID();
+        if (this.currentProtocol != null) {
+          this.condition.protocol = this.currentProtocol;
+        }
 
-      //检查是否只查询本周数据
-      this.getSelectDataRange();
-      this.condition.selectThisWeedData = false;
-      this.condition.apiCaseCoverage = null;
-      switch (this.selectDataRange) {
-        case 'thisWeekCount':
-          this.condition.selectThisWeedData = true;
-          break;
-        case 'uncoverage':
-          this.condition.apiCaseCoverage = 'uncoverage';
-          break;
-        case 'coverage':
-          this.condition.apiCaseCoverage = 'coverage';
-          break;
-        case 'Prepare':
-          this.condition.filters.status = [this.selectDataRange];
-          break;
-        case 'Completed':
-          this.condition.filters.status = [this.selectDataRange];
-          break;
-        case 'Underway':
-          this.condition.filters.status = [this.selectDataRange];
-          break;
-      }
-      if (this.condition.projectId) {
-        this.result = this.$post("/api/definition/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
-          this.genProtocalFilter(this.condition.protocol);
-          this.total = response.data.itemCount;
-          this.tableData = response.data.listObject;
-          this.tableData.forEach(item => {
-            if (item.tags && item.tags.length > 0) {
-              item.tags = JSON.parse(item.tags);
+        //检查是否只查询本周数据
+        this.getSelectDataRange();
+        this.condition.selectThisWeedData = false;
+        this.condition.apiCaseCoverage = null;
+        switch (this.selectDataRange) {
+          case 'thisWeekCount':
+            this.condition.selectThisWeedData = true;
+            break;
+          case 'uncoverage':
+            this.condition.apiCaseCoverage = 'uncoverage';
+            break;
+          case 'coverage':
+            this.condition.apiCaseCoverage = 'coverage';
+            break;
+          case 'Prepare':
+            this.condition.filters.status = [this.selectDataRange];
+            break;
+          case 'Completed':
+            this.condition.filters.status = [this.selectDataRange];
+            break;
+          case 'Underway':
+            this.condition.filters.status = [this.selectDataRange];
+            break;
+        }
+        if (this.condition.projectId) {
+          this.result = this.$post("/api/definition/list/" + this.currentPage + "/" + this.pageSize, this.condition, response => {
+            this.genProtocalFilter(this.condition.protocol);
+            this.total = response.data.itemCount;
+            this.tableData = response.data.listObject;
+            this.tableData.forEach(item => {
+              if (item.tags && item.tags.length > 0) {
+                item.tags = JSON.parse(item.tags);
+              }
+            })
+          });
+        }
+      },
+      genProtocalFilter(protocalType) {
+        if (protocalType === "HTTP") {
+          this.methodFilters = [
+            {text: 'GET', value: 'GET'},
+            {text: 'POST', value: 'POST'},
+            {text: 'PUT', value: 'PUT'},
+            {text: 'PATCH', value: 'PATCH'},
+            {text: 'DELETE', value: 'DELETE'},
+            {text: 'OPTIONS', value: 'OPTIONS'},
+            {text: 'HEAD', value: 'HEAD'},
+            {text: 'CONNECT', value: 'CONNECT'},
+          ];
+        } else if (protocalType === "TCP") {
+          this.methodFilters = [
+            {text: 'TCP', value: 'TCP'},
+          ];
+        } else if (protocalType === "SQL") {
+          this.methodFilters = [
+            {text: 'SQL', value: 'SQL'},
+          ];
+        } else if (protocalType === "DUBBO") {
+          this.methodFilters = [
+            {text: 'DUBBO', value: 'DUBBO'},
+            {text: 'dubbo://', value: 'dubbo://'},
+          ];
+        } else {
+          this.methodFilters = [
+            {text: 'GET', value: 'GET'},
+            {text: 'POST', value: 'POST'},
+            {text: 'PUT', value: 'PUT'},
+            {text: 'PATCH', value: 'PATCH'},
+            {text: 'DELETE', value: 'DELETE'},
+            {text: 'OPTIONS', value: 'OPTIONS'},
+            {text: 'HEAD', value: 'HEAD'},
+            {text: 'CONNECT', value: 'CONNECT'},
+            {text: 'DUBBO', value: 'DUBBO'},
+            {text: 'dubbo://', value: 'dubbo://'},
+            {text: 'SQL', value: 'SQL'},
+            {text: 'TCP', value: 'TCP'},
+          ];
+        }
+      },
+      getMaintainerOptions() {
+        let workspaceId = localStorage.getItem(WORKSPACE_ID);
+        this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
+          this.valueArr.userId = response.data;
+          this.userFilters = response.data.map(u => {
+            return {text: u.name, value: u.id}
+          });
+        });
+      },
+      handleSelectAll(selection) {
+        _handleSelectAll(this, selection, this.tableData, this.selectRows);
+        setUnSelectIds(this.tableData, this.condition, this.selectRows);
+        this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
+      },
+      handleSelect(selection, row) {
+        _handleSelect(this, selection, row, this.selectRows);
+        setUnSelectIds(this.tableData, this.condition, this.selectRows);
+        this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
+      },
+      isSelectDataAll(data) {
+        this.condition.selectAll = data;
+        setUnSelectIds(this.tableData, this.condition, this.selectRows);
+        this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
+        toggleAllSelection(this.$refs.apiDefinitionTable, this.tableData, this.selectRows);
+      },
+      search() {
+        this.changeSelectDataRangeAll();
+        this.initTable();
+      },
+      buildPagePath(path) {
+        return path + "/" + this.currentPage + "/" + this.pageSize;
+      },
+
+      editApi(row) {
+        this.$emit('editApi', row);
+      },
+      reductionApi(row) {
+        let tmp = JSON.parse(JSON.stringify(row));
+        tmp.request = null;
+        tmp.response = null;
+        if (tmp.tags instanceof Array) {
+          tmp.tags = JSON.stringify(tmp.tags);
+        }
+        let rows = [tmp];
+        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') {
+                this.$post('/api/definition/deleteBatchByParams/', this.buildBatchParam(), () => {
+                  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') {
+                this.$post('/api/definition/removeToGcByParams/', this.buildBatchParam(), () => {
+                  this.selectRows.clear();
+                  this.initTable();
+                  this.$success(this.$t('commons.delete_success'));
+                  this.$refs.caseList.apiCaseClose();
+                });
+              }
+            }
+          });
+        }
+      },
+      handleEditBatch() {
+        if (this.currentProtocol == 'HTTP') {
+          this.valueArr.method = REQ_METHOD;
+        } else if (this.currentProtocol == 'TCP') {
+          this.valueArr.method = TCP_METHOD;
+        } else if (this.currentProtocol == 'SQL') {
+          this.valueArr.method = SQL_METHOD;
+        } else if (this.currentProtocol == 'DUBBO') {
+          this.valueArr.method = DUBBO_METHOD;
+        }
+        this.$refs.batchEdit.open();
+      },
+      batchEdit(form) {
+        let param = this.buildBatchParam();
+        param[form.type] = form.value;
+        this.$post('/api/definition/batch/editByParams', param, () => {
+          this.$success(this.$t('commons.save_success'));
+          this.initTable();
         });
-      }
-    },
-    genProtocalFilter(protocalType) {
-      if (protocalType === "HTTP") {
-        this.methodFilters = [
-          {text: 'GET', value: 'GET'},
-          {text: 'POST', value: 'POST'},
-          {text: 'PUT', value: 'PUT'},
-          {text: 'PATCH', value: 'PATCH'},
-          {text: 'DELETE', value: 'DELETE'},
-          {text: 'OPTIONS', value: 'OPTIONS'},
-          {text: 'HEAD', value: 'HEAD'},
-          {text: 'CONNECT', value: 'CONNECT'},
-        ];
-      } else if (protocalType === "TCP") {
-        this.methodFilters = [
-          {text: 'TCP', value: 'TCP'},
-        ];
-      } else if (protocalType === "SQL") {
-        this.methodFilters = [
-          {text: 'SQL', value: 'SQL'},
-        ];
-      } else if (protocalType === "DUBBO") {
-        this.methodFilters = [
-          {text: 'DUBBO', value: 'DUBBO'},
-          {text: 'dubbo://', value: 'dubbo://'},
-        ];
-      } else {
-        this.methodFilters = [
-          {text: 'GET', value: 'GET'},
-          {text: 'POST', value: 'POST'},
-          {text: 'PUT', value: 'PUT'},
-          {text: 'PATCH', value: 'PATCH'},
-          {text: 'DELETE', value: 'DELETE'},
-          {text: 'OPTIONS', value: 'OPTIONS'},
-          {text: 'HEAD', value: 'HEAD'},
-          {text: 'CONNECT', value: 'CONNECT'},
-          {text: 'DUBBO', value: 'DUBBO'},
-          {text: 'dubbo://', value: 'dubbo://'},
-          {text: 'SQL', value: 'SQL'},
-          {text: 'TCP', value: 'TCP'},
-        ];
-      }
-    },
-    getMaintainerOptions() {
-      let workspaceId = localStorage.getItem(WORKSPACE_ID);
-      this.$post('/user/ws/member/tester/list', {workspaceId: workspaceId}, response => {
-        this.valueArr.userId = response.data;
-        this.userFilters = response.data.map(u => {
-          return {text: u.name, value: u.id}
+      },
+      buildBatchParam() {
+        let param = {};
+        param.ids = Array.from(this.selectRows).map(row => row.id);
+        param.projectId = getCurrentProjectID();
+        param.condition = this.condition;
+        return param;
+      },
+      moveSave(param) {
+        let arr = Array.from(this.selectRows);
+        let ids = arr.map(row => row.id);
+        param.ids = ids;
+        param.projectId = getCurrentProjectID();
+        param.moduleId = param.nodeId;
+        param.condition = this.condition;
+        param.selectAllDate = this.isSelectAllDate;
+        param.unSelectIds = this.unSelection;
+        param = Object.assign(param, this.condition);
+        param.moduleId = param.nodeId;
+        this.$post('/api/definition/batch/editByParams', param, () => {
+          this.$success(this.$t('commons.save_success'));
+          this.$refs.testCaseBatchMove.close();
+          this.initTable();
         });
-      });
-    },
-    handleSelectAll(selection) {
-      _handleSelectAll(this, selection, this.tableData, this.selectRows);
-      setUnSelectIds(this.tableData, this.condition, this.selectRows);
-      this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
-    },
-    handleSelect(selection, row) {
-      _handleSelect(this, selection, row, this.selectRows);
-      setUnSelectIds(this.tableData, this.condition, this.selectRows);
-      this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
-    },
-    isSelectDataAll(data) {
-      this.condition.selectAll = data;
-      setUnSelectIds(this.tableData, this.condition, this.selectRows);
-      this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
-      toggleAllSelection(this.$refs.apiDefinitionTable, this.tableData, this.selectRows);
-    },
-    search() {
-      this.changeSelectDataRangeAll();
-      this.initTable();
-    },
-    buildPagePath(path) {
-      return path + "/" + this.currentPage + "/" + this.pageSize;
-    },
-
-    editApi(row) {
-      this.$emit('editApi', row);
-    },
-    reductionApi(row) {
-      let tmp = JSON.parse(JSON.stringify(row));
-      tmp.request = null;
-      tmp.response = null;
-      if (tmp.tags instanceof Array) {
-        tmp.tags = JSON.stringify(tmp.tags);
-      }
-      let rows = [tmp];
-      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') + "？", '', {
+      },
+      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') {
-              this.$post('/api/definition/deleteBatchByParams/', this.buildBatchParam(), () => {
-                this.selectRows.clear();
-                this.initTable();
+              let ids = [api.id];
+              this.$post('/api/definition/removeToGc/', ids, () => {
                 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') {
-              this.$post('/api/definition/removeToGcByParams/', this.buildBatchParam(), () => {
-                this.selectRows.clear();
                 this.initTable();
-                this.$success(this.$t('commons.delete_success'));
                 this.$refs.caseList.apiCaseClose();
               });
             }
           }
         });
-      }
-    },
-    handleEditBatch() {
-      if (this.currentProtocol == 'HTTP') {
-        this.valueArr.method = REQ_METHOD;
-      } else if (this.currentProtocol == 'TCP') {
-        this.valueArr.method = TCP_METHOD;
-      } else if (this.currentProtocol == 'SQL') {
-        this.valueArr.method = SQL_METHOD;
-      } else if (this.currentProtocol == 'DUBBO') {
-        this.valueArr.method = DUBBO_METHOD;
-      }
-      this.$refs.batchEdit.open();
-    },
-    batchEdit(form) {
-      let param = this.buildBatchParam();
-      param[form.type] = form.value;
-      this.$post('/api/definition/batch/editByParams', param, () => {
-        this.$success(this.$t('commons.save_success'));
-        this.initTable();
-      });
-    },
-    buildBatchParam() {
-      let param = {};
-      param.ids = Array.from(this.selectRows).map(row => row.id);
-      param.projectId = getCurrentProjectID();
-      param.condition = this.condition;
-      return param;
-    },
-    moveSave(param) {
-      let arr = Array.from(this.selectRows);
-      let ids = arr.map(row => row.id);
-      param.ids = ids;
-      param.projectId = getCurrentProjectID();
-      param.moduleId=param.nodeId;
-      param.condition = this.condition;
-      param.selectAllDate = this.isSelectAllDate;
-      param.unSelectIds = this.unSelection;
-      param = Object.assign(param, this.condition);
-      param.moduleId = param.nodeId;
-      this.$post('/api/definition/batch/editByParams', param, () => {
-        this.$success(this.$t('commons.save_success'));
-        this.$refs.testCaseBatchMove.close();
-        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);
         }
-      });
-    },
-    getColor(enable, method) {
-      if (enable) {
-        return this.methodColorMap.get(method);
-      }
-    },
-    showExecResult(row) {
-      this.$emit('showExecResult', row);
-    },
-    //判断是否只显示本周的数据。  从首页跳转过来的请求会带有相关参数
-    getSelectDataRange() {
-      let dataRange = this.$route.params.dataSelectRange;
-      let dataType = this.$route.params.dataType;
-      if (dataType === 'api') {
-        this.selectDataRange = dataRange;
-      } else {
-        this.selectDataRange = 'all';
-      }
-    },
-    changeSelectDataRangeAll() {
-      this.$emit("changeSelectDataRangeAll", "api");
-    },
-    getIds(rowSets) {
-      let rowArray = Array.from(rowSets)
-      let ids = rowArray.map(s => s.id);
-      return ids;
-    },
-    exportApi() {
-      let param = this.buildBatchParam();
-      param.protocol = this.currentProtocol;
-      if (param.ids === undefined || param.ids.length < 1) {
-        this.$warning(this.$t("api_test.definition.check_select"));
-        return;
-      }
-      this.result = this.$post("/api/definition/export", param, response => {
-        let obj = response.data;
-        obj.protocol = this.currentProtocol;
-        this.buildApiPath(obj.data);
-        downloadFile("Metersphere_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
-      });
-    },
-    buildApiPath(apis) {
-      apis.forEach((api) => {
-        this.moduleOptions.forEach(item => {
-          if (api.moduleId === item.id) {
-            api.modulePath = item.path;
-          }
+      },
+      showExecResult(row) {
+        this.$emit('showExecResult', row);
+      },
+      //判断是否只显示本周的数据。  从首页跳转过来的请求会带有相关参数
+      getSelectDataRange() {
+        let dataRange = this.$route.params.dataSelectRange;
+        let dataType = this.$route.params.dataType;
+        if (dataType === 'api') {
+          this.selectDataRange = dataRange;
+        } else {
+          this.selectDataRange = 'all';
+        }
+      },
+      changeSelectDataRangeAll() {
+        this.$emit("changeSelectDataRangeAll", "api");
+      },
+      getIds(rowSets) {
+        let rowArray = Array.from(rowSets)
+        let ids = rowArray.map(s => s.id);
+        return ids;
+      },
+      exportApi() {
+        let param = this.buildBatchParam();
+        param.protocol = this.currentProtocol;
+        if (param.ids === undefined || param.ids.length < 1) {
+          this.$warning(this.$t("api_test.definition.check_select"));
+          return;
+        }
+        this.result = this.$post("/api/definition/export", param, response => {
+          let obj = response.data;
+          obj.protocol = this.currentProtocol;
+          this.buildApiPath(obj.data);
+          downloadFile("Metersphere_Api_" + localStorage.getItem(PROJECT_NAME) + ".json", JSON.stringify(obj));
         });
-      });
-    },
-    sort(column) {
-      // 每次只对一个字段排序
-      if (this.condition.orders) {
-        this.condition.orders = [];
+      },
+      buildApiPath(apis) {
+        apis.forEach((api) => {
+          this.moduleOptions.forEach(item => {
+            if (api.moduleId === item.id) {
+              api.modulePath = item.path;
+            }
+          });
+        });
+      },
+      sort(column) {
+        // 每次只对一个字段排序
+        if (this.condition.orders) {
+          this.condition.orders = [];
+        }
+        _sort(column, this.condition);
+        this.initTable();
+      },
+      filter(filters) {
+        _filter(filters, this.condition);
+        this.initTable();
+      },
+      headerDragend(newWidth, oldWidth, column, event) {
+        let finalWidth = newWidth;
+        if (column.minWidth > finalWidth) {
+          finalWidth = column.minWidth;
+        }
+        column.width = finalWidth;
+        column.realWidth = finalWidth;
+      },
+      open() {
+        this.$refs.searchBar.open();
       }
-      _sort(column, this.condition);
-      this.initTable();
     },
-    filter(filters) {
-      _filter(filters, this.condition);
-      this.initTable();
-    },
-    headerDragend(newWidth, oldWidth, column, event) {
-      let finalWidth = newWidth;
-      if (column.minWidth > finalWidth) {
-        finalWidth = column.minWidth;
-      }
-      column.width = finalWidth;
-      column.realWidth = finalWidth;
-    },
-    open() {
-      this.$refs.searchBar.open();
-    }
-  },
-}
+  }
 </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-right: 10px;
-}
+  .search-input {
+    float: right;
+    width: 300px;
+    margin-right: 10px;
+  }
 
-.el-tag {
-  margin-left: 10px;
-}
+  .el-tag {
+    margin-left: 10px;
+  }
 
-.ms-select-all >>> th:first-child {
-  margin-top: 20px;
-}
+  .ms-select-all >>> th:first-child {
+    margin-top: 20px;
+  }
 
-.ms-select-all >>> th:nth-child(2) .el-icon-arrow-down {
-  top: -2px;
-}
+  .ms-select-all >>> th:nth-child(2) .el-icon-arrow-down {
+    top: -2px;
+  }
 
 </style>
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index d0140ce774..e5f891f255 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -135,9 +135,7 @@
 
           <el-table-column v-if="item.id=='tags'" prop="tags" :label="$t('commons.tag')" :key="index">
             <template v-slot:default="scope">
-              <div v-for="(itemName,index)  in scope.row.tags" :key="index">
-                <ms-tag type="success" effect="plain" :content="itemName"/>
-              </div>
+                <ms-tag v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain" :content="itemName" style="margin-left: 5px"/>
             </template>
           </el-table-column>
 
diff --git a/frontend/src/business/components/track/plan/view/comonents/api/RelevanceScenarioList.vue b/frontend/src/business/components/track/plan/view/comonents/api/RelevanceScenarioList.vue
index 976e6d1ef3..3f40e57480 100644
--- a/frontend/src/business/components/track/plan/view/comonents/api/RelevanceScenarioList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/api/RelevanceScenarioList.vue
@@ -17,11 +17,9 @@
           </template>
 
         </el-table-column>
-        <el-table-column prop="tagNames" :label="$t('api_test.automation.tag')" width="200px">
+        <el-table-column prop="tagNames" :label="$t('api_test.automation.tag')" min-width="120">
           <template v-slot:default="scope">
-            <div v-for="itemName in scope.row.tags" :key="itemName">
-              <ms-tag type="success" effect="plain" :content="itemName"/>
-            </div>
+              <ms-tag v-for="itemName in scope.row.tags" :key="itemName" type="success" effect="plain" :content="itemName" style="margin-left: 5px"/>
           </template>
         </el-table-column>
         <el-table-column prop="userId" :label="$t('api_test.automation.creator')" show-overflow-tooltip/>
diff --git a/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiCaseList.vue b/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiCaseList.vue
index 62422a5db6..685d3f6aaf 100644
--- a/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiCaseList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiCaseList.vue
@@ -80,9 +80,7 @@
             :label="$t('commons.tag')"
             :key="index">
             <template v-slot:default="scope">
-              <div v-for="(itemName,index)  in scope.row.tags" :key="index">
-                <ms-tag type="success" effect="plain" :content="itemName"/>
-              </div>
+                <ms-tag v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain" :content="itemName" style="margin-left: 5px"/>
             </template>
           </el-table-column>
 
diff --git a/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiScenarioList.vue b/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiScenarioList.vue
index e2fa9fbca6..d5e51c5d58 100644
--- a/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiScenarioList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/api/TestPlanApiScenarioList.vue
@@ -37,9 +37,7 @@
           <el-table-column v-if="item.id == 'tagNames'" prop="tagNames" :label="$t('api_test.automation.tag')"
                            width="200px" :key="index">
             <template v-slot:default="scope">
-              <div v-for="(itemName,index) in scope.row.tags" :key="index">
-                <ms-tag type="success" effect="plain" :content="itemName"/>
-              </div>
+                <ms-tag v-for="(itemName,index) in scope.row.tags" :key="index" type="success" effect="plain" :content="itemName" style="margin-left: 5px"/>
             </template>
           </el-table-column>
           <el-table-column v-if="item.id == 'userId'" prop="userId" :label="$t('api_test.automation.creator')"
diff --git a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
index 9317d0799a..ad55a6bc81 100644
--- a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
@@ -94,9 +94,7 @@
                            :key="index"
           >
             <template v-slot:default="scope">
-              <div v-for="(tag, index) in scope.row.showTags" :key="tag + '_' + index">
-                <ms-tag type="success" effect="plain" :content="tag"/>
-              </div>
+                <ms-tag v-for="(tag, index) in scope.row.showTags" :key="tag + '_' + index" type="success" effect="plain" :content="tag" style="margin-left: 5px"/>
             </template>
           </el-table-column>
 
diff --git a/frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/component/ScenarioFailureCasesList.vue b/frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/component/ScenarioFailureCasesList.vue
index 20431cf5de..f9430218bf 100644
--- a/frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/component/ScenarioFailureCasesList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/report/TemplateComponent/component/ScenarioFailureCasesList.vue
@@ -20,9 +20,7 @@
 
       <el-table-column prop="tags" :label="$t('api_test.automation.tag')" width="200px">
         <template v-slot:default="scope">
-          <div v-for="(itemName,index)  in scope.row.tags" :key="index">
-            <ms-tag type="success" effect="plain" :content="itemName"/>
-          </div>
+            <ms-tag v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain" :content="itemName" style="margin-left: 5px"/>
         </template>
       </el-table-column>