<template>
|
<div class="imageData">
|
<div class="el_group">
|
<el-select
|
v-model="search"
|
@change="handleSearch"
|
placeholder="请选择或输入影像资料名称进行定位"
|
clearable
|
filterable
|
>
|
<el-option
|
v-for="(item,index) in imageMenuList"
|
:key="index"
|
:label="item.imagelistname"
|
:value="item.imagelistname"
|
></el-option>
|
</el-select>
|
<el-button slot="append" @click="handleSearch">搜索</el-button>
|
</div>
|
<div class="imageList">
|
<div class="images" v-for="(item,index) in imageMenuList" :key="index" ref="images">
|
<p>
|
<i v-if="item.ismandatory == 1">*</i>
|
{{item.imagelistname}}
|
<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"
|
v-show="fullScreen>1460?i>2?false:true:i>1?false:true"
|
>
|
<span
|
class="el-icon-error"
|
@click="handleRemove(child,index)"
|
v-if="child.iseEditor=='02'"
|
></span>
|
<div>
|
<img
|
class="svg"
|
src="@assets/PDF.svg"
|
v-if="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'"
|
alt
|
@click="previewImage(child,item.isedit)"
|
/>
|
<img
|
class="svg"
|
src="@assets/word.svg"
|
v-else-if="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'"
|
alt
|
@click="previewImage(child,item.isedit)"
|
/>
|
<img
|
class="svg"
|
src="@assets/mp4.svg"
|
v-else-if="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'"
|
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.fileName.substring(item.imagelistname.length+1)"
|
>{{child.fileName.substring(item.imagelistname.length+1)}}</p>
|
</div>
|
<img
|
src="@assets/images/show.png"
|
alt
|
v-show="fullScreen>1460?item.images.length>3:item.images.length>2"
|
@click.stop="show(item)"
|
/>
|
<el-upload
|
:ref="index"
|
multiple
|
drag
|
:action="url"
|
:data="item.imagesData"
|
list-type="picture-card"
|
v-if="item.isedit==1"
|
:on-success="function (res,file){return handleAvatarSuccess(res,file,index)}"
|
:before-upload="beforeAvatarUpload"
|
>
|
<i class="el-icon-plus"></i>
|
<div class="el-upload__text">本地上传</div>
|
</el-upload>
|
</div>
|
<div
|
ref="imagesFloat"
|
@click.stop
|
:class="['imagesFloat',{'search':searchIndex==index}]"
|
v-show="item.isShow&&(fullScreen>1460?item.images.length>3:item.images.length>2)"
|
>
|
<div v-for="(child,i) in item.images" :key="i">
|
<span
|
class="el-icon-error"
|
@click="handleRemove(child,index)"
|
v-if="child.iseEditor=='02'"
|
></span>
|
<div>
|
<img
|
class="svg"
|
src="@assets/PDF.svg"
|
v-if="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'"
|
alt
|
@click="previewImage(child,item.isedit)"
|
/>
|
<img
|
class="svg"
|
src="@assets/word.svg"
|
v-else-if="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'"
|
alt
|
@click="previewImage(child,item.isedit)"
|
/>
|
<img
|
class="svg"
|
src="@assets/mp4.svg"
|
v-else-if="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'"
|
@click="previewImage(child,item.isedit)"
|
alt
|
/>
|
<img
|
v-else
|
:src="child.resizeUrl?`${child.resizeUrl}/60/90`:child.url"
|
alt
|
@click="previewImage(child,item.isedit)"
|
/>
|
</div>
|
<p
|
:title="child.fileName.substring(item.imagelistname.length+1)"
|
>{{child.fileName.substring(item.imagelistname.length+1)}}</p>
|
</div>
|
<img src="@assets/images/hide.png" alt @click.stop="hide(item,index)" />
|
<el-upload
|
:ref="index"
|
multiple
|
drag
|
:action="url"
|
:data="item.imagesData"
|
accept=".pdf, image/*, .doc, .docx, .xlsx, .xls, .txt, .mp4,.zip,.rar,.7z"
|
list-type="picture-card"
|
v-if="item.isedit==1"
|
:on-success="function (res,file){return handleAvatarSuccess(res,file,index)}"
|
:before-upload="beforeAvatarUpload"
|
>
|
<i class="el-icon-plus"></i>
|
<div class="el-upload__text">本地上传</div>
|
</el-upload>
|
</div>
|
</div>
|
</div>
|
<div class="default" v-if="!$parent._data.loading&&!imageMenuList.length">
|
<img src="@assets/images/default.png" alt />
|
</div>
|
<div class="btn">
|
<el-button
|
size="medium"
|
plain
|
@click="prevStep"
|
v-if="(applyInfo.phaseNo=='0040'&&applyInfo.flowno!='BuildingBusinessFlow')||applyInfo.phaseNo=='0010'"
|
>上一步</el-button>
|
<el-button size="medium" plain @click="prevStep" v-else>上一步</el-button>
|
<el-button
|
size="medium"
|
type="primary"
|
@click="submit(imageMenuList)"
|
v-if="(applyInfo.phaseNo=='0040'&&applyInfo.flowno!='BuildingBusinessFlow')||applyInfo.phaseNo=='0010'||(applyInfo.flowno=='ZBDEntInfoAlterFlow'&&applyInfo.flowstate!='0020')"
|
>提交</el-button>
|
<el-button size="medium" type="primary" @click="nextPage(imageMenuList)" v-else-if="isNext">下一步</el-button>
|
</div>
|
<Success :visible="success" v-on:closeDialog="closeDialog"></Success>
|
<Fail :visible="fail" :reason="reason" v-on:closeDialog="closeDialog"></Fail>
|
</div>
|
</template>
|
<script>
|
import "./index.styl";
|
import common from "@/utils/common";
|
import { setStorage, getStorage } from "@/utils/storage";
|
import {
|
qryImageMenuList,
|
TypeQueryEcmPageList,
|
deleteFile,
|
notOpinionSubmit,
|
TypeZBDEntAlterQueryEcmPageList,
|
deleteZbdAlterFile,
|
zbdAlterSumbit
|
} from "@/api/product";
|
import Success from "../../components/Success";
|
import Fail from "../../components/Fail";
|
export default {
|
data() {
|
return {
|
applyInfo: this.$store.state.product.applyInfo,
|
projectCompany: this.$store.state.product.projectCompany,
|
applyMenu: this.$store.state.product.applyMenu,
|
url: "",
|
imageMenuList: [],
|
success: false,
|
fail: false,
|
reason: "",
|
activeIndex: null,
|
searchIndex: null,
|
newWindow: null,
|
isAddEvent: false,
|
fullScreen: document.documentElement.clientWidth,
|
search: ""
|
};
|
},
|
created() {
|
this.$parent._data.loading = true;
|
this.getImageMenuList();
|
},
|
components: {
|
Success,
|
Fail
|
},
|
beforeDestroy() {
|
this.removeMessage();
|
window.removeEventListener("click", this.handleClose);
|
},
|
computed:{
|
isNext(){
|
const index = this.applyMenu.findIndex(item=>{
|
return item.tabname == "影像资料信息"
|
})
|
return index != this.applyMenu.length-1
|
}
|
},
|
mounted() {
|
window.onresize = () => {
|
return (() => {
|
this.fullScreen = document.body.clientWidth;
|
})();
|
};
|
this.$nextTick(() => {
|
window.addEventListener("click", this.handleClose);
|
});
|
},
|
methods: {
|
handleClose(e) {
|
for (let i = 0; i < this.imageMenuList.length; i++) {
|
if (
|
this.imageMenuList[i].isShow &&
|
(this.fullScreen > 1460
|
? this.imageMenuList[i].images.length > 3
|
: this.imageMenuList[i].images.length > 2)
|
) {
|
if (!this.$refs.imagesFloat[i].contains(e.target)) {
|
this.$set(this.imageMenuList[i], "isShow", false);
|
}
|
break;
|
}
|
}
|
},
|
handleSearch() {
|
if (!this.search) {
|
this.searchIndex = null;
|
this.$refs.images[0].scrollIntoView();
|
return;
|
}
|
for (let i = 0; i < this.imageMenuList.length; i++) {
|
if (this.imageMenuList[i].imagelistname.indexOf(this.search) != -1) {
|
this.searchIndex = i;
|
this.$refs.images[i].scrollIntoView();
|
break;
|
}
|
}
|
},
|
// 订阅预览页消息
|
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.getImageMenuList();
|
}
|
} catch (e) {
|
console.log(e);
|
}
|
},
|
false
|
);
|
},
|
removeMessage() {
|
const { newWindow, getMessage } = this;
|
if (newWindow) {
|
newWindow.removeEventListener("message", getMessage, false);
|
}
|
},
|
// 点击图片进行预览
|
previewImage(row, isEdit) {
|
let { newWindow } = this;
|
const routeStr = location.href.includes("#") ? "#/" : "";
|
if (newWindow) {
|
newWindow.close();
|
}
|
newWindow = window.open(
|
`${location.origin}${process.env.VUE_APP_HOST_PATH}${routeStr}photoViewer?serialno=${row.serialno}&objecttype=${this.applyInfo.objectType}&typeno=${row.typeno}&businessno=${this.applyInfo.serialNo}&isEdit=${isEdit}`,
|
"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();
|
},
|
// 查询影像件信息
|
async getImageMenuList(i) {
|
let response;
|
const {
|
serialNo,
|
objectType,
|
phaseNo,
|
flowno,
|
alterobjecttype,
|
alterobjectno
|
} = this.applyInfo;
|
const res = await qryImageMenuList({
|
objectno: serialNo,
|
objecttype: objectType
|
});
|
if (res.code == "00") {
|
if (flowno == "ZBDEntInfoAlterFlow") {
|
// 招标贷企业修改是单独的流程,接口不同
|
this.url = "/rlc-cts/server/uploadZBDAlterCustomerImage";
|
response = await TypeZBDEntAlterQueryEcmPageList({
|
businessno: serialNo,
|
objecttype: objectType,
|
alterobjecttype,
|
alterobjectno
|
});
|
} else {
|
this.url = "/rlc-cts/server/uploadCustomerImage";
|
response = await TypeQueryEcmPageList({
|
businessno: serialNo,
|
objecttype: objectType
|
});
|
}
|
if (response.code == "00") {
|
res.result.forEach((value, index) => {
|
// value.imagesData作为文件上传需要携带的参数
|
value.imagesData = {};
|
value.imagesData.customerid = value.customerid;
|
value.imagesData.typeno = value.imagelistcode;
|
value.imagesData.objectno = serialNo;
|
value.imagesData.objecttype = objectType;
|
value.imagesData.phaseno = phaseNo;
|
if (flowno == "ZBDEntInfoAlterFlow") {
|
value.imagesData.alterobjecttype = alterobjecttype;
|
value.imagesData.alterobjectno = alterobjectno;
|
}
|
// 获取对应的图片列表信息
|
value.images = [];
|
if (response.result.length) {
|
response.result.forEach(item => {
|
if (
|
value.imagelistcode == item.typeno &&
|
value.customerid == item.customerid
|
) {
|
value.images.push(item);
|
}
|
// 这里后台接口是根据请求头返回的origin添加的ip或者域名,本地调试需要替换(具体可看下后台返回的url地址)
|
if (item.resizeUrl.indexOf("http://localhost") != -1) {
|
item.resizeUrl = item.resizeUrl.replace(
|
"http://localhost:8080",
|
"http://10.10.16.114"
|
);
|
}
|
});
|
}
|
if (index == i) {
|
value.isShow = true;
|
} else {
|
value.isShow = false;
|
}
|
});
|
this.imageMenuList = res.result;
|
this.$parent._data.loading = false;
|
}
|
}
|
},
|
// 上传文件前
|
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 === "mp4" ||
|
fileType === "doc" ||
|
fileType === "zip"||
|
fileType === "rar"||
|
fileType === "7z"
|
;
|
}
|
if (!isfile) {
|
this.$message.warning("该上传文件类型暂不支持,请重新上传!");
|
return isfile;
|
}
|
this.$parent._data.loading = true;
|
},
|
// 上传成功
|
handleAvatarSuccess(res, file, index) {
|
// this.$message.success('上传成功')
|
this.getImageMenuList(index);
|
},
|
// 删除图片
|
handleRemove(row, index) {
|
const { flowno } = this.applyInfo;
|
const { serialno } = row;
|
common.comfirm("提示", "请确认是否需要删除？", async () => {
|
this.$parent._data.loading = true;
|
const res =
|
flowno == "ZBDEntInfoAlterFlow"
|
? await deleteZbdAlterFile({ serialno })
|
: await deleteFile({ serialno });
|
this.$parent._data.loading = false;
|
if (res.code == "00") {
|
this.$message.success("删除成功");
|
this.getImageMenuList(index);
|
}
|
});
|
},
|
// 展开图片
|
show(row) {
|
this.imageMenuList.forEach(item => {
|
this.$set(item, "isShow", false);
|
});
|
row.isShow = true;
|
},
|
// 收起图片
|
hide(row) {
|
row.isShow = false;
|
},
|
// 上一步
|
prevStep() {
|
this.applyMenu.forEach((val, index) => {
|
if (val.tabname == "影像资料信息") {
|
common.tabInfo(
|
this.applyMenu[index - 1].tabname,
|
this.applyInfo.flowno,
|
this
|
);
|
}
|
});
|
},
|
// 下一页
|
nextPage(array) {
|
this.applyMenu.forEach((val, index) => {
|
if (val.tabname == "影像资料信息") {
|
common.tabInfo(
|
this.applyMenu[index + 1].tabname,
|
this.applyInfo.flowno,
|
this
|
);
|
}
|
});
|
},
|
// 下一步
|
async submit(array) {
|
this.activeIndex = null;
|
for (let i = 0; i < array.length; i++) {
|
if (array[i].ismandatory == 1 && !array[i].images.length) {
|
this.activeIndex = i;
|
}
|
}
|
if (this.activeIndex !== null) {
|
this.$message.warning("当前页面有必填项未上传影像,请重新检查");
|
return;
|
}
|
this.$parent._data.loading = true;
|
const { flowno, ftSerialNo, serialNo, alterobjectno } = this.applyInfo;
|
const params = {
|
ftSerialNo,
|
channel: "00",
|
objectno: flowno == "ZBDEntInfoAlterFlow" ? alterobjectno : serialNo
|
};
|
const res =
|
flowno == "ZBDEntInfoAlterFlow"
|
? await zbdAlterSumbit({ phasechoice: '01', ...params })
|
: await notOpinionSubmit(params);
|
this.$parent._data.loading = false;
|
if (res.code == "00") {
|
// 打开提交成功弹窗
|
this.success = true;
|
} else {
|
// 审批意见提交失败
|
this.reason = res.msg;
|
this.fail = true;
|
}
|
},
|
closeDialog(data) {
|
this.fail = data;
|
this.success = data;
|
}
|
}
|
};
|
</script>
|
