1. 图片选择组件移动到全局组件文件夹 2. 涉及到使用图片选择组件添加图片区域loading 3. 无用页面删除

hcong

2024-11-21 87958d6d33603fa673cb7c8f5caf2394689959bf

 src/components/FYImageSelectDialog.vue

@@ -1,13 +1,12 @@
<template>
  <el-dialog
    :model-value="dialogVisible"
    @opened="$emit('update:dialogVisible', true)"
    @closed="$emit('update:dialogVisible', false)"
    @opened="handleOpen"
    @closed="handleClose"
    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 +29,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"
          >
@@ -41,13 +40,15 @@
          class="imgs"
        >
          <el-image
            v-loading="img.loading"
            v-for="(img, i) in typeImgMap.get(activeId)"
            :key="i"
            :class="[img.isSelect ? 'selected' : 'noActive', 'image']"
            fit="cover"
            :src="img.url"
            lazy
            @click="onSelect(img, i)"
            @load="onOneImgLoadSuccess(img)"
            @error="onOneImgLoadError(img)"
          />
        </el-scrollbar>
        <el-row v-else justify="space-between">
@@ -58,7 +59,7 @@
  </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue';
import { ref, watch, computed, onMounted, onUnmounted } from 'vue';

const props = defineProps({
  dialogVisible: Boolean,
@@ -96,6 +97,34 @@
// 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(img) {
  img.loading = false
  loadedImgCount.value++;
}
function onOneImgLoadSuccess(img) {
  img.loading = false
  loadedImgCount.value++;
}
watch(
  () => activeId.value,
  (nV, oV) => {
    loadedImgCount.value = 0;
  },
  { immediate: true }
);

function onSelect(img, i) {
  if (props.readonly) {
    return;
@@ -122,7 +151,28 @@
    img.isSelect = false;
  }
}

function handleOpen() {
  // if (props.typeImgMap.get(activeId.value) == undefined) {
  //     return;
  //   }
  //   props.typeImgMap.get(activeId.value).forEach((i) => {
  //     if (i.isSelect == true) {
  //       return;
  //     }
  //     props.defaultFile.forEach((imgItem) => {
  //       if (imgItem.url == i.url) {
  //         i.isSelect = true;
  //         selectedImgUrlList.value.push(i);
  //       }
  //     });
  //   });
  emit('update:dialogVisible', true)
}
function handleClose() {
  selectedImgUrlList.value.forEach(item => item.isSelect = false)
  selectedImgUrlList.value = []
  emit('update:dialogVisible', false)
}
function handleSubmit() {
  emit('submit', selectedImgUrlList.value);
  emit('update:dialogVisible', false);
@@ -142,27 +192,47 @@
  },
  { immediate: true }
);
// watch(
//   () => props.defaultFile,
//   (nV, oV) => {
//     if (props.typeImgMap.get(activeId.value) == undefined) {
//       return;
//     }
//     props.typeImgMap.get(activeId.value).forEach((i) => {
//       if (i.isSelect == true) {
//         return;
//       }
//       nV.forEach((imgItem) => {
//         if (imgItem.url == i.url) {
//           i.isSelect = true;
//           selectedImgUrlList.value.push(i);
//         }
//       });
//     });
//   },
//   { deep: true, immediate: true }
// );

watch(
  () => props.typeImgMap,
  (newMap, oldMap) => {
    if (newMap.get(activeId.value) == undefined) {
      return;
    }
    newMap.get(activeId.value).forEach((i) => {
      if (i.isSelect == true) {
        return;
      }
      props.defaultFile.forEach((imgItem) => {
        if (imgItem.url == i.url) {
          i.isSelect = true;
          selectedImgUrlList.value.push(i);
        }
      });
    });
  },
  { immediate: true }
);
// watch(
//   () => props.typeImgMap,
//   (newMap, oldMap) => {
//     if (newMap.get(activeId.value) == undefined) {
//       return;
//     }
//     newMap.get(activeId.value).forEach((i) => {
//       if (i.isSelect == true) {
//         return;
//       }
//       props.defaultFile.forEach((imgItem) => {
//         if (imgItem.url == i.url) {
//           i.isSelect = true;
//           selectedImgUrlList.value.push(i);
//         }
//       });
//     });
//   },
//   { immediate: true }
// );
</script>
<style scoped>
.center {
@@ -176,12 +246,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 +322,6 @@
}

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