Основные поля формы

Поля формы представляют из себя компоненты формы (InputField, DateField итд.) обёрнутые в ValidationProvider от библиотеки vee-validate

Основные вопросы по валидации решают с помощью документации vee-validate v.3 Кастомные правила и описания ошибок представлены в файле plugins/vee-validate.js

ValidationInputField

Основные Props:

• labelTitle - может использоваться вместо аттрибута title для элемента
• labelClass - css класс для label
• customClass - css класс для элемента
• mask - маска
• type - тип инпута
• vid - validation id
• append - для аппенда иконок
• prepend - для препенда иконок
• rules - правила для валидации
• validateName - имя поля для валидации
• label
• value
• placeholder
• readonly
• disabled

ValidationSearchSelectField

Выпадающий список, для которого спользуется компонент из библиотеки Multiselect.

Основные Props:

• labelTitle - может использоваться вместо аттрибута title для элемента
• labelClass - css класс для label
• queryOpt - используется для предзагрузки значения при редактировании ранее заполненных форм
• searchFunction - ф-ия, которая задаёт сущность и фильтрацию при поиске
• rules - правила для валидации
• validateName - имя поля для валидации
• label
• value
• placeholder
• readonly
• disabled

SearchFunction

Унифицированная функция, которая собирает запрос в соотв. с переданными аргументами:

• val - значение для поиска
• filterName - имя поля для фильтрации
• filterRule - правило фильтрации (EQ, LIKE итд.)
• addFilters - дополнительные фильтры
• apiName - имя сущности api для поиска
• apiMethod - метод api для поиска
• getUser - форматирует выдачу при поиске пользователей
• getCompany - форматирует выдачу при поиске компании
• getCollection - форматирует выдачу при поиске коллекций
• getCollectionBySlug - форматирует выдачу при поиске коллекций по слагу
• getBank - форматирует выдачу при поиске банков
• getOutlet - форматирует выдачу при поиске ТТ
• extend - список экстендов для запроса
• optionName - вывод дополнительного параметра name при поиске пользователей
• pageLimit - лимит выводимых данных

Пример использования функции для поиска по территориальным менеджерам:

В template

    <ValidationSearchSelectField
        :value="termanOption.value"
        rules="required"
        class="col-4"
        :options="termOptions"
        label="Территориальный менеджер"
        :search-function="terManSearchFunction"
        validate-name="territory_user_id"
        @input="editField($event, 'currentUser')"
    />

В script

termanSearchFunction(val) {
    return searchFunction({
        val,
        filterName: "q",
        apiName: "system",
        apiMethod: "getAllUsers",
        addFilters: { "filter[role]": `LIKE(terman)` },
        getUser: true,
    });
},

ValidationDateField

Календарь для выбор дат. В основе используется компонент библиотеки DatePicker. Возможно использование с ручным вводом дат, без календаря, выбора периода.

Основные Props:

• format - формат даты (YYYY-MM-DD, DD.MM.YYYY итд) для отображения
• valueType - формат даты, в котором будет хранится значение
• range - единичная дата или период
• rules - правила для валидации
• validateName - имя поля для валидации
• disabledDate - даты, которые не должны быть доступны для выбора
• label
• value
• placeholder
• readonly
• disabled

Пример использования:

  <ValidationDateField
        v-model="created_at_before"
        class="col-md-4"
        new-date-input
        label="Дата начала периода"
    />

ValidationCheckboxButton

Компонент чекбокса

Основные Props:

• rules - правила для валидации
• validateName - имя поля для валидации
• label
• value

Пример использования:

   <ValidationCheckboxButton
        class="col-4"
        :value="changed_passport || false"
        validate-name="is_changed_passport"
        label="Менялся паспорт"
        @input="editMetaField($event, 'meta')"
    />

ValidationCheckboxGroup

Компонент для отображения группы чекбоксов

Основные Props:

• entity - основные данные
• validateName - имя поля для валидации
• rules - правила для валидации
• value
• label
• checkboxes - модель, описывающая каждый чекбокс
• multiple - возможность выбрать только один или несколько чексбоксов
• onCheckFn - функция - коллбек при выборе чекбокса
• customClass - css класс

Пример использования:

Template

    <ValidationCheckboxGroup
        :checkboxes="checkboxes"
        rules="required:true"
        custom-class="row"
        validate-name="Социальный статус"
        :entity="currentOrder"
    />

Setup

    checkboxes: [
        {
            validateName: "client_is_student",
            class: "col-4",
            label: "Студент",
            blockName: "currentOrder",
            onCheckFn: this.editField,
        },
        {
            validateName: "client_is_worker",
            class: "col-4",
            label: "Рабочий",
            blockName: "currentOrder",
            onCheckFn: this.editField,
        },
        {
            validateName: "client_is_retiree",
            class: "col-4",
            label: "Пенсионер",
            blockName: "currentOrder",
            depends: "client_retiree_status_cid",
            onCheckFn: this.editFieldCheckbox,
        },
    ]

ValidationRadioGroup

Компонент для отображения группы радио элементов. Представляет из себя оболочку для компонента b-form-radio-group

Основные Props:

• label
• validateName - имя поля для валидации
• rules - правила для валидации
• options - список опции
• value

Пример использования:

Template

<ValidationRadioGroup
    id="client-pass-gender"
    :value="passport.gender_cid.value || ''"
    rules="required"
    validate-name="gender_cid"
    class="col-4"
    label="Пол"
    :options="genderOptions"
    @input="editField($event, 'passport')"
/>

Setup

 this.genderOptions = (
        await this.$api.system.getAllCollections({ params: { "filter[collection]": "EQ(gender)" } })

ValidationDadataAddressField

Компонент для поиска адреса с использованием сервиса Dadata. Представляет из себя обёртку для компонента SearchSelectField (с Multiselect), в котором запрос с адресом сначала посылается в сервис Dadata.

Основные Props:

• queryOpt - используется для предзагрузки значения при редактировании ранее заполненных форм
• canEditValue - возможно ли редактирование выбранного адреса
• searchFunction - ф-ия, которая задаёт сущность и фильтрацию при поиске
• party - поиск организации или адреса
• rules - правила для валидации
• validateName - имя поля для валидации
• label
• value
• placeholder
• readonly
• disabled

Пример использования:

    <ValidationDadataAddressField
        id="client-reg-address"
        ref="regAddressDadata"
        :value="registry_address.source.value"
        :query-opt="getRegAdSource.value.title"
        class="col-12"
        rules="required"
        label="Поиск адреса"
        validate-name="Адрес регистрации"
        can-edit-value
        @input="
            [
                editField(
                    { newValue: $event.unrestricted_value, name: 'source' },
                    'registry_address'
                ),
                sendDadata($event.data, 'registry_address'),
            ]
        "
    />

ValidationDadataFMSField

Компонент для поиска кода подразделения из паспортных данных с использованием сервиса Dadata.

Основные Props:

• queryOpt - используется для предзагрузки значения при редактировании ранее заполненных форм
• canEditValue - возможно ли редактирование выбранного адреса
• searchFunction - ф-ия, которая задаёт сущность и фильтрацию при поиске
• party - поиск организации или адреса
• rules - правила для валидации
• validateName - имя поля для валидации
• label
• value
• placeholder
• readonly
• disabled

Пример использования:

     <ValidationDadataFMSField
        id="client-pass-fms"
        :value="passport.division_code.value"
        :query-opt="passport.division_code.value"
        is-fms
        validate-name="Код подразделения"
        rules="required|min:7"
        class="col-4"
        label="Код подразделения"
        mask="###-###"
        @input="
            [
                editField({ newValue: $event.code, name: 'division_code' }, 'passport'),
                standartizeIssuedBy($event.name),
            ]
        "
    />