<template>
|
<el-dialog
|
title="影像资料"
|
:visible.sync="dialogComplainVisible"
|
width="650px"
|
:before-close="handleClose"
|
>
|
<el-form
|
ref="inputForm"
|
:model="form"
|
:rules="rules"
|
:inline="true"
|
label-width="120px"
|
>
|
<!-- <div v-for="(child, i) in fileList" :key="i">
|
<span
|
class="el-icon-error"
|
@click="handleRemove(child, index)"
|
v-if="canEdit"
|
></span>
|
<div>
|
<img
|
class="svg"
|
src="@assets/PDF.svg"
|
v-if="child.imagetype == 'pdf' || child.imagetype == 'PDF'"
|
alt
|
@click="previewImage(child, true)"
|
/>
|
<img
|
class="svg"
|
src="@assets/excel.svg"
|
v-else-if="
|
child.imagetype == 'XLSX' ||
|
child.imagetype == 'XLS' ||
|
child.imagetype == 'xlsx' ||
|
child.imagetype == 'xls'
|
"
|
alt
|
@click="previewImage(child, true)"
|
/>
|
<img
|
class="svg"
|
src="@assets/word.svg"
|
v-else-if="
|
child.imagetype == 'DOCX' ||
|
child.imagetype == 'DOC' ||
|
child.imagetype == 'docx' ||
|
child.imagetype == 'doc'
|
"
|
alt
|
@click="previewImage(child, item.isedit)"
|
/>
|
<img
|
class="svg"
|
src="@assets/TXT.svg"
|
v-else-if="child.imagetype == 'TXT' || child.imagetype == 'txt'"
|
alt
|
@click="previewImage(child, item.isedit)"
|
/>
|
<img
|
class="svg"
|
src="@assets/mp4.svg"
|
v-else-if="child.imagetype == 'MP4' || child.imagetype == 'mp4'"
|
alt
|
@click="previewImage(child, true)"
|
/>
|
<img
|
class="svg"
|
src="@assets/rar.svg"
|
v-else-if="
|
child.imagetype == 'ZIP' ||
|
child.imagetype == 'RAR' ||
|
child.imagetype == '7Z' ||
|
child.imagetype == 'zip' ||
|
child.imagetype == 'rar' ||
|
child.imagetype == '7z'
|
"
|
alt
|
@click="previewImage(child, true)"
|
/>
|
<img
|
v-else
|
:src="child.resizeUrl ? `${child.resizeUrl}/60/90` : child.url"
|
alt
|
@click="previewImage(child, true)"
|
/>
|
</div>
|
<p :title="child.imagename">
|
{{ child.imagename }}
|
</p>
|
</div> -->
|
<el-upload
|
action=""
|
:multiple="true"
|
list-type="picture-card"
|
:headers="uploadHeader"
|
:http-request="handleUpload"
|
:http-error="handleUploadError"
|
:before-upload="beforeAvatarUpload"
|
:on-remove="function (file, fileList) {
|
return handleRemove(file, fileList);
|
}
|
"
|
:on-preview="function (file) {
|
return handlePreview(file);
|
}
|
"
|
:file-list="fileList"
|
:show-file-list="true"
|
v-loading="imageUploadLoading"
|
>
|
<i v-if="!isPreview" class="el-icon-plus"></i>
|
</el-upload>
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button size="mini" @click="handleClose">返回</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import {
|
addCaseEventDebtCollection,
|
getDictionaryList,
|
queryAcctLoan,
|
overdueCaseUpload,
|
overdueCaseRemove,
|
overdueCaseQueryImage,
|
} from "@comprehensive/serve/public";
|
export default {
|
components: {},
|
props: {
|
dialogComplainVisible: {
|
type: Boolean,
|
default: false,
|
},
|
// 申请编号
|
serialNo: {
|
type: String,
|
required: false,
|
},
|
selectDebtColItem: {
|
type: Object,
|
},
|
isPreview: {
|
type: Boolean,
|
},
|
canEdit: {
|
type: Boolean
|
},
|
},
|
data() {
|
return {
|
form: {},
|
rules: {},
|
fileList: [],
|
uploadHeader: {
|
"Content-Type": "multipart/form-data; boundary=ReaquestHeader",
|
},
|
imageUploadLoading: false,
|
};
|
},
|
created() {},
|
mounted() {},
|
watch: {
|
dialogComplainVisible() {
|
this.init();
|
},
|
},
|
methods: {
|
init() {
|
if (this.isPreview && this.dialogComplainVisible) {
|
this.requestOverdueCaseQueryImage();
|
}
|
},
|
//关闭窗口
|
handleClose(done) {
|
// this.resetForm("inputForm");
|
this.fileList = [];
|
this.$emit("close");
|
},
|
//获取事件影像
|
async requestOverdueCaseQueryImage() {
|
const resp = await overdueCaseQueryImage({
|
eventId: this.selectDebtColItem.serialNo,
|
verification: "",
|
});
|
this.fileList = resp.result;
|
},
|
// 上传文件前
|
beforeAvatarUpload(file) {
|
const xhr = new XMLHttpRequest();
|
xhr.timeout = 10000;
|
return true; // 返回 true 表示允许上传
|
},
|
//上传文件
|
handleUpload(files) {
|
const file = files.file;
|
let formData = new FormData();
|
formData.append("file", file);
|
formData.append("eventid", this.selectDebtColItem.serialNo);
|
this.imageUploadLoading = true;
|
overdueCaseUpload(formData).then((res) => {
|
this.imageUploadLoading = false;
|
if (res.code === "00") {
|
const imgUrl = res.result.url;
|
this.fileList.push({
|
name: res.result.serialno,
|
url: imgUrl,
|
serialno: res.result.serialno,
|
});
|
}
|
});
|
},
|
handleUploadError(err) {
|
console.log("handleUploadError", err);
|
},
|
//删除文件
|
async handleRemove(file, fileList) {
|
console.log("handleRemove", file, fileList);
|
overdueCaseRemove({ serialno: file.serialno }).then((res) => {
|
this.fileList = fileList;
|
});
|
},
|
//预览文件
|
handlePreview(file) {
|
window.open(file.url, "_blank");
|
},
|
previewImage() {},
|
},
|
};
|
</script>
|
|
<style lang="stylus" scoped>
|
.submit-form {
|
margin-top: 20px;
|
padding-top: 40px;
|
border-top: 1px solid #eee;
|
|
.content-input /deep/ .el-form-item__content {
|
width: calc(100% - 120px);
|
}
|
|
/deep/.el-input input {
|
padding: 4px 15px;
|
height: auto;
|
}
|
}
|
|
.dialog-footer {
|
margin-top: 60px;
|
display: block;
|
width: 100%;
|
text-align: center;
|
}
|
</style>
|
