fix(测试跟踪): 修复测试计划关联case列表标签显示问题

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

api-test/frontend/src/business/definition/components/complete/ApiTableList.vue

@@ -49,17 +49,22 @@
 
       <ms-table-column prop="path" width="120px" :label="$t('api_test.definition.api_path')" />
 
-      <ms-table-column prop="tags" :label="$t('commons.tag')" width="120px">
-        <template v-slot:default="scope">
-          <ms-tag
-            v-for="(itemName, index) in scope.row.tags"
-            :key="index"
-            type="success"
-            effect="plain"
-            :show-tooltip="true"
-            :content="itemName"
-            style="margin-left: 0px; margin-right: 2px" />
-        </template>
+      <ms-table-column prop="tags" :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>
 
       <ms-table-column
@@ -257,6 +262,17 @@ export default {
         });
       }
     },
+    getTagToolTips(tags) {
+      try {
+        let showTips = '';
+        tags.forEach((item) => {
+          showTips += item + ',';
+        });
+        return showTips.substr(0, showTips.length - 1);
+      } catch (e) {
+        return '';
+      }
+    },
   },
 };
 </script>
@@ -281,4 +297,9 @@ export default {
   margin-top: 5px;
   margin-right: 10px;
 }
+.oneLine {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 </style>

framework/sdk-parent/frontend/src/components/environment/snippet/ext/ApiTableList.vue

@@ -58,15 +58,22 @@
         width="120px"
         :label="$t('api_test.definition.api_path')"/>
 
-      <ms-table-column
-        prop="tags"
-        :label="$t('commons.tag')"
-        width="120px">
-        <template v-slot:default="scope">
-          <ms-tag v-for="(itemName,index)  in scope.row.tags" :key="index" type="success" effect="plain"
-                  :show-tooltip="true" :content="itemName"
-                  style="margin-left: 0px; margin-right: 2px"/>
-        </template>
+     <ms-table-column prop="tags" :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>
 
       <ms-table-column
@@ -281,7 +288,18 @@ export default {
           return {text: u.name, value: u.id};
         });
       });
-    }
+    },
+    getTagToolTips(tags) {
+      try {
+        let showTips = '';
+        tags.forEach((item) => {
+          showTips += item + ',';
+        });
+        return showTips.substr(0, showTips.length - 1);
+      } catch (e) {
+        return '';
+      }
+    },
   },
 };
 </script>
@@ -308,4 +326,10 @@ export default {
   margin-right: 10px;
 }
 
+.oneLine {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 </style>

test-track/frontend/src/business/plan/view/comonents/api/RelevanceCaseList.vue

@@ -50,10 +50,21 @@
           width="180px"
           :label="'API'+ $t('api_test.definition.api_path')"/>
 
-        <ms-table-column prop="tags" width="120px" :label="$t('commons.tag')">
+        <ms-table-column prop="tags" width="120px" :label="$t('commons.tag')" :show-overflow-tooltip="false">
           <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"/>
+            <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>
 
@@ -265,6 +276,17 @@ export default {
       }
       this.clear();
     },
+    getTagToolTips(tags) {
+      try {
+        let showTips = '';
+        tags.forEach((item) => {
+          showTips += item + ',';
+        });
+        return showTips.substr(0, showTips.length - 1);
+      } catch (e) {
+        return '';
+      }
+    },
     showExecResult(row) {
       this.visible = false;
       this.$emit('showExecResult', row);
@@ -357,4 +379,10 @@ export default {
   margin-right: 10px;
 }
 
+.oneLine {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 </style>

test-track/frontend/src/business/plan/view/comonents/functional/FunctionalRelevance.vue

@@ -84,11 +84,21 @@
 
       <test-case-review-status-table-item sortable/>
 
-      <ms-table-column prop="tags" :label="$t('commons.tag')" width="90px">
+      <ms-table-column prop="tags" :label="$t('commons.tag')" width="90px" :show-overflow-tooltip="false">
         <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"/>
-          <span/>
+          <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>
 
@@ -319,10 +329,28 @@ export default {
         this.testCaseTemplate = data;
         this.page.condition.components = initTestCaseConditionComponents(this.page.condition, this.testCaseTemplate.customFields);
       });
-    }
+    },
+    getTagToolTips(tags) {
+      try {
+        let showTips = '';
+        tags.forEach((item) => {
+          showTips += item + ',';
+        });
+        return showTips.substr(0, showTips.length - 1);
+      } catch (e) {
+        return '';
+      }
+    },
   }
 };
 </script>
 
 <style scoped>
+
+
+.oneLine {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
 </style>

test-track/frontend/src/business/plan/view/comonents/functional/FunctionalTestCaseList.vue

@@ -91,11 +91,23 @@
           :field="item"
           :fields-width="fieldsWidth"
           :label="$t('commons.tag')"
-          min-width="120px">
-          <template v-slot:default="scope">
-            <ms-tag v-for="(tag, index) in scope.row.showTags" :key="tag + '_' + index" type="success" effect="plain"
-                    :content="tag" style="margin-left: 0px; margin-right: 2px"/>
-            <span/>
+          min-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>
           <ms-table-column
@@ -822,6 +834,17 @@ export default {
           });
       }
     },
+    getTagToolTips(tags) {
+      try {
+        let showTips = '';
+        tags.forEach((item) => {
+          showTips += item + ',';
+        });
+        return showTips.substr(0, showTips.length - 1);
+      } catch (e) {
+        return '';
+      }
+    },
   }
 };
 </script>
@@ -837,11 +860,9 @@ export default {
   cursor: pointer;
 }
 
-.el-tag {
-  margin-left: 10px;
-}
-
-.ms-table-header {
-  margin-bottom: 10px;
+.oneLine {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 </style>