114 lines
3.4 KiB
Vue
114 lines
3.4 KiB
Vue
<template>
|
|
<div class="card image-card m-0" style="
|
|
outline: rgba(0, 0, 0, 0.2) solid 1px;
|
|
box-shadow: none;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-radius: 6px;
|
|
">
|
|
<div class="is-clickable" :title="file.file__name">
|
|
<div v-if="file.file__name.endsWith('.pdf')" class="p-2 is-flex is-justify-content-center is-align-items-center" style="min-height: 120px">
|
|
<SvgIcon v-bind="{ name: 'pdf.svg', type: 'primary', size: 32 }" />
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="card-image"
|
|
@click="open()"
|
|
>
|
|
<figure class="image is-4by3 has-background-black">
|
|
<nuxt-img
|
|
:src="image"
|
|
loading="lazy"
|
|
alt="Hình ảnh"
|
|
style="object-fit: contain;"
|
|
/>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
<div class="card-content p-2">
|
|
<p class="is-size-7" style="overflow: hidden; white-space: pre; text-overflow: ellipsis">{{ file.file__name }}</p>
|
|
<div id="ignore" class="buttons are-small is-gap-0.5 is-justify-content-end">
|
|
<button class="button is-white" @click="this.$copyToClipboard(`${$getpath()}static/files/${file.file__file}`)">
|
|
<span class="icon">
|
|
<SvgIcon v-bind="{ name: 'copy.svg', type: 'primary', size: 18 }" />
|
|
</span>
|
|
</button>
|
|
<button class="button is-white" @click="download()">
|
|
<span class="icon">
|
|
<SvgIcon v-bind="{ name: 'download.svg', type: 'primary', size: 18 }" />
|
|
</span>
|
|
</button>
|
|
<button v-if="$getEditRights()" class="button is-white" @click="askConfirm()">
|
|
<span class="icon">
|
|
<SvgIcon v-bind="{ name: 'bin1.svg', type: 'primary', size: 18 }" />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<Modal
|
|
v-if="showmodal"
|
|
v-bind="showmodal"
|
|
@confirm="remove()"
|
|
@remove="remove"
|
|
@close="showmodal=undefined"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: ['row', 'api', 'pagename', 'file', 'image', 'show', 'extend'],
|
|
data() {
|
|
return {
|
|
showmodal: undefined,
|
|
display: this.show || []
|
|
}
|
|
},
|
|
methods: {
|
|
open() {
|
|
if (!this.file || this.extend === false) return;
|
|
this.showmodal = {
|
|
title: this.file.file__name,
|
|
component: 'media/ChipImage',
|
|
vbind: {
|
|
extend: false,
|
|
show: this.show,
|
|
file: this.file,
|
|
image: `${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`
|
|
}
|
|
}
|
|
},
|
|
info() {
|
|
if(!this.file) return;
|
|
this.showmodal = {
|
|
vbind: {file: this.file},
|
|
component: 'media/ImageAttr',
|
|
title: 'Thông tin trích xuất từ hình ảnh',
|
|
width: '35%',
|
|
height: '50vh'
|
|
}
|
|
},
|
|
download() {
|
|
let name = this.file? this.file.file__name || this.file.name : 'download'
|
|
let path = `${this.$getpath()}download/?name=${this.file.file__file || this.file.file}&type=file`
|
|
this.$download(path, name)
|
|
},
|
|
askConfirm() {
|
|
this.showmodal = {
|
|
component: 'dialog/Confirm',
|
|
title: 'Xác nhận',
|
|
width: '500px',
|
|
height: '100px',
|
|
vbind: {
|
|
content: 'Bạn có đồng ý xóa hình ảnh này không?',
|
|
duration: 10
|
|
}
|
|
}
|
|
},
|
|
remove() {
|
|
this.showmodal = undefined;
|
|
this.$emit('modalevent', {name: 'remove'});
|
|
this.$emit('remove');
|
|
},
|
|
}
|
|
}
|
|
</script> |