Добавление новых договоров

Backend

Добавлять новые договоры может только менеджер, имеющий соответствующее разрешение (в рамках лабораторной работы — член группы staff). Добавление договора происходит с помощью POST-запроса на эндпоинт /contracts/. Задача фронтенда — преобразовать человекочитаемые названия объектов в соответствующие id.

Frontend

Скрипт:

1. Импорты:
2. computed, ref, watch из Vue.js для реактивности.
3. fetchWrapper для выполнения HTTP-запросов.

4. useRouter для навигации.

5. Основные Переменные:

6. contract, organizations, agents, employees для хранения данных формы и связанных сущностей.

7. Функции:

8. loadData для загрузки данных организаций, агентов и сотрудников.
9. submitContract для отправки данных контракта.

10. filteredEmployees для фильтрации сотрудников в соответствии с выбранной организацией.

11. Наблюдатели (watchers):

12. Отслеживание изменений в выборе организации для обновления списка сотрудников.

Разметка:

• Форма для создания контракта с использованием Vuetify компонентов.
• Включает в себя поля для выбора типа контракта, даты начала и окончания, стоимости страховки, а также выбора организации, агента и сотрудников.

Логика работы:

1. Инициализация: Загрузка данных организаций, агентов и сотрудников при загрузке компонента.
2. Ввод данных: Пользователь вводит или выбирает необходимые данные для создания контракта.
3. Фильтрация сотрудников: Основываясь на выбранной организации, предлагается соответствующий список сотрудников.
4. Отправка формы: По нажатию кнопки отправки, данные контракта передаются на сервер.

Стилизация:

Использование Vuetify для создания привлекательного и функционального интерфейса формы.

Пример работы

Начало работы:

Заполнение полей:

Результат: