feat: 修改加载问题

src/layout/components/Header/RecycleModal.vue

@@ -209,10 +209,11 @@ onUpdated(() => {
   else {
     removeDom()
   }
-  // if(elwc.value) {
-  //   on(elwc.value!, 'click', showjjj)
-  // }
-  layout()
+  nextTick(() => {
+    setTimeout(() => {
+      layout()
+    }, 50)
+  })
 })
 
 let start: { x: number, y: number } | null = null
@@ -739,6 +740,7 @@ watch(() => pagination.pageNo, (newVal, oldVal) => {
                     :class="{
                       'img-fit': viewMode === 'horizontalVersion',
                       'img-full': viewMode === '3:4' || viewMode === 'verticalVersion' }"
+                    :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
                   />
                   <n-checkbox
                     v-if="batch && item.historyStates === 1" v-model:checked="item.checked"

src/views/task/modal/BatchModal.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, nextTick, onMounted,onUnmounted, reactive, ref, watch } from 'vue'
+import { computed, nextTick, onMounted, onUnmounted, onUpdated, reactive, ref, watch } from 'vue'
 import Masonry from 'masonry-layout'
 import { useInfiniteScroll } from '@vueuse/core'
 import { debounce } from 'lodash-es'
@@ -14,6 +14,7 @@ import { TASK_STATUS_OBJ } from '@/enums/index'
 import { formatToDateHMS } from '@/utils/dateUtil'
 import { getSimilarityList, getTaskDetailInfo } from '@/api/task/task'
 import emitter from '@/utils/mitt'
+import bgLoading from '@/assets/images/bg-loading.png'
 
 const emit = defineEmits<{
   (e: 'reject', params: any)
@@ -25,6 +26,7 @@ const cardStyle = {
   '--n-padding-left': '120px',
 }
 
+const bgLoadingImg = ref(bgLoading)
 const totalCount = ref(0)
 const timeRange = ref('all')
 const taskId = ref('')
@@ -257,7 +259,7 @@ onMounted(() => {
   show.value && addListeners()
   window.addEventListener('keydown', handleKeydown)
 })
-onUnmounted(()=>{
+onUnmounted(() => {
   window.removeEventListener('keydown', handleKeydown)
 })
 // 键盘左右箭头快捷切换
@@ -349,7 +351,7 @@ async function refreshHandler() {
   if (!taskId.value)
     return
   const taskPackage = taskStore.getApprovalList[taskStore.getCurrentIndex] || {}
-  taskDetailInfo.value = await getTaskDetailInfo(taskId.value, taskPackage.packageid,taskPackage?.taskIndex || '')
+  taskDetailInfo.value = await getTaskDetailInfo(taskId.value, taskPackage.packageid, taskPackage?.taskIndex || '')
 
   nextTick(() => {
     setTimeout(() => {
@@ -412,6 +414,14 @@ defineExpose({
   reload,
   closeModal,
 })
+
+onUpdated(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      layout()
+    }, 50)
+  })
+})
 </script>
 
 <template>
@@ -555,6 +565,8 @@ defineExpose({
                       }"
 
                       :src="item.serverThumbnailUrl ? item.serverThumbnailUrl : item.imgUrl"
+                      :fallback-src="bgLoadingImg"
+                      :style="{ backgroundImage: `url(${loading ? bgLoadingImg : 'none'})` }"
                     />
                     <div class="small-mark" />
                     <div class="time">