|
|
|
|
@ -0,0 +1,218 @@
|
|
|
|
|
<!-- -->
|
|
|
|
|
<template>
|
|
|
|
|
<div class="out">
|
|
|
|
|
<el-upload
|
|
|
|
|
:class="{ hide: hideUpload }"
|
|
|
|
|
ref="imgListRef"
|
|
|
|
|
:limit="1"
|
|
|
|
|
:file-list="fileList"
|
|
|
|
|
:on-change="onUploadChange"
|
|
|
|
|
:before-upload="beforeFileUpload"
|
|
|
|
|
action="#"
|
|
|
|
|
:accept="imgType"
|
|
|
|
|
list-type="picture-card"
|
|
|
|
|
:auto-upload="false"
|
|
|
|
|
>
|
|
|
|
|
<i class="el-icon-plus"></i>
|
|
|
|
|
<div
|
|
|
|
|
slot="file"
|
|
|
|
|
slot-scope="{ file }"
|
|
|
|
|
style="position: relative; height: 100%"
|
|
|
|
|
>
|
|
|
|
|
<!-- pdf -->
|
|
|
|
|
<img
|
|
|
|
|
class="el-upload-list__item-thumbnail"
|
|
|
|
|
v-if="!isPdf"
|
|
|
|
|
:src="file.url"
|
|
|
|
|
alt
|
|
|
|
|
/>
|
|
|
|
|
<img
|
|
|
|
|
class="el-upload-list__item-thumbnail"
|
|
|
|
|
v-else
|
|
|
|
|
src="~@/assets/images/pdf.png"
|
|
|
|
|
alt
|
|
|
|
|
/>
|
|
|
|
|
<div v-if="isPdf" class="pdf-name">{{ pdfName }}</div>
|
|
|
|
|
|
|
|
|
|
<!-- ofd -->
|
|
|
|
|
<img
|
|
|
|
|
class="el-upload-list__item-thumbnail"
|
|
|
|
|
v-if="!isOfd"
|
|
|
|
|
:src="file.url"
|
|
|
|
|
alt
|
|
|
|
|
/>
|
|
|
|
|
<img class="el-upload-list__item-thumbnail" v-else alt />
|
|
|
|
|
<div v-if="isOfd" class="pdf-name">{{ ofdName }}</div>
|
|
|
|
|
<span class="el-upload-list__item-actions">
|
|
|
|
|
<span
|
|
|
|
|
class="el-upload-list__item-preview"
|
|
|
|
|
@click="handlePictureCardPreview(file)"
|
|
|
|
|
>
|
|
|
|
|
<i class="el-icon-zoom-in"></i>
|
|
|
|
|
</span>
|
|
|
|
|
<span
|
|
|
|
|
class="el-upload-list__item-delete"
|
|
|
|
|
@click="handleRemove(file, fileList)"
|
|
|
|
|
>
|
|
|
|
|
<i class="el-icon-delete"></i>
|
|
|
|
|
</span>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</el-upload>
|
|
|
|
|
<div class="title">支持.jpeg, .jpg, .png格式上传</div>
|
|
|
|
|
<div class="inside">
|
|
|
|
|
<el-button type="primary" @click="handleScan" size="small" plain
|
|
|
|
|
>银行回单识别</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<el-image-viewer
|
|
|
|
|
v-if="dialogVisible"
|
|
|
|
|
:zIndex="9999"
|
|
|
|
|
:on-close="closeImgViewer"
|
|
|
|
|
:url-list="imgList"
|
|
|
|
|
/>
|
|
|
|
|
<!-- 文件在线预览 -->
|
|
|
|
|
<FilePreview
|
|
|
|
|
:previewFile="previewFile"
|
|
|
|
|
:fileUrl="fileUrl"
|
|
|
|
|
@update="previewFile = false"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
|
|
|
|
|
import { uploadBankSlipApi } from "@/api/common";
|
|
|
|
|
export default {
|
|
|
|
|
name: "",
|
|
|
|
|
props: {
|
|
|
|
|
files: Array,
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
files: {
|
|
|
|
|
handler(list) {
|
|
|
|
|
this.fileList = list;
|
|
|
|
|
if (list.length >= 1) {
|
|
|
|
|
this.hideUpload = true;
|
|
|
|
|
} else {
|
|
|
|
|
this.hideUpload = false;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
deep: true,
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
hideUpload: false,
|
|
|
|
|
imgType: ".jpeg, .jpg, .png",
|
|
|
|
|
fileList: [],
|
|
|
|
|
dialogVisible: false,
|
|
|
|
|
isPdf: false,
|
|
|
|
|
isOfd: false,
|
|
|
|
|
pdfName: null,
|
|
|
|
|
ofdName: null,
|
|
|
|
|
imgList: null,
|
|
|
|
|
fileUrl: null,
|
|
|
|
|
previewFile: false,
|
|
|
|
|
invoiceForm: {},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
ElImageViewer,
|
|
|
|
|
FilePreview: () => import("@/components/FilePreview"),
|
|
|
|
|
},
|
|
|
|
|
computed: {},
|
|
|
|
|
methods: {
|
|
|
|
|
// 删除照片时的回调方法
|
|
|
|
|
handleRemove(file, files) {
|
|
|
|
|
this.fileList = [];
|
|
|
|
|
this.$emit("onConfirm", this.fileList);
|
|
|
|
|
return false;
|
|
|
|
|
},
|
|
|
|
|
// 上传照片时的回调方法
|
|
|
|
|
onUploadChange(file, fileList) {
|
|
|
|
|
this.beforeFileUpload(file, fileList);
|
|
|
|
|
},
|
|
|
|
|
beforeFileUpload(file, fileList) {
|
|
|
|
|
console.log(file);
|
|
|
|
|
//选择图片后做图片格式限制（手动上传图片时，before-upload钩子无效，使用此方法替代）
|
|
|
|
|
const isImage =
|
|
|
|
|
file.raw.type == "image/png" ||
|
|
|
|
|
file.raw.type == "image/jpg" ||
|
|
|
|
|
file.raw.type == "image/jpeg" ||
|
|
|
|
|
file.raw.type == "application/pdf" ||
|
|
|
|
|
file.raw.type == "application/ofd";
|
|
|
|
|
// const isLt5M = file.size < 1024 * 1024 * 5;
|
|
|
|
|
if (!isImage) {
|
|
|
|
|
this.$message.warning("上传只能是png,jpg,jpeg格式!");
|
|
|
|
|
}
|
|
|
|
|
if (file.raw.type == "application/pdf") {
|
|
|
|
|
this.isPdf = true;
|
|
|
|
|
this.pdfName = file.raw.name;
|
|
|
|
|
} else {
|
|
|
|
|
this.isPdf = false;
|
|
|
|
|
}
|
|
|
|
|
if (file.raw.type == "application/ofd") {
|
|
|
|
|
this.isOfd = true;
|
|
|
|
|
this.pdfName = file.raw.name;
|
|
|
|
|
} else {
|
|
|
|
|
this.isOfd = false;
|
|
|
|
|
}
|
|
|
|
|
let FormDatas = new FormData();
|
|
|
|
|
FormDatas.append("multipartFile", file.raw);
|
|
|
|
|
this.$modal.loading("正在上传，请稍候...");
|
|
|
|
|
uploadBankSlipApi(FormDatas).then((res) => {
|
|
|
|
|
this.invoiceForm = res.data;
|
|
|
|
|
this.fileList.push({ name: file.name, url: res.data.fileUrl }); //成功过后手动将文件添加到展示列表里
|
|
|
|
|
this.$emit("onConfirm", this.fileList);
|
|
|
|
|
this.$modal.closeLoading();
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
closeImgViewer() {
|
|
|
|
|
this.dialogVisible = false;
|
|
|
|
|
},
|
|
|
|
|
// 图片预览
|
|
|
|
|
handlePictureCardPreview(file) {
|
|
|
|
|
if (file.name.indexOf(".pdf") > -1) {
|
|
|
|
|
this.fileUrl = this.fileList[0].url;
|
|
|
|
|
this.previewFile = true;
|
|
|
|
|
} else {
|
|
|
|
|
this.imgList = [file.url];
|
|
|
|
|
this.dialogVisible = true;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 发票识别
|
|
|
|
|
handleScan() {
|
|
|
|
|
if (this.fileList.length) {
|
|
|
|
|
this.$emit("onScan", this.invoiceForm);
|
|
|
|
|
} else {
|
|
|
|
|
this.$fm("请先上银行回单!");
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// // 发票验真
|
|
|
|
|
// handleCheck() {
|
|
|
|
|
// if (this.fileList.length) {
|
|
|
|
|
// this.$emit("onCheck");
|
|
|
|
|
// } else {
|
|
|
|
|
// this.$fm("请先上传发票!");
|
|
|
|
|
// }
|
|
|
|
|
// },
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import "@/assets/styles/form/index.scss";
|
|
|
|
|
.pdf-name {
|
|
|
|
|
text-align: center;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
top: 115px;
|
|
|
|
|
line-height: 15px;
|
|
|
|
|
font-size: smaller;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
.el-upload-list--picture-card .el-upload-list__item-thumbnail {
|
|
|
|
|
// height: auto !important;
|
|
|
|
|
object-fit: cover;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
