From 460b4daff6dfa82017cd37c14251fe7a82f4d005 Mon Sep 17 00:00:00 2001
From: "Captain.B" <bin@fit2cloud.com>
Date: Thu, 7 Jan 2021 17:53:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=98=BE=E7=A4=BA=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E5=88=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mapper/ext/ExtTestPlanApiCaseMapper.xml   |   2 +-
 .../definition/components/list/ApiList.vue    | 478 ++++++------
 .../track/case/components/TestCaseList.vue    |  19 +-
 .../comonents/api/TestPlanApiCaseList.vue     | 706 +++++++++---------
 4 files changed, 627 insertions(+), 578 deletions(-)

diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanApiCaseMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanApiCaseMapper.xml
index 178dd72d20..f14ac2e7c4 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanApiCaseMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtTestPlanApiCaseMapper.xml
@@ -18,7 +18,7 @@
   <select id="list" resultType="io.metersphere.api.dto.definition.TestPlanApiCaseDTO">
     select
       t.id, t.environment_id, t.create_time, t.update_time,
-      c.id as case_id, c.project_id, c.name, c.api_definition_id, c.priority, c.description, c.create_user_id, c.update_user_id, c.num,
+      c.id as case_id, c.project_id, c.name, c.api_definition_id, c.priority, c.description, c.create_user_id, c.update_user_id, c.num, c.tags,
       a.module_id, a.path, a.protocol, t.status execResult
     from
       test_plan_api_case t
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 a5398a7cd6..183fca236f 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiList.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <api-list-container
-        :is-api-list-enable="isApiListEnable"
-        @isApiListEnableChange="isApiListEnableChange">
+      :is-api-list-enable="isApiListEnable"
+      @isApiListEnableChange="isApiListEnableChange">
 
       <el-input placeholder="搜索" @blur="search" class="search-input" size="small" @keyup.enter.native="search"
                 v-model="condition.name"/>
@@ -47,8 +47,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>
@@ -63,6 +64,15 @@
           :label="$t('api_test.definition.api_principal')"
           show-overflow-tooltip/>
 
+        <el-table-column prop="tags" :label="$t('commons.tag')">
+          <template v-slot:default="scope">
+            <ms-tag v-for="(tag, index) in scope.row.showTags"
+                    :key="tag + '_' + index"
+                    :effect="'light'"
+                    :content="tag"/>
+          </template>
+        </el-table-column>
+
         <el-table-column width="160" :label="$t('api_test.definition.api_last_time')" prop="updateTime">
           <template v-slot:default="scope">
             <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
@@ -87,10 +97,10 @@
 
         <el-table-column v-if="!isReadOnly" :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" v-tester>{{$t('commons.reduction')}}</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>
+            <el-button type="text" @click="reductionApi(scope.row)" v-if="trashEnable" v-tester>{{ $t('commons.reduction') }}</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>
@@ -106,133 +116,132 @@
 
 <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 MsTableSelectAll from "../../../../common/components/table/MsTableSelectAll";
+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 MsTableSelectAll from "../../../../common/components/table/MsTableSelectAll";
 
-  export default {
-    name: "ApiList",
-    components: {
-      MsTableSelectAll,
-      ApiListContainer,
-      MsTableButton,
-      MsTableOperatorButton,
-      MsTableOperator,
-      MsTableHeader,
-      MsTablePagination,
-      MsTag,
-      MsApiCaseList,
-      MsContainer,
-      MsBottomContainer,
-      ShowMoreBtn,
-      MsBatchEdit
+export default {
+  name: "ApiList",
+  components: {
+    MsTableSelectAll,
+    ApiListContainer,
+    MsTableButton,
+    MsTableOperatorButton,
+    MsTableOperator,
+    MsTableHeader,
+    MsTablePagination,
+    MsTag,
+    MsApiCaseList,
+    MsContainer,
+    MsBottomContainer,
+    ShowMoreBtn,
+    MsBatchEdit
+  },
+  data() {
+    return {
+      condition: {},
+      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}
+      ],
+      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,
+      selectAll: false,
+      unSelection: [],
+      selectDataCounts: 0,
+    }
+  },
+  props: {
+    currentProtocol: String,
+    selectNodeIds: Array,
+    isSelectThisWeek: String,
+    visible: {
+      type: Boolean,
+      default: false,
     },
-    data() {
-      return {
-        condition: {},
-        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}
-        ],
-        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,
-        selectAll: false,
-        unSelection:[],
-        selectDataCounts:0,
-      }
+    isCaseRelevance: {
+      type: Boolean,
+      default: false,
     },
-    props: {
-      currentProtocol: String,
-      selectNodeIds: Array,
-      isSelectThisWeek: String,
-      visible: {
-        type: Boolean,
-        default: false,
-      },
-      isCaseRelevance: {
-        type: Boolean,
-        default: false,
-      },
-      trashEnable: {
-        type: Boolean,
-        default: false,
-      },
-      isApiListEnable: Boolean,
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      },
+    trashEnable: {
+      type: Boolean,
+      default: false,
     },
-    created: function () {
+    isApiListEnable: Boolean,
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    },
+  },
+  created: function () {
+    this.initTable();
+    this.getMaintainerOptions();
+  },
+  watch: {
+    selectNodeIds() {
       this.initTable();
-      this.getMaintainerOptions();
     },
-    watch: {
-      selectNodeIds() {
+    currentProtocol() {
+      this.initTable();
+    },
+    trashEnable() {
+      if (this.trashEnable) {
         this.initTable();
-      },
-      currentProtocol() {
-        this.initTable();
-      },
-      trashEnable() {
-        if (this.trashEnable) {
-          this.initTable();
-        }
       }
+    }
+  },
+  methods: {
+    isApiListEnableChange(data) {
+      this.$emit('isApiListEnableChange', data);
     },
-    methods: {
-      isApiListEnableChange(data) {
-        this.$emit('isApiListEnableChange', data);
-      },
-      initTable() {
-        this.selectRows = new Set();
+    initTable() {
+      this.selectRows = new Set();
 
-        this.selectAll  = false;
-        this.unSelection = [];
-        this.selectDataCounts = 0;
+      this.selectAll = false;
+      this.unSelection = [];
+      this.selectDataCounts = 0;
 
-        this.condition.filters = ["Prepare", "Underway", "Completed"];
+      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 = getCurrentProjectID();
       if (this.currentProtocol != null) {
@@ -243,7 +252,7 @@
       this.getSelectDataRange();
       this.condition.selectThisWeedData = false;
       this.condition.apiCaseCoverage = null;
-      switch (this.selectDataRange){
+      switch (this.selectDataRange) {
         case 'thisWeekCount':
           this.condition.selectThisWeedData = true;
           break;
@@ -268,6 +277,10 @@
           this.total = response.data.itemCount;
           this.tableData = response.data.listObject;
           this.unSelection = response.data.listObject.map(s => s.id);
+
+          this.tableData.forEach(row => {
+            row.showTags = JSON.parse(row.tags);
+          })
         });
       }
     },
@@ -325,76 +338,76 @@
       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();
+    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 deleteParam = {};
+              let ids = Array.from(this.selectRows).map(row => row.id);
+              deleteParam.dataIds = ids;
+              deleteParam.projectId = getCurrentProjectID();
+              deleteParam.selectAllDate = this.isSelectAllDate;
+              deleteParam.unSelectIds = this.unSelection;
+              deleteParam = Object.assign(deleteParam, this.condition);
+              this.$post('/api/definition/deleteBatchByParams/', deleteParam, () => {
+                this.selectRows.clear();
+                this.initTable();
+                this.$success(this.$t('commons.delete_success'));
+              });
+            }
+          }
         });
-      },
-      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 deleteParam = {};
-                let ids = Array.from(this.selectRows).map(row => row.id);
-                deleteParam.dataIds = ids;
-                deleteParam.projectId = getCurrentProjectID();
-                deleteParam.selectAllDate = this.isSelectAllDate;
-                deleteParam.unSelectIds = this.unSelection;
-                deleteParam = Object.assign(deleteParam, this.condition);
-                this.$post('/api/definition/deleteBatchByParams/', deleteParam, () => {
-                  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);
+              let deleteParam = {};
+              deleteParam.dataIds = ids;
+              deleteParam.projectId = getCurrentProjectID();
+              deleteParam.selectAllDate = this.isSelectAllDate;
+              deleteParam.unSelectIds = this.unSelection;
+              deleteParam = Object.assign(deleteParam, this.condition);
+              this.$post('/api/definition/removeToGcByParams/', deleteParam, () => {
+                this.selectRows.clear();
+                this.initTable();
+                this.$success(this.$t('commons.delete_success'));
+                this.$refs.caseList.apiCaseClose();
+              });
             }
-          });
-        } 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);
-                let deleteParam = {};
-                deleteParam.dataIds = ids;
-                deleteParam.projectId = getCurrentProjectID();
-                deleteParam.selectAllDate = this.isSelectAllDate;
-                deleteParam.unSelectIds = this.unSelection;
-                deleteParam = Object.assign(deleteParam, this.condition);
-                this.$post('/api/definition/removeToGcByParams/', deleteParam, () => {
-                  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;
+          }
+        });
+      }
+    },
+    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;
 
-        param.projectId = getCurrentProjectID();
-        param.selectAllDate = this.isSelectAllDate;
-        param.unSelectIds = this.unSelection;
-        param = Object.assign(param, this.condition);
+      param.projectId = getCurrentProjectID();
+      param.selectAllDate = this.isSelectAllDate;
+      param.unSelectIds = this.unSelection;
+      param = Object.assign(param, this.condition);
 
       this.$post('/api/definition/batch/editByParams', param, () => {
         this.$success(this.$t('commons.save_success'));
@@ -488,52 +501,57 @@
 </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: 20px;
-  }
+.search-input {
+  float: right;
+  width: 300px;
+  margin-right: 20px;
+}
 
-  .api-list >>> th:first-child {
-    /*border: 1px solid #DCDFE6;*/
-    /*border-right: 0px;*/
-    /*border-top-left-radius:5px;*/
-    /*border-bottom-left-radius:5px;*/
-    /*width: 20px;*/
+.api-list >>> th:first-child {
+  /*border: 1px solid #DCDFE6;*/
+  /*border-right: 0px;*/
+  /*border-top-left-radius:5px;*/
+  /*border-bottom-left-radius:5px;*/
+  /*width: 20px;*/
 
-  }
+}
 
-  .api-list >>> th:nth-child(2) {
-    /*border: 1px solid #DCDFE6;*/
-    /*border-left: 0px;*/
-    /*border-top-right-radius:5px;*/
-    /*border-bottom-right-radius:5px;*/
-  }
+.api-list >>> th:nth-child(2) {
+  /*border: 1px solid #DCDFE6;*/
+  /*border-left: 0px;*/
+  /*border-top-right-radius:5px;*/
+  /*border-bottom-right-radius:5px;*/
+}
 
-  .api-list >>> th:first-child>.cell {
-    padding: 5px;
-    width: 30px;
-  }
-  .api-list >>> th:nth-child(2)>.cell {
-    /*background-color: black;*/
-  }
+.api-list >>> th:first-child > .cell {
+  padding: 5px;
+  width: 30px;
+}
 
-  .api-list >>> .el-dropdown {
-    float: left;
-  }
+.api-list >>> th:nth-child(2) > .cell {
+  /*background-color: black;*/
+}
+
+.api-list >>> .el-dropdown {
+  float: left;
+}
+
+.el-tag {
+  margin-left: 10px;
+}
 
 </style>
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index a271d230e1..d22ec68d2b 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -111,6 +111,15 @@
           </template>
         </el-table-column>
 
+        <el-table-column prop="tags" :label="$t('commons.tag')">
+          <template v-slot:default="scope">
+            <ms-tag v-for="(tag, index) in scope.row.showTags"
+                    :key="tag + '_' + index"
+                    :effect="'light'"
+                    :content="tag"/>
+          </template>
+        </el-table-column>
+
         <el-table-column
           prop="nodePath"
           :label="$t('test_track.case.module')"
@@ -175,6 +184,7 @@ import StatusTableItem from "@/business/components/track/common/tableItems/planv
 import TestCaseDetail from "./TestCaseDetail";
 import ReviewStatus from "@/business/components/track/case/components/ReviewStatus";
 import {getCurrentProjectID} from "../../../../../common/js/utils";
+import MsTag from "@/business/components/common/components/MsTag";
 
 export default {
   name: "TestCaseList",
@@ -195,7 +205,8 @@ export default {
     BatchEdit,
     StatusTableItem,
     TestCaseDetail,
-    ReviewStatus
+    ReviewStatus,
+    MsTag,
   },
   data() {
     return {
@@ -308,6 +319,9 @@ export default {
           this.tableData = data.listObject;
           // this.selectIds.clear();
           this.selectRows.clear();
+          this.tableData.forEach(row => {
+            row.showTags = JSON.parse(row.tags);
+          })
         });
       }
     },
@@ -537,4 +551,7 @@ export default {
   cursor: pointer;
 }
 
+.el-tag {
+  margin-left: 10px;
+}
 </style>
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 4cca70712a..2355476d20 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
@@ -2,14 +2,14 @@
   <div class="card-container">
     <el-card class="card-content" v-loading="result.loading">
       <template v-slot:header>
-       <test-plan-case-list-header
-         :project-id="getProjectId()"
-         :condition="condition"
-         :plan-id="planId"
-         @refresh="initTable"
-         @relevanceCase="$emit('relevanceCase')"
-         @setEnvironment="setEnvironment"
-         v-if="isPlanModel"/>
+        <test-plan-case-list-header
+          :project-id="getProjectId()"
+          :condition="condition"
+          :plan-id="planId"
+          @refresh="initTable"
+          @relevanceCase="$emit('relevanceCase')"
+          @setEnvironment="setEnvironment"
+          v-if="isPlanModel"/>
       </template>
 
       <el-table v-loading="result.loading"
@@ -60,8 +60,17 @@
           </template>
         </el-table-column>
 
+        <el-table-column prop="tags" :label="$t('commons.tag')">
+          <template v-slot:default="scope">
+            <ms-tag v-for="(tag, index) in scope.row.showTags"
+                    :key="tag + '_' + index"
+                    :effect="'light'"
+                    :content="tag"/>
+          </template>
+        </el-table-column>
+
         <el-table-column :label="'执行状态'" min-width="130" align="center">
-          <template v-slot:default="scope" >
+          <template v-slot:default="scope">
             <div v-loading="rowLoading === scope.row.id">
               <el-link type="danger"
                        v-if="scope.row.execResult && scope.row.execResult === 'error'"
@@ -73,8 +82,8 @@
               <div v-else v-text="getResult(scope.row.execResult)"/>
 
               <div v-if="scope.row.id" style="color: #999999;font-size: 12px">
-                <span> {{scope.row.updateTime | timestampFormatDate }}</span>
-                {{scope.row.updateUser}}
+                <span> {{ scope.row.updateTime | timestampFormatDate }}</span>
+                {{ scope.row.updateUser }}
               </div>
             </div>
           </template>
@@ -82,10 +91,10 @@
 
         <el-table-column v-if="!isReadOnly" :label="$t('commons.operating')" align="center">
           <template v-slot:default="scope">
-              <ms-table-operator-button class="run-button" :is-tester-permission="true" :tip="$t('api_test.run')" icon="el-icon-video-play"
-                                        @exec="singleRun(scope.row)" v-tester/>
-              <ms-table-operator-button :is-tester-permission="true" :tip="$t('test_track.plan_view.cancel_relevance')"
-                                        icon="el-icon-unlock" type="danger" @exec="handleDelete(scope.row)" v-tester/>
+            <ms-table-operator-button class="run-button" :is-tester-permission="true" :tip="$t('api_test.run')" icon="el-icon-video-play"
+                                      @exec="singleRun(scope.row)" v-tester/>
+            <ms-table-operator-button :is-tester-permission="true" :tip="$t('test_track.plan_view.cancel_relevance')"
+                                      icon="el-icon-unlock" type="danger" @exec="handleDelete(scope.row)" v-tester/>
           </template>
         </el-table-column>
 
@@ -106,366 +115,371 @@
 
 <script>
 
-  import MsTableOperator from "../../../../../common/components/MsTableOperator";
-  import MsTableOperatorButton from "../../../../../common/components/MsTableOperatorButton";
-  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 "../../../../../api/definition/components/case/ApiCaseList";
-  import MsContainer from "../../../../../common/components/MsContainer";
-  import MsBottomContainer from "../../../../../api/definition/components/BottomContainer";
-  import ShowMoreBtn from "../../../../case/components/ShowMoreBtn";
-  import MsBatchEdit from "../../../../../api/definition/components/basis/BatchEdit";
-  import {API_METHOD_COLOUR, CASE_PRIORITY, RESULT_MAP} from "../../../../../api/definition/model/JsonData";
-  import {getCurrentProjectID} from "@/common/js/utils";
-  import ApiListContainer from "../../../../../api/definition/components/list/ApiListContainer";
-  import PriorityTableItem from "../../../../common/tableItems/planview/PriorityTableItem";
-  import ApiCaseList from "../../../../../api/definition/components/case/ApiCaseList";
-  import {_filter, _sort, getUUID, getBodyUploadFiles} from "../../../../../../../common/js/utils";
-  import TestPlanCaseListHeader from "./TestPlanCaseListHeader";
-  import MsRun from "../../../../../api/definition/components/Run";
-  import TestPlanApiCaseResult from "./TestPlanApiCaseResult";
-  import TestPlan from "../../../../../api/definition/components/jmeter/components/test-plan";
-  import ThreadGroup from "../../../../../api/definition/components/jmeter/components/thread-group";
+import MsTableOperator from "../../../../../common/components/MsTableOperator";
+import MsTableOperatorButton from "../../../../../common/components/MsTableOperatorButton";
+import MsTablePagination from "../../../../../common/pagination/TablePagination";
+import MsTag from "../../../../../common/components/MsTag";
+import MsApiCaseList from "../../../../../api/definition/components/case/ApiCaseList";
+import ApiCaseList from "../../../../../api/definition/components/case/ApiCaseList";
+import MsContainer from "../../../../../common/components/MsContainer";
+import MsBottomContainer from "../../../../../api/definition/components/BottomContainer";
+import ShowMoreBtn from "../../../../case/components/ShowMoreBtn";
+import MsBatchEdit from "../../../../../api/definition/components/basis/BatchEdit";
+import {API_METHOD_COLOUR, CASE_PRIORITY, RESULT_MAP} from "../../../../../api/definition/model/JsonData";
+import {getCurrentProjectID} from "@/common/js/utils";
+import ApiListContainer from "../../../../../api/definition/components/list/ApiListContainer";
+import PriorityTableItem from "../../../../common/tableItems/planview/PriorityTableItem";
+import {_filter, _sort, getBodyUploadFiles, getUUID} from "../../../../../../../common/js/utils";
+import TestPlanCaseListHeader from "./TestPlanCaseListHeader";
+import MsRun from "../../../../../api/definition/components/Run";
+import TestPlanApiCaseResult from "./TestPlanApiCaseResult";
+import TestPlan from "../../../../../api/definition/components/jmeter/components/test-plan";
+import ThreadGroup from "../../../../../api/definition/components/jmeter/components/thread-group";
 
-  export default {
-    name: "TestPlanApiCaseList",
-    components: {
-      TestPlanApiCaseResult,
-      MsRun,
-      TestPlanCaseListHeader,
-      ApiCaseList,
-      PriorityTableItem,
-      ApiListContainer,
-      MsTableOperatorButton,
-      MsTableOperator,
-      MsTablePagination,
-      MsTag,
-      MsApiCaseList,
-      MsContainer,
-      MsBottomContainer,
-      ShowMoreBtn,
-      MsBatchEdit
+export default {
+  name: "TestPlanApiCaseList",
+  components: {
+    TestPlanApiCaseResult,
+    MsRun,
+    TestPlanCaseListHeader,
+    ApiCaseList,
+    PriorityTableItem,
+    ApiListContainer,
+    MsTableOperatorButton,
+    MsTableOperator,
+    MsTablePagination,
+    MsTag,
+    MsApiCaseList,
+    MsContainer,
+    MsBottomContainer,
+    ShowMoreBtn,
+    MsBatchEdit
+  },
+  data() {
+    return {
+      condition: {},
+      selectCase: {},
+      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.automation.batch_execute'), handleClick: this.handleBatchExecute}
+      ],
+      typeArr: [
+        {id: 'priority', name: this.$t('test_track.case.priority')},
+      ],
+      priorityFilters: [
+        {text: 'P0', value: 'P0'},
+        {text: 'P1', value: 'P1'},
+        {text: 'P2', value: 'P2'},
+        {text: 'P3', value: 'P3'}
+      ],
+      valueArr: {
+        priority: CASE_PRIORITY,
+      },
+      methodColorMap: new Map(API_METHOD_COLOUR),
+      tableData: [],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      screenHeight: document.documentElement.clientHeight - 330,//屏幕高度
+      // environmentId: undefined,
+      currentCaseProjectId: "",
+      runData: [],
+      reportId: "",
+      response: {},
+      rowLoading: ""
+    }
+  },
+  props: {
+    currentProtocol: String,
+    selectNodeIds: Array,
+    visible: {
+      type: Boolean,
+      default: false,
     },
-    data() {
-      return {
-        condition: {},
-        selectCase: {},
-        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.automation.batch_execute'), handleClick: this.handleBatchExecute}
-        ],
-        typeArr: [
-          {id: 'priority', name: this.$t('test_track.case.priority')},
-        ],
-        priorityFilters: [
-          {text: 'P0', value: 'P0'},
-          {text: 'P1', value: 'P1'},
-          {text: 'P2', value: 'P2'},
-          {text: 'P3', value: 'P3'}
-        ],
-        valueArr: {
-          priority: CASE_PRIORITY,
-        },
-        methodColorMap: new Map(API_METHOD_COLOUR),
-        tableData: [],
-        currentPage: 1,
-        pageSize: 10,
-        total: 0,
-        screenHeight: document.documentElement.clientHeight - 330,//屏幕高度
-        // environmentId: undefined,
-        currentCaseProjectId: "",
-        runData: [],
-        reportId: "",
-        response: {},
-        rowLoading: ""
+    isApiListEnable: {
+      type: Boolean,
+      default: false,
+    },
+    isReadOnly: {
+      type: Boolean,
+      default: false
+    },
+    isCaseRelevance: {
+      type: Boolean,
+      default: false,
+    },
+    model: {
+      type: String,
+      default() {
+        'api'
       }
     },
-    props: {
-      currentProtocol: String,
-      selectNodeIds: Array,
-      visible: {
-        type: Boolean,
-        default: false,
-      },
-      isApiListEnable: {
-        type: Boolean,
-        default: false,
-      },
-      isReadOnly: {
-        type: Boolean,
-        default: false
-      },
-      isCaseRelevance: {
-        type: Boolean,
-        default: false,
-      },
-      model: {
-        type: String,
-        default() {
-          'api'
-        }
-      },
-      planId: String
-    },
-    created: function () {
+    planId: String
+  },
+  created: function () {
+    this.initTable();
+  },
+  watch: {
+    selectNodeIds() {
       this.initTable();
     },
-    watch: {
-      selectNodeIds() {
-        this.initTable();
-      },
-      currentProtocol() {
-        this.initTable();
-      },
-      planId() {
-        this.initTable();
+    currentProtocol() {
+      this.initTable();
+    },
+    planId() {
+      this.initTable();
+    }
+  },
+  computed: {
+    // 测试计划关联测试列表
+    isRelevanceModel() {
+      return this.model === 'relevance'
+    },
+    // 测试计划接口用例列表
+    isPlanModel() {
+      return this.model === 'plan'
+    },
+    // 接口定义用例列表
+    isApiModel() {
+      return this.model === 'api'
+    },
+  },
+  methods: {
+    isApiListEnableChange(data) {
+      this.$emit('isApiListEnableChange', data);
+    },
+    initTable() {
+      this.selectRows = new Set();
+      this.condition.status = "";
+      this.condition.moduleIds = this.selectNodeIds;
+
+      this.condition.planId = this.planId;
+
+      if (this.currentProtocol != null) {
+        this.condition.protocol = this.currentProtocol;
+      }
+      this.result = this.$post('/test/plan/api/case/list/' + this.currentPage + "/" + this.pageSize, this.condition, response => {
+        this.total = response.data.itemCount;
+        this.tableData = response.data.listObject;
+        this.tableData.forEach(row => {
+          row.showTags = JSON.parse(row.tags);
+        })
+      });
+    },
+    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", false);
+      } else if (this.selectRows.size === 2) {
+        arr.forEach(row => {
+          this.$set(row, "showMore", true);
+        })
       }
     },
-    computed: {
-      // 测试计划关联测试列表
-      isRelevanceModel() {
-        return this.model === 'relevance'
-      },
-      // 测试计划接口用例列表
-      isPlanModel() {
-        return this.model === 'plan'
-      },
-      // 接口定义用例列表
-      isApiModel() {
-        return this.model === 'api'
-      },
+    showExecResult(row) {
+      this.$emit('showExecResult', row);
     },
-    methods: {
-      isApiListEnableChange(data) {
-        this.$emit('isApiListEnableChange', data);
-      },
-      initTable() {
-        this.selectRows = new Set();
-        this.condition.status = "";
-        this.condition.moduleIds = this.selectNodeIds;
-
-        this.condition.planId = this.planId;
-
-        if (this.currentProtocol != null) {
-          this.condition.protocol = this.currentProtocol;
-        }
-        this.result = this.$post('/test/plan/api/case/list/' + this.currentPage + "/" + this.pageSize, this.condition, response => {
-          this.total = response.data.itemCount;
-          this.tableData = response.data.listObject;
-        });
-      },
-      handleSelect(selection, row) {
-        row.hashTree = [];
-        if (this.selectRows.has(row)) {
-          this.$set(row, "showMore", false);
-          this.selectRows.delete(row);
+    filter(filters) {
+      _filter(filters, this.condition);
+      this.initTable();
+    },
+    sort(column) {
+      // 每次只对一个字段排序
+      if (this.condition.orders) {
+        this.condition.orders = [];
+      }
+      _sort(column, this.condition);
+      this.initTable();
+    },
+    handleSelectAll(selection) {
+      if (selection.length > 0) {
+        if (selection.length === 1) {
+          selection.hashTree = [];
+          this.selectRows.add(selection[0]);
         } else {
-          this.$set(row, "showMore", true);
-          this.selectRows.add(row);
+          this.tableData.forEach(item => {
+            item.hashTree = [];
+            this.$set(item, "showMore", true);
+            this.selectRows.add(item);
+          });
         }
-        let arr = Array.from(this.selectRows);
-        // 选中1个以上的用例时显示更多操作
-        if (this.selectRows.size === 1) {
-          this.$set(arr[0], "showMore", false);
-        } else if (this.selectRows.size === 2) {
-          arr.forEach(row => {
-            this.$set(row, "showMore", true);
-          })
-        }
-      },
-      showExecResult(row) {
-        this.$emit('showExecResult', row);
-      },
-      filter(filters) {
-        _filter(filters, this.condition);
-        this.initTable();
-      },
-      sort(column) {
-        // 每次只对一个字段排序
-        if (this.condition.orders) {
-          this.condition.orders = [];
-        }
-        _sort(column, this.condition);
-        this.initTable();
-      },
-      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);
+      } else {
+        this.selectRows.clear();
+        this.tableData.forEach(row => {
+          this.$set(row, "showMore", false);
+        })
+      }
+    },
+    search() {
+      this.initTable();
+    },
+    buildPagePath(path) {
+      return path + "/" + this.currentPage + "/" + this.pageSize;
+    },
+    reductionApi(row) {
+      let ids = [row.id];
+      this.$post('/api/testcase/reduction/', ids, () => {
+        this.$success(this.$t('commons.save_success'));
+        this.search();
+      });
+    },
+    handleDeleteBatch() {
+      this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
+        confirmButtonText: this.$t('commons.confirm'),
+        callback: (action) => {
+          if (action === 'confirm') {
+            let param = {};
+            param.ids = Array.from(this.selectRows).map(row => row.id);
+            param.planId = this.planId;
+            this.$post('/test/plan/api/case/batch/delete', param, () => {
+              this.selectRows.clear();
+              this.initTable();
+              this.$emit('refresh');
+              this.$success(this.$t('test_track.cancel_relevance_success'));
             });
           }
-        } else {
-          this.selectRows.clear();
-          this.tableData.forEach(row => {
-            this.$set(row, "showMore", false);
-          })
         }
-      },
-      search() {
-        this.initTable();
-      },
-      buildPagePath(path) {
-        return path + "/" + this.currentPage + "/" + this.pageSize;
-      },
-      reductionApi(row) {
-        let ids = [row.id];
-        this.$post('/api/testcase/reduction/', ids, () => {
-          this.$success(this.$t('commons.save_success'));
-          this.search();
-        });
-      },
-      handleDeleteBatch() {
-        this.$alert(this.$t('api_test.definition.request.delete_confirm') + "？", '', {
-          confirmButtonText: this.$t('commons.confirm'),
-          callback: (action) => {
-            if (action === 'confirm') {
-              let param = {};
-              param.ids = Array.from(this.selectRows).map(row => row.id);
-              param.planId = this.planId;
-              this.$post('/test/plan/api/case/batch/delete', param, () => {
-                this.selectRows.clear();
-                this.initTable();
-                this.$emit('refresh');
-                this.$success(this.$t('test_track.cancel_relevance_success'));
-              });
-            }
-          }
-        });
-      },
-      getResult(data) {
-        if (RESULT_MAP.get(data)) {
-          return RESULT_MAP.get(data);
-        } else {
-          return RESULT_MAP.get("default");
-        }
-      },
-      runRefresh(data) {
-        this.rowLoading = "";
-        this.$success(this.$t('schedule.event_success'));
-        this.initTable();
-      },
-      singleRun(row) {
-        if (!row.environmentId) {
-          this.$warning(this.$t('api_test.environment.select_environment'));
-          return;
-        }
-        this.runData = [];
+      });
+    },
+    getResult(data) {
+      if (RESULT_MAP.get(data)) {
+        return RESULT_MAP.get(data);
+      } else {
+        return RESULT_MAP.get("default");
+      }
+    },
+    runRefresh(data) {
+      this.rowLoading = "";
+      this.$success(this.$t('schedule.event_success'));
+      this.initTable();
+    },
+    singleRun(row) {
+      if (!row.environmentId) {
+        this.$warning(this.$t('api_test.environment.select_environment'));
+        return;
+      }
+      this.runData = [];
 
-        this.rowLoading = row.id;
+      this.rowLoading = row.id;
 
+      this.$get('/api/testcase/get/' + row.caseId, (response) => {
+        let apiCase = response.data;
+        let request = JSON.parse(apiCase.request);
+        request.name = row.id;
+        request.id = row.id;
+        request.useEnvironment = row.environmentId;
+        this.runData.push(request);
+        /*触发执行操作*/
+        this.reportId = getUUID().substring(0, 8);
+      });
+    },
+    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/testcase/batch/edit', param, () => {
+        this.$success(this.$t('commons.save_success'));
+        this.initTable();
+      });
+    },
+    handleBatchExecute() {
+      this.selectRows.forEach(row => {
         this.$get('/api/testcase/get/' + row.caseId, (response) => {
           let apiCase = response.data;
           let request = JSON.parse(apiCase.request);
           request.name = row.id;
           request.id = row.id;
           request.useEnvironment = row.environmentId;
-          this.runData.push(request);
-          /*触发执行操作*/
-          this.reportId = getUUID().substring(0, 8);
+          let runData = [];
+          runData.push(request);
+          this.batchRun(runData, getUUID().substring(0, 8));
         });
-      },
-      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/testcase/batch/edit', param, () => {
-          this.$success(this.$t('commons.save_success'));
-          this.initTable();
-        });
-      },
-      handleBatchExecute() {
-        this.selectRows.forEach(row => {
-          this.$get('/api/testcase/get/' + row.caseId, (response) => {
-            let apiCase = response.data;
-            let request = JSON.parse(apiCase.request);
-            request.name = row.id;
-            request.id = row.id;
-            request.useEnvironment = row.environmentId;
-            let runData = [];
-            runData.push(request);
-            this.batchRun(runData, getUUID().substring(0, 8));
-          });
-        });
-        this.$message('任务执行中，请稍后刷新查看结果');
-        this.search();
-      },
-      batchRun(runData, reportId) {
-        let testPlan = new TestPlan();
-        let threadGroup = new ThreadGroup();
-        threadGroup.hashTree = [];
-        testPlan.hashTree = [threadGroup];
-        runData.forEach(item => {
-          threadGroup.hashTree.push(item);
-        });
-        let reqObj = {id: reportId, testElement: testPlan, type: 'API_PLAN', reportId: "run"};
-        let bodyFiles = getBodyUploadFiles(reqObj, runData);
-        this.$fileUpload("/api/definition/run", null, bodyFiles, reqObj, response => {
-        });
-      },
-      handleDelete(apiCase) {
-        this.$get('/test/plan/api/case/delete/' + apiCase.id, () => {
-          this.$success(this.$t('test_track.cancel_relevance_success'));
-          this.$emit('refresh');
-          this.initTable();
-        });
-        return;
-      },
-      getProjectId() {
-        if (!this.isRelevanceModel) {
-          return getCurrentProjectID();
-        } else {
-          return this.currentCaseProjectId;
-        }
-      },
-      setEnvironment(data) {
-      //   this.environmentId = data.id;
-      },
-      getReportResult(apiCase) {
-        let url = "/api/definition/report/getReport/" + apiCase.id + '/' + 'API_PLAN';
-        this.$get(url, response => {
-          if (response.data) {
-            this.response = JSON.parse(response.data.content);
-            this.$refs.apiCaseResult.open();
-          }
-        });
-      },
+      });
+      this.$message('任务执行中，请稍后刷新查看结果');
+      this.search();
     },
-  }
+    batchRun(runData, reportId) {
+      let testPlan = new TestPlan();
+      let threadGroup = new ThreadGroup();
+      threadGroup.hashTree = [];
+      testPlan.hashTree = [threadGroup];
+      runData.forEach(item => {
+        threadGroup.hashTree.push(item);
+      });
+      let reqObj = {id: reportId, testElement: testPlan, type: 'API_PLAN', reportId: "run"};
+      let bodyFiles = getBodyUploadFiles(reqObj, runData);
+      this.$fileUpload("/api/definition/run", null, bodyFiles, reqObj, response => {
+      });
+    },
+    handleDelete(apiCase) {
+      this.$get('/test/plan/api/case/delete/' + apiCase.id, () => {
+        this.$success(this.$t('test_track.cancel_relevance_success'));
+        this.$emit('refresh');
+        this.initTable();
+      });
+      return;
+    },
+    getProjectId() {
+      if (!this.isRelevanceModel) {
+        return getCurrentProjectID();
+      } else {
+        return this.currentCaseProjectId;
+      }
+    },
+    setEnvironment(data) {
+      //   this.environmentId = data.id;
+    },
+    getReportResult(apiCase) {
+      let url = "/api/definition/report/getReport/" + apiCase.id + '/' + 'API_PLAN';
+      this.$get(url, response => {
+        if (response.data) {
+          this.response = JSON.parse(response.data.content);
+          this.$refs.apiCaseResult.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-bottom: 20px;*/
-    margin-right: 20px;
-  }
+.search-input {
+  float: right;
+  width: 300px;
+  /*margin-bottom: 20px;*/
+  margin-right: 20px;
+}
 
+.el-tag {
+  margin-left: 10px;
+}
 </style>