1. 修改问题整改界面中左侧列表的状态图标

riku

2024-11-21 0bd8b4947527f0d1a3fe445d84fb776ce021507e

 src/components/FYImageSelectDialog.vue

@@ -1,12 +1,13 @@
<template>
  <el-dialog
    :title="title"
    :model-value="dialogVisible"
    @opened="$emit('update:dialogVisible', true)"
    @closed="$emit('update:dialogVisible', false)"
    width="66%"
    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
@@ -45,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">
@@ -57,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,
  /**
   * 图片分类
@@ -94,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) {
@@ -160,7 +190,7 @@
      });
    });
  },
  { immediate: true }
  { deep: true, immediate: true }
);
</script>
<style scoped>
@@ -175,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;
@@ -251,7 +281,6 @@
}

::v-deep .el-dialog__body {
  height: 60vh;
  padding: 10px calc(var(--el-dialog-padding-primary) + 10px) !important;
}
</style>