Добавил шаг с услугами

src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue

@@ -9,27 +9,18 @@
           v-model="category",
           :items="categories",            
         )
-      .flex.w-full.my-6
-        .flex-col
-          .font-semibold.text-smm Дата подписания 
-          .input-date.flex.h-10.justify-center
+      .flex.justify-between.w-full.gap-4
         base-input-date(
-              :width-input="200",
-              v-model:value="signedDate"
+          v-model="signedDate",
+          label="Дата подписания"
         )        
-        .flex-col
-          .font-semibold.text-smm Начало оказания услуг
-          .input-date.flex.h-10.justify-center
         base-input-date(
-              :width-input="200",
-              v-model:value="startDate"
+          v-model="startDate",
+          label="Начало оказания услуг"
         )        
-        .flex-col
-          .font-semibold.text-smm Окончание оказания услуг
-          .input-date.flex.h-10.justify-center
         base-input-date(
-              :width-input="200",
-              v-model:value="endDate"
+          v-model="endDate",
+          label="Окончание оказания услуг"
         )
       
       .flex-col.w-full.my-6
@@ -61,7 +52,6 @@ export default {
   },
   data() {
     return {
-      isService: true,
       steps: [
         { id: "1", label: "1", value: "Договор" },
         { id: "2", label: "2", value: "Пациент" },
@@ -73,8 +63,8 @@ export default {
         { id: "Хирургия", label: "Хирургия" },
         { id: "Ортопедия", label: "Ортопедия" },
       ],
-      signedDate: undefined,
-      startDate: undefined,
+      signedDate: new Date(),
+      startDate: new Date(),
       endDate: undefined,
       employee: {},
       employees: [],

src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue

@@ -1,9 +1,101 @@
 <template lang="pug">
-  .text GHBDTN
+  .flex-col
+    .flex-col
+      .font-semibold.text-smm ФИО пациента 
+      base-input(
+        :width-input="200",
+        v-model:value="patient.full_name"
+      )
+    .flex
+      .flex-col
+        .font-semibold.text-smm Документ, удостоверяющий личность
+        base-custom-select.select.text-sm(
+          placeholder="Тип документа",
+          v-model="patient.doc_type",
+          :items="patentIdentityDocumentTypes",            
+        )
+      .flex-col
+        .font-semibold.text-smm Серия и номер
+        base-input(
+          v-model:value="patient.seriesAndNumber", 
+          disabled,                  
+        )
+    .flex
+      .flex-col
+        .font-semibold.text-smm Телефон
+        base-custom-select.select.text-sm(
+          v-model="patient.phone",
+          :items="patentIdentityDocumentTypes",            
+        )
+      .flex-col
+        .font-semibold.text-smm Адрес
+        base-custom-select.select.text-sm(
+          v-model="patient.phone",
+          :items="patentIdentityDocumentTypes"    
+        )
+    .flex-col
+      .font-semibold.text-smm ФИО Заказчика 
+      base-input(
+        :width-input="200",
+        v-model:value="patient.full_name"
+      )
+    .flex
+      .flex-col
+        .font-semibold.text-smm Документ, удостоверяющий личность
+        base-custom-select.select.text-sm(
+          placeholder="Тип документа",
+          v-model="patient.doc_type",
+          :items="patentIdentityDocumentTypes",            
+        )
+      .flex-col
+        .font-semibold.text-smm Серия и номер
+        base-input(
+          v-model:value="patient.seriesAndNumber", 
+          disabled,                  
+        )
+    .flex
+      .flex-col
+        .font-semibold.text-smm Телефон
+        base-custom-select.select.text-sm(
+          v-model="patient.phone",
+          :items="patentIdentityDocumentTypes",            
+        )
+      .flex-col
+        .font-semibold.text-smm Адрес
+        base-custom-select.select.text-sm(
+          v-model="patient.phone",
+          :items="patentIdentityDocumentTypes" )
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput";
+import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
 export default {
   name: "AgreementPerson",
+  components: {
+    BaseInput,
+    BaseCustomSelect,
+  },
+  data() {
+    return {
+      patient: {
+        full_name: "",
+        doc_type: "",
+        seriesAndNumber: "2354 125423",
+        phone: {},
+      },
+    };
+  },
+  computed: {
+    patentIdentityDocumentTypes() {
+      return [
+        { id: "Паспорт", label: "Паспорт" },
+        {
+          id: "Водительское удостоверение",
+          label: "Водительское удостоверение",
+        },
+      ];
+    },
+  },
 };
 </script>

src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue

@@ -0,0 +1,86 @@
+<template lang="pug">
+  .flex-col
+    span.font-bold Общая информация
+    .flex-col
+      .flex-col.my-6
+        .counter.font-semibold.text-smm Категория
+        base-custom-select.select.text-sm(
+          placeholder="Категория договора",
+          v-model="category",
+          :items="categories",            
+        )
+      .flex.w-full.my-6
+        .flex-col
+          .font-semibold.text-smm Дата подписания 
+          .input-date.flex.h-10.justify-center
+            base-input-date(
+              :width-input="200",
+              v-model:value="signedDate"
+            )
+        .flex-col
+          .font-semibold.text-smm Начало оказания услуг
+          .input-date.flex.h-10.justify-center
+            base-input-date(
+              :width-input="200",
+              v-model:value="startDate"
+            )
+        .flex-col
+          .font-semibold.text-smm Окончание оказания услуг
+          .input-date.flex.h-10.justify-center
+            base-input-date(
+              :width-input="200",
+              v-model:value="endDate"
+            )
+      
+      .flex-col.w-full.my-6
+        .font-semibold.text-smm Исполнитель             
+        base-custom-select.select.text-sm(
+          placeholder="Поручить",
+          v-model="employee",
+          :items="employees",
+        )
+</template>
+
+<script>
+import BaseButton from "@/components/base/BaseButton";
+import BaseStepper from "@/components/base/BaseStepper";
+import BaseSelect from "@/components/base/BaseSelect";
+import BaseInputDate from "@/components/base/BaseInputDate";
+import BaseInput from "@/components/base/BaseInput";
+import BaseCustomSelect from "@/components/base/BaseCustomSelect.vue";
+
+export default {
+  name: "AgreementServices",
+  components: {
+    BaseButton,
+    BaseStepper,
+    BaseSelect,
+    BaseInputDate,
+    BaseInput,
+    BaseCustomSelect,
+  },
+  data() {
+    return {
+      isService: true,
+      steps: [
+        { id: "1", label: "1", value: "Договор" },
+        { id: "2", label: "2", value: "Пациент" },
+      ],
+      category: {},
+      categories: [
+        { id: "Консультация", label: "Консультация" },
+        { id: "Терапия", label: "Терапия" },
+        { id: "Хирургия", label: "Хирургия" },
+        { id: "Ортопедия", label: "Ортопедия" },
+      ],
+      signedDate: undefined,
+      startDate: undefined,
+      endDate: undefined,
+      employee: {},
+      employees: [],
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped></style>

src/pages/clients/components/StepperCreateAgreement.vue

@@ -34,6 +34,7 @@ import BaseButton from "@/components/base/BaseButton";
 import BaseStepper from "@/components/base/BaseStepper";
 import AgreementCommon from "./FormsAgreementCreate/AgreementCommon";
 import AgreementPerson from "./FormsAgreementCreate/AgreementPerson";
+import AgreementServices from "./FormsAgreementCreate/AgreementServices";
 
 export default {
   name: "StepperCreateAgreement",
@@ -42,6 +43,7 @@ export default {
     BaseStepper,
     AgreementCommon,
     AgreementPerson,
+    AgreementServices,
   },
   data() {
     return {
@@ -62,8 +64,8 @@ export default {
         {
           id: 2,
           label: "2",
-          value: "Пациент",
-          component: "agreement-person",
+          value: "Услуги",
+          component: "agreement-services",
         },
       ],
     };