<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/office/pdf_icon.png" class="icon-img" />
|
</p>
|
<p
|
v-else-if="item.imagetype && (item.imagetype.toLocaleLowerCase() === 'xlsx' || item.imagetype.toLocaleLowerCase() === 'xls')"
|
>
|
<img @click="showImg(item)" src="../assets/office/excel.svg" class="icon-img" />
|
</p>
|
<p
|
v-else-if="item.imagetype && (item.imagetype.toLocaleLowerCase() === 'doc' || item.imagetype.toLocaleLowerCase() === 'docx')"
|
>
|
<img @click="showImg(item)" src="../assets/office/word.svg" class="icon-img" />
|
</p>
|
<p v-else-if="item.imagetype && item.imagetype.toLocaleLowerCase() === 'txt'">
|
<img @click="showImg(item)" src="../assets/office/TXT.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="@/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="@/assets/show.png" @click="isHide = false" v-if="isHide" />
|
<img src="@/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 qryImageMenuList from '@/controller/qryImageMenuList'
|
// import uploadCustomerImageMultipart from '@/controller/uploadCustomerImageMultipart'
|
import Dialog from '@/components/Dialog'
|
import uploadCustomerImage from '@/controller/uploadCustomerImage'
|
import deleteFile from '@/controller/deleteFile'
|
|
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 {
|
isHide: false,
|
model: null,
|
delModel: null,
|
tempInfo: {},
|
objectNo: '',
|
objectType: '',
|
isShowDialog: false,
|
listWidth: 438
|
}
|
},
|
created() {
|
this.init()
|
},
|
mounted() {
|
this.setWidth()
|
window.addEventListener('resize', this.setWidth)
|
},
|
methods: {
|
init() {
|
const { query } = this.$route
|
this.query = query
|
const {
|
transLogSerialno,
|
objectNo = '',
|
objectType = 'TransactionApply'
|
} = query
|
|
this.objectNo = transLogSerialno || objectNo
|
this.objectType = objectType
|
// this.model = uploadCustomerImageMultipart()
|
this.model = uploadCustomerImage()
|
this.delModel = deleteFile()
|
|
// this.getMenu()
|
},
|
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) {
|
const { isEdit, objectNo, objectType, query } = this
|
const { serialNo, transCode } = query
|
// const { imageListCode } = info
|
const { serialno, typeno } = item
|
if (transCode === 'T1009') {
|
this.$goPhoto(
|
{
|
objectNo: serialNo,
|
objectType: 'jbo.acct.ACCT_LOAN',
|
typeNo: typeno,
|
serialno,
|
isEdit: isEdit ? 1 : ''
|
},
|
() => this.$emit('action')
|
)
|
} else {
|
this.$goPhoto(
|
{
|
objectNo,
|
objectType,
|
typeNo: typeno,
|
serialno,
|
isEdit: isEdit ? 1 : ''
|
},
|
() => this.$emit('action')
|
)
|
}
|
},
|
delImg(item) {
|
this.tempInfo = item
|
// this.isShowDialog = true
|
this.sureDel()
|
},
|
doDialog(index) {
|
if (index === 0) {
|
this.isShowDialog = false
|
} else {
|
this.sureDel()
|
}
|
},
|
async sureDel() {
|
const { delModel, tempInfo } = this
|
const { serialno } = tempInfo
|
await delModel.request({
|
serialno
|
})
|
this.isShowDialog = false
|
this.$emit('getList')
|
this.$message({
|
message: '删除成功',
|
type: 'success'
|
})
|
},
|
async uploadFile(params) {
|
const { query, model, info, objectNo, objectType } = this
|
const { phaseNo = '' } = query
|
const { imageListCode } = info
|
await model.request({
|
objectNo,
|
objectType,
|
phaseNo,
|
typeNo: imageListCode,
|
file: params.file
|
})
|
this.$emit('getList')
|
// this.$message({
|
// message: '上传成功',
|
// type: 'success'
|
// })
|
}
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.setWidth)
|
},
|
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>
|
