58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<template>
|
|
<div class="columns mx-0" v-if="picture">
|
|
<div class="column is-narrow" style="border-right: 2px solid #D3D3D3;" v-if="viewport>1">
|
|
<div class="pr-2" style="max-height: 700px; overflow-y: auto;">
|
|
<div v-for="(v,i) in picture" class="pb-4">
|
|
<figure class="image is-clickable" style="width:80px" @click="current=i">
|
|
<img :src="v.image">
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<b-carousel :autoplay="false" :indicator="viewport===1? true : false" icon-size="is-medium" v-model="current">
|
|
<b-carousel-item v-for="(item, i) in picture" :key="i">
|
|
<ChipImage @remove="check(item, i)" v-bind="{extend: false, image: item.image, file: item.file, show: ['download', 'delete']}"></ChipImage>
|
|
</b-carousel-item>
|
|
</b-carousel>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['row', 'image', 'pagename', 'api'],
|
|
data() {
|
|
return {
|
|
current: 0,
|
|
picture: undefined,
|
|
timer: undefined
|
|
}
|
|
},
|
|
async created() {
|
|
let arr = []
|
|
let files = await this.$getdata('file', {file__in: this.image})
|
|
this.image.map(v=>{
|
|
let found = this.$find(files, {file: v})
|
|
arr.push({image: `${this.$getpath()}download/?name=${v}`, file: found})
|
|
})
|
|
this.picture = arr
|
|
},
|
|
computed: {
|
|
viewport: {
|
|
get: function() {return this.$store.state.viewport},
|
|
set: function(val) {this.$store.commit("updateViewPort", {viewport: val})}
|
|
}
|
|
},
|
|
methods: {
|
|
check(v, i) {
|
|
if(!this.timer) this.timer = setTimeout(()=>this.remove(v,i), 200)
|
|
},
|
|
async remove(v, i) {
|
|
this.$delete(this.picture, i)
|
|
await this.$deleteapi(this.api, v.file.id)
|
|
this.timer = undefined
|
|
if(this.picture.length===0) this.$emit('close')
|
|
}
|
|
}
|
|
}
|
|
</script> |