tduck-front/src/views/form/statistics/item.vue

<template>
    <div>
        <div v-if="projectItemData.type=='UPLOAD'">
            <div v-if="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>

                <!-- 其他文件渲染文件下载链接 -->
                <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 || '/' }}
        </div>
    </div>
</template>

<script>
export default {
    name: 'ResultItem',
    props: {
        projectItemData: {
            type: Object,
            default: function() {
                return {}
            }
        },
        resultData: {
            type: Object,
            default: function() {
                return {}
            }
        },
        fieldItemId: {
            type: Number,
            default: 0
        }
    },
    computed: {
        processData() {
            console.log('数据', this.projectItemData)
            return this.resultData ? this.resultData['processData'] : {}
        },
        getItemValue() {
            if (this.processData[`field${this.fieldItemId}other`]) {
                // 如果存在其他的内容，返回lable+内容
                return this.processData[`field${this.fieldItemId}`] + ':' + this.processData[`field${this.fieldItemId}other`]
            }
            if (this.projectItemData.type === 'INPUT_MAP') {
              // let _value = this.processData[`field${this.fieldItemId}`][2]
              return this.processData[`field${this.fieldItemId}`] ? this.processData[`field${this.fieldItemId}`][2] : ''
            }
            if (this.projectItemData.type === 'PROVINCE_CITY') {
              return this.processData[`field${this.fieldItemId}`] ? this.processData[`field${this.fieldItemId}`].join('-'): ''
            }
            if (this.projectItemData.type === 'CASCADER') {
              let arr = this.processData[`field${this.fieldItemId}`] ? this.processData[`field${this.fieldItemId}`] : []
              if (arr && arr.length > 0) {
                arr = arr.map(item => {
                  return item.pathName.split('/').join('-')
                })
              }
              return arr.length > 0 ? arr.join('，') : ''
            }
            return this.processData[`field${this.fieldItemId}`] ? this.processData[`field${this.fieldItemId}`] : ''
        }
    }

}
</script>

<style scoped>
.item-thumbnail-image-preview {
  width: 106px;
  height: 106px;
  margin-right: 15px;
  margin-bottom: 15px;
  border: 1px solid #EBEEF5;
  background: #0001;
}

</style>