WIP Интегрировал форму Основных данных с беком

src/pages/newMedicalCard/components/BasicDataForm.vue

@@ -1,60 +1,67 @@
 <template lang="pug">
-  medical-form-wrapper(title="Основная информация" :change-edit="changeEdit")
+  medical-form-wrapper(title="Основные данные" :change-edit="changeEdit")
     .form-wrap.gap-24.w-full
       .data-section.flex.flex-col.gap-4(v-for="data in configData")
         .font-semibold.text-sm.whitespace-nowrap {{data.dataLabel}}
         .flex.w-full.justify-between.items-center.gap-4(v-for="field in data.fields")
           .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
-          .avatar-field.justify-start(v-if="field.type === 'avatar'")
+          .avatar-field.flex.gap-3.items-center(v-if="field.type === 'avatar'")
             base-avatar(:size="40")
-          base-input(v-else :disabled="!isEdit" v-model="initData[data.dataKey][field.key]" :type="field.type" :width="300" :standout="!isEdit" :outlined="isEdit" text-color="black")
+              img(
+                v-if="basicData[data.dataKey][field.key]" 
+                :src="url + basicData[data.dataKey][field.key]" 
+                alt="AV"
+                )
+              span(v-else) {{ avatar }}
+            .replace-photo.font-medium.text-base.cursor-pointer(v-if="isEdit") Заменить фото
+          .select(v-else-if="field.type === 'select'")
+            base-select(
+              v-model="basicData[data.dataKey][field.key]"
+              :hide-dropdown-icon="!isEdit"
+              :disable="!isEdit"
+              :outlined="isEdit"
+              :standout="!isEdit"
+              :items="genderOptions"
+              bg-color="#e9e9f6"
+              )
+          base-input(
+            v-else 
+            :disabled="!isEdit" 
+            v-model="basicData[data.dataKey][field.key]" 
+            :type="field.type" 
+            :width="300" 
+            :standout="!isEdit" 
+            :outlined="isEdit" 
+            text-color="black"
+            )
 </template>
 
 <script>
+import BaseSelect from "@/components/base/BaseSelect.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
 import BaseAvatar from "@/components/base/BaseAvatar.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
-import { baseDataForm } from "@/pages/newMedicalCard/utils/configMedical";
-import { mapState } from "vuex";
+import {
+  baseDataForm,
+  genderOptions,
+} from "@/pages/newMedicalCard/utils/configMedical";
+import { mapGetters } from "vuex";
+
 export default {
   name: "BasicDataForm",
-  components: { MedicalFormWrapper, BaseInput, BaseAvatar },
+  components: { MedicalFormWrapper, BaseInput, BaseAvatar, BaseSelect },
   data() {
     return {
       isEdit: false,
+      genderOptions: genderOptions,
       configData: baseDataForm,
-      initData: {
-        basicData: {
-          last_name: "",
-          first_name: "",
-          patronymic: "",
-          gender: "",
-          birth_date: new Date(),
-          photo: "",
-        },
-        registrationAddress: {
-          region: "",
-          city: "",
-          street: "",
-          house_number: "",
-          apartment_number: "",
-        },
-        residenceAddress: {
-          region: "",
-          city: "",
-          street: "",
-          house_number: "",
-          apartment_number: "",
-        },
-      },
     };
   },
-  computed: mapState({
-    medical: (state) => state.medical.medicalCard,
+  computed: mapGetters({
+    basicData: "getBasicData",
+    url: "getUrl",
+    avatar: "getAvatar",
   }),
-  created() {
-    this.$store.dispatch("getMedicalCardData");
-  },
   methods: {
     changeEdit() {
       this.isEdit = !this.isEdit;
@@ -64,8 +71,12 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+.select
+  width: 324px
 .avatar-field
   min-width: 310px
+.replace-photo
+  color: var(--btn-blue-color)
 .input
   color: purple
 .form-wrap

src/pages/newMedicalCard/utils/configMedical.js

@@ -21,7 +21,7 @@ export const baseDataForm = [
       {
         key: "gender",
         label: "Пол",
-        type: "text",
+        type: "select",
       },
       {
         key: "birth_date",
@@ -98,3 +98,14 @@ export const baseDataForm = [
     ],
   },
 ];
+
+export const genderOptions = [
+  {
+    label: "Мужской",
+    value: "MALE",
+  },
+  {
+    label: "Женский",
+    value: "WOMEN",
+  },
+];