65 lines
2.0 KiB
Vue
65 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import Card from 'primevue/card';
|
|
import FileUpload from 'primevue/fileupload';
|
|
import type { FixedAssetFormData } from '../../types/fixedAsset';
|
|
|
|
interface Props {
|
|
form: FixedAssetFormData;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
|
|
const onSelectFile = (event: { files: File[] }) => {
|
|
const file = event.files?.[0];
|
|
props.form.imageFileName = file ? file.name : '';
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<Card class="shadow-sm h-full">
|
|
<template #title>
|
|
<div class="flex items-center gap-2 text-xl">
|
|
<i class="pi pi-image text-primary"></i>
|
|
<span>Imagen del Activo</span>
|
|
</div>
|
|
</template>
|
|
<template #content>
|
|
<div class="space-y-4">
|
|
<FileUpload
|
|
mode="basic"
|
|
name="fixed-asset-image"
|
|
accept="image/png,image/jpeg"
|
|
:maxFileSize="5000000"
|
|
chooseLabel="Subir Imagen"
|
|
class="w-full"
|
|
@select="onSelectFile"
|
|
/>
|
|
|
|
<div class="upload-dropzone">
|
|
<i class="pi pi-upload text-3xl text-surface-400"></i>
|
|
<p class="mt-2 text-sm font-semibold text-surface-700 dark:text-surface-200">Subir Imagen</p>
|
|
<p class="mt-1 text-xs text-surface-500 dark:text-surface-400">PNG, JPG hasta 5MB</p>
|
|
</div>
|
|
|
|
<div class="rounded-lg bg-surface-100 px-3 py-2 text-xs text-surface-500 dark:bg-surface-800 dark:text-surface-400">
|
|
{{ form.imageFileName || 'No seleccionado' }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Card>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.upload-dropzone {
|
|
border: 1px dashed var(--p-surface-300);
|
|
border-radius: 0.75rem;
|
|
min-height: 160px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 1rem;
|
|
}
|
|
</style>
|