<template>
|
<div class="photo-section">
|
<ul class="photo-list" id="photo_list">
|
<li class="photo-item" v-for="(item, index) in showList" :key="item.serialno || index">
|
<p v-if="item.imagetype && item.imagetype.toLocaleLowerCase() === 'pdf'">
|
<img @click="showImg(item)" src="@/assets/PDF.svg" class="icon-img" />
|
</p>
|
<p v-else>
|
<img @click="showImg(item)" :src="item.url" class="small-img" />
|
</p>
|
|
<p class="delete-img" v-if="isEdit || isDel">
|
<img src="@comprehensive/assets/delete.png" @click="delImg(item)" />
|
</p>
|
</li>
|
<li v-if="isEdit || isAdd" class="upload-item">
|
<el-upload
|
class="file-uploader"
|
action="customize"
|
drag
|
:show-file-list="false"
|
:multiple="true"
|
:http-request="uploadFile"
|
>
|
<i class="el-icon-plus avatar-uploader-icon"></i>
|
</el-upload>
|
</li>
|
<li class="empty-img" v-if="!isEdit && !isAdd && list.length === 0">暂无文件</li>
|
</ul>
|
<p class="bottom-flg" v-if="isShowFlg">
|
<img src="@comprehensive/assets/show.png" @click="isHide = false" v-if="isHide" />
|
<img src="@comprehensive/assets/hide.png" @click="isHide = true" v-else />
|
</p>
|
<Dialog
|
v-model="isShowDialog"
|
title="确定删除文件么？"
|
:buttons="[{text: '取消'}, {text: '确定', type: 'primary'}]"
|
@handleClick="doDialog"
|
></Dialog>
|
</div>
|
</template>
|
<script>
|
// 影像资料信息
|
import Dialog from './Dialog'
|
import {
|
uploadCustomerImage,
|
deleteFile
|
} from '@comprehensive/serve/public'
|
|
export default {
|
components: {
|
Dialog
|
},
|
props: {
|
info: {
|
type: Object,
|
default: () => ({})
|
},
|
list: {
|
type: Array,
|
default: () => []
|
},
|
isEdit: {
|
type: Boolean,
|
default: true
|
},
|
// 控制编辑状态: 1 可新增可删除，2可新增不可删除，3不可新增可删除
|
// 优先级高于isEdit
|
imageEditStatus: {
|
type: [String, Number],
|
default: 0
|
}
|
},
|
data() {
|
return {
|
query: {},
|
isHide: false,
|
tempInfo: {},
|
isShowDialog: false,
|
listWidth: 438,
|
newWindow: null
|
}
|
},
|
created() {
|
this.init()
|
},
|
mounted() {
|
this.setWidth()
|
window.addEventListener('resize', this.setWidth)
|
},
|
methods: {
|
init() {
|
const { query } = this.$route
|
this.query = query
|
},
|
setWidth() {
|
const ele = document.querySelector('#photo_list')
|
if (ele) {
|
const listWidth = parseInt(
|
getComputedStyle(ele, null).getPropertyValue('width')
|
)
|
if (!isNaN(listWidth)) {
|
this.listWidth = listWidth
|
}
|
}
|
},
|
// 显示图片列表
|
showImg(item) {
|
let { newWindow, query } = this
|
|
const { objectType, objectNo } = query
|
// 根据路由模式判断路径分割方式
|
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 = `type=6&objecttype=${objectType}&objectno=${objectNo}&${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
|
)
|
},
|
delImg(item) {
|
this.tempInfo = item
|
this.isShowDialog = true
|
},
|
doDialog(index) {
|
if (index === 0) {
|
this.isShowDialog = false
|
} else {
|
this.sureDel()
|
}
|
},
|
async sureDel() {
|
const { tempInfo } = this
|
const { serialNo } = tempInfo
|
await deleteFile({
|
serialno: serialNo
|
})
|
this.isShowDialog = false
|
this.$emit('getList')
|
this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
},
|
async uploadFile(params) {
|
const { query, info } = this
|
const { objectType, objectNo, customerId = '', phaseNo = '' } = query
|
const { typeNo } = info
|
await uploadCustomerImage({
|
objectno: objectNo,
|
objecttype: objectType,
|
typeno: typeNo,
|
customerid: customerId,
|
phaseno: phaseNo,
|
file: params.file
|
})
|
this.$emit('getList')
|
this.$message.info({
|
message: '上传成功',
|
type: 'success'
|
})
|
},
|
removeMessage() {
|
const { newWindow, getMessage } = this
|
if (newWindow) {
|
newWindow.removeEventListener('message', getMessage, false)
|
}
|
}
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.setWidth)
|
this.removeMessage()
|
},
|
computed: {
|
showList() {
|
const { isHide, list, showNum } = this
|
if (isHide) {
|
return list.filter((item, index) => index < showNum)
|
}
|
return list
|
},
|
isShowFlg() {
|
const { isEdit, isAdd, list, showNum } = this
|
const len = isEdit || isAdd ? list.length + 1 : list.length
|
return len > showNum
|
},
|
showNum() {
|
const { isEdit, isAdd, listWidth } = this
|
const num = parseInt((listWidth + 15) / 112)
|
return isEdit ? Math.max(num - 1, 0) : num
|
},
|
isAdd() {
|
const { imageEditStatus } = this
|
const status = parseInt(imageEditStatus)
|
return status === 1 || status === 2
|
},
|
isDel() {
|
const { imageEditStatus } = this
|
const status = parseInt(imageEditStatus)
|
return status === 1 || status === 3
|
}
|
}
|
}
|
</script>
|
<style lang="postcss" scoped>
|
.photo-section {
|
position: relative;
|
& .photo-list {
|
margin: 0;
|
padding: 0;
|
list-style: none;
|
display: flex;
|
flex-wrap: wrap;
|
& li {
|
width: 97px;
|
height: 60px;
|
border-radius: 4px;
|
margin: 0 15px 15px 0;
|
box-sizing: border-box;
|
background: #fff;
|
&:last-child {
|
margin-right: 0;
|
}
|
&.photo-item {
|
box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.08);
|
position: relative;
|
text-align: center;
|
& p {
|
margin: 0;
|
padding: 0;
|
}
|
& .delete-img {
|
position: absolute;
|
right: -6px;
|
top: -10px;
|
width: 12px;
|
height: 12px;
|
margin: 0;
|
padding: 0;
|
cursor: pointer;
|
& img {
|
vertical-align: middle;
|
}
|
}
|
}
|
&.upload-item {
|
font-size: 28px;
|
color: #8c939d;
|
}
|
& .small-img {
|
width: 100%;
|
height: 60px;
|
border-radius: 4px;
|
vertical-align: middle;
|
cursor: pointer;
|
}
|
& .icon-img {
|
height: 56px;
|
border-radius: 4px;
|
vertical-align: middle;
|
cursor: pointer;
|
}
|
& >>> .el-upload {
|
width: 100%;
|
height: 100%;
|
line-height: 56px;
|
box-sizing: border-box;
|
border-radius: 4px;
|
border: 2px solid rgba(229, 229, 229, 1);
|
background: rgba(249, 249, 249, 1);
|
}
|
}
|
& .empty-img {
|
/* width: 97px;
|
height: 60px;
|
border: 2px solid rgba(229, 229, 229, 1); */
|
width: 100%;
|
color: #909399;
|
background: transparent;
|
text-align: center;
|
line-height: 60px;
|
}
|
}
|
& .bottom-flg {
|
position: absolute;
|
right: 0;
|
bottom: 10px;
|
margin: 0;
|
padding: 0;
|
& img {
|
width: 12px;
|
height: 12px;
|
vertical-align: middle;
|
cursor: pointer;
|
}
|
}
|
}
|
</style>
|
