Browse Source

fix: 修复收集统计详情上传组件图片缩略图渲染

old
PBK-B 4 years ago
parent
commit
42786f96f8
  1. 43
      src/views/form/statistics/item.vue

43
src/views/form/statistics/item.vue

@ -2,20 +2,33 @@
<div>
<div v-if="projectItemData.type=='UPLOAD'">
<div v-if="getItemValue['files']">
<el-link
v-for="file in getItemValue['files']"
<!-- 图片文件渲染图片栏 -->
<template v-if="getItemValue['type'] == 'image'">
<span v-for="file in getItemValue['files']" :key="JSON.stringify(file)">
<el-image class="item-thumbnail-image-preview" :src="file.url" :preview-src-list="getItemValue['files'].map( img => img.url)" lazy />
</span>
</template>
:key="file"
:href="file.url" target="_blank"
type="primary"
>
<span> {{ file.fileName }}</span>
</el-link>
<!-- 其他文件渲染文件下载链接 -->
<template v-else>
<el-link
v-for="file in getItemValue['files']"
:key="file"
:href="file.url" target="_blank"
type="primary"
>
<span> {{ file.fileName }}</span>
</el-link>
</template>
</div>
<span v-else>/</span>
</div>
<div v-else-if="projectItemData.type=='SIGN_PAD'">
<el-image class="item-thumbnail-image-preview" :src="getItemValue || ''" :preview-src-list="[getItemValue || '']" lazy />
</div>
<div v-else>
{{ getItemValue ? getItemValue : '/' }}
{{ getItemValue || '/' }}
</div>
</div>
</template>
@ -43,6 +56,7 @@ export default {
},
computed: {
processData() {
console.log('数据', this.projectItemData)
return this.resultData ? this.resultData['processData'] : {}
},
getItemValue() {
@ -53,3 +67,14 @@ export default {
}
</script>
<style scoped>
.item-thumbnail-image-preview {
width: 106px;
height: 106px;
margin-right: 15px;
margin-bottom: 15px;
border: 1px solid #EBEEF5;
background: #0001;
}
</style>

Loading…
Cancel
Save