schema form editor

スキーマフォームメーカー

schema-form-maker は、vue に基づいたビジュアル フォーム エディターです。

詳細なドキュメントについては、Wiki の関連する章を参照してください。

依存関係をインストールする

インストールにはネイティブ npm を使用します。現時点では cnpm はサポートされていません。

 npm install

(詳細はインストールを参照してください)

エディターの実行

インストール完了後、実行してください

 npm run dev

フォーム エディターを実行し、起動が完了したらhttp://localhost:8080/を開いてアクセスします。

(詳細は「操作方法」を参照)

フォームを構築する

フォーム エディターは、左、中央、右の 3 つの領域に分かれています。

コンポーネントバー

ビューの一番左側には[コンポーネントバー]があり、中央の[ビルディングエリア]のフォームにドラッグ＆ドロップでコンポーネントを追加できます。

工事エリア

ビューの中央には[構築エリア]があり、現在編集中のフォームが表示されます。
フォーム項目をクリックして選択すると、右側の[設定メニュー]で編集できます。
編集プロセス中にいつでもctrl + sまたはcmd + sを押して保存できます。

（詳しくはフォーム建設・建築エリアをご覧ください）

設定メニュー

ビューの右端には[構成メニュー]があり、[構築エリア]で選択したフォーム項目を編集できます。

スキーマのエクスポート

フォームの構築が完了したら、構築エリアの下部にある[構造]ボタンをクリックすると、ポップアップダイアログボックスにフォームのスキーマが表示されます。
スキーマダイアログボックスの右上には、[コピー]と[ダウンロード]の2つのボタンがあり、スキーマをエクスポートするために使用できます。

レンダリングフォーム

スキーマをエクスポートした後、 schema-form-render コンポーネントを使用して、独自のプロジェクトでフォームを再レンダリングできます。

サンプルコード:

< 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 >