1. 修复上传问题或整改图片后，界面更新错误问题； 2. 优化问题整改界面展示效果； 3. 场景图片对话框添加查看状态下可以点击图片放大功能

riku

2024-11-22 d28223384922de5fb08c20516eb3f99981c8136a

 src/components/FYImageSelectDialog.vue

@@ -3,39 +3,42 @@
    :model-value="dialogVisible"
    @opened="handleOpen"
    @closed="handleClose"
    width="66%"
    top="5vh"
    width="68%"
    destroy-on-close
    :close-on-press-escape="false"
  >
    <div class="main">
      <el-row justify="end" v-if="!readonly">
        <el-text size="small" type="info" class="m-r-8"
          >最多选择{{ maxSelect }}张图片</el-text
        >
        <el-button
          size="small"
          type="primary"
          @click="handleSubmit"
          :disabled="selectedImgUrlList.length == 0"
          >确定</el-button
        >
        <el-button size="small" type="primary" @click="handleCancel"
          >取消</el-button
        >
      </el-row>
    <!-- <div class="main"> -->
    <el-row justify="end" v-if="!readonly">
      <el-text size="small" type="info" class="m-r-8"
        >最多选择{{ maxSelect }}张图片</el-text
      >
      <el-button
        size="small"
        type="primary"
        @click="handleSubmit"
        :disabled="selectedImgUrlList.length == 0"
        >确定</el-button
      >
      <el-button size="small" type="primary" @click="handleCancel"
        >取消</el-button
      >
    </el-row>

      <div class="center">
        <el-tabs v-if="typeList.length > 0" v-model="activeId" type="card">
          <el-tab-pane
            v-for="item in typeList"
            :key="item.typeId"
            :label="
              item.typeName + ' (' + typeImgMap.get(item.typeId).length + ')'
            "
            :name="item.typeId"
          >
          </el-tab-pane>
        </el-tabs>
        <el-scrollbar
    <div class="center">
      <el-tabs v-if="typeList.length > 0" v-model="activeId" type="card">
        <el-tab-pane
          v-for="item in typeList"
          :key="item.typeId"
          :label="
            item.typeName + ' (' + typeImgMap.get(item.typeId).length + ')'
          "
          :name="item.typeId"
        >
        </el-tab-pane>
      </el-tabs>
      <el-scrollbar height="70vh">
        <div
          v-if="typeImgMap.get(activeId) && typeImgMap.get(activeId).length > 0"
          class="imgs"
        >
@@ -46,16 +49,19 @@
            :class="[img.isSelect ? 'selected' : 'noActive', 'image']"
            fit="cover"
            :src="img.url"
            :preview-src-list="readonly ? typeImgMap.get(activeId).map((v) => v.url) : []"
            :initial-index="i"
            @click="onSelect(img, i)"
            @load="onOneImgLoadSuccess(img)"
            @error="onOneImgLoadError(img)"
          />
        </el-scrollbar>
        </div>
        <el-row v-else justify="space-between">
          <el-empty description="暂无记录" />
        </el-row>
      </div>
      </el-scrollbar>
    </div>
    <!-- </div> -->
  </el-dialog>
</template>
<script setup>
@@ -110,11 +116,11 @@
  );
});
function onOneImgLoadError(img) {
  img.loading = false
  img.loading = false;
  loadedImgCount.value++;
}
function onOneImgLoadSuccess(img) {
  img.loading = false
  img.loading = false;
  loadedImgCount.value++;
}
watch(
@@ -166,12 +172,12 @@
  //       }
  //     });
  //   });
  emit('update:dialogVisible', true)
  emit('update:dialogVisible', true);
}
function handleClose() {
  selectedImgUrlList.value.forEach(item => item.isSelect = false)
  selectedImgUrlList.value = []
  emit('update:dialogVisible', false)
  selectedImgUrlList.value.forEach((item) => (item.isSelect = false));
  selectedImgUrlList.value = [];
  emit('update:dialogVisible', false);
}
function handleSubmit() {
  emit('submit', selectedImgUrlList.value);
@@ -245,15 +251,13 @@
}

.main {
  margin: 0 auto; /* 使父元素居中 */
  height: 72vh;
  width: 100%;
  /* 使父元素居中 */
  /* margin: 0 auto;  */
  /* width: 100%; */
}

.imgs {
  height: 60vh;
  width: 100%;
  min-height: 100px !important;
  /* border-style:solid;
    border-radius: 1px; */
  /* height: 100%; */
@@ -267,16 +271,9 @@

.image {
  margin: 5px;
  height: 210px;
  width: 200px;
  height: 250px;
  width: 240px;
  border-radius: 4px;
}

.active {
  padding: 5px;
  width: 20%;
  height: 200px;
  border: 0.5rem outset rgb(52, 155, 4);
}

.selected {