<template>
|
<div class="imageData">
|
<el-card class="box-card" style="border:none">
|
<div class="images">
|
<p v-if="isShowTitle === 'Y'">
|
<!-- 标题 -->
|
<i v-if="fileInfo.required">*</i>
|
<!-- 是否必填 -->
|
{{ fileInfo.description }}
|
<span>{{ fileInfo.count ? `(${fileInfo.count}张)` : '' }}</span
|
><!-- 当前影像多少张 -->
|
</p>
|
<!-- -->
|
<div class="imagesList">
|
<!-- 包含所有图片的最外层 -->
|
<div
|
v-for="(file, i) in fileInfo.images"
|
:key="i"
|
v-show="
|
(fileInfo.images && fileInfo.images.length > 0 && i < 3) || isShow
|
"
|
>
|
<span
|
class="el-icon-error"
|
v-if="isUpload"
|
@click="handleDelete(file.attachmentno)"
|
></span>
|
<!-- 删除图片 -->
|
<img
|
src="@/assets/PDF.svg"
|
v-if="findFileType(file.filename) === 'PDF'"
|
alt
|
@click="handleImageClick(file)"
|
/>
|
<img
|
src="@/assets/excel.svg"
|
v-else-if="findFileType(file.filename) === 'XLSX' || findFileType(file.filename) === 'XLS'"
|
alt
|
@click="handleImageClick(file)"
|
/>
|
<img
|
src="@/assets/ppt.svg"
|
v-else-if="findFileType(file.filename) === 'PPTX' || findFileType(file.filename) === 'PPT'"
|
alt
|
@click="handleImageClick(file)"
|
/>
|
<img
|
src="@/assets/word.svg"
|
v-else-if="findFileType(file.filename) === 'DOCX' || findFileType(file.filename) === 'DOC'"
|
alt
|
@click="handleImageClick(file)"
|
/>
|
<img :src="file.url" v-else @click="handleImageClick(file)" />
|
</div>
|
<div v-if="(!fileInfo.images || fileInfo.images.length < 1) && !isUpload" style="font-size: 14px;color: #888888;margin-top: auto;line-height: 5px;">
|
无
|
</div>
|
<img
|
src="@assets/images/hide.png"
|
alt
|
style="z-index:205;bottom: 20px;right: 0px;"
|
v-show="isShow"
|
@click="hide"
|
/><!-- 多张图右下角的显示图标 -->
|
<img
|
src="@assets/images/show.png"
|
alt=""
|
style="z-index:205;bottom: 20px;right: 0px;"
|
v-show="fileInfo.images && fileInfo.images.length > 3 && !isShow"
|
@click="show"
|
/>
|
<!-- 多张图右下角的显示图标 -->
|
<!-- 图片上传 -->
|
<div
|
@click="setIndex(index)"
|
style="display: inline-block"
|
v-if="isUpload"
|
v-show="
|
multiple ||
|
(!multiple && !fileInfo.images) ||
|
(!multiple && fileInfo.images.length < 1)
|
"
|
>
|
<el-upload
|
action=""
|
:multiple="multiple"
|
list-type="picture-card"
|
:headers="uploadHeader"
|
:http-request="handleUpload"
|
:file-list="fileList"
|
:before-upload="beforeAvatarUpload"
|
:show-file-list="false"
|
>
|
<i class="el-icon-plus"></i>
|
</el-upload>
|
</div>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import '@/views/area/style/images.styl'
|
export default {
|
props: {
|
fileInfo: {
|
type: Object,
|
default: () => {
|
return { required: false, description: '影像资料', count: 0 }
|
}
|
},
|
isShowTitle: {
|
type: String,
|
default: () => {
|
return 'Y'
|
}
|
},
|
multiple: {
|
type: Boolean,
|
default: () => {
|
return true
|
}
|
},
|
isUpload: {
|
type: Boolean,
|
default: () => {
|
return true
|
}
|
}
|
},
|
watch: {
|
fileInfo: {
|
handler(val) {
|
this.fileInfo = val
|
this.fileList = val.images
|
},
|
deep: true
|
}
|
},
|
data: function() {
|
return {
|
index: '',
|
dialogImageUrl: '',
|
dialogVisible: false,
|
fileData: '',
|
fileList: [],
|
isShow: false,
|
newWindow: null,
|
uploadHeader: {
|
'Content-Type': 'multipart/form-data; boundary=ReaquestHeader'
|
}
|
}
|
},
|
created() {},
|
methods: {
|
setIndex(index) {
|
this.index = index
|
},
|
handleDelete(attachmentno) {
|
this.$emit('handleDelete', attachmentno)
|
},
|
beforeAvatarUpload(file) {
|
const { key } = this.fileInfo
|
this.$emit('beforeAvatarUpload', file, key)
|
},
|
handleUpload(file) {
|
this.fileData = file.file
|
const { key } = this.fileInfo
|
this.$emit('handleUpload', file.file, key)
|
},
|
submitForm() {},
|
handleSave() {},
|
handleSaveDraft() {},
|
handleImageClick(file) {
|
this.$emit('handleImageClick', file, this.fileInfo)
|
},
|
findFileType(fileName) {
|
const fileTypes = [
|
'.pdf',
|
'.xls',
|
'.doc',
|
'.jpg',
|
'.jpeg',
|
'.xlsx',
|
'.pptx',
|
'.docx'
|
]
|
const fileType = fileName ? fileTypes.filter(type => fileName.includes(type))[0] && fileTypes.filter(type => fileName.includes(type))[0].toUpperCase() : ''
|
return fileType ? fileType.replace(/./i, '').trim() : ''
|
},
|
// 展开图片
|
show(row) {
|
this.isShow = true
|
},
|
// 收起图片
|
hide(row) {
|
this.isShow = false
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="stylus"></style>
|
