96 lines
2.2 KiB
Vue
96 lines
2.2 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", { filter: { 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>
|