<template>
|
<div class="supplement" v-loading="loading" element-loading-background="transparent">
|
<div class="content">
|
<div class="el_group">
|
<el-select
|
v-model="search"
|
placeholder="请选择或输入影像资料名称进行定位"
|
@change="handleSearch"
|
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 :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
|
:src="child.resizeUrl?`${child.resizeUrl}/60/90`:child.url"
|
v-else
|
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"
|
: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
|
@click.stop
|
ref="imagesFloat"
|
: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
|
:src="child.resizeUrl?`${child.resizeUrl}/60/90`:child.url"
|
v-else
|
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"
|
list-type="picture-card"
|
: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="!loading&&!imageMenuList.length">
|
<img src="../../../../assets/images/default.png" alt />
|
</div>
|
<div class="footer">
|
<div class="btn">
|
<el-button size="medium" plain @click="$router.go(-1)">返回</el-button>
|
<el-button size="medium" type="primary" @click="submit(imageMenuList)">确认</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import "./index.styl";
|
import { setStorage, getStorage } from "@/utils/storage";
|
import {
|
qryImageMenuList,
|
TypeQueryEcmPageList,
|
deleteFile
|
} from "@/api/product";
|
export default {
|
data() {
|
return {
|
applyInfo: this.$store.state.product.applyInfo,
|
url: "/rlc-cts/server/uploadCustomerImage",
|
fullScreen: document.documentElement.clientWidth,
|
search: "",
|
imageMenuList: [],
|
initial: [],
|
activeIndex: null,
|
searchIndex: null,
|
newWindow: null,
|
isAddEvent: false,
|
loading: false
|
};
|
},
|
async created() {
|
this.loading = true;
|
const res1 = await this.qryImageMenuList();
|
const res2 = await this.TypeQueryEcmPageList();
|
this.initial = this.imageMenuList = this.getImageMenuList(res1, res2);
|
this.loading = false;
|
},
|
beforeDestroy() {
|
this.removeMessage();
|
window.removeEventListener("click", this.handleClose);
|
},
|
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;
|
}
|
}
|
},
|
// 点击图片进行预览
|
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();
|
},
|
// 订阅预览页消息
|
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);
|
}
|
},
|
// 查询影像件信息
|
qryImageMenuList() {
|
return new Promise(resolve => {
|
qryImageMenuList({
|
objectno: this.applyInfo.serialNo,
|
objecttype: this.applyInfo.objectType
|
}).then(res => {
|
resolve(res);
|
});
|
});
|
},
|
TypeQueryEcmPageList() {
|
return new Promise(resolve => {
|
TypeQueryEcmPageList({
|
businessno: this.applyInfo.serialNo,
|
objecttype: this.applyInfo.objectType,
|
updateType: "01"
|
}).then(res => {
|
resolve(res);
|
});
|
});
|
},
|
// 查询影像件信息
|
getImageMenuList(res, response, i) {
|
res.result.forEach((value, index) => {
|
// value.imagesData作为文件上传需要携带的参数
|
value.imagesData = {};
|
value.imagesData.customerid = value.customerid;
|
value.imagesData.typeno = value.imagelistcode;
|
value.imagesData.objectno = this.applyInfo.serialNo;
|
value.imagesData.objecttype = this.applyInfo.objectType;
|
value.imagesData.phaseno = this.applyInfo.phaseNo;
|
// 获取对应的图片列表信息
|
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;
|
}
|
});
|
return res.result;
|
},
|
// 上传文件前
|
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";
|
}
|
if (!isfile) {
|
this.$message.warning("该上传文件类型暂不支持,请重新上传!");
|
return isfile;
|
}
|
this.loading = true;
|
},
|
// 上传成功
|
async handleAvatarSuccess(res, file, i) {
|
this.loading = true;
|
const res1 = await this.qryImageMenuList();
|
const res2 = await this.TypeQueryEcmPageList();
|
const result = this.getImageMenuList(res1, res2, i);
|
for (let n = 0; n < result[i].images.length; n++) {
|
const flag = true;
|
for (let j = 0; j < this.initial[i].images.length; j++) {
|
if (
|
result[i].images[n].serialno == this.initial[i].images[j].serialno
|
) {
|
flag = false;
|
break;
|
}
|
}
|
if (flag) {
|
result[i].images[n].iseEditor = "02";
|
}
|
}
|
for (let n1 = 0; n1 < this.imageMenuList.length; n1++) {
|
for (let n2 = 0; n2 < this.imageMenuList[n1].images.length; n2++) {
|
if (this.imageMenuList[n1].images[n2].iseEditor == "02") {
|
this.$set(result[n1].images[n2], "iseEditor", "02");
|
}
|
}
|
}
|
this.imageMenuList = result;
|
this.loading = false;
|
},
|
// 删除图片
|
handleRemove(row, index) {
|
this.loading = true;
|
deleteFile({
|
serialno: row.serialno
|
}).then(async res => {
|
this.loading = false;
|
if (res.code == "00") {
|
this.loading = true;
|
const res1 = await this.qryImageMenuList();
|
const res2 = await this.TypeQueryEcmPageList();
|
const result = this.getImageMenuList(res1, res2);
|
this.imageMenuList[index].images.forEach((val, i) => {
|
if (val.serialno == row.serialno) {
|
this.imageMenuList[index].images.splice(i, 1);
|
}
|
});
|
for (let n1 = 0; n1 < this.imageMenuList.length; n1++) {
|
for (let n2 = 0; n2 < this.imageMenuList[n1].images.length; n2++) {
|
if (this.imageMenuList[n1].images[n2].iseEditor == "02") {
|
this.$set(result[n1].images[n2], "iseEditor", "02");
|
}
|
}
|
}
|
this.imageMenuList = result;
|
this.$set(this.imageMenuList[index], "isShow", true);
|
this.loading = false;
|
this.$message.success("删除成功");
|
}
|
});
|
},
|
//展开图片
|
show(row) {
|
this.imageMenuList.forEach(item => {
|
this.$set(item, "isShow", false);
|
});
|
row.isShow = true;
|
},
|
// 收起图片
|
hide(row) {
|
row.isShow = false;
|
},
|
// 确认
|
submit(array) {
|
for (let i = 0; i < array.length; i++) {
|
if (array[i].ismandatory == 1 && !array[i].images.length) {
|
this.activeIndex = i;
|
return;
|
}
|
}
|
this.$router.go(-1);
|
}
|
}
|
};
|
</script>
|
