1 | ## Введение
|
2 | vuetify-schema-form может использоваться двумя способами:
|
3 | 1) просто как набор часто используемых компонентов. В этом случае нужные компоненты нужно подключать из папки /src/components
|
4 | 2) или же можно ее использовать, как более удобный (по крайней мере для меня) построитель сложных форм. В этом случае форма строится не по 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 | - Имеет множество частоиспользуемых компонентов. Напишу только про самые сложные, а остальные можно увидеть в исходнике:
|
56 | 1) 'remote' -- автокомплит по связанной сущности. Поддерживает поиск или выгрузку всех элементов при создании компонента
|
57 | 2) '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 компонента написаны не очень. Но мне они очень сильно упрощают жизнь
|
61 | 3) 'mask' -- инпут с поддержкой маски. Используется внутри элемента 'phone'. Я вынес его сюда, так как внутри 'mask' использует не v-mask какой-нибудь глючный, а Cleave.js который намного гибче, но при этом и интегрировать во Vue его сложней
|
62 | 4) 'array' -- тоже сложный элемент. Позволяет делать "массивы" компонентов (которые в Хасуре будут храниться в типе JSONB). Принимает проп inputType -- тип инпута из этой же либы (например, inputType: 'phone') покажет массив телефонов с возможностью добавлять новые элементы, проверять валидацию и т.д
|
63 |
|