WIP Подтянула данные в форму мед.карты

src/pages/medicalCard/components/MedicalBaseData.vue

@@ -3,20 +3,27 @@
     .flex.flex-col.gap-y-6
       span.font-bold Основное
       .flex.flex-col.gap-y-6
-        base-input.w-full(placeholder="ФИО*")
+        base-input.w-full(
+          placeholder="ФИО*",
+          v-model="clientDetail.fullName",
+        )
         base-radio-buttons-group(
           :items="gendersList",
           radioButtonsLabel="Пол",
-          v-model="gender",
+          v-model="clientDetail.gender",
         )
         .flex.gap-x-4
           .input
-            base-input-date(label="Дата рождения")
+            base-input-date(
+              label="Дата рождения",
+              v-model="clientDetail.birth_date",
+            )
           .input
             base-input(
               placeholder="000–000–000 00",
               v-mask="'###-###-### ##'",
-              label="СНИЛС"
+              label="СНИЛС",
+              v-model="clientDetail.insurance_number",
             )
         .flex.flex-col.gap-y-6
           base-input(
@@ -32,12 +39,14 @@
             base-input(
               label="Номер телефона",
               placeholder="+7 (915) 644–92–23",
-              v-mask="'+7 (###) ###-##-##'"
+              v-mask="'+7 (###) ###-##-##'",
+              v-model="clientDetail.phone",
             )
           .input
             base-input(
               label="Email",
               placeholder="user@yandex.ru"
+              v-model="clientDetail.email",
             )
 </template>
 
@@ -48,6 +57,7 @@ import BaseSelect from "@/components/base/BaseSelect";
 import BaseButton from "@/components/base/BaseButton";
 import { mask } from "vue-the-mask";
 import BaseRadioButtonsGroup from "@/components/base/BaseRadioButtonsGroup.vue";
+import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig.js";
 
 export default {
   name: "MedicalBaseData",
@@ -59,22 +69,13 @@ export default {
     BaseRadioButtonsGroup,
   },
   directives: { mask },
-  data() {
-    return {
-      gendersList: [
-        {
-          id: "1",
-          label: "Мужской",
-          value: "male",
-        },
-        {
-          id: "2",
-          label: "Женский",
-          value: "woman",
-        },
-      ],
-      gender: "",
-    };
+  props: {
+    clientDetail: Object,
+  },
+  computed: {
+    gendersList() {
+      return medicalDetailConfig.gendersList;
+    },
   },
 };
 </script>