From 4c4e5d3215dbd3354cf810668698f894a9fae9a6 Mon Sep 17 00:00:00 2001
From: shiziyuan9527 <yuhao.li@fit2cloud.com>
Date: Fri, 27 May 2022 15:53:22 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA):=20?=
 =?UTF-8?q?=E7=94=A8=E4=BE=8B=E8=AF=84=E5=AE=A1=E6=A0=87=E9=A2=98=E8=BF=87?=
 =?UTF-8?q?=E9=95=BF=E6=97=B6=E7=BC=A9=E7=95=A5=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1013135 --user=李玉号 【测试跟踪】用例评审标题过长时 建议都显示一行，目前低分辨率 显示不友好
https://www.tapd.cn/55049933/s/1166793
---
 .../components/MsPreviousNextButton.vue       | 31 +++++++++++++------
 .../functional/FunctionalTestCaseEdit.vue     | 16 +++++++++-
 .../components/TestReviewTestCaseEdit.vue     | 18 +++++++++--
 3 files changed, 52 insertions(+), 13 deletions(-)

diff --git a/frontend/src/business/components/common/components/MsPreviousNextButton.vue b/frontend/src/business/components/common/components/MsPreviousNextButton.vue
index e88f04fb92..9891837e99 100644
--- a/frontend/src/business/components/common/components/MsPreviousNextButton.vue
+++ b/frontend/src/business/components/common/components/MsPreviousNextButton.vue
@@ -1,14 +1,19 @@
 <template>
   <span class="previous-next-button">
-    <span v-if="countNum === total"
-          class="head-right-tip">
-      {{ $t('test_track.plan_view.pre_case') }} : {{list[index - 1] ? list[index - 1].name : (prePageData ? prePageData.name : '')}}
-    </span>
-    <span
-      v-else
-      class="head-right-tip">
-      {{ $t('test_track.plan_view.next_case') }} : {{list[index + 1] ? list[index + 1].name : (nextPageData ? nextPageData.name : '')}}
-    </span>
+    <el-tooltip effect="light" placement="top" :enterable="false" v-if="countNum === total">
+      <div slot="content">{{list[index - 1] ? list[index - 1].name : (prePageData ? prePageData.name : '')}}</div>
+      <span class="head-right-tip">
+        {{ $t('test_track.plan_view.pre_case') }} : {{list[index - 1] ? list[index - 1].name : (prePageData ? prePageData.name : '')}}
+      </span>
+    </el-tooltip>
+
+    <el-tooltip effect="light" placement="top" :enterable="false" v-else>
+      <div slot="content">{{list[index + 1] ? list[index + 1].name : (nextPageData ? nextPageData.name : '')}}</div>
+      <span class="head-right-tip">
+        {{ $t('test_track.plan_view.next_case') }} : {{list[index + 1] ? list[index + 1].name : (nextPageData ? nextPageData.name : '')}}
+      </span>
+    </el-tooltip>
+
 
     <el-button
       plain
@@ -93,6 +98,14 @@ export default {
 
 .head-right-tip {
   color: darkgrey;
+  display: inline-block;
+  line-height: 1;
+  max-width: 300px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  margin-right: 5px;
 }
 
 </style>
diff --git a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue
index 8e7e4ba01d..8b4b4d1a82 100644
--- a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue
@@ -46,7 +46,11 @@
                     <el-row class="head-bar">
                       <el-col>
                         <el-divider content-position="left">
-                          <el-button class="test-case-name" type="text" @click="openTestTestCase(testCase)">{{ testCase.customNum }}-{{ testCase.name }}</el-button>
+                          <el-button class="test-case-name" type="text" @click="openTestTestCase(testCase)">
+                            <span class="title-link" :title="testCase.name">
+                              {{ testCase.customNum }}-{{ testCase.name }}
+                            </span>
+                          </el-button>
                         </el-divider>
                       </el-col>
                     </el-row>
@@ -607,6 +611,16 @@ p {
   text-decoration: underline solid #783887;
 }
 
+.title-link {
+  display: inline-block;
+  max-width: 300px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  margin-right: 5px;
+}
+
 /deep/ .el-drawer__body {
   overflow: unset;
 }
diff --git a/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue b/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue
index d26e7b2f82..b01c0cf5a5 100644
--- a/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue
+++ b/frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue
@@ -20,14 +20,14 @@
 
                   <el-row type="flex" class="head-bar">
 
-                    <el-col :span="8">
+                    <el-col :span="2">
                       <el-button plain size="mini"
                                  icon="el-icon-back"
                                  @click="cancel">{{ $t('test_track.return') }}
                       </el-button>
                     </el-col>
 
-                    <el-col :span="14" class="head-right">
+                    <el-col :span="22" class="head-right">
 
                       <ms-previous-next-button
                         :index="index"
@@ -62,7 +62,9 @@
                     <el-col>
                       <el-divider content-position="left">
                         <el-button class="test-case-name" type="text" @click="openTestTestCase(testCase)">
-                          {{ testCase.num }}-{{ testCase.name }}
+                          <span class="title-link" :title="testCase.name">
+                            {{ testCase.num }}-{{ testCase.name }}
+                          </span>
                         </el-button>
                       </el-divider>
                     </el-col>
@@ -584,6 +586,16 @@ export default {
   text-decoration: underline solid #783887;
 }
 
+.title-link {
+  display: inline-block;
+  max-width: 300px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+  margin-right: 5px;
+}
+
 .step-info {
   padding-left: 40px;
   padding-right: 15px;