<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/hide.png"
|
alt
|
style="z-index:205;bottom: 20px;right: 0px;"
|
v-show="isShow"
|
@click="hide"
|
/><!-- 多张图右下角的显示图标 -->
|
<img
|
src="@assets/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 "@assets/css/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>
|
