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

src/components/base/BaseSelect.vue

@@ -8,13 +8,14 @@
         :hide-dropdown-icon="hideDropdownIcon"
         :borderless="borderless",
         :outlined="outlined",
-        bg-color="white",
+        :bg-color="bgColor",
+        :standout="standout",
         dense,
         emit-value,
         map-options
       )
         template(v-slot:selected)
-          span(v-if="!value.icon") {{ textSelect }}
+          span(v-if="!value?.icon") {{ textSelect }}
           q-icon(
             v-else,
             :name="iconSelect",
@@ -22,7 +23,7 @@
           )
         template(
           v-slot:option="scope",
-          v-if="value.icon"
+          v-if="value?.icon"
         )
           q-item(v-bind="scope.itemProps", style="justify-content: center")
             q-item-section(avatar, style="padding: 0px; min-width: 0px")
@@ -41,10 +42,18 @@ export default {
     hideDropdownIcon: Boolean,
     borderless: Boolean,
     modelValue: [Object, String],
+    bgColor: {
+      type: String,
+      default: "white",
+    },
     outlined: {
       type: Boolean,
       default: true,
     },
+    standout: {
+      type: [Boolean, String],
+      default: false,
+    },
     items: {
       type: Array,
       default: () => [],
@@ -80,7 +89,7 @@ export default {
       },
     },
     textSelect() {
-      return this.value.label ? this.value.label : this.placeholder;
+      return this.value?.label ? this.value.label : this.placeholder;
     },
     iconSelect() {
       return this.value?.icon ? this.value.icon : this.placeholder;

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 {
-import { mapState } from "vuex";
+  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({
+  computed: mapGetters({
-    medical: (state) => state.medical.medicalCard,
+    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",
+  },
+];

src/store/index.js

@@ -2,7 +2,15 @@ import { createStore } from "vuex";
 import medical from "./modules/medicalCard";
 
 export default createStore({
+  state: {
+    url: "https://astra-dev.dopcore.com",
+  },
   modules: {
     medical,
   },
+  getters: {
+    getUrl(state) {
+      return state.url;
+    },
+  },
 });

src/store/modules/medicalCard.js

@@ -2,9 +2,50 @@ import { fetchWrapper } from "@/shared/fetchWrapper";
 
 const state = () => ({
   medicalCard: {},
+  avatar: "",
 });
 
-const getters = {};
+const getters = {
+  getBasicData(state) {
+    let registrationAddress =
+      state.medicalCard?.person?.address?.find((el) => el.registration_flg) ||
+      {};
+    let residenceAddress =
+      state?.medicalCard?.person?.address?.find((el) => el.residence_flg) || {};
+    let person = state.medicalCard.person;
+    return {
+      basicData: {
+        last_name: person?.last_name,
+        first_name: person?.first_name,
+        patronymic: person?.patronymic,
+        gender: person?.gender,
+        birth_date: person?.birth_date
+          ? new Date(person?.birth_date)
+          : new Date(),
+        photo: person?.photo,
+      },
+      registrationAddress: {
+        region: registrationAddress?.region,
+        city: registrationAddress?.city,
+        street: registrationAddress?.street,
+        house_number: registrationAddress?.house_number,
+        apartment_number: registrationAddress?.apartment_number,
+      },
+      residenceAddress: {
+        region: residenceAddress?.region,
+        city: residenceAddress?.city,
+        street: residenceAddress?.street,
+        house_number: residenceAddress?.house_number,
+        apartment_number: residenceAddress?.apartment_number,
+      },
+    };
+  },
+  getAvatar(state) {
+    let lastName = state?.medicalCard?.person?.last_name;
+    let firstName = state?.medicalCard?.person?.first_name;
+    return lastName?.[0] + firstName?.[0];
+  },
+};
 
 const actions = {
   getMedicalCardData({ commit }) {