feat: 照片墙组件封装完成

src/views/worksheet/components/PictureWall.vue

@@ -1,3 +1,10 @@
+<!-- 使用示例 -->
+<!-- 
+<n-spin :show="loading">
+  <div ref="el" class="scroll"></div>
+  <PictureWall :taskDetailInfo="taskDetailInfo" :loading="loading" :el="el" @toggle="toggleLoading"></PictureWall>
+</n-spin> 
+-->
 <script lang="ts" setup>
 import { audit } from '@/api/task/task';
 import {
@@ -21,8 +28,21 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  el: {
+    type: Object as () => HTMLDivElement | null,
+    default: () => (null),
+  },
+  loading: {
+    type: Boolean,
+    default: () => (false),
+  },
 });
-const { taskDetailInfo } = toRefs(props)
+
+const emit = defineEmits<{
+  (e: 'toggle', loading: boolean)
+}>()
+
+const { taskDetailInfo, el, loading } = toRefs(props)
 
 const batch = ref(false); // 批量审批状态
 const selectItems = ref<any[]>([]);
@@ -65,12 +85,9 @@ const selectTask = ref<any>(null);
 const overTask = ref<any>(null);
 const confrimModalRef = ref(null);
 const listData = ref<any[]>([]);
-const loading = ref(false);
-const el = ref<HTMLDivElement | null>(null);
 const selectedSortName = ref('');
 const notPassModalRef = ref(null)
-
-let canloadMore = true;
+const canLoadMore = ref(true);
 
 let processItems: any[] = [];
 
@@ -84,41 +101,44 @@ function reset() {
   taskpagination.pageNo = 0;
   taskpagination.pageSize = 20;
   listData.value.length = 0;
-  loading.value = false;
-  canloadMore = true;
+  emit('toggle', false)
+  canLoadMore.value = true;
 }
 
 async function refreshHandler() {
   reset();
+  console.log('refreshHandler')
   useInfiniteScroll(
     el as any,
     () => {
-
+      console.log(el)
+      console.log(11111111)
       loadMore();
     },
-    { distance: 10, canLoadMore: () => canloadMore }
+    { distance: 10, interval: 1500, canLoadMore: () => canLoadMore.value }
   );
 }
 
 async function loadMore() {
   if (loading.value || el.value == null) return;
-  const more = await featchList();
-  listData.value.push(...more);
+    const more = await fetchList();
+    listData.value.push(...more);
 }
 
-async function featchList() {
-  loading.value = true;
+async function fetchList() {
+  console.log(3333)
+  emit('toggle', true)
   try {
     taskpagination.pageNo += 1;
     const { data, total, pageCount } = await getPictureSimilarityList(
       { ...taskpagination, ...sortBy, checkDuplicateId: workStore.activeId, pictureId: taskDetailInfo.value.id }
     );
     totalCount.value = total;
-    canloadMore = pageCount >= taskpagination.pageNo && pageCount > 0;
+    canLoadMore.value = pageCount >= taskpagination.pageNo && pageCount > 0;
 
     return data;
   } catch (error) {
-    canloadMore = false;
+    canLoadMore.value = false;
     return [];
   }
 }
@@ -130,12 +150,12 @@ const layout = debounce(() => {
 
   _imagesload.on("done", (instance) => {
     if (!el.value) return;
-    loading.value = false;
+    emit('toggle', false)
   });
 
   _imagesload.on("fail", (instance) => {
     message.error("图片错误");
-    loading.value = false;
+    emit('toggle', false)
   });
 }, 300);
 
@@ -149,9 +169,7 @@ watch(
         totalCount.value = 0;
         return;
       }
-      reset();
-      const more = await featchList();
-      listData.value.push(...more);
+      refreshHandler()
     }
   }, { deep: true, immediate: true }
 );