From 701447950880f09520e802ef72bb81e2356749d8 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 26 十一月 2024 14:11:58 +0800
Subject: [PATCH] Merge branch 'hc-dataproduct-1121' into lsf-dataproduct-1024
---
src/components/FYImageSelectDialog.vue | 189 ++++++++++++++++++++++++++++------------------
1 files changed, 115 insertions(+), 74 deletions(-)
diff --git a/src/components/FYImageSelectDialog.vue b/src/components/FYImageSelectDialog.vue
index 99397d4..04bc1b3 100644
--- a/src/components/FYImageSelectDialog.vue
+++ b/src/components/FYImageSelectDialog.vue
@@ -1,64 +1,71 @@
<template>
<el-dialog
:model-value="dialogVisible"
- @opened="$emit('update:dialogVisible', true)"
- @closed="$emit('update:dialogVisible', false)"
- width="66%"
+ @opened="handleOpen"
+ @closed="handleClose"
+ top="5vh"
+ width="68%"
destroy-on-close
+ :close-on-press-escape="false"
>
- <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
- >
- <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"
>
<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"
+ :preview-src-list="readonly ? typeImgMap.get(activeId).map((v) => v.url) : []"
+ :initial-index="i"
@click="onSelect(img, i)"
- @load="onOneImgLoadSuccess"
- @error="onOneImgLoadError"
+ @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>
-import { ref, watch, computed } from 'vue';
+import { ref, watch, computed, onMounted, onUnmounted } from 'vue';
const props = defineProps({
dialogVisible: Boolean,
@@ -108,10 +115,12 @@
loadedImgCount.value
);
});
-function onOneImgLoadError(e) {
+function onOneImgLoadError(img) {
+ img.loading = false;
loadedImgCount.value++;
}
-function onOneImgLoadSuccess(e) {
+function onOneImgLoadSuccess(img) {
+ img.loading = false;
loadedImgCount.value++;
}
watch(
@@ -148,7 +157,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);
@@ -168,27 +198,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);
- }
- });
- });
- },
- { 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 }
+// );
</script>
<style scoped>
.center {
@@ -201,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%; */
@@ -223,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 {
--
Gitblit v1.9.3