From 879268610d8394464a2b63b9339bb6e6797ae336 Mon Sep 17 00:00:00 2001
From: "song.tianyang" <tianyang.song@fit2cloud.com>
Date: Mon, 1 Feb 2021 15:02:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=9B=BA=E5=AE=9A=E5=88=97=E7=9A=84?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=EF=BC=8C=E5=88=97=E5=AE=BD=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

针对固定列的表格，设置最小列宽，避免拖动过程中由于表头换行导致的表格固定列和普通列的错位
---
 .../automation/scenario/ApiScenarioList.vue   | 32 +++++++++++++++----
 .../components/list/ApiCaseSimpleList.vue     | 26 +++++++++------
 .../definition/components/list/ApiList.vue    | 28 ++++++++++++++--
 .../track/case/components/TestCaseList.vue    |  7 ++++
 .../functional/FunctionalTestCaseList.vue     | 32 ++++++++++++++++++-
 5 files changed, 105 insertions(+), 20 deletions(-)

diff --git a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
index f1a1d269ec..566225d774 100644
--- a/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
+++ b/frontend/src/business/components/api/automation/scenario/ApiScenarioList.vue
@@ -20,7 +20,7 @@
                                         @selectPageAll="isSelectDataAll(false)"
                                         @selectAll="isSelectDataAll(true)"/>
 
-        <el-table-column v-if="!referenced" width="30" :resizable="false" align="center">
+        <el-table-column v-if="!referenced" width="30" min-width="30" :render-header="labelHead" :resizable="false" align="center">
           <template v-slot:default="scope">
             <show-more-btn :is-show="isSelect(scope.row)" :buttons="buttons" :size="selectDataCounts"/>
           </template>
@@ -28,6 +28,7 @@
 
         <el-table-column prop="num" label="ID"
                          sortable="custom"
+                         min-width="120px" :render-header="labelHead"
                          show-overflow-tooltip>
           <template slot-scope="scope">
             <el-tooltip content="编辑">
@@ -39,13 +40,16 @@
                          sortable="custom"
                          :label="$t('api_test.automation.scenario_name')"
                          show-overflow-tooltip
+                         :render-header="labelHead"
                          min-width="120px"/>
         <el-table-column prop="level"
                          sortable="custom"
                          column-key="level"
                          :filters="levelFilters"
+                         min-width="120px"
+                         :render-header="labelHead"
                          :label="$t('api_test.automation.case_level')"
-                         show-overflow-tooltip min-width="120px">
+                         show-overflow-tooltip>
           <template v-slot:default="scope">
             <priority-table-item :value="scope.row.level"/>
           </template>
@@ -54,32 +58,37 @@
                          sortable="custom"
                          column-key="status"
                          :filters="statusFilters"
+                         :render-header="labelHead"
                          show-overflow-tooltip min-width="120px">
           <template v-slot:default="scope">
             <plan-status-table-item :value="scope.row.status"/>
           </template>
         </el-table-column>
-        <el-table-column prop="tags" :label="$t('api_test.automation.tag')">
+        <el-table-column prop="tags" min-width="120px"
+                         :render-header="labelHead" :label="$t('api_test.automation.tag')">
           <template v-slot:default="scope">
             <div v-for="(itemName,index)  in scope.row.tags" :key="index">
               <ms-tag type="success" effect="plain" :content="itemName"/>
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="userId" :label="$t('api_test.automation.creator')"
+        <el-table-column prop="userId" min-width="120px"
+                         :render-header="labelHead" :label="$t('api_test.automation.creator')"
                          :filters="userFilters"
                          column-key="user_id"
                          sortable="custom"
-                         min-width="100px"
                          show-overflow-tooltip/>
-        <el-table-column prop="updateTime" :label="$t('api_test.automation.update_time')" sortable="custom" width="180">
+        <el-table-column prop="updateTime" :label="$t('api_test.automation.update_time')" sortable="custom"  min-width="180px"
+                         :render-header="labelHead">
           <template v-slot:default="scope">
             <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="stepTotal" :label="$t('api_test.automation.step')" show-overflow-tooltip/>
+        <el-table-column prop="stepTotal" :label="$t('api_test.automation.step')" min-width="80px"
+                         :render-header="labelHead" show-overflow-tooltip/>
         <el-table-column prop="lastResult" :label="$t('api_test.automation.last_result')"
                          :filters="resultFilters"
+                         :render-header="labelHead"
                          sortable="custom" column-key="last_result" min-width="120px">
           <template v-slot:default="{row}">
             <el-link type="success" @click="showReport(row)" v-if="row.lastResult === 'Success'">
@@ -91,6 +100,8 @@
           </template>
         </el-table-column>
         <el-table-column prop="passRate" :label="$t('api_test.automation.passing_rate')"
+                         min-width="120px"
+                         :render-header="labelHead"
                          show-overflow-tooltip/>
         <el-table-column fixed="right" :label="$t('commons.operating')" width="190px" v-if="!referenced">
           <template v-slot:default="{row}">
@@ -598,6 +609,13 @@
         _filter(filters, this.condition);
         this.search();
       },
+      labelHead(h,{column,index}){
+        if(column.minWidth>column.realWidth){
+          column.realWidth = column.minWidth;
+          column.width = column.minWidth;
+        }
+        return column.label;
+      },
       openScenario(item) {
         this.$emit('openScenario', item)
       },
diff --git a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
index b0142763ab..4fbf1c6702 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiCaseSimpleList.vue
@@ -25,13 +25,13 @@
           @selectPageAll="isSelectDataAll(false)"
           @selectAll="isSelectDataAll(true)"/>
 
-        <el-table-column width="30" :resizable="false" align="center">
+        <el-table-column width="30" :resizable="false" min-width="30px" :render-header="labelHead" align="center">
           <template v-slot:default="scope">
             <show-more-btn :is-show="scope.row.showMore" :buttons="buttons" :size="selectDataCounts"/>
           </template>
         </el-table-column>
 
-        <el-table-column prop="num" label="ID" min-width="120px" show-overflow-tooltip>
+        <el-table-column prop="num" label="ID" min-width="120px" :render-header="labelHead" show-overflow-tooltip>
           <template slot-scope="scope">
             <el-tooltip content="编辑">
               <a style="cursor:pointer" @click="handleTestCase(scope.row)"> {{ scope.row.num }} </a>
@@ -39,13 +39,14 @@
           </template>
         </el-table-column>
 
-        <el-table-column prop="name" min-width="160px" :label="$t('test_track.case.name')" show-overflow-tooltip/>
+        <el-table-column prop="name" min-width="160px" :render-header="labelHead" :label="$t('test_track.case.name')" show-overflow-tooltip/>
 
         <el-table-column
           prop="priority"
           :filters="priorityFilters"
           column-key="priority"
           min-width="120px"
+          :render-header="labelHead"
           :label="$t('test_track.case.priority')"
           show-overflow-tooltip>
           <template v-slot:default="scope">
@@ -58,9 +59,10 @@
           prop="path"
           min-width="180px"
           :label="$t('api_test.definition.api_path')"
+          :render-header="labelHead"
           show-overflow-tooltip/>
 
-        <el-table-column prop="tags" min-width="120px" :label="$t('commons.tag')">
+        <el-table-column prop="tags" min-width="120px" :render-header="labelHead" :label="$t('commons.tag')">
           <template v-slot:default="scope">
             <div v-for="(itemName,index)  in scope.row.tags" :key="index">
               <ms-tag type="success" effect="plain" :content="itemName"/>
@@ -71,12 +73,14 @@
         <el-table-column
           prop="createUser"
           :label="'创建人'"
+          :render-header="labelHead"
           show-overflow-tooltip/>
 
         <el-table-column
           sortable="custom"
-          width="160"
+          min-width="160"
           :label="$t('api_test.definition.api_last_time')"
+          :render-header="labelHead"
           prop="updateTime">
           <template v-slot:default="scope">
             <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
@@ -85,11 +89,6 @@
 
         <el-table-column fixed="right" v-if="!isReadOnly" :label="$t('commons.operating')" min-width="130" align="center">
           <template v-slot:default="scope">
-            <!--<el-button type="text" @click="reductionApi(scope.row)" v-if="trashEnable">{{$t('commons.reduction')}}</el-button>-->
-<!--            <el-button type="text" @click="handleTestCase(scope.row)" v-if="!trashEnable">{{ $t('commons.edit') }}-->
-<!--            </el-button>-->
-<!--            <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">{{ $t('commons.delete') }}-->
-<!--            </el-button>-->
             <ms-table-operator-button :tip="$t('commons.edit')" icon="el-icon-edit" @exec="handleTestCase(scope.row)" v-tester/>
             <ms-table-operator-button :tip="$t('commons.delete')" icon="el-icon-delete" @exec="handleDelete(scope.row)" type="danger" v-tester/>
             <ms-api-case-table-extend-btns @showCaseRef="showCaseRef" @showEnvironment="showEnvironment" @createPerformance="createPerformance" :row="scope.row" v-tester/>
@@ -508,6 +507,13 @@ export default {
         this.clickRow = row;
         this.$refs.setEnvironment.open(row);
       },
+      labelHead(h,{column,index}){
+        if(column.minWidth>column.realWidth){
+          column.realWidth = column.minWidth;
+          column.width = column.minWidth;
+        }
+        return column.label;
+      },
       createPerformance(row, environment) {
         /**
          * 思路：调用后台创建性能测试的方法，把当前案例的hashTree在后台转化为jmx并文件创建性能测试。
diff --git a/frontend/src/business/components/api/definition/components/list/ApiList.vue b/frontend/src/business/components/api/definition/components/list/ApiList.vue
index a25d37e379..0255b9d35b 100644
--- a/frontend/src/business/components/api/definition/components/list/ApiList.vue
+++ b/frontend/src/business/components/api/definition/components/list/ApiList.vue
@@ -24,13 +24,15 @@
           @selectPageAll="isSelectDataAll(false)"
           @selectAll="isSelectDataAll(true)"/>
 
-        <el-table-column width="30" :resizable="false" align="center">
+        <el-table-column min-width="30" :resizable="false" align="center">
           <template v-slot:default="scope">
             <show-more-btn :is-show="scope.row.showMore" :buttons="buttons" :size="selectDataCounts"/>
           </template>
         </el-table-column>
 
         <el-table-column prop="num" label="ID" show-overflow-tooltip
+                         min-width="80px"
+                         :render-header="labelHead"
                          sortable="custom">
           <template slot-scope="scope">
             <el-tooltip content="编辑">
@@ -40,12 +42,14 @@
         </el-table-column>
         <el-table-column prop="name" :label="$t('api_test.definition.api_name')"
                          show-overflow-tooltip
+                         :render-header="labelHead"
                          sortable="custom" min-width="120px"/>
         <el-table-column
           prop="status"
           column-key="status"
           sortable="custom"
           :filters="statusFilters"
+          :render-header="labelHead"
           :label="$t('api_test.definition.api_status')" min-width="120px">
           <template v-slot:default="scope">
             <span class="el-dropdown-link">
@@ -59,6 +63,7 @@
           sortable="custom"
           column-key="method"
           :filters="methodFilters"
+          :render-header="labelHead"
           :label="$t('api_test.definition.api_type')"
           show-overflow-tooltip min-width="120px">
           <template v-slot:default="scope" class="request-method">
@@ -74,15 +79,19 @@
           sortable="custom"
           :filters="userFilters"
           column-key="user_id"
+          :render-header="labelHead"
           :label="$t('api_test.definition.api_principal')"
           show-overflow-tooltip min-width="100px"/>
 
         <el-table-column
           prop="path"
+          min-width="120px"
+          :render-header="labelHead"
           :label="$t('api_test.definition.api_path')"
           show-overflow-tooltip/>
 
-        <el-table-column prop="tags" :label="$t('commons.tag')">
+        <el-table-column prop="tags" :label="$t('commons.tag')" min-width="80px"
+                         :render-header="labelHead">
           <template v-slot:default="scope">
             <div v-for="(itemName,index)  in scope.row.tags" :key="index">
               <ms-tag type="success" effect="plain" :content="itemName"/>
@@ -94,6 +103,8 @@
           width="160"
           :label="$t('api_test.definition.api_last_time')"
           sortable="custom"
+          min-width="160px"
+          :render-header="labelHead"
           prop="updateTime">
           <template v-slot:default="scope">
             <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
@@ -102,17 +113,23 @@
 
         <el-table-column
           prop="caseTotal"
+          min-width="80px"
+          :render-header="labelHead"
           :label="$t('api_test.definition.api_case_number')"
           show-overflow-tooltip/>
 
         <el-table-column
           prop="caseStatus"
+          min-width="80px"
+          :render-header="labelHead"
           :label="$t('api_test.definition.api_case_status')"
           show-overflow-tooltip/>
 
         <el-table-column
           prop="casePassingRate"
           :width="100"
+          min-width="100px"
+          :render-header="labelHead"
           :label="$t('api_test.definition.api_case_passing_rate')"
           show-overflow-tooltip/>
 
@@ -634,6 +651,13 @@
         _filter(filters, this.condition);
         this.initTable();
       },
+      labelHead(h,{column,index}){
+        if(column.minWidth>column.realWidth){
+          column.realWidth = column.minWidth;
+          column.width = column.minWidth;
+        }
+        return column.label;
+      },
       open() {
         this.$refs.searchBar.open();
       }
diff --git a/frontend/src/business/components/track/case/components/TestCaseList.vue b/frontend/src/business/components/track/case/components/TestCaseList.vue
index f63ddc8a7d..e118e05dcf 100644
--- a/frontend/src/business/components/track/case/components/TestCaseList.vue
+++ b/frontend/src/business/components/track/case/components/TestCaseList.vue
@@ -562,6 +562,13 @@ export default {
         this.selectDataCounts = this.selectRows.size;
       }
     },
+    labelHead(h,{column,index}){
+      if(column.minWidth>column.realWidth){
+        column.realWidth = column.minWidth;
+        column.width = column.minWidth;
+      }
+      return column.label;
+    },
     moveSave(param) {
       param.condition = this.condition;
       this.result = this.$post('/test/case/batch/edit', param, () => {
diff --git a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
index 65ab346889..f5faafcc32 100644
--- a/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
+++ b/frontend/src/business/components/track/plan/view/comonents/functional/FunctionalTestCaseList.vue
@@ -48,17 +48,23 @@
           prop="num"
           sortable="custom"
           :label="$t('commons.id')"
+          min-width="120px"
+          :render-header="labelHead"
           show-overflow-tooltip>
         </el-table-column>
         <el-table-column
           prop="name"
           :label="$t('commons.name')"
+          min-width="120px"
+          :render-header="labelHead"
           show-overflow-tooltip>
         </el-table-column>
         <el-table-column
           prop="priority"
           :filters="priorityFilters"
           column-key="priority"
+          min-width="100px"
+          :render-header="labelHead"
           :label="$t('test_track.case.priority')">
           <template v-slot:default="scope">
             <priority-table-item :value="scope.row.priority" ref="priority"/>
@@ -70,13 +76,16 @@
           :filters="typeFilters"
           column-key="type"
           :label="$t('test_track.case.type')"
+          min-width="80px"
+          :render-header="labelHead"
           show-overflow-tooltip>
           <template v-slot:default="scope">
             <type-table-item :value="scope.row.type"/>
           </template>
         </el-table-column>
 
-        <el-table-column prop="tags" :label="$t('commons.tag')">
+        <el-table-column prop="tags" :label="$t('commons.tag')" min-width="120px"
+                         :render-header="labelHead">
           <template v-slot:default="scope">
             <div v-for="(tag, index) in scope.row.showTags" :key="tag + '_' + index">
               <ms-tag type="success" effect="plain" :content="tag"/>
@@ -89,6 +98,8 @@
           :filters="methodFilters"
           column-key="method"
           :label="$t('test_track.case.method')"
+          min-width="100px"
+          :render-header="labelHead"
           show-overflow-tooltip>
           <template v-slot:default="scope">
             <method-table-item :value="scope.row.method"/>
@@ -98,17 +109,23 @@
         <el-table-column
           prop="nodePath"
           :label="$t('test_track.case.module')"
+          min-width="120px"
+          :render-header="labelHead"
           show-overflow-tooltip>
         </el-table-column>
 
         <el-table-column
           prop="projectName"
           :label="$t('test_track.plan.plan_project')"
+          min-width="120px"
+          :render-header="labelHead"
           show-overflow-tooltip>
         </el-table-column>
 
         <el-table-column
           :label="$t('test_track.issue.issue')"
+          min-width="80px"
+          :render-header="labelHead"
           show-overflow-tooltip>
           <template v-slot:default="scope">
             <el-popover
@@ -141,6 +158,8 @@
         <el-table-column
           prop="executorName"
           :filters="executorFilters"
+          min-width="100px"
+          :render-header="labelHead"
           column-key="executor"
           :label="$t('test_track.plan_view.executor')">
         </el-table-column>
@@ -149,6 +168,8 @@
           prop="status"
           :filters="statusFilters"
           column-key="status"
+          min-width="100px"
+          :render-header="labelHead"
           :label="$t('test_track.plan_view.execute_result')">
           <template v-slot:default="scope">
             <span @click.stop="clickt = 'stop'">
@@ -181,6 +202,8 @@
           sortable
           prop="updateTime"
           :label="$t('commons.update_time')"
+          min-width="120px"
+          :render-header="labelHead"
           show-overflow-tooltip>
           <template v-slot:default="scope">
             <span>{{ scope.row.updateTime | timestampFormatDate }}</span>
@@ -572,6 +595,13 @@ export default {
       _sort(column, this.condition);
       this.initTableData();
     },
+    labelHead(h,{column,index}){
+      if(column.minWidth>column.realWidth){
+        column.realWidth = column.minWidth;
+        column.width = column.minWidth;
+      }
+      return column.label;
+    },
     batchEdit(form) {
       let param = {};
       param[form.type] = form.value;