multipleform

Funcionalidades

• Construir varios formularios dinamicamente
• Agregar formularios
• Eliminar formularios

El componente MultipleForm te permite gestionar múltiples conjuntos de campos de formulario, como en el caso de formularios repetibles o dinámicos.

Uso en Componentes

Utilizando en un Componente

Puedes integrar el componente MultipleForm en tus componentes de la siguiente manera:

<template>
  <div>
    <MultipleForm
      title="Daños partes"
      :forms="daniosPartes"
      :deleteIcon="deleteIconUrl"
      @remove="removeFormDaniosPartes"
      @add="addForm"
      @getMultipleValues="getMultipleValues"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const modelDanios = ref<any>([
    {
        key: "parte_id",
        title: "Parte",
        type : "select",
        validations : {
            rules : {
                required : true
            },
        },
        formatValue: (data:any) => {
            return data?.id
        },
        options: partes,
        placeholder : "Parte",
        value : null,
        cols: 3,
        listenForm: true
    },
    {
        key: "daño_id",
        title: "Daños",
        type : "select",
        validations : {
            rules : {
                required : true
            },
        },
        formatValue: (data:any) => {
            return data?.id
        },
        options: daños,
        placeholder : "Daños",
        value : [],
        cols: 4,
        listenForm: true
    },
    {
        key: "codigo",
        title: "Codigo de danio",
        type : "text",
        placeholder : "Codigo de danio",
        value : null,
        state : null,
        cols: 4,
        listenForm: true
    },
    {
        slot: true,
        key: 'delete-0',
        cols: 1
    }
])

const daniosPartes = ref<any>([modelDanios.value])

const daniosPartesValues = ref<any>([])

const deleteIconUrl = `${baseApiUrl}/icons/basura.svg`;

const removeFormDaniosPartes = async (data : any) => {
    let lookForIndex = daniosPartes.value.findIndex((forms:any) => forms.findIndex((input:any) => input.key === data.unique) > -1)
    if(lookForIndex > -1){
        daniosPartesValues.value.splice(lookForIndex, 1)
        daniosPartes.value.splice(lookForIndex, 1)
    }
}

const addForm = () => {
    let nextForm = modelDanios.value.map((form: any) => {
        if(form.slot === true){
            return {
                ...form,
                key: 'delete-' + generateId()
            }
        } else {
            return form
        }
    });
    daniosPartes.value.push(nextForm)
}

const removeDeleteKeys = (obj: object) => {
  const newObj = {};

  Object.keys(obj).forEach((key) => {
    if (!/^delete-\d+$/.test(key)) {
      newObj[key as keyof object] = obj[key as keyof object];
    }
  });

  return newObj;
};

const getMultipleValues = async ({ formValues, index}: any) => {
    const cleanedFormValues = removeDeleteKeys(formValues);
    daniosPartesValues.value[index] = cleanedFormValues;
}
</script>

Propiedades y Configuraciones

Propiedad/Configuración	Tipo	Descripción
forms	Array	Conjuntos de campos de formulario.
title	String	Título que se muestra en la sección.
deleteIcon	String	URL del ícono de eliminación.
icon	String	URL del ícono para agregar.

Eventos

Evento	Parámetros	Descripción
remove	form, index, unique	Se emite al eliminar un conjunto de formulario.
add	-	Se emite al agregar un nuevo conjunto de formulario.
getMultipleValues	data	Se emite para obtener los valores de un conjunto.