<template>
|
<div>
|
<SectionTitle :title="'影像资料信息'"></SectionTitle>
|
<div class="imageData">
|
<div class="imageList">
|
<div
|
class="images"
|
v-for="(item, index) in imageMenuList"
|
:key="index"
|
ref="images"
|
>
|
<p>
|
{{ item.imageCodeName }}
|
<span>{{ item.imageNum ? `(${item.imageNum}张)` : "" }}</span>
|
</p>
|
<div
|
ref="imagesFloat"
|
:class="[
|
'imagesList',
|
{ danger: activeIndex == index },
|
{ search: searchIndex == index },
|
]"
|
>
|
<div
|
v-for="(child, i) in item.images"
|
:key="i"
|
>
|
<!--
|
缩略，只展示2张图
|
v-show="
|
fullScreen > 1460
|
? i > 2
|
? false
|
: true
|
: i > 1
|
? false
|
: true
|
" -->
|
<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, item.isedit)"
|
/>
|
<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, item.isedit)"
|
/>
|
<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, item.isedit)"
|
/>
|
<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, item.isedit)"
|
/>
|
<img
|
v-else
|
:src="
|
child.resizeUrl ? `${child.resizeUrl}/60/90` : child.url
|
"
|
alt
|
@click="previewImage(child, item.isedit)"
|
/>
|
</div>
|
<p
|
:title="child.imageName"
|
>
|
{{ child.imageName }}
|
</p>
|
</div>
|
<img src="@assets/images/show.png" alt @click.stop="show(item)" />
|
<el-upload
|
:ref="index"
|
multiple
|
drag
|
name="files"
|
:limit="50"
|
:action="url"
|
:data="{
|
imageCode: item.imageCode,
|
loanId: promissoryNoteNo,
|
phaseNo:isDataQuery?'':enterType
|
}"
|
accept=".pdf, image/*, .doc, .docx, .xlsx, .xls,.zip,.rar,.7z"
|
list-type="picture-card"
|
v-if="canEdit"
|
:on-success="function (res, file) {return handleAvatarSuccess(res, file, index);}"
|
:before-upload="beforeAvatarUpload"
|
v-loading="imageUploadLoading"
|
>
|
<i class="el-icon-plus"></i>
|
<div class="el-upload__text">本地上传</div>
|
</el-upload>
|
</div>
|
</div>
|
</div>
|
<div class="default" v-if="!imageMenuList.length">
|
<img src="@assets/images/default.png" alt />
|
</div>
|
<Success :visible="success" v-on:closeDialog="closeDialog"></Success>
|
<Fail
|
:visible="fail"
|
:reason="reason"
|
v-on:closeDialog="closeDialog"
|
></Fail>
|
</div>
|
</div>
|
</template>
|
<script>
|
// 影像资料信息
|
// 目前定位具体图片有问题，可能需要接口配合修改
|
import {
|
queryAcctLoan, //查询借据ID
|
overdueQryCaseImageMenuList, //催收影像资料信息类型请求
|
overdueQryCaseImageList, //查询案件影像
|
overdueUploadCaseImage, //上传逾期案件影像
|
overdueDeleteCaseImage, //删除逾期案件影像
|
} from "@comprehensive/serve/public";
|
import SectionTitle from "../SectionTitle";
|
import common from "@/utils/common";
|
import "../../../product/public/clientsImageData/index.styl";
|
import Success from "../../../product/components/Success";
|
import Fail from "../../../product/components/Fail";
|
export default {
|
components: {
|
SectionTitle,
|
Success,
|
Fail,
|
},
|
props: {
|
// 申请编号
|
serialNo: {
|
type: String,
|
required: true,
|
},
|
canEdit: {
|
type: Boolean,
|
},
|
// 案件ID
|
caseId: {
|
type: String,
|
},
|
//案件阶段编号 5040 逾期入池 5050 委外催收 5060 案件起诉 5070 诉前调解 5080 法院立案 5090 法院判决
|
enterType: {
|
type: String,
|
},
|
objectType: {
|
type: String,
|
default: "",
|
},
|
flowno: {
|
type: String,
|
// 默认为案场
|
default: "CreditFlowCase",
|
},
|
alterobjectno: {
|
type: String,
|
// 默认为案场
|
default: "",
|
},
|
customerID: {
|
type: String,
|
default: "",
|
},
|
isDataQuery: {
|
type: Boolean
|
}
|
},
|
data() {
|
return {
|
url: "/rlc-cts/server/collection-case/uploadCaseImage",
|
imageMenuList: [],
|
success: false,
|
fail: false,
|
reason: "",
|
activeIndex: null,
|
searchIndex: null,
|
newWindow: null,
|
isAddEvent: false,
|
fullScreen: document.documentElement.clientWidth,
|
search: "",
|
promissoryNoteNo: '',//借据编号
|
imageUploadLoading: false,
|
};
|
},
|
created() {
|
this.init();
|
},
|
methods: {
|
init() {
|
this.requestQueryAcctLoan();
|
},
|
//查询借据ID
|
async requestQueryAcctLoan() {
|
this.loading = true;
|
const res = await queryAcctLoan({
|
serialno: this.serialNo,
|
});
|
this.loading = false;
|
const { result } = res;
|
this.promissoryNoteNo = result.serialNo.value
|
this.requestOverdueQryCaseImageMenuList();
|
},
|
//逾期管理影像菜单列表
|
async requestOverdueQryCaseImageMenuList() {
|
this.loading = true;
|
const resp = await overdueQryCaseImageMenuList({
|
objectNo: this.promissoryNoteNo,
|
phaseNo: this.isDataQuery?'':this.enterType,
|
});
|
this.loading = false;
|
const { result } = resp;
|
this.imageMenuList = result;
|
this.requestOverdueQryCaseImageList();
|
},
|
//逾期管理影像资料信息
|
async requestOverdueQryCaseImageList() {
|
this.loading = true;
|
const resp = await overdueQryCaseImageList({
|
loanId: this.promissoryNoteNo,
|
phaseNo: this.isDataQuery?'':this.enterType,
|
});
|
this.loading = false;
|
const { result } = resp;
|
// let tempImageMenuList = this.imageMenuList
|
let tempFormValues = this.imageMenuList.reduce((pre, curr) => {
|
const { imageCode } = curr;
|
let tempImgList = []
|
result.map(imageItem => {
|
if (imageCode == imageItem.imageCode) {
|
tempImgList.push(imageItem)
|
}
|
})
|
pre.push({ ...curr,images: tempImgList })
|
return pre;
|
}, []);
|
console.log('tempFormValues',tempFormValues,this.canEdit)
|
this.imageMenuList = tempFormValues
|
},
|
|
// 查询影像件信息
|
async getImageMenuList(i) {
|
this.requestOverdueQryCaseImageList();
|
},
|
|
// 删除图片
|
handleRemove(row, index) {
|
const { serialNo } = row;
|
common.comfirm("提示", "请确认是否需要删除？", async () => {
|
this.$parent._data.loading = true;
|
const res = await overdueDeleteCaseImage({
|
serialno: serialNo,
|
});
|
this.$parent._data.loading = false;
|
if (res.code == "00") {
|
this.$message.success("删除成功");
|
this.requestOverdueQryCaseImageMenuList();
|
}
|
});
|
},
|
//预览图片
|
previewImage(row, isEdit) {
|
window.open(row.url, "_blank")
|
// let { newWindow } = this;
|
// if (newWindow) {
|
// newWindow.close();
|
// }
|
// newWindow = window.open(
|
// row.url,
|
// "newwindow",
|
// "height=700px, width=800px, top=100px,left=400px, toolbar=no, menubar=no, scrollbars=yes, resizable=no,location=no, status=no"
|
// )
|
// this.newWindow = newWindow;
|
},
|
|
//上传之前
|
beforeAvatarUpload(file) {
|
let isfile;
|
if (file.type && file.type.split("/")[0] == "image") {
|
isfile = true;
|
} else {
|
const fileType = file.name.substring(file.name.lastIndexOf(".") + 1);
|
isfile =
|
fileType === "pdf" ||
|
fileType === "docx" ||
|
fileType === "xls" ||
|
fileType === "xlsx" ||
|
fileType === "txt" ||
|
fileType === "doc" ||
|
fileType === "zip"||
|
fileType === "rar"||
|
fileType === "7z" ||
|
fileType === "PDF"
|
;
|
}
|
if (!isfile) {
|
this.$message.warning("该上传文件类型暂不支持,请重新上传!");
|
return isfile;
|
}
|
this.imageUploadLoading = true;
|
},
|
|
// 上传成功
|
handleAvatarSuccess(res, file, index) {
|
// this.$message.success('上传成功')
|
// this.getImageMenuList(index);
|
this.imageUploadLoading = false;
|
this.requestOverdueQryCaseImageMenuList();
|
},
|
|
// 展开图片
|
show(row) {
|
this.imageMenuList.forEach((item) => {
|
this.$set(item, "isShow", false);
|
});
|
row.isShow = true;
|
},
|
|
closeDialog(data) {
|
this.fail = data;
|
this.success = data;
|
},
|
},
|
};
|
</script>
|
<!--
|
<style lang="postcss" scoped>
|
.text-list {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
font-size: 14px;
|
line-height: 20px;
|
color: #333333;
|
& li {
|
width: 50%;
|
display: flex;
|
justify-content: space-between;
|
box-sizing: border-box;
|
border-bottom: 1px solid #eeeeee;
|
padding: 12px 49px 12px 20px;
|
& p {
|
margin: 0;
|
flex: 1;
|
}
|
& a {
|
color: #0081f0;
|
margin-left: 10px;
|
cursor: pointer;
|
width: 4em;
|
text-align: right;
|
}
|
&:nth-child(odd) {
|
border-right: 1px solid #eeeeee;
|
}
|
}
|
}
|
.image-list {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
list-style: none;
|
text-align: center;
|
font-size: 14px;
|
margin: 30px 0 0 0;
|
& li {
|
width: 200px;
|
height: 160px;
|
overflow: hidden;
|
margin: 30px 30px 0 0;
|
& img {
|
width: 150px;
|
height: 100px;
|
transition: all 0.2s ease;
|
&:hover {
|
width: 180px;
|
height: 120px;
|
}
|
}
|
& .img-item {
|
text-align: center;
|
}
|
}
|
}
|
.img-text {
|
height: 3em;
|
overflow: hidden;
|
text-align: center;
|
}
|
.show-all {
|
margin-bottom: 16px;
|
& >>> .el-button {
|
padding: 5px 9px;
|
}
|
}
|
|
</style> -->
|
