表单发布后图片和视频如果上传多个后显示错误问题
parent
e2ed81cd24
commit
dc24b03ee7
|
|
@ -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 = '';
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue