feat: 修改加载问题

src/views/worksheet/aside/Aside.vue

@@ -269,6 +269,7 @@ if (searchContent) {
   &-header {
     padding: 12px 16px;
     width: 100%;
+    display: table;
     overflow: hidden;
 
     .warpper {

src/views/worksheet/content/Content.vue

@@ -6,6 +6,7 @@ import { clone, cloneDeep, debounce, pickBy } from 'lodash-es'
 import { useDialog, useMessage } from 'naive-ui'
 import {
   computed,
+  nextTick,
   onMounted,
   onUnmounted,
   onUpdated,
@@ -37,6 +38,7 @@ const totalCount = ref(0)
 let _imagesload: any
 const bgLoadingImg = ref(bgLoading)
 const imgbigshow = ref(true)
+const isInitLoading = ref(0)
 
 function changeimgbigshow() {
   imgbigshow.value = !imgbigshow.value
@@ -132,23 +134,53 @@ function reset() {
 }
 async function refreshHandler() {
   reset()
-
+  // 暂时注释 start
+  // useInfiniteScroll(
+  //   el as any,
+  //   () => {
+  //     loadMore()
+  //   },
+  //   { distance: 10, canLoadMore: () => canloadMore },
+  // )
+  // 暂时注释 end
+  loadMore()
+  setTimeout(() => {
+    loadMore()
+    canloadMore = true
+  }, 1000)
+  nextTick(() => {
+    setTimeout(() => {
       useInfiniteScroll(
         el as any,
         () => {
+          console.log('加载更多lllllllllllllllll')
           loadMore()
         },
         { distance: 10, canLoadMore: () => canloadMore },
       )
+    }, 300)
+  })
 }
 
+useInfiniteScroll(
+  el as any,
+  () => {
+    console.log('加载更多lllllllllllllllll')
+    loadMore()
+  },
+  { distance: 10, canLoadMore: () => canloadMore },
+)
+
 async function loadMore() {
+  console.log('loading.value的加载更多', loading.value, el.value)
   if (loading.value || el.value == null)
     return
 
   const more = await featchList()
   listData.value.push(...more)
-  console.log('listData.value11111111111111111', listData.value)
+  loading.value = false
+  isInitLoading.value++
+  console.log('listData.value11111111111111111', listData.value, isInitLoading.value)
 }
 
 async function featchList() {
@@ -163,7 +195,7 @@ async function featchList() {
     })
 
     totalCount.value = total
-    canloadMore = pageCount >= taskpagination.pageNo && pageCount > 0
+    canloadMore = (pageCount >= taskpagination.pageNo && pageCount > 0 && isInitLoading.value > 1)
     return data
   }
   catch (error) {
@@ -175,19 +207,21 @@ async function featchList() {
 const layout = debounce(() => {
   if (el.value == null)
     return
-
-  _imagesload = imagesloaded('.grid-item')
-
-  _imagesload.on('done', (instance) => {
-    if (!el.value)
-      return
   loading.value = false
-  })
+  // 暂时注释 start
+  // _imagesload = imagesloaded('.grid-item')
 
-  _imagesload.on('fail', (instance) => {
-    message.error('图片错误')
-    loading.value = false
-  })
+  // _imagesload.on('done', (instance) => {
+  //   if (!el.value)
+  //     return
+  //   loading.value = false
+  // })
+
+  // _imagesload.on('fail', (instance) => {
+  //   message.error('图片错误')
+  //   loading.value = false
+  // })
+  // 暂时注释 end
 }, 300)
 
 const fullscreenStyles = computed<any>(() => ({
@@ -202,13 +236,17 @@ const fullscreenStyles = computed<any>(() => ({
 // 切换全屏状态
 function toggleFullScreen() {
   isFullScreen.value = !isFullScreen.value
-  if(!isFullScreen.value){
-    imgbigshow.value=true
-  }
+  if (!isFullScreen.value)
+    imgbigshow.value = true
 }
 
 onUpdated(() => {
-  layout()
+  // layout()
+  // nextTick(() => {
+  //   setTimeout(() => {
+  //     layout()
+  //   }, 500)
+  // })
 })
 
 watch(
@@ -635,6 +673,7 @@ defineExpose({
 
     <n-spin :show="loading">
       <div ref="el" class="scroll">
+        <!-- <div class="scroll"> -->
         <div class="wrapper-detail">
           <!-- 左侧大图 图片信息 -->
           <div
@@ -952,7 +991,8 @@ defineExpose({
 .fullscreen-container {
   /* 可添加其他样式 */
   width: 100vw;
-  height: 100vh;
+  // height: 100vh;
+  height: 100%;
   margin: 0px !important;
 }
 
@@ -966,9 +1006,15 @@ defineExpose({
   background: #fff;
   border-radius: 3px;
   border: 1px solid rgb(239, 239, 245);
-
+  :deep(.n-spin-container) {
+    height: calc(100% - 68px);
+  }
+  :deep(.n-spin-content) {
+    height: 100%;
+  }
   .scroll {
-    height: calc(100vh - 88px - 72px);
+    // height: calc(100vh - 88px - 72px);
+    height: 100%;
     overflow-y: scroll;
   }
 

src/views/worksheet/index.vue

@@ -1,18 +1,17 @@
 <script lang="ts" setup>
-import DataHeader from "@/components/DataHeader/index.vue";
-import { ref } from "vue";
-import Aside from "./aside/Aside.vue";
-import Content from "./content/Content.vue";
-import { useWorkOrder } from "@/store/modules/workOrder";
+import { ref } from 'vue'
+import Aside from './aside/Aside.vue'
+import Content from './content/Content.vue'
+import DataHeader from '@/components/DataHeader/index.vue'
+import { useWorkOrder } from '@/store/modules/workOrder'
 import Robot from '@/components/Robot/index.vue'
 
-
-const workStore = useWorkOrder();
-const contentRef: any = ref(null);
-const ApprovalOver = (packageId) => {
-  const id: string = workStore.getActiveId;
-  contentRef.value.queryDetail(id);
-};
+const workStore = useWorkOrder()
+const contentRef: any = ref(null)
+function ApprovalOver(packageId) {
+  const id: string = workStore.getActiveId
+  contentRef.value.queryDetail(id)
+}
 </script>
 
 <template>
@@ -22,7 +21,7 @@ const ApprovalOver = (packageId) => {
     </div>
     <div class="main">
       <!-- 侧边 -->
-      <Aside @ApprovalOver="ApprovalOver" />
+      <Aside @approval-over="ApprovalOver" />
 
       <!-- 内容 -->
       <Content ref="contentRef" />
@@ -41,9 +40,9 @@ const ApprovalOver = (packageId) => {
   flex-direction: row;
   box-sizing: border-box;
   width: 100%;
+  height: calc(100% - 170px);
 }
 :deep(.ip_box){
   z-index: 10;
 }
-
 </style>