Главная страница

Backend

На главной странице реализован функционал получения отчёта по контракту, а также небольшая статистика по текущим договорам. Статистика реализована с помощью получения соответствующих списков c эндпоинтов /contracts/ и /employers и взятия их длины. Для получения отчёта по конкретному номеру (id) контракта реализован специальный эндпоинт /contracts/report/<int:pk>.

Frontend

Скрипт:

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

4. useAuthStore для управления аутентификацией.

5. Переменные и Данные:

6. numEmployees, numContracts, contractId, report, username, errorMsg для хранения данных системы.

7. Функции:

8. loadReport для загрузки отчета по контракту.
9. logout для выхода из системы.

10. formatReportForDataTable для форматирования отчета.

11. Сайд-эффекты:

12. onMounted для инициализации данных пользователя, сотрудников и контрактов при монтировании.

Разметка:

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

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

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

Стилизация:

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

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

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

Пример запроса:

Пример запроса несуществующего контракта: