Componente de Carga de Archivos en Formulario (FormFile)

El componente FormFile te permite crear un grupo de campos de carga de archivos personalizados dentro de un formulario. Puedes usarlo para permitir que los usuarios adjunten archivos a un formulario y asociar información adicional a cada archivo.

Utilizando en un Componente

Ejemplo de Uso

<template>
  <div class="my-4">
      <FormFile
        :label="'Carta de Parte/Remito'"
        :inputs="archivoForm"
        :cols="6"
        :defaultValues="defaultFiles"
        @getValues="getValues"
        @remove="remove"
      />
  </div>
</template>

<script lang="ts" setup>

const archivoForm = ref<any>([
    { 
        key: "descripcion",
        title: "Descripción",
        placeholder: "Resolución",
        type : "textarea",
        value : null,
        state : null,
        cols: 12,
        listenForm: true
    },
])

const archivos = ref<any[]>([])

const getValues = (data: any) => { 
    archivos.value[data.index] = data
}

const remove = (index: number) => {
    archivos.value.splice(index, 1)
}

const defaultFiles = ref<any[]>([])

</script>

Para autocomplentar el formFile

Ideal para cuando quieras actualizar entidades

const completeArchivos = (data: Siniestro) => {
    archivos.forEach((archivo) => {
        let cleanForm = JSON.parse(JSON.stringify(archivoForm.value))
        cleanForm[0].value = archivo.descripcion
        defaultFiles.value.push({
            avatar: {
                image: {
                url: 'https://picsum.photos/200/300'
                }
            },
            id: 'AK459sdfk2380SM7sj',
            form : cleanForm
        })
    })
  }

Propiedades

Propiedad	Tipo	Valor por Defecto	Descripción
label	String	'Carta de Parte/Remito'	Define la etiqueta para el grupo de campos de carga de archivos.
inputs	Array de Inputs		Define los campos de formulario asociados a cada archivo.
cols	Number	6	Define el número de columnas para el diseño del componente.
defaultValues	Array de FileType	[]	Define los valores iniciales para los archivos cargados.

Eventos

Evento	Parámetros	Descripción
getValues	data: object	Se emite cuando se obtienen los valores de los archivos cargados y los campos asociados.
remove	index: number	Se emite cuando se elimina un archivo cargado y sus campos asociados.