fix: 工作流list展示在开启缩放会有误差导致触底逻辑不会触发

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 1.3.3
+
+**BUG FIX**
+
+- 工作流list展示在开启缩放会有误差导致触底逻辑不会触发
+
 # 1.3.2
 
 **REFACTOR**

apps/web-antd/src/views/workflow/task/allTaskWaiting.vue

@@ -28,6 +28,7 @@ import { categoryTree } from '#/api/workflow/category';
 import { pageByAllTaskFinish, pageByAllTaskWait } from '#/api/workflow/task';
 
 import { ApprovalCard, ApprovalPanel, CopyComponent } from '../components';
+import { bottomOffset } from './constant';
 
 const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
 
@@ -140,7 +141,9 @@ const handleScroll = debounce(async (e: Event) => {
   // e.target.scrollHeight 是元素的总高度。
   const { scrollTop, clientHeight, scrollHeight } = e.target as HTMLElement;
   // 判断是否滚动到底部
-  const isBottom = scrollTop + clientHeight >= scrollHeight;
+  const isBottom = scrollTop + clientHeight >= scrollHeight - bottomOffset;
+  console.log('scrollTop + clientHeight', scrollTop + clientHeight);
+  console.log('scrollHeight', scrollHeight);
 
   // 滚动到底部且没有加载完成
   if (isBottom && !isLoadComplete.value) {

apps/web-antd/src/views/workflow/task/constant.ts

@@ -0,0 +1,7 @@
+/**
+ * 底部偏移量
+ * 在缩放时会差大概0.5px 导致触底逻辑不会触发
+ * 在这里设置手动补偿
+ * @see https://gitee.com/dapppp/ruoyi-plus-vben5/issues/IC28RE#note_40175381
+ */
+export const bottomOffset = 2;

apps/web-antd/src/views/workflow/task/myDocument.vue

@@ -24,6 +24,7 @@ import { cloneDeep, debounce } from 'lodash-es';
 import { pageByCurrent } from '#/api/workflow/instance';
 
 import { ApprovalCard, ApprovalPanel } from '../components';
+import { bottomOffset } from './constant';
 
 const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
 
@@ -95,7 +96,7 @@ const handleScroll = debounce(async (e: Event) => {
   // e.target.scrollHeight 是元素的总高度。
   const { scrollTop, clientHeight, scrollHeight } = e.target as HTMLElement;
   // 判断是否滚动到底部
-  const isBottom = scrollTop + clientHeight >= scrollHeight;
+  const isBottom = scrollTop + clientHeight >= scrollHeight - bottomOffset;
 
   // 滚动到底部且没有加载完成
   if (isBottom && !isLoadComplete.value) {

apps/web-antd/src/views/workflow/task/taskCopyList.vue

@@ -26,6 +26,7 @@ import { categoryTree } from '#/api/workflow/category';
 import { pageByTaskCopy } from '#/api/workflow/task';
 
 import { ApprovalCard, ApprovalPanel, CopyComponent } from '../components';
+import { bottomOffset } from './constant';
 
 const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
 
@@ -99,7 +100,7 @@ const handleScroll = debounce(async (e: Event) => {
   // e.target.scrollHeight 是元素的总高度。
   const { scrollTop, clientHeight, scrollHeight } = e.target as HTMLElement;
   // 判断是否滚动到底部
-  const isBottom = scrollTop + clientHeight >= scrollHeight;
+  const isBottom = scrollTop + clientHeight >= scrollHeight - bottomOffset;
 
   // 滚动到底部且没有加载完成
   if (isBottom && !isLoadComplete.value) {

apps/web-antd/src/views/workflow/task/taskFinish.vue

@@ -26,6 +26,7 @@ import { categoryTree } from '#/api/workflow/category';
 import { pageByTaskFinish } from '#/api/workflow/task';
 
 import { ApprovalCard, ApprovalPanel, CopyComponent } from '../components';
+import { bottomOffset } from './constant';
 
 const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
 
@@ -99,7 +100,7 @@ const handleScroll = debounce(async (e: Event) => {
   // e.target.scrollHeight 是元素的总高度。
   const { scrollTop, clientHeight, scrollHeight } = e.target as HTMLElement;
   // 判断是否滚动到底部
-  const isBottom = scrollTop + clientHeight >= scrollHeight;
+  const isBottom = scrollTop + clientHeight >= scrollHeight - bottomOffset;
 
   // 滚动到底部且没有加载完成
   if (isBottom && !isLoadComplete.value) {

apps/web-antd/src/views/workflow/task/taskWaiting.vue

@@ -27,6 +27,7 @@ import { categoryTree } from '#/api/workflow/category';
 import { pageByTaskWait } from '#/api/workflow/task';
 
 import { ApprovalCard, ApprovalPanel, CopyComponent } from '../components';
+import { bottomOffset } from './constant';
 
 const emptyImage = Empty.PRESENTED_IMAGE_SIMPLE;
 
@@ -100,7 +101,7 @@ const handleScroll = debounce(async (e: Event) => {
   // e.target.scrollHeight 是元素的总高度。
   const { scrollTop, clientHeight, scrollHeight } = e.target as HTMLElement;
   // 判断是否滚动到底部
-  const isBottom = scrollTop + clientHeight >= scrollHeight;
+  const isBottom = scrollTop + clientHeight >= scrollHeight - bottomOffset;
 
   // 滚动到底部且没有加载完成
   if (isBottom && !isLoadComplete.value) {