UNPKG

5.94 kBMarkdownView Raw
1## Введение
2vuetify-schema-form может использоваться двумя способами:
31) просто как набор часто используемых компонентов. В этом случае нужные компоненты нужно подключать из папки /src/components
42) или же можно ее использовать, как более удобный (по крайней мере для меня) построитель сложных форм. В этом случае форма строится не по html-разметке, а по JS-объекту
5
6Например, хотим построить форму с вкладками? Пишем вот такую структуру и передаем ее на вход либы:
7
8 fields: {
9 type: 'tabs',
10 fields: [{
11 label: 'Основная информация',
12 type: 'row',
13 fields: [{
14 type: 'row',
15 md: 8,
16 fields: [
17 { label: 'Фамилия', value: 'secondName', md: 3, required: true },
18 { label: 'Имя', value: 'firstName', md: 3, required: true },
19 { label: 'Отчество', value: 'middleName', md: 3, required: true }
20 ]
21 }, {
22 type: 'row',
23 md: 4,
24 fields: [{
25 label: 'Телефоны',
26 value: 'phones',
27 type: 'array',
28 containerProps: { noGutters: true },
29 inputType: 'phone',
30 inputProps: { cols: 12 },
31 required: true,
32 noGutters: true
33 }
34 ]
35 }]
36 }, {
37 label: 'Файлы',
38 type: 'row',
39 fields: [{
40 label: 'Файлы',
41 value: 'files',
42 type: 'files',
43 foreignKey: 'driverId',
44 foreignKeyValue: () => this.id
45 }]
46 }]
47 }
48
49## Особенности
50- Уменьшает объем кода, который надо написать по следующим причинам:
51 1) разворачивает некоторые пропсы во Vue-компоненты: к примеру, дети элемента 'row' оборачиваются элементом \<v-col>.
52 2) Проперти required: true у элементов превращается в правило с required-валидацией
53 3) Нет необходимости каждый раз импортировать нужные элементы (это, конечно, и минус, скорее всего, так как увеличит размер бандла)
54
55- Имеет множество частоиспользуемых компонентов. Напишу только про самые сложные, а остальные можно увидеть в исходнике:
561) 'remote' -- автокомплит по связанной сущности. Поддерживает поиск или выгрузку всех элементов при создании компонента
572) 'file' и 'files' -- сложные элементы и совсем без возможности кастомизации. Работали только в связке с koa-file-uploader-router на сервере. Могут принимать те же пропсы, что и другие компоненты. Особенные пропсы:
58`params` (у 'file') -- объект, позволяющий связать данный файл с сущностью в другой таблице. К примеру, нужно связать загружаемые файлы с водителем -- передаем сюда: params: {driverId: "some-uuid"}. Тогда файлы кокретного водителя отобразятся в форме. Необходимо, чтобы это поле (driverId) было объявлено в Хасуре в таблице File
59`foreignKey`, `foreignKeyType` (по умолчанию uuid!), `foreignKeyValue` -- пропсы для 'files'. Позволяют связывать файлы к сущности. Являются обязательными полями. В таблице File обязательно должно быть столбец "sort" -- сортировка в списке
60Я не спорю -- эти 3 компонента написаны не очень. Но мне они очень сильно упрощают жизнь
613) 'mask' -- инпут с поддержкой маски. Используется внутри элемента 'phone'. Я вынес его сюда, так как внутри 'mask' использует не v-mask какой-нибудь глючный, а Cleave.js который намного гибче, но при этом и интегрировать во Vue его сложней
624) 'array' -- тоже сложный элемент. Позволяет делать "массивы" компонентов (которые в Хасуре будут храниться в типе JSONB). Принимает проп inputType -- тип инпута из этой же либы (например, inputType: 'phone') покажет массив телефонов с возможностью добавлять новые элементы, проверять валидацию и т.д. Лучше посмотрите как на МТР реализован массив телефонов/емейлов у водилы
63
64## Минусы
65- Я не уверен, что такой подход построения форм намного лучше, чем классический с шаблонами. Но мне нравится и особых проблем я пока не вижу
66
67Кастомизировать инпуты можно или добавив новый тип (см. файл useSchemaForm в МТР), или через scopedSlot: <template #item.phone="{item}"> -- где "phone" это поле _value_ из структуры, _item_ -- текущий объект формы
68