schema form editor

создатель схемы-формы

Schema-form-maker — визуальный редактор форм, основанный на vue.

Подробную документацию см. в соответствующих главах вики. Установите зависимости | Запустите редактор | Создайте форму | Экспортируйте форму |

Установить зависимости

Для установки используйте собственный npm, cnpm в настоящее время не поддерживается.

 npm install

(Подробную информацию см. в разделе «Установка»).

Запустить редактор

После завершения установки выполните

 npm run dev

Запустите редактор форм и после завершения запуска откройте http://localhost:8080/ для доступа.

(Подробнее см. в разделе «Эксплуатация»).

Создание формы

Редактор форм разделен на три области слева, посередине и справа:

Панель компонентов

В крайнем левом углу представления находится [Панель компонентов], и вы можете использовать перетаскивание, чтобы добавить компоненты в форму в середине [Область построения].

строительная площадка

В середине изображения находится [Область построения], в которой отображается форма, редактируемая в данный момент.
После нажатия кнопки выбора одного из элементов формы вы можете отредактировать его в [Меню конфигурации] справа.
Вы можете нажать ctrl + s или cmd + s в любой момент процесса редактирования, чтобы сохранить изменения.

(Подробную информацию см. в разделе «Форма строительно-монтажной площади»).

Меню конфигурации

В дальней правой части представления находится [Меню конфигурации], которое позволяет редактировать выбранные элементы формы в [Области построения].

Экспортировать схему

После завершения построения формы нажмите кнопку [Структура] внизу области построения, чтобы просмотреть схему формы во всплывающем диалоговом окне.
В правом верхнем углу диалогового окна схемы есть две кнопки [Копировать] и [Загрузить], которые можно использовать для экспорта схемы.

Форма рендеринга

После экспорта схемы вы можете использовать компонент 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 >