From 0bd8b4947527f0d1a3fe445d84fb776ce021507e Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期四, 21 十一月 2024 10:59:56 +0800
Subject: [PATCH] 1. 修改问题整改界面中左侧列表的状态图标

---
 src/components/FYImageSelectDialog.vue |   46 +++++++++++++++++++++++++++++++++++++---------
 1 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/components/FYImageSelectDialog.vue b/src/components/FYImageSelectDialog.vue
index 744b866..279ddca 100644
--- a/src/components/FYImageSelectDialog.vue
+++ b/src/components/FYImageSelectDialog.vue
@@ -1,13 +1,13 @@
 <template>
   <el-dialog
+    :title="title"
     :model-value="dialogVisible"
     @opened="$emit('update:dialogVisible', true)"
     @closed="$emit('update:dialogVisible', false)"
     width="66%"
-    title="浠绘剰鍥剧墖"
     destroy-on-close
   >
-    <div class="main">
+    <div class="main" v-loading="loading">
       <el-row justify="end" v-if="!readonly">
         <el-text size="small" type="info" class="m-r-8"
           >鏈�澶氶�夋嫨{{ maxSelect }}寮犲浘鐗�</el-text
@@ -30,7 +30,7 @@
             v-for="item in typeList"
             :key="item.typeId"
             :label="
-              item.typeName + ' (' + typeImgMap.get(activeId).length + ')'
+              item.typeName + ' (' + typeImgMap.get(item.typeId).length + ')'
             "
             :name="item.typeId"
           >
@@ -46,8 +46,9 @@
             :class="[img.isSelect ? 'selected' : 'noActive', 'image']"
             fit="cover"
             :src="img.url"
-            lazy
             @click="onSelect(img, i)"
+            @load="onOneImgLoadSuccess"
+            @error="onOneImgLoadError"
           />
         </el-scrollbar>
         <el-row v-else justify="space-between">
@@ -58,9 +59,11 @@
   </el-dialog>
 </template>
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 
 const props = defineProps({
+  // 鏍囬
+  title: String,
   dialogVisible: Boolean,
   /**
    * 鍥剧墖鍒嗙被
@@ -95,6 +98,32 @@
 const activeId = ref('');
 // const typeImgMap = ref(new Map());
 const selectedImgUrlList = ref([]);
+
+let loadedImgCount = ref(0);
+// 鍔犺浇鐘舵��
+const loading = computed(() => {
+  if (activeId.value == '') {
+    return false;
+  }
+  // 淇濊瘉鏈�寮�濮嬫槸鍔犺浇鐘舵�侊紝涓夊垎涔嬩竴鍔犺浇涔嬪悗鍋滄灞曠ず鍔犺浇鐘舵��
+  return !(
+    props.typeImgMap.get(activeId.value).length / 3 <=
+    loadedImgCount.value
+  );
+});
+function onOneImgLoadError(e) {
+  loadedImgCount.value++;
+}
+function onOneImgLoadSuccess(e) {
+  loadedImgCount.value++;
+}
+watch(
+  () => activeId.value,
+  (nV, oV) => {
+    loadedImgCount.value = 0;
+  },
+  { immediate: true }
+);
 
 function onSelect(img, i) {
   if (props.readonly) {
@@ -161,7 +190,7 @@
       });
     });
   },
-  { immediate: true }
+  { deep: true, immediate: true }
 );
 </script>
 <style scoped>
@@ -176,12 +205,12 @@
 
 .main {
   margin: 0 auto; /* 浣跨埗鍏冪礌灞呬腑 */
-  height: 100%;
+  height: 72vh;
   width: 100%;
 }
 
 .imgs {
-  height: 50vh;
+  height: 60vh;
   width: 100%;
   min-height: 100px !important;
   /* border-style:solid;
@@ -252,7 +281,6 @@
 }
 
 ::v-deep .el-dialog__body {
-  height: 60vh;
   padding: 10px calc(var(--el-dialog-padding-primary) + 10px) !important;
 }
 </style>

--
Gitblit v1.9.3