From 976c975ccf9279e02aba257524949facbe206817 Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Fri, 17 Mar 2023 10:00:51 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA):=20?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E8=AE=A1=E5=88=92=E5=85=B3=E8=81=94UI?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E7=94=A8=E4=BE=8B=E6=A0=87=E7=AD=BE=E4=B8=BA?=
 =?UTF-8?q?=E7=A9=BA=E6=98=BE=E7=A4=BA[]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1023762 --user=李玉号 【测试跟踪】测试计划-关联接口测试用例-case列表-标签为空显示[]
https://www.tapd.cn/55049933/s/1351766
---
 .../comonents/ui/RelevanceUiScenarioList.vue  | 34 +++++++++++++++--
 .../comonents/ui/TestPlanUiScenarioList.vue   | 37 ++++++++++++++++---
 2 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/test-track/frontend/src/business/plan/view/comonents/ui/RelevanceUiScenarioList.vue b/test-track/frontend/src/business/plan/view/comonents/ui/RelevanceUiScenarioList.vue
index 96d86d5260..133448b850 100644
--- a/test-track/frontend/src/business/plan/view/comonents/ui/RelevanceUiScenarioList.vue
+++ b/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>
diff --git a/test-track/frontend/src/business/plan/view/comonents/ui/TestPlanUiScenarioList.vue b/test-track/frontend/src/business/plan/view/comonents/ui/TestPlanUiScenarioList.vue
index cc7e394bc9..d53451ab81 100644
--- a/test-track/frontend/src/business/plan/view/comonents/ui/TestPlanUiScenarioList.vue
+++ b/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>