<template>
|
<div>
|
<SectionTitle title="影像资料信息"></SectionTitle>
|
<div class="tab-section" :loading="loading">
|
<p class="show-all">
|
<el-button size="small" @click="showPhotoView()">预览全部</el-button>
|
<el-button
|
size="small"
|
@click="downloadCustomerImages()"
|
v-if="window.parent._server_downloadCustomerImages"
|
>下载影像资料</el-button>
|
</p>
|
<ul class="text-list">
|
<li v-for="(item, index) in textList" :key="index">
|
<p>{{item.imagelistname}}（{{item.imagenum}}）</p>
|
<a v-if="item.imagenum > 0" @click="showPhotoView(item)">预览</a>
|
</li>
|
</ul>
|
|
<ul class="image-list">
|
<li v-for="(item, index) in imgList" :key="index" @click="showPhotoView(item)">
|
<p v-if="item.imagetype === 'PDF'" class="img-item">
|
<img src="@assets/PDF.svg" />
|
</p>
|
<p v-else-if="item.imagetype === 'DOC'||item.imagetype === 'DOCX'" class="img-item">
|
<img src="@assets/word.svg" />
|
</p>
|
<p v-else-if="item.imagetype === 'XLS'||item.imagetype === 'XLSX'" class="img-item">
|
<img src="@assets/excel.svg" />
|
</p>
|
<p v-else-if="item.imagetype === 'TXT'" class="img-item">
|
<img src="@assets/TXT.svg" />
|
</p>
|
<p v-else-if="item.imagetype === 'MP4'" class="img-item">
|
<img src="@assets/mp4.svg" />
|
</p>
|
<p v-else-if="item.resizeUrl" class="img-item">
|
<img :src="`${item.resizeUrl}/100/150`" />
|
</p>
|
<p v-else class="img-item">
|
<img :src="item.url" />
|
</p>
|
<p class="img-text">{{item.fileName}}</p>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</template>
|
<script>
|
// 影像资料信息
|
// 目前定位具体图片有问题，可能需要接口配合修改
|
import {
|
qryImageMenuList,
|
queryEcmPageList,
|
downloadCustomerImages,
|
queryZBDAlterEcmPageList
|
} from "@comprehensive/serve/public";
|
import { comfirm } from "@comprehensive/utils/comm";
|
import SectionTitle from "../SectionTitle";
|
export default {
|
components: {
|
SectionTitle
|
},
|
props: {
|
// 申请编号
|
serialNo: {
|
type: String,
|
required: true
|
},
|
objectType: {
|
type: String,
|
default: ""
|
},
|
flowno: {
|
type: String,
|
// 默认为案场
|
default: "CreditFlowCase"
|
},
|
alterobjectno: {
|
type: String,
|
// 默认为案场
|
default: ""
|
},
|
customerID: {
|
type: String,
|
default: ""
|
}
|
},
|
data() {
|
return {
|
textList: [],
|
imgList: [],
|
newWindow: null,
|
isAddEvent: false
|
};
|
},
|
created() {
|
this.init();
|
},
|
methods: {
|
init() {
|
this.qryImageMenuList();
|
this.queryEcmPageList();
|
},
|
|
// 下载影像资料信息
|
downloadCustomerImages() {
|
comfirm(
|
"提示",
|
"该操作会下载当前申请单下的所有影像件，请确认！",
|
async () => {
|
const { serialNo, objectType } = this;
|
this.loading = true;
|
const res = await downloadCustomerImages({
|
objectno: serialNo,
|
objecttype: objectType
|
});
|
this.loading = false;
|
}
|
);
|
},
|
|
// 影像资料信息1==文本列表
|
async qryImageMenuList() {
|
this.loading = true;
|
const { serialNo, objectType } = this;
|
const res = await qryImageMenuList({
|
objectno: serialNo,
|
objecttype: objectType
|
});
|
this.loading = false;
|
const { result } = res;
|
this.textList = result;
|
},
|
|
// 影像资料信息1==图片列表
|
async queryEcmPageList() {
|
const { serialNo, objectType, flowno, alterobjectno } = this;
|
const obj = {
|
businessno: serialNo,
|
objecttype: objectType
|
};
|
const res =
|
flowno == "ZBDEntInfoAlterFlow"
|
? await queryZBDAlterEcmPageList({
|
alterobjectno,
|
alterobjecttype: flowno,
|
...obj
|
})
|
: await queryEcmPageList(obj);
|
const { result } = res;
|
// 这里后台接口是根据请求头返回的origin添加的ip或者域名,本地调试需要替换(具体可看下后台返回的url地址)
|
if (result.length && result[0].url.indexOf("http://localhost") != -1) {
|
result.forEach(item => {
|
item.resizeUrl = item.resizeUrl.replace(
|
"http://localhost:8080",
|
"http://10.10.16.114"
|
);
|
});
|
}
|
this.imgList = result;
|
},
|
|
// 显示图片列表
|
showPhotoView(item) {
|
let { serialNo, objectType, newWindow } = this;
|
// 根据路由模式判断路径分割方式
|
const routeStr = location.href.includes("#") ? "#/" : "";
|
let params = "";
|
if (item) {
|
const { imagelistcode = "", serialno = "", typeno = "" } = item;
|
if (imagelistcode) {
|
params = `typeno=${imagelistcode}`;
|
} else {
|
params = `typeno=${typeno}&serialno=${serialno}`;
|
}
|
}
|
params = `businessno=${serialNo}&objecttype=${objectType}&${params}`;
|
if (newWindow) {
|
newWindow.close();
|
}
|
newWindow = window.open(
|
`${location.origin}${process.env.VUE_APP_HOST_PATH}${routeStr}photoViewer?${params}`,
|
"newwindow",
|
"height=700px, width=800px, top=100px,left=400px, toolbar=no, menubar=no, scrollbars=yes, resizable=no,location=no, status=no"
|
);
|
|
this.newWindow = newWindow;
|
|
// 若图片展示页面删除图片，则通知刷新列表图片
|
this.getMessage();
|
},
|
|
// 订阅预览页消息
|
getMessage() {
|
const { newWindow } = this;
|
// 避免重复绑定
|
this.removeMessage();
|
this.isAddEvent = true;
|
newWindow.addEventListener(
|
"message",
|
(info = {}) => {
|
try {
|
let { data } = info;
|
data = data || {};
|
// data可能为空字符串，对象，或字符串对象
|
data = typeof data === "string" ? JSON.parse(data) : data;
|
const { type } = data;
|
// 如果在预览也删除图片，则刷新当前数据
|
if (type === "deleteImg") {
|
this.init();
|
}
|
} catch (e) {
|
console.log(e);
|
}
|
},
|
false
|
);
|
},
|
removeMessage() {
|
const { newWindow, getMessage } = this;
|
if (newWindow) {
|
newWindow.removeEventListener("message", getMessage, false);
|
}
|
}
|
},
|
beforeDestroy() {
|
this.removeMessage();
|
}
|
};
|
</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>
|
