<template>
|
<b-modal
|
:title="title"
|
size="lg"
|
ref="uploadModal"
|
ok-title="保存"
|
@ok="handleOk"
|
@cancel="clearName"
|
cancel-title="取消"
|
:hide-header="!title"
|
:hide-footer="isShowFooter"
|
>
|
<div class="flex-center">
|
<upload-common
|
:isShowProgress="false"
|
uploadBtntext="上传图片"
|
:isList="false"
|
limitTypes=".png,.jpg.jpeg.gif"
|
title
|
:isShowHr="false"
|
:isMultiple="true"
|
fileName="files"
|
@addFilesBaBackFN="addFiles"
|
/>
|
</div>
|
<div class="upload-list row py-4" v-if="fileList && fileList.length">
|
<ul
|
v-for="attachment in fileList"
|
:key="attachment.id"
|
class="col-sm-6 col-md-4 col-lg-6 col-xl-3"
|
>
|
<li class="ui-bordered p-2 mr-3 mb-3 flex-center" :title="attachment.name">
|
<b-form-checkbox
|
class="attachment-check flex-center"
|
v-model="attachment.iscChecked"
|
:value="true"
|
:unchecked-value="false"
|
>
|
<div
|
:style="{'background-image': `url(/httpImage/${attachment.path})`}"
|
class="message-attachment-img"
|
></div>
|
</b-form-checkbox>
|
</li>
|
</ul>
|
</div>
|
</b-modal>
|
</template>
|
<script>
|
import uploadCommon from './uploadCommon'
|
export default {
|
props: {
|
title: String,
|
item: Object,
|
isShowFooter: {
|
default: false
|
}
|
},
|
data: () => ({
|
fileList: []
|
}),
|
methods: {
|
// * 打开modal
|
showModel() {
|
this.$refs.uploadModal.show()
|
this.$nextTick(() => {
|
this.fileList = []
|
this.reView(this.item)
|
})
|
},
|
hideModel() {
|
this.$refs.uploadModal.hide()
|
},
|
/* 上传组件回调 */
|
addFiles({ fileIds, fileList }) {
|
this.fileList = [...this.fileList, ...fileList]
|
},
|
// 回显
|
reView(item) {
|
console.log(item, 'item----')
|
},
|
// * 提交表单
|
handleOk(e) {
|
e.preventDefault()
|
const checkList = this.fileList.filter(item => item.iscChecked)
|
const checkListkeys = checkList.map(item => item.id)
|
if (!checkListkeys.length) {
|
this.$toast({
|
type: 'error',
|
message: '您还没有选择图片'
|
})
|
return
|
}
|
this.$emit('submit', {
|
checkList,
|
checkListkeys
|
})
|
},
|
// * 取消
|
clearName() {}
|
},
|
components: {
|
uploadCommon
|
}
|
}
|
</script>
|
<style>
|
.attachment-check {
|
width: 100%;
|
}
|
.attachment-check .custom-control-label::before {
|
top: 1.5rem;
|
}
|
.upload-list ul li:hover {
|
background: #f8f8f8;
|
}
|
</style>
|
