fix(测试跟踪): 测试计划关联UI测试用例标签为空显示[]

--bug=1023762 --user=李玉号 【测试跟踪】测试计划-关联接口测试用例-case列表-标签为空显示[]
https://www.tapd.cn/55049933/s/1351766

test-track/frontend/src/business/plan/view/comonents/ui/RelevanceUiScenarioList.vue

@@ -55,10 +55,21 @@
         </template>
 
       </ms-table-column>
-      <ms-table-column prop="tagNames" :label="$t('api_test.automation.tag')" min-width="100">
+      <ms-table-column prop="tagNames" :label="$t('commons.tag')" width="120px" :show-overflow-tooltip="false">
         <template v-slot:default="scope">
-          <ms-tag v-for="itemName in scope.row.tags" :key="itemName" type="success" effect="plain" :content="itemName"
-                  style="margin-left: 0px; margin-right: 2px"/>
+          <el-tooltip class="item" effect="dark" placement="top">
+            <div v-html="getTagToolTips(scope.row.tags)" slot="content"></div>
+            <div class="oneLine">
+              <ms-tag
+                v-for="(itemName, index) in scope.row.tags"
+                :key="index"
+                type="success"
+                effect="plain"
+                :show-tooltip="scope.row.tags.length === 1 && itemName.length * 12 <= 100"
+                :content="itemName"
+                style="margin-left: 0px; margin-right: 2px"/>
+            </div>
+          </el-tooltip>
         </template>
       </ms-table-column>
       <ms-table-column prop="userId" :label="$t('api_test.automation.creator')" show-overflow-tooltip sortable="custom"
@@ -194,6 +205,17 @@ export default {
     this.getVersionOptions();
   },
   methods: {
+    getTagToolTips(tags) {
+      try {
+        let showTips = '';
+        tags.forEach((item) => {
+          showTips += item + ',';
+        });
+        return showTips.substr(0, showTips.length - 1);
+      } catch (e) {
+        return '';
+      }
+    },
     filterSearch() {
       this.currentPage = 1;
       this.search();
@@ -313,4 +335,10 @@ export default {
   margin-top: 15px;
   margin-right: 10px;
 }
+
+.oneLine {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 </style>

test-track/frontend/src/business/plan/view/comonents/ui/TestPlanUiScenarioList.vue

@@ -96,11 +96,21 @@
 
           <ms-table-column :field="item"
                            :fields-width="fieldsWidth"
-                           prop="tagNames" :label="$t('api_test.automation.tag')"
-                           min-width="100px">
-            <template v-slot:default="scope">
-              <ms-tag v-for="(itemName,index) in scope.row.tags" :key="index" type="success" effect="plain"
-                      :content="itemName" style="margin-left: 0px; margin-right: 2px"/>
+                           prop="tagNames" :label="$t('commons.tag')" width="120px" :show-overflow-tooltip="false">
+           <template v-slot:default="scope">
+              <el-tooltip class="item" effect="dark" placement="top">
+                <div v-html="getTagToolTips(scope.row.tags)" slot="content"></div>
+                <div class="oneLine">
+                  <ms-tag
+                    v-for="(itemName, index) in scope.row.tags"
+                    :key="index"
+                    type="success"
+                    effect="plain"
+                    :show-tooltip="scope.row.tags.length === 1 && itemName.length * 12 <= 100"
+                    :content="itemName"
+                    style="margin-left: 0px; margin-right: 2px"/>
+                </div>
+              </el-tooltip>
             </template>
           </ms-table-column>
 
@@ -361,6 +371,17 @@ export default {
     }
   },
   methods: {
+    getTagToolTips(tags) {
+      try {
+        let showTips = '';
+        tags.forEach((item) => {
+          showTips += item + ',';
+        });
+        return showTips.substr(0, showTips.length - 1);
+      } catch (e) {
+        return '';
+      }
+    },
     initWebSocket() {
       this.websocket = baseSocket("/plan/ui/" + this.planId);
       this.websocket.onmessage = this.onMessage;
@@ -737,4 +758,10 @@ export default {
   z-index: 2000;
 }
 
+.oneLine {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 </style>