supervision-vue.git

			@@ -6,7 +6,7 @@
			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 +45,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,7 +58,7 @@
			</el-dialog>
			</template>
			<script setup>
			import { ref, watch } from 'vue';
			import { ref, watch, computed } from 'vue';

			const props = defineProps({
			dialogVisible: Boolean,
			@@ -94,6 +95,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 +187,7 @@
			});
			});
			},
			{ immediate: true }
			{ deep: true, immediate: true }
			);
			</script>
			<style scoped>
			@@ -175,12 +202,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 +278,6 @@
			}

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