表单发布后图片和视频如果上传多个后显示错误问题

dianlixunjian
Zhufu 2024-06-27 16:19:07 +08:00
parent e2ed81cd24
commit dc24b03ee7
1 changed files with 36 additions and 16 deletions

View File

@ -13,14 +13,19 @@
<template v-for="(item, index) in tab.children" :key="index">
<template v-if="item.infoShowValue">
<a-descriptions-item v-if="item.component === 'ImageUpload'" :label="item.label">
<a-image
width="100px"
height="100px"
:src="`${item.componentProps.server}/${item.infoShowValue}`"
></a-image>
<template v-for="(imageItem, imageIndex) in item.infoShowValue" :key="imageIndex">
<a-image
v-if="imageItem"
width="100px"
height="100px"
:src="`${item.componentProps.server}/${imageItem}`"
></a-image>
</template>
</a-descriptions-item>
<a-descriptions-item v-else-if="item.component === 'VideoUpload'" :label="item.label">
<img style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item)" alt="">
<template v-for="(videoItem, videoIndex) in item.infoShowValue" :key="videoIndex">
<img v-if="videoItem" style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item, videoItem)" alt="">
</template>
</a-descriptions-item>
<a-descriptions-item v-else :label="item.label">
<div>{{ item.infoShowValue}}</div>
@ -43,14 +48,19 @@
<template v-for="(item, index) in showList" :key="index">
<template v-if="item.infoShowValue">
<a-descriptions-item v-if="item.component === 'ImageUpload'" :label="item.label">
<a-image
width="100px"
height="100px"
:src="`${item.componentProps.server}/${item.infoShowValue}`"
></a-image>
<template v-for="(imageItem, imageIndex) in item.infoShowValue" :key="imageIndex" >
<a-image
v-if="imageItem"
width="100px"
height="100px"
:src="`${item.componentProps.server}/${imageItem}`"
></a-image>
</template>
</a-descriptions-item>
<a-descriptions-item v-else-if="item.component === 'VideoUpload'" :label="item.label">
<img style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item)" alt="">
<template v-for="(videoItem, videoIndex) in item.infoShowValue" :key="videoIndex">
<img v-if="videoItem" style="width: 100px; height: 100px; cursor: pointer;" src="./video.png" @click="handlePreview(item,videoItem)" alt="">
</template>
</a-descriptions-item>
<a-descriptions-item v-else :label="item.label">{{ item.infoShowValue }}</a-descriptions-item>
</template>
@ -80,7 +90,6 @@ const columns = ref([])
onMounted(() => {
console.log('props.data',props.data)
props.data.tab.forEach(item => {
console.log('item',item)
if(item.component === 'Tabs'){
haveTab.value = true
item.componentProps.options.forEach((tab, tabIndex) => {
@ -113,6 +122,11 @@ onMounted(() => {
...childItem,
infoShowValue: getOptionLabel(childItem)
})
}else if(['ImageUpload','VideoUpload'].includes(item.component)){
showList.value[tabIndex].children.push({
...childItem,
infoShowValue: props.data.infoUseMainTableData[childItem.field]? props.data.infoUseMainTableData[childItem.field].split(','): null
})
}else if(childItem.component !== 'InputGuid'){
showList.value[tabIndex].children.push({
...childItem,
@ -155,6 +169,11 @@ onMounted(() => {
key: child.field,
})
})
}else if(['ImageUpload','VideoUpload'].includes(item.component)){
showList.value.push({
...item,
infoShowValue: props.data.infoUseMainTableData[item.field]? props.data.infoUseMainTableData[item.field].split(','): null
})
}else if(item.component !== 'InputGuid'){
showList.value.push({
...item,
@ -222,12 +241,13 @@ const noTabsSetCardGroupItem = (item, index) => {
// columns.value = []
// subTableData.value = null
// }
const handlePreview = (item) => {
previewVideo.value = `${item.componentProps.server}/${item.infoShowValue}`;
const handlePreview = (item,videoItem) => {
previewVideo.value = `${item.componentProps.server}/${videoItem}`;
previewOpen.value = true;
previewTitle.value = item.infoShowValue
previewTitle.value = videoItem
};
const handleCancel = () => {
previewVideo.value = '';
previewOpen.value = false;
previewTitle.value = '';
};