149 lines
3.8 KiB
Vue
149 lines
3.8 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"
|
|
>
|
|
<Icon
|
|
name="mdi:file-pdf-box"
|
|
:size="32"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else
|
|
class="card-image"
|
|
@click="open()"
|
|
>
|
|
<figure class="image is-4by3 has-background-black">
|
|
<NuxtImg
|
|
: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">
|
|
<Icon
|
|
name="material-symbols:content-copy-outline-rounded"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="button is-white"
|
|
@click="download()"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:download-rounded"
|
|
:size="18"
|
|
/>
|
|
</span>
|
|
</button>
|
|
<button
|
|
v-if="$getEditRights()"
|
|
class="button is-white"
|
|
@click="askConfirm()"
|
|
>
|
|
<span class="icon">
|
|
<Icon
|
|
name="material-symbols:delete-outline-rounded"
|
|
: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>
|