fix(测试跟踪): 修复测试计划报告批量操作按钮不展示的问题

--bug=1021687 --user=宋天阳 【测试跟踪】测试计划报告批量操作按钮没了
https://www.tapd.cn/55049933/s/1324357

framework/sdk-parent/frontend/src/components/table/MsTable.vue

@@ -27,9 +27,18 @@
       @row-click="handleRowClick"
       ref="table"
     >
-      <el-table-column v-if="enableSelection && !reserveOption" width="50" type="selection"/>
+      <el-table-column
+        v-if="enableSelection && !reserveOption"
+        width="50"
+        type="selection"
+      />
 
-      <el-table-column v-if="enableSelection && reserveOption" width="50" type="selection" reserve-selection/>
+      <el-table-column
+        v-if="enableSelection && reserveOption"
+        width="50"
+        type="selection"
+        reserve-selection
+      />
 
       <ms-table-header-select-popover
         v-if="enableSelection && showSelectAll && !hidePopover"
@@ -46,7 +55,7 @@
         v-if="enableSelection && batchOperators && batchOperators.length > 0"
         width="15"
         fixed="left"
-        column-key="batchBtnCol"
+        class-name="padding-col"
         align="center"
         :resizable="false"
       >
@@ -565,7 +574,7 @@ export default {
         this.tableActive = true;
       });
       this.listenRowDrop();
-      this.$emit('headChange');
+      this.$emit("headChange");
     },
     toggleRowSelection() {
       this.$refs.table.toggleRowSelection();

test-track/frontend/src/business/report/components/TestPlanReportList.vue

@@ -1,13 +1,16 @@
 <template>
   <el-card class="table-card" v-loading="loading">
     <template v-slot:header>
-      <ms-table-header :condition.sync="condition" :show-create="false"
-                       @search="initTableData"/>
+      <ms-table-header
+        :condition.sync="condition"
+        :show-create="false"
+        @search="initTableData"
+      />
     </template>
 
     <ms-table
       v-loading="loading"
-      operator-width="100px"
+      operator-width="220px"
       row-key="id"
       :data="tableData"
       :condition="condition"
@@ -21,113 +24,148 @@
       :field-key="tableHeaderKey"
       @handlePageChange="initTableData"
       @refresh="initTableData"
-      ref="testPlanReportTable">
-
+      ref="testPlanReportTable"
+    >
       <span v-for="item in fields" :key="item.key">
+        <ms-table-column
+          prop="name"
+          permission="PROJECT_TRACK_REPORT:READ+DELETE"
+          :field="item"
+          :fields-width="fieldsWidth"
+          sortable
+          :label="$t('test_track.report.list.name')"
+          :show-overflow-tooltip="false"
+          :editable="true"
+          :edit-content="$t('report.rename_report')"
+          @editColumn="openReNameDialog"
+          min-width="200px"
+        >
+        </ms-table-column>
 
-      <ms-table-column
-        prop="name"
-        permission="PROJECT_TRACK_REPORT:READ+DELETE"
-        :field="item"
-        :fields-width="fieldsWidth"
-        sortable
-        :label="$t('test_track.report.list.name')"
-        :show-overflow-tooltip="false"
-        :editable="true"
-        :edit-content="$t('report.rename_report')"
-        @editColumn="openReNameDialog"
-        min-width="200px">
-      </ms-table-column>
+        <ms-table-column
+          prop="testPlanName"
+          :field="item"
+          :fields-width="fieldsWidth"
+          :label="$t('test_track.report.list.test_plan')"
+          min-width="100"
+        />
 
-      <ms-table-column
-        prop="testPlanName"
-        :field="item"
-        :fields-width="fieldsWidth"
-        :label="$t('test_track.report.list.test_plan')"
-        min-width="100"/>
+        <ms-table-column
+          prop="creator"
+          :field="item"
+          :fields-width="fieldsWidth"
+          :label="$t('test_track.report.list.creator')"
+        />
 
-      <ms-table-column
-        prop="creator"
-        :field="item"
-        :fields-width="fieldsWidth"
-        :label="$t('test_track.report.list.creator')"/>
+        <ms-table-column
+          prop="createTime"
+          :field="item"
+          :fields-width="fieldsWidth"
+          sortable
+          :label="$t('test_track.report.list.create_time')"
+          :show-overflow-tooltip="true"
+        >
+          <template v-slot:default="scope">
+            <span>{{ scope.row.createTime | datetimeFormat }}</span>
+          </template>
+        </ms-table-column>
 
-      <ms-table-column
-        prop="createTime"
-        :field="item"
-        :fields-width="fieldsWidth"
-        sortable
-        :label="$t('test_track.report.list.create_time')"
-        :show-overflow-tooltip="true">
-        <template v-slot:default="scope">
-          <span>{{ scope.row.createTime | datetimeFormat }}</span>
-        </template>
-      </ms-table-column>
+        <ms-table-column
+          prop="triggerMode"
+          :field="item"
+          :fields-width="fieldsWidth"
+          sortable
+          :label="$t('test_track.report.list.trigger_mode')"
+        >
+          <template v-slot:default="scope">
+            <report-trigger-mode-item :trigger-mode="scope.row.triggerMode" />
+          </template>
+        </ms-table-column>
 
-      <ms-table-column
-        prop="triggerMode"
-        :field="item"
-        :fields-width="fieldsWidth"
-        sortable
-        :label="$t('test_track.report.list.trigger_mode')">
-        <template v-slot:default="scope">
-          <report-trigger-mode-item :trigger-mode="scope.row.triggerMode"/>
-        </template>
-      </ms-table-column>
+        <ms-table-column
+          prop="status"
+          :field="item"
+          :fields-width="fieldsWidth"
+          sortable
+          :label="$t('commons.status')"
+        >
+          <template v-slot:default="scope">
+            <ms-tag
+              v-if="scope.row.status == 'RUNNING'"
+              type="primary"
+              effect="plain"
+              :content="'Running'"
+            />
+            <ms-tag
+              v-else-if="
+                scope.row.status == 'COMPLETED' ||
+                scope.row.status == 'SUCCESS' ||
+                scope.row.status == 'FAILED'
+              "
+              type="info"
+              effect="plain"
+              :content="'Completed'"
+            />
+            <ms-tag
+              v-else
+              type="info"
+              effect="plain"
+              :content="scope.row.status"
+            />
+          </template>
+        </ms-table-column>
 
-      <ms-table-column
-        prop="status"
-        :field="item"
-        :fields-width="fieldsWidth"
-        sortable
-        :label="$t('commons.status')">
-        <template v-slot:default="scope">
-          <ms-tag v-if="scope.row.status == 'RUNNING'" type="primary" effect="plain" :content="'Running'"/>
-          <ms-tag
-            v-else-if="scope.row.status == 'COMPLETED'||scope.row.status == 'SUCCESS'||scope.row.status == 'FAILED'"
-            type="info" effect="plain" :content="'Completed'"/>
-          <ms-tag v-else type="info" effect="plain" :content="scope.row.status"/>
-        </template>
-      </ms-table-column>
-
-      <ms-table-column
-        prop="runTime"
-        :field="item"
-        :fields-width="fieldsWidth"
-        sortable="custom"
-        :label="$t('test_track.report.list.run_time')">
-        <template v-slot:default="scope">
-          <span v-if="scope.row.endTime != null">{{ (scope.row.runTime / 1000).toFixed(2) }}</span>
-          <span v-else>/</span>
-        </template>
-      </ms-table-column>
-
-      <ms-table-column
-        prop="passRate"
-        :field="item"
-        :fields-width="fieldsWidth"
-        :label="$t('test_track.report.list.pass_rate')">
-        <template v-slot:default="scope">
-          <span>{{ (scope.row.passRate ? (scope.row.passRate * 100).toFixed(1) : 0) + '%' }}</span>
-        </template>
-      </ms-table-column>
+        <ms-table-column
+          prop="runTime"
+          :field="item"
+          :fields-width="fieldsWidth"
+          sortable="custom"
+          :label="$t('test_track.report.list.run_time')"
+        >
+          <template v-slot:default="scope">
+            <span v-if="scope.row.endTime != null">{{
+              (scope.row.runTime / 1000).toFixed(2)
+            }}</span>
+            <span v-else>/</span>
+          </template>
+        </ms-table-column>
 
+        <ms-table-column
+          prop="passRate"
+          :field="item"
+          :fields-width="fieldsWidth"
+          :label="$t('test_track.report.list.pass_rate')"
+        >
+          <template v-slot:default="scope">
+            <span>{{
+              (scope.row.passRate ? (scope.row.passRate * 100).toFixed(1) : 0) +
+              "%"
+            }}</span>
+          </template>
+        </ms-table-column>
       </span>
     </ms-table>
 
-    <ms-table-pagination :change="initTableData" :current-page.sync="currentPage" :page-size.sync="pageSize"
-                         :total="total"/>
-    <test-plan-db-report ref="dbReport"/>
-    <ms-rename-report-dialog ref="renameDialog" @submit="rename"></ms-rename-report-dialog>
+    <ms-table-pagination
+      :change="initTableData"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :total="total"
+    />
+    <test-plan-db-report ref="dbReport" />
+    <ms-rename-report-dialog
+      ref="renameDialog"
+      @submit="rename"
+    ></ms-rename-report-dialog>
   </el-card>
 </template>
 
 <script>
-import MsTablePagination from 'metersphere-frontend/src/components/pagination/TablePagination';
+import MsTablePagination from "metersphere-frontend/src/components/pagination/TablePagination";
 import MsTableHeader from "metersphere-frontend/src/components/MsTableHeader";
 import MsTableOperatorButton from "metersphere-frontend/src/components/MsTableOperatorButton";
 import MsTableOperator from "metersphere-frontend/src/components/MsTableOperator";
-import {TEST_PLAN_REPORT_CONFIGS} from "metersphere-frontend/src/components/search/search-components";
+import { TEST_PLAN_REPORT_CONFIGS } from "metersphere-frontend/src/components/search/search-components";
 import ReportTriggerModeItem from "metersphere-frontend/src/components/tableItem/ReportTriggerModeItem";
 import MsTag from "metersphere-frontend/src/components/MsTag";
 import ShowMoreBtn from "metersphere-frontend/src/components/table/ShowMoreBtn";
@@ -144,19 +182,20 @@ import {
   setUnSelectIds,
   toggleAllSelection,
   getCustomTableWidth,
-  getCustomTableHeader
+  getCustomTableHeader,
 } from "metersphere-frontend/src/utils/tableUtils";
 import MsTableHeaderSelectPopover from "metersphere-frontend/src/components/table/MsTableHeaderSelectPopover";
-import {getCurrentProjectID} from "metersphere-frontend/src/utils/token";
+import { getCurrentProjectID } from "metersphere-frontend/src/utils/token";
 import TestPlanDbReport from "@/business/report/components/TestPlanDbReport";
 import MsTable from "metersphere-frontend/src/components/table/MsTable";
 import MsTableColumn from "metersphere-frontend/src/components/table/MsTableColumn";
 import MsRenameReportDialog from "metersphere-frontend/src/components/report/MsRenameReportDialog";
 import {
   testPlanReportBatchDelete,
-  testPlanReportDelete, testPlanReportGetDb,
+  testPlanReportDelete,
+  testPlanReportGetDb,
   testPlanReportList,
-  testPlanReportReName
+  testPlanReportReName,
 } from "@/api/remote/plan/test-plan-report";
 
 export default {
@@ -164,12 +203,17 @@ export default {
   components: {
     TestPlanDbReport,
     MsTableHeaderSelectPopover,
-    MsTableOperator, MsTableOperatorButton, MsTableHeader, MsTablePagination,
-    ReportTriggerModeItem, MsTag,
-    ShowMoreBtn, MsTableSelectAll,
+    MsTableOperator,
+    MsTableOperatorButton,
+    MsTableHeader,
+    MsTablePagination,
+    ReportTriggerModeItem,
+    MsTag,
+    ShowMoreBtn,
+    MsTableSelectAll,
     MsTableColumn,
     MsTable,
-    MsRenameReportDialog
+    MsRenameReportDialog,
   },
   data() {
     return {
@@ -183,55 +227,69 @@ export default {
       pageSize: 10,
       isTestManagerOrTestUser: false,
       selectRows: new Set(),
-      screenHeight: 'calc(100vh - 200px)', //屏幕高度
+      screenHeight: "calc(100vh - 200px)", //屏幕高度
       total: 0,
       tableData: [],
       statusFilters: [
-        {text: this.$t('test_track.plan.plan_status_prepare'), value: 'Prepare'},
-        {text: this.$t('test_track.plan.plan_status_running'), value: 'Underway'},
-        {text: this.$t('test_track.plan.plan_status_completed'), value: 'Completed'}
+        {
+          text: this.$t("test_track.plan.plan_status_prepare"),
+          value: "Prepare",
+        },
+        {
+          text: this.$t("test_track.plan.plan_status_running"),
+          value: "Underway",
+        },
+        {
+          text: this.$t("test_track.plan.plan_status_completed"),
+          value: "Completed",
+        },
       ],
       stageFilters: [
-        {text: this.$t('test_track.plan.smoke_test'), value: 'smoke'},
-        {text: this.$t('test_track.plan.system_test'), value: 'system'},
-        {text: this.$t('test_track.plan.regression_test'), value: 'regression'},
+        { text: this.$t("test_track.plan.smoke_test"), value: "smoke" },
+        { text: this.$t("test_track.plan.system_test"), value: "system" },
+        {
+          text: this.$t("test_track.plan.regression_test"),
+          value: "regression",
+        },
       ],
       buttons: [
         {
-          name: this.$t('api_test.definition.request.batch_delete'),
+          name: this.$t("api_test.definition.request.batch_delete"),
           handleClick: this.handleDeleteBatch,
-          permissions: ['PROJECT_TRACK_REPORT:READ+DELETE']
+          permissions: ["PROJECT_TRACK_REPORT:READ+DELETE"],
         },
       ],
       selectDataCounts: 0,
 
-      fields: getCustomTableHeader('TRACK_REPORT_TABLE'),
-      fieldsWidth: getCustomTableWidth('TRACK_REPORT_TABLE'),
+      fields: getCustomTableHeader("TRACK_REPORT_TABLE"),
+      fieldsWidth: getCustomTableWidth("TRACK_REPORT_TABLE"),
       operators: [],
       batchButtons: [],
       publicButtons: [
         {
-          name: this.$t('api_test.definition.request.batch_delete'),
+          name: this.$t("api_test.definition.request.batch_delete"),
           handleClick: this.handleDeleteBatch,
-          permissions: ['PROJECT_TRACK_REPORT:READ+DELETE'],
+          permissions: ["PROJECT_TRACK_REPORT:READ+DELETE"],
         },
       ],
       simpleOperators: [
         {
-          tip: this.$t('test_track.plan_view.view_report'), icon: "el-icon-document",
+          tip: this.$t("test_track.plan_view.view_report"),
+          icon: "el-icon-document",
           exec: this.openReport,
         },
         {
-          tip: this.$t('commons.delete'), icon: "el-icon-delete", type: "danger",
+          tip: this.$t("commons.delete"),
+          icon: "el-icon-delete",
+          type: "danger",
           exec: this.handleDelete,
-          permissions: ['PROJECT_TRACK_REPORT:READ+DELETE']
+          permissions: ["PROJECT_TRACK_REPORT:READ+DELETE"],
         },
       ],
     };
   },
   watch: {
-    '$route'(to, from) {
-    }
+    $route(to, from) {},
   },
   activated() {
     this.init();
@@ -250,10 +308,9 @@ export default {
 
       // 通知过来的数据跳转到报告
       if (this.$route.query.resourceId) {
-        testPlanReportGetDb(this.$route.query.resourceId)
-          .then(response => {
-            this.$refs.dbReport.open(response.data);
-          });
+        testPlanReportGetDb(this.$route.query.resourceId).then((response) => {
+          this.$refs.dbReport.open(response.data);
+        });
       }
     },
     initTableData() {
@@ -272,44 +329,57 @@ export default {
       }
       this.condition.projectId = getCurrentProjectID();
       this.loading = true;
-      testPlanReportList({pageNum: this.currentPage, pageSize: this.pageSize}, this.condition)
-        .then(response => {
-          this.loading = false;
-          let data = response.data;
-          this.total = data.itemCount;
-          this.tableData = data.listObject;
-        });
+      testPlanReportList(
+        { pageNum: this.currentPage, pageSize: this.pageSize },
+        this.condition
+      ).then((response) => {
+        this.loading = false;
+        let data = response.data;
+        this.total = data.itemCount;
+        this.tableData = data.listObject;
+      });
     },
     handleSelect(selection, row) {
       _handleSelect(this, selection, row, this.selectRows);
       setUnSelectIds(this.tableData, this.condition, this.selectRows);
-      this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
+      this.selectDataCounts = getSelectDataCounts(
+        this.condition,
+        this.total,
+        this.selectRows
+      );
     },
     handleSelectAll(selection) {
       _handleSelectAll(this, selection, this.tableData, this.selectRows);
       setUnSelectIds(this.tableData, this.condition, this.selectRows);
-      this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
+      this.selectDataCounts = getSelectDataCounts(
+        this.condition,
+        this.total,
+        this.selectRows
+      );
     },
     handleDelete(testPlanReport) {
-      this.$alert(this.$t('report.delete_confirm') + ' ' + testPlanReport.name + " ？", '', {
-        confirmButtonText: this.$t('commons.confirm'),
-        callback: (action) => {
-          if (action === 'confirm') {
-            let testPlanReportIdList = [testPlanReport.id];
-            testPlanReportDelete(testPlanReportIdList)
-              .then(() => {
-                this.$success(this.$t('commons.delete_success'));
+      this.$alert(
+        this.$t("report.delete_confirm") + " " + testPlanReport.name + " ？",
+        "",
+        {
+          confirmButtonText: this.$t("commons.confirm"),
+          callback: (action) => {
+            if (action === "confirm") {
+              let testPlanReportIdList = [testPlanReport.id];
+              testPlanReportDelete(testPlanReportIdList).then(() => {
+                this.$success(this.$t("commons.delete_success"));
                 this.initTableData();
               });
-          }
+            }
+          },
         }
-      });
+      );
     },
     handleDeleteBatch() {
-      this.$alert(this.$t('report.delete_batch_confirm') + ' ' + " ？", '', {
-        confirmButtonText: this.$t('commons.confirm'),
+      this.$alert(this.$t("report.delete_batch_confirm") + " " + " ？", "", {
+        confirmButtonText: this.$t("commons.confirm"),
         callback: (action) => {
-          if (action === 'confirm') {
+          if (action === "confirm") {
             let deleteParam = {};
             let ids = this.$refs.testPlanReportTable.selectIds;
             deleteParam.dataIds = ids;
@@ -317,19 +387,18 @@ export default {
             deleteParam.selectAllDate = this.condition.selectAll;
             deleteParam.unSelectIds = this.condition.unSelection;
             deleteParam = Object.assign(deleteParam, this.condition);
-            testPlanReportBatchDelete(deleteParam)
-              .then(() => {
-                this.$success(this.$t('commons.delete_success'));
-                this.initTableData();
-                this.selectRows.clear();
-              });
+            testPlanReportBatchDelete(deleteParam).then(() => {
+              this.$success(this.$t("commons.delete_success"));
+              this.initTableData();
+              this.selectRows.clear();
+            });
           }
-        }
+        },
       });
     },
     getIds(rowSets) {
       let rowArray = Array.from(rowSets);
-      let ids = rowArray.map(s => s.id);
+      let ids = rowArray.map((s) => s.id);
       return ids;
     },
     filter(filters) {
@@ -357,13 +426,21 @@ export default {
     isSelectDataAll(data) {
       this.condition.selectAll = data;
       //设置勾选
-      toggleAllSelection(this.$refs.testPlanReportTable, this.tableData, this.selectRows);
+      toggleAllSelection(
+        this.$refs.testPlanReportTable,
+        this.tableData,
+        this.selectRows
+      );
       //显示隐藏菜单
       _handleSelectAll(this, this.tableData, this.tableData, this.selectRows);
       //设置未选择ID(更新)
       this.condition.unSelectIds = [];
       //更新统计信息
-      this.selectDataCounts = getSelectDataCounts(this.condition, this.total, this.selectRows);
+      this.selectDataCounts = getSelectDataCounts(
+        this.condition,
+        this.total,
+        this.selectRows
+      );
     },
     saveSortField(key, orders) {
       saveLastTableSortField(key, JSON.stringify(orders));
@@ -372,19 +449,17 @@ export default {
       this.$refs.renameDialog.open($event);
     },
     rename(data) {
-      testPlanReportReName(data)
-        .then(() => {
-          this.$success(this.$t("organization.integration.successful_operation"));
-          this.initTableData();
-          this.$refs.renameDialog.close();
-        });
-    }
-  }
+      testPlanReportReName(data).then(() => {
+        this.$success(this.$t("organization.integration.successful_operation"));
+        this.initTableData();
+        this.$refs.renameDialog.close();
+      });
+    },
+  },
 };
 </script>
 
 <style scoped>
-
 .table-page {
   padding-top: 20px;
   margin-right: -9px;
@@ -402,6 +477,6 @@ export default {
 
 .request-method {
   padding: 0 5px;
-  color: #1E90FF;
+  color: #1e90ff;
 }
 </style>