refactor(测试跟踪): 测试计划/用例评审用例标题优化

--story=1009536 --user=陈建星 【测试跟踪】测试计划/用例评审页用例标题展示优化 https://www.tapd.cn/55049933/s/1241500

frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseEdit.vue

@@ -42,9 +42,12 @@
 
                     <el-row class="head-bar">
                       <el-col>
-                        <el-divider content-position="left">
+                        <el-divider content-position="left" class="title-divider">
                           <el-button class="test-case-name" type="text" @click="openTestTestCase(testCase)">
-                            <span class="title-link" :title="testCase.name">
+                            <span
+                              class="title-link"
+                              :title="testCase.name"
+                              :style="{'max-width': titleWith + 'px'}">
                               {{ testCase.customNum }}-{{ testCase.name }}
                             </span>
                           </el-button>
@@ -210,7 +213,8 @@ export default {
       otherInfoActive: true,
       isReadOnly: false,
       testCases: [],
-      originalStatus: ''
+      originalStatus: '',
+      titleWith: 0
     };
   },
   props: {
@@ -438,6 +442,7 @@ export default {
       this.hasZentaoId = false;
       this.isReadOnly = !hasPermission('PROJECT_TRACK_PLAN:READ+RELEVANCE_OR_CANCEL');
       this.originalStatus = testCase.status;
+      this.setTitleWith();
 
       if (tableData) {
         this.testCases = tableData;
@@ -501,6 +506,15 @@ export default {
         }
       }
     },
+    setTitleWith() {
+      this.$nextTick(() => {
+        this.titleWith = 0;
+        let titleDivider = document.getElementsByClassName("title-divider");
+        if (titleDivider && titleDivider.length > 0) {
+          this.titleWith = 0.9 * titleDivider[0].clientWidth;
+        }
+      });
+    },
     openTestTestCase(item) {
       let TestCaseData = this.$router.resolve(
         {path: '/track/case/all', query: {redirectID: getUUID(), dataType: "testCase", dataSelectRange: item.caseId, projectId: item.projectId}}
@@ -595,7 +609,6 @@ p {
 
 .title-link {
   display: inline-block;
-  max-width: 830px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;

frontend/src/business/components/track/review/view/components/TestReviewTestCaseEdit.vue

@@ -46,9 +46,12 @@
 
                   <el-row style="margin-top: 0;">
                     <el-col>
-                      <el-divider content-position="left">
+                      <el-divider content-position="left" class="title-divider">
                         <el-button class="test-case-name" type="text" @click="openTestTestCase(testCase)">
-                        <span class="title-link" :title="testCase.name">
+                        <span
+                          class="title-link"
+                          :title="testCase.name"
+                          :style="{'max-width': titleWith + 'px'}">
                           {{ testCase.num }}-{{ testCase.name }}
                         </span>
                         </el-button>
@@ -215,7 +218,8 @@ export default {
       hasZentaoId: false,
       formLabelWidth: '100px',
       isCustomFiledActive: false,
-      oldReviewStatus: ''
+      oldReviewStatus: '',
+      titleWith: 0
     };
   },
   props: {
@@ -389,6 +393,15 @@ export default {
       })
 
     },
+    setTitleWith() {
+      this.$nextTick(() => {
+        this.titleWith = 0;
+        let titleDivider = document.getElementsByClassName("title-divider");
+        if (titleDivider && titleDivider.length > 0) {
+          this.titleWith = 0.9 * titleDivider[0].clientWidth;
+        }
+      });
+    },
     getFileMetaData(testCase) {
       this.tableData = [];
       this.result = this.$get("test/case/file/metadata/" + testCase.caseId, response => {
@@ -411,6 +424,7 @@ export default {
       this.hasZentaoId = false;
       listenGoBack(this.handleClose);
       let initFuc = this.getTestCase;
+      this.setTitleWith();
 
       if (tableData) {
         this.testCases = tableData;
@@ -540,7 +554,6 @@ export default {
 
 .title-link {
   display: inline-block;
-  max-width: 830px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;