Un ensemble de code par formulaire, ou dix esnembles de code pour dix formulaires ?

Étant donné ma paresse, je ne saurais écrire autant de code ! Je vise à n'avoir qu'un seul ensemble de code pour gérer cent formulaires, sans copier-coller. L'objectif est de pouvoir charger différentes métadonnées pour générer plusieurs formulaires.

La structure des métadonnées a été abordée précédemment. Ici, nous nous concentrerons sur la création des formulaires.

Démonstration de formulaire

Créons d'abord deux formulaires simples : l'un pour les informations de l'entreprise, l'autre pour les informations du personnel. Le code est assez simple. Commençons par un menu basique :

Menu

   <div style="background-color:#dddddd;height:600px;width:100px;float:left;">
     <a href="#" @click="switchForm('companyInfo')">Informations entreprise</a> <br>
     <a href="#" @click="switchForm('employeeInfo')">Informations employé</a>
   </div>
   

Formulaire

Ensuite, nous utilisons v-for pour itérer sur les métadonnées et afficher les composants de champ.

   <div style="background-color:#eee;height:600px;width:400px;float:left;">
     <table>
       <tr v-for="(field, index) in formMetadata" :key="index">
         <td align="right">{{ field.label }} :</td>
         <td align="left">
           <CustomInput v-model="formData[field.columnName]" :field-config="field" />
         </td>
       </tr>
     </table>
   </div>
   

Chargement des données JSON

Dans la section setup, nous chargeons le fichier JSON contenant les métadonnées, définissons les métadonnées pour le formulaire actuel et créons dynamiquement un objet de données pour le lier au formulaire.

   <script>
   import { ref } from 'vue'
   import CustomInput from '@/components/CustomInput.vue' // Assurez-vous que le chemin est correct

   export default {
     name: 'DynamicFormDemo',
     components: {
       CustomInput
     },
     setup () {
       const formConfigs = require('./formConfigs.json') // Charger les métadonnées au format JSON
       const formData = ref({}) // Modèle pour stocker les données du formulaire
       const formMetadata = ref(formConfigs.companyInfo) // Métadonnées pour le formulaire actuel

       const switchForm = (formKey) => {
         // Changer les métadonnées du formulaire
         formMetadata.value = formConfigs[formKey]
         // Réinitialiser et créer le modèle de données pour le nouveau formulaire
         formData.value = {}
         for (const key in formMetadata.value) {
           const field = formMetadata.value[key]
           formData.value[field.columnName] = '' // Initialiser avec une chaîne vide
         }
       }

       // Initialiser avec le premier formulaire au chargement
       switchForm('companyInfo')

       return {
         formData,
         formMetadata,
         switchForm
       }
     }
   }
   </script>
   

Effet de l'exécution

Lorsque vous cliquez sur un élément du menu, il ne s'agit pas d'un changement de "page" ni d'un changement de composant. Il s'agit simplement d'une modification des métadonnées. Lorsque les métadonnées changent, le formulaire se met à jour dynamiquement. C'est simple, n'est-ce pas ? Ainsi, même avec un grand nombre de formulaires, la gestion devient beaucoup plus facile.

Modèle de données

Le modèle de données peut être pré-défini dans les métadonnées ou créé dynamiquement. Étant paresseux, je préfère la création dynamique. Les modèles de données de structure simple peuvent être gérés sans problème.

Une chose de plus

À l'avenir, nous intégrerons des composants de recherche, ce qui sera encore plus puissant.