refactor: 勾选批量操作提示

frontend/src/business/components/common/components/table/MsTable.vue

@@ -29,12 +29,16 @@
                        :resizable="false" align="center">
         <template v-slot:default="scope">
           <!-- 选中记录后浮现的按钮，提供对记录的批量操作 -->
-          <show-more-btn :is-show-tool="scope.row.showTool" :is-show="scope.row.showMore" :buttons="batchOperators"
+          <show-more-btn :has-showed="hasBatchTipShow" :is-show="scope.row.showMore" :buttons="batchOperators"
                          :size="selectDataCounts"/>
         </template>
       </el-table-column>
 
-      <el-table-column width="1"/>
+      <el-table-column width="1">
+        <template v-slot:header>
+          <span class="table-column-mark">&nbsp;</span>
+        </template>
+      </el-table-column>
       <slot></slot>
 
       <el-table-column
@@ -109,7 +113,8 @@ export default {
       selectDataCounts: 0,
       selectRows: new Set(),
       selectIds: [],
-      tableActive: true
+      tableActive: true,
+      hasBatchTipShow: false
     };
   },
   props: {
@@ -200,6 +205,36 @@ export default {
     },
   },
   methods: {
+    // 批量操作提示, 第一次勾选提示, 之后不提示
+    // 先添加 batch-popper 样式, 全选后再移除样式, 只保留可见框内第一条数据的提示
+    removeBatchPopper() {
+      let elements = window.document.getElementsByClassName('batch-popper');
+      let tableHeader = window.document.getElementsByClassName('table-column-mark');
+      let columns = window.document.getElementsByClassName('table-more-icon');
+      let tableTop = tableHeader[0].getBoundingClientRect().top;
+      let index = 0;
+      for (let i = 0; i < columns.length; i++) {
+        let column = columns[i];
+        if (this.isScrollShow(column, tableTop)) {
+          index = i;
+          break;
+        }
+      }
+      if (elements) {
+        for (let i = 0; i < elements.length; i++) {
+          if (i == index) {
+            elements[i].classList.remove('batch-popper');
+            setTimeout(() => {
+              this.hasBatchTipShow = true;
+            }, 1500);
+          }
+        }
+      }
+    },
+    isScrollShow(column, tableTop){  //判断元素是否因为超过表头
+      let columnTop = column.getBoundingClientRect().top;
+      return columnTop - tableTop > 30;
+    },
     handleSelectAll(selection) {
       _handleSelectAll(this, selection, this.data, this.selectRows, this.condition);
       setUnSelectIds(this.data, this.condition, this.selectRows);
@@ -207,6 +242,9 @@ export default {
       this.selectIds = Array.from(this.selectRows).map(o => o.id);
       //有的组件需要回调父组件的函数，做下一步处理
       this.$emit('callBackSelectAll',selection);
+      this.$nextTick(function () {
+        setTimeout(this.removeBatchPopper, 1);
+      });
     },
     handleSelect(selection, row) {
       _handleSelect(this, selection, row, this.selectRows);
@@ -215,6 +253,9 @@ export default {
       this.selectIds = Array.from(this.selectRows).map(o => o.id);
       //有的组件需要回调父组件的函数，做下一步处理
       this.$emit('callBackSelect',selection);
+      this.$nextTick(function () {
+        setTimeout(this.removeBatchPopper, 1);
+      });
     },
     isSelectDataAll(data) {
       this.condition.selectAll = data;
@@ -322,5 +363,8 @@ export default {
 </script>
 
 <style scoped>
-
+.batch-popper {
+  top: 300px;
+  color: #1FDD02;
+}
 </style>

frontend/src/business/components/track/case/components/ShowMoreBtn.vue

@@ -2,7 +2,10 @@
   <div v-if="isShow">
     <el-dropdown placement="bottom" trigger="click" size="medium">
       <div @click.stop class="show-more-btn">
-          <i class="el-icon-more ms-icon-more"/>
+        <el-tooltip popper-class="batch-popper" :value="true && !hasShowed" effect="dark" :content="$t('test_track.case.batch_operate')"
+                    placement="top-start">
+          <i class="el-icon-more ms-icon-more table-more-icon"/>
+        </el-tooltip>
       </div>
       <el-dropdown-menu slot="dropdown" class="dropdown-menu-class">
         <div class="show-more-btn-title">{{$t('test_track.case.batch_handle', [size])}}</div>
@@ -22,7 +25,6 @@
     data() {
       return {
         disabled: false,
-        showTool: false
       };
     },
     props: {
@@ -30,23 +32,10 @@
         type: Boolean,
         default: false
       },
-      isShowTool: {
-        type: Boolean,
-        default: false
-      },
       buttons: Array,
       row: Object,
-      size: Number
-    },
-    watch: {
-      isShowTool(val) {
-        if (val) {
-          this.showTool = val;
-          setTimeout(() => {
-            this.showTool = false;
-          }, 1000);
-        }
-      }
+      size: Number,
+      hasShowed: Object
     },
     created() {
       if (this.trashEnable) {
@@ -91,3 +80,8 @@
     text-align: center;
   }
 </style>
+<style>
+.batch-popper {
+  top: -10000px !important;
+}
+</style>

frontend/src/common/js/tableUtils.js

@@ -7,19 +7,13 @@ export function _handleSelectAll(component, selection, tableData, selectRows, co
   if (selection.length > 0) {
     if (selection.length === 1) {
       selection.hashTree = [];
-      tableData.forEach((item, index) => {
-        if (index === 0) {
-          component.$set(item, "showTool", true);
-        }
+      tableData.forEach((item) => {
         component.$set(item, "showMore", true);
         selectRows.add(item);
       });
     } else {
-      tableData.forEach((item, index) => {
+      tableData.forEach((item) => {
         item.hashTree = [];
-        if (index === 0) {
-          component.$set(item, "showTool", true);
-        }
         component.$set(item, "showMore", true);
         selectRows.add(item);
       });
@@ -27,7 +21,6 @@ export function _handleSelectAll(component, selection, tableData, selectRows, co
   } else {
     selectRows.clear();
     tableData.forEach(item => {
-      component.$set(item, "showTool", false);
       component.$set(item, "showMore", false);
     });
     if (condition) {
@@ -39,17 +32,14 @@ export function _handleSelectAll(component, selection, tableData, selectRows, co
 export function _handleSelect(component, selection, row, selectRows) {
   row.hashTree = [];
   if (selectRows.has(row)) {
-    component.$set(row, "showTool", false);
     component.$set(row, "showMore", false);
     selectRows.delete(row);
   } else {
-    component.$set(row, "showTool", true);
     component.$set(row, "showMore", true);
     selectRows.add(row);
   }
   let arr = Array.from(selectRows);
   arr.forEach(row => {
-    component.$set(row, "showTool", true);
     component.$set(row, "showMore", true);
   });
 }