schema form editor

créateur de formulaires de schéma

schema-form-maker est un éditeur de formulaires visuels basé sur vue.

Pour une documentation détaillée, consultez les chapitres pertinents du wiki Installer les dépendances | Exécuter l'éditeur | Créer le schéma | Exporter le formulaire.

Installer les dépendances

Utilisez npm natif pour l'installation, cnpm n'est pas pris en charge pour le moment.

 npm install

(Reportez-vous à l'installation pour plus de détails)

Exécuter l'éditeur

Après avoir terminé l'installation, exécutez

 npm run dev

Exécutez l'éditeur de formulaire et une fois le démarrage terminé, ouvrez http://localhost:8080/ pour y accéder.

(Voir Fonctionnement pour plus de détails)

Construire un formulaire

L'éditeur de formulaire est divisé en trois zones à gauche, au milieu et à droite :

Barre de composants

À l'extrême gauche de la vue se trouve la [Barre de composants], et vous pouvez utiliser le glisser-déposer pour ajouter les composants au formulaire au milieu de la [Zone de construction].

zone de construction

Au milieu de la vue se trouve la [Zone du bâtiment], qui affiche le formulaire en cours d'édition.
Après avoir cliqué pour sélectionner l'un des éléments du formulaire, vous pouvez le modifier dans le [Menu de configuration] à droite.
Vous pouvez appuyer sur ctrl + s ou cmd + s à tout moment pendant le processus d'édition pour enregistrer.

(Pour plus de détails, veuillez vous référer au formulaire Zone de construction-bâtiment)

Menu de configuration

À l'extrême droite de la vue se trouve le [Menu de configuration], qui vous permet de modifier les éléments de formulaire sélectionnés dans la [Zone du bâtiment].

Schéma d'exportation

Après avoir terminé la construction du formulaire, cliquez sur le bouton [Structure] en bas de la zone de construction pour afficher le schéma du formulaire dans la boîte de dialogue contextuelle.
Dans le coin supérieur droit de la boîte de dialogue du schéma, il y a deux boutons [Copier] et [Télécharger], qui peuvent être utilisés pour exporter le schéma.

Formulaire de rendu

Après avoir exporté le schéma, vous pouvez utiliser le composant schema-form-render pour restituer le formulaire dans votre propre projet.

Exemple de code :

< template >
  ...
    <!-- DeviceSchema 为渲染表单需要的 schema -->
    <!-- device 为表单数据 -->
    < SchemaFormRender
      :schema = " DeviceSchema "
      :data = " device "
    />
    < el-button @click = " updateDevice " >
      提交
    </ el-button >
  ...
</ template >
< script >
...
export default {
  ...
  methods : {
    async updateDevice () {
      // 用户操作表单后 this.device 的数据会实时更新
      // 这里可以直接通过 this.device 访问到表单中的数据
      await axios . put ( ` http://api.com/device/ ${ this . device . id } ` , this . device );
      this . $message . success ( '保存成功' );
    }
  }
}
</ script >