schema form editor

pembuat skema-bentuk

pembuat skema-bentuk adalah editor formulir visual berdasarkan vue.

Untuk dokumentasi selengkapnya, lihat bab yang relevan di wiki. Instal dependensi |. Jalankan editor |. Buat skema ekspor |

Instal dependensi

Gunakan npm asli untuk menginstal, cnpm tidak didukung untuk saat ini.

 npm install

(Lihat instalasi untuk detailnya)

Jalankan editor

Setelah menyelesaikan instalasi, jalankan

 npm run dev

Jalankan editor formulir, dan setelah startup selesai, buka http://localhost:8080/ untuk akses.

(Lihat Pengoperasian untuk detailnya)

Bangun formulir

Editor formulir dibagi menjadi tiga area di kiri, tengah dan kanan:

Bilah komponen

Di sisi paling kiri tampilan adalah [Bilah Komponen], dan Anda dapat menggunakan drag dan drop untuk menambahkan komponen ke formulir di tengah [Area Bangunan].

daerah konstruksi

Di tengah tampilan adalah [Area Bangunan], yang menampilkan formulir yang sedang diedit.
Setelah mengklik untuk memilih salah satu item formulir, Anda dapat mengeditnya di [Menu Konfigurasi] di sebelah kanan.
Anda dapat menekan ctrl + s atau cmd + s kapan saja selama proses pengeditan untuk menyimpan.

(Untuk lebih jelasnya silakan lihat pada Form Konstruksi-Area Bangunan)

Menu konfigurasi

Di sisi paling kanan tampilan adalah [Menu Konfigurasi], yang memungkinkan Anda mengedit item formulir yang dipilih di [Area Bangunan].

Skema ekspor

Setelah menyelesaikan pembuatan formulir, klik tombol [Struktur] di bagian bawah area konstruksi untuk melihat skema formulir di kotak dialog pop-up.
Di sudut kanan atas kotak dialog skema, terdapat dua tombol [Salin] dan [Unduh], yang dapat digunakan untuk mengekspor skema.

Merender formulir

Setelah mengekspor skema, Anda dapat menggunakan komponen skema-form-render untuk merender ulang formulir di proyek Anda sendiri.

Contoh kode:

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