<template>
|
<el-dialog
|
v-model="anyPhotoDialog"
|
width="66%"
|
title="任意图片"
|
destroy-on-close
|
>
|
<div class="main">
|
<el-row justify="end" class="btns" v-if="!readonly">
|
<el-text size="small" type="info" class="m-r-8"
|
>最多选择{{ maxSelect }}张图片</el-text
|
>
|
<el-button
|
size="small"
|
type="primary"
|
@click="sendSelectedImg(true)"
|
:disabled="selectedImgUrlList.length == 0"
|
>确定</el-button
|
>
|
<el-button size="small" type="primary" @click="sendSelectedImg(false)"
|
>取消</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(activeId).length + ')'
|
"
|
:name="item.typeId"
|
>
|
</el-tab-pane>
|
</el-tabs>
|
<el-empty v-if="isEmpty" description="暂无记录" />
|
<el-scrollbar class="imgs">
|
<el-image
|
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)"
|
/>
|
</el-scrollbar>
|
</div>
|
</div>
|
</el-dialog>
|
</template>
|
<script setup>
|
import { ref, watch } from 'vue';
|
|
const props = defineProps({
|
typeList: {
|
type: Array,
|
default: () => []
|
},
|
// 是否以只读的形式查看当前页面
|
readonly: {
|
type: Boolean,
|
default: false
|
},
|
defaultFile: {
|
type: Array,
|
default: () => []
|
},
|
// 图片可选数量，当传入数字时，代表图片数量
|
maxSelect: {
|
type: Number,
|
default: 3
|
}
|
});
|
|
const activeId = ref('');
|
const typeImgMap = ref(new Map());
|
const selectedImgList = ref([]);
|
|
watch(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;
|
}
|
});
|
},
|
{ deep: true }
|
);
|
});
|
</script>
|
