363 lines
11 KiB
Vue
363 lines
11 KiB
Vue
<template>
|
|
<div class="columns mx-0 mb-0 pb-0">
|
|
<div class="column is-6">
|
|
<div class="tags are-medium">
|
|
<a v-for="v in hashtag" @click="refreshShow(v)">
|
|
<span :class="`tag ${v.file__hashtag===current? 'is-primary' : ''}`">
|
|
{{ v.file__hashtag }}
|
|
{{ `(${v.count})` }}
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="column is-6">
|
|
<div class="is-flex is-align-items-center is-justify-content-flex-end">
|
|
<div class="buttons has-addons are-small my-0">
|
|
<button
|
|
v-for="layout in Object.values(layoutModes)"
|
|
:key="layout"
|
|
:class="[
|
|
'button px-5',
|
|
{ 'is-primary': layout === layoutMode },
|
|
]"
|
|
@click="layoutMode = layout"
|
|
>
|
|
<SvgIcon v-bind="{
|
|
name: `${layout}.svg`,
|
|
type: layout === layoutMode ? 'white' : 'primary',
|
|
size: 20
|
|
}" />
|
|
</button>
|
|
</div>
|
|
<div v-if="!dealer && $getEditRights('edit', { code: 'product', category: 'topmenu' })" class="ml-6 is-flex is-align-items-center">
|
|
<div class="mr-5">
|
|
<label class="checkbox mr-2">
|
|
<input type="checkbox" v-model="convertToWebp" />
|
|
<span class="ml-2">Convert to WebP</span>
|
|
</label>
|
|
<input v-if="convertToWebp"
|
|
class="input is-small"
|
|
type="number"
|
|
v-model.number="webpQuality"
|
|
min="1"
|
|
max="100"
|
|
style="width: 60px"
|
|
placeholder="80"
|
|
/>
|
|
</div>
|
|
<FileUpload
|
|
position="right"
|
|
type="image"
|
|
:convert="convertToWebp"
|
|
:quality="webpQuality"
|
|
@files="onUploaded"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<component
|
|
:is="layoutMode === layoutModes.GRID ? 'div' : 'table'"
|
|
:class="layoutMode === layoutModes.GRID ? 'columns is-multiline px-2 mt-0' : 'table is-fullwidth is-bordered'"
|
|
>
|
|
<template v-if="layoutMode === layoutModes.LIST">
|
|
<thead>
|
|
<tr>
|
|
<th>File</th>
|
|
<th>Mô tả</th>
|
|
<th>Hashtag</th>
|
|
<th>Người tải lên</th>
|
|
<th>
|
|
<span class="icon-text">
|
|
<span class="mr-5">Chức năng</span>
|
|
<a class="mr-3" @click="excel()">
|
|
<SvgIcon v-bind="{ name: 'excel.png', type: 'black', size: 20 }"></SvgIcon>
|
|
</a>
|
|
<a v-if="$getEditRights()" @click="importData()">
|
|
<SvgIcon v-bind="{ name: 'upload.svg', type: 'black', size: 20 }"></SvgIcon>
|
|
</a>
|
|
</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<ImageCard
|
|
v-for="(image, index) in imgshow"
|
|
:key="image.id"
|
|
v-bind="{ image, index, layoutMode, loadImages, deleteImage, viewImage }"
|
|
/>
|
|
</tbody>
|
|
</template>
|
|
<ImageCard
|
|
v-else
|
|
v-for="(image, index) in imgshow"
|
|
:key="image.id"
|
|
v-bind="{ image, index, layoutMode, loadImages, deleteImage, viewImage }"
|
|
/>
|
|
</component>
|
|
<!-- Modal xem ảnh lớn -->
|
|
<div v-if="typeof activeImageIndex === 'number'" class="modal is-active">
|
|
<div class="modal-background" @click="closeViewImage"></div>
|
|
<div
|
|
class="modal-content"
|
|
style="width: 90vw; height: 90vh; border-radius: 8px; overflow: hidden"
|
|
>
|
|
<div
|
|
class="is-flex"
|
|
style="height: 100%; transition: all 0.3s ease-out"
|
|
:style="`transform: translateX(${-100 * activeImageIndex}%)`"
|
|
>
|
|
<div
|
|
v-for="image in imgshow"
|
|
:key="image.id"
|
|
class="has-background-black"
|
|
style="flex: 0 0 100%; display: flex; justify-content: center; align-items: center;"
|
|
>
|
|
<nuxt-img
|
|
loading="lazy"
|
|
:src="`${$getpath()}static/files/${image.file__file}`"
|
|
:alt="image.file__name"
|
|
style="object-fit: contain; height: 100%;"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="gallery-arrows">
|
|
<button
|
|
@click="showPrevImage()"
|
|
class="button is-rounded"
|
|
style="left: 24px"
|
|
>
|
|
<SvgIcon v-bind="{ name: 'left1.svg', type: 'black', size: 20 }" />
|
|
</button>
|
|
<button
|
|
@click="showNextImage()"
|
|
class="button is-rounded"
|
|
style="right: 24px"
|
|
>
|
|
<SvgIcon v-bind="{ name: 'right.svg', type: 'black', size: 20 }" />
|
|
</button>
|
|
</div>
|
|
<div class="gallery-count">
|
|
{{ activeImageIndex + 1 }}
|
|
/
|
|
{{ imgshow.length }}
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="modal-close is-large"
|
|
aria-label="close"
|
|
@click="closeViewImage"
|
|
></button>
|
|
</div>
|
|
<Modal @dataevent="dataevent" @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal" />
|
|
</template>
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import { debounce } from 'es-toolkit';
|
|
import { useNuxtApp } from "#app";
|
|
import FileUpload from "@/components/media/FileUpload.vue";
|
|
import ImageCard from '@/components/media/ImageCard.vue';
|
|
|
|
// pass only projectId for project images, pass both for product images
|
|
const props = defineProps({
|
|
productId: String,
|
|
projectId: String,
|
|
})
|
|
|
|
const { dealer } = useStore();
|
|
const {
|
|
$snackbar,
|
|
$getdata,
|
|
$insertapi,
|
|
$deleteapi,
|
|
$findapi,
|
|
$getapi,
|
|
$dayjs,
|
|
$unique
|
|
} = useNuxtApp();
|
|
|
|
const layoutModes = { GRID: 'grid', LIST: 'list' };
|
|
const layoutMode = ref(layoutModes.GRID);
|
|
|
|
const convertToWebp = ref(false);
|
|
const webpQuality = ref(80);
|
|
|
|
const project = await $getdata('project', { id: props.projectId }, undefined, true);
|
|
const images = ref([]);
|
|
const isForProduct = computed(() => props.productId !== undefined);
|
|
const product = isForProduct.value ? await $getdata("product", { id: props.productId }, undefined, true) : undefined;
|
|
const showmodal = ref()
|
|
const imgshow = ref([])
|
|
const hashtag = ref()
|
|
const current = ref()
|
|
|
|
async function loadImages() {
|
|
const values = "id,file__hashtag,file__code,file,create_time,file__code,file__type,file__doc_type,file__name,file__file,file__size,file__caption,file__user__fullname,";
|
|
|
|
const projectImages = await $getdata("projectfile", undefined, {
|
|
filter: { project: project.id, file__type: 2 },
|
|
values: values + 'project',
|
|
sort: "-create_time"
|
|
});
|
|
|
|
if (isForProduct.value) {
|
|
const productImages = await $getdata("productfile", undefined, {
|
|
filter: { product: props.productId, file__type: 2 },
|
|
values: values + 'product',
|
|
sort: "-create_time"
|
|
});
|
|
|
|
const sameTemplateImages = projectImages.filter(img => img.file__name.startsWith(product.template_name));
|
|
images.value = [...productImages, ...sameTemplateImages];
|
|
}
|
|
else {
|
|
images.value = projectImages;
|
|
}
|
|
imgshow.value = [...images.value]
|
|
hashtag.value = $unique(images.value.filter(v=>v.file__hashtag), ["file__hashtag"])
|
|
hashtag.value.map(v=>v.count = images.value.filter(x=>x.file__hashtag===v.file__hashtag).length)
|
|
}
|
|
|
|
const handleKeyDown = debounce((e) => {
|
|
if (e.key === 'Escape') closeViewImage();
|
|
if (e.key === 'ArrowLeft') showPrevImage();
|
|
if (e.key === 'ArrowRight') showNextImage();
|
|
}, 100);
|
|
|
|
onMounted(() => {
|
|
loadImages();
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('keydown', handleKeyDown);
|
|
})
|
|
|
|
async function attachFiles(files) {
|
|
if (!project) return 0;
|
|
|
|
const payload = files.map((file) => ({
|
|
file: file.id,
|
|
project: isForProduct.value ? undefined : project.id,
|
|
product: isForProduct.value ? product.id : undefined
|
|
}));
|
|
|
|
const result = await $insertapi(isForProduct.value ? "productfile" : "projectfile", payload);
|
|
if (result === "error") {
|
|
throw new Error("Không thể liên kết tệp");
|
|
}
|
|
return payload.length;
|
|
}
|
|
|
|
async function onUploaded(uploadedFiles) {
|
|
if (!Array.isArray(uploadedFiles) || uploadedFiles.length === 0) return;
|
|
|
|
try {
|
|
const attachedCount = await attachFiles(uploadedFiles);
|
|
|
|
if (attachedCount > 0) {
|
|
loadImages();
|
|
$snackbar(`Đã thêm ${attachedCount} ảnh thành công`, "Thành công", "Success");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error attaching images:", error);
|
|
$snackbar("Không thể thêm ảnh, vui lòng thử lại", "Lỗi", "Error");
|
|
}
|
|
}
|
|
|
|
async function deleteImage(image) {
|
|
try {
|
|
await $deleteapi(isForProduct.value ? "productfile" : "projectfile", image.id);
|
|
await $deleteapi("file", image.file);
|
|
loadImages();
|
|
$snackbar("Đã xóa ảnh thành công", "Thành công", "Success");
|
|
} catch (error) {
|
|
console.error("Error deleting image:", error);
|
|
$snackbar("Xóa ảnh không thành công", "Lỗi", "Error");
|
|
}
|
|
}
|
|
|
|
async function excel() {
|
|
const found = $findapi('exportcsv')
|
|
found.params = {}
|
|
let fields = [{name: 'code', label: 'code'}, {name: 'name', label: 'name'}, {name: 'caption', label: 'caption'}, {name: 'hashtag', label: 'hashtag'}]
|
|
found.params.fields = JSON.stringify(fields)
|
|
found.url = 'exportcsv/File/'
|
|
found.params.filter = {code__in: images.value.map(v=>v.file__code)}
|
|
const rs = await $getapi([found])
|
|
if(rs === 'error') return $snackbar('Đã xảy ra lỗi. Vui lòng thử lại.')
|
|
const url = window.URL.createObjectURL(new Blob([rs[0].data]))
|
|
const link = document.createElement('a')
|
|
const fileName = `${$dayjs(new Date()).format('YYYYMMDDhhmmss')}-data.csv`
|
|
link.href = url
|
|
link.setAttribute('download', fileName)
|
|
document.body.appendChild(link)
|
|
link.click()
|
|
link.remove()
|
|
}
|
|
|
|
function importData() {
|
|
showmodal.value = {"title":"Nhập bút toán theo lô","vbind":{"code":"file-import"},
|
|
"width":"90%","height":"500px","component":"parameter/ImportData"}
|
|
}
|
|
|
|
function refreshShow(tag) {
|
|
if(current.value===tag.file__hashtag) {
|
|
imgshow.value = [...images.value]
|
|
current.value = null
|
|
return
|
|
}
|
|
imgshow.value = images.value.filter(v=>v.file__hashtag===tag.file__hashtag)
|
|
current.value = tag.file__hashtag
|
|
}
|
|
|
|
// State cho xem ảnh lớns
|
|
const activeImageIndex = ref(null);
|
|
|
|
function viewImage(index) {
|
|
activeImageIndex.value = index;
|
|
}
|
|
|
|
function showNextImage() {
|
|
activeImageIndex.value = (activeImageIndex.value + 1) % imgshow.value.length;
|
|
}
|
|
|
|
function showPrevImage() {
|
|
activeImageIndex.value = (activeImageIndex.value - 1 + imgshow.value.length) % imgshow.value.length;
|
|
}
|
|
|
|
function closeViewImage() {
|
|
activeImageIndex.value = null;
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.gallery-arrows {
|
|
> * {
|
|
position: absolute;
|
|
top: 50%;
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
padding: 0.5rem;
|
|
border: none;
|
|
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
|
|
|
|
&:hover {
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
}
|
|
}
|
|
|
|
.gallery-count {
|
|
position: absolute;
|
|
bottom: 24px;
|
|
left: 0;
|
|
right: 0;
|
|
width: fit-content;
|
|
margin-inline: auto;
|
|
|
|
padding: 4px 12px;
|
|
border-radius: 9999px;
|
|
color: white;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
font-size: 0.85rem;
|
|
}
|
|
</style> |