[WIP] Добавил форму страховки

src/pages/newMedicalCard/components/BasicInsuranceForm.vue

@@ -0,0 +1,95 @@
+<template lang="pug">
+  medical-form-wrapper(
+    title="Страховка"
+  )
+    .form-wrap.gap-24.w-full(@click="click")
+      .data-section.flex.flex-col.gap-4(v-for="insurance in insuranceConfig")
+        .font-semibold.text-sm.whitespace-nowrap {{insurance.insuranceLabel}}
+        .flex.w-full.justify-between.items-center.gap-4(v-for="field in insurance.fields")
+          .label-field.font-sm.text-sm.whitespace-nowrap {{`${field.label} :`}}
+          .avatar-field.flex.gap-3.items-center(v-if="field.type === 'photo'")
+            base-avatar(:size="40")
+              //- img.avatar.object-cover(
+              //-   v-if="basic[insurance.insuranceKey]"
+              //-   alt="AV"
+              //- )
+              //- span(v-else) {{ avatar }}
+            .replace-photo.font-medium.text-base.cursor-pointer
+          
+          base-input(
+            v-model="basic[insurance.insuranceKey][field.key]"
+            :type="field.type" 
+            :width="300"
+            text-color="black"
+          )
+</template>
+
+<script>
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import { baseInsuranceForm } from "@/pages/newMedicalCard/utils/configMedical";
+import BaseAvatar from "@/components/base/BaseAvatar.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
+import { mapGetters, mapState } from "vuex";
+
+export default {
+  name: "BasicDataForm",
+  components: { MedicalFormWrapper, BaseAvatar, BaseInput },
+  data() {
+    return {
+      insuranceConfig: baseInsuranceForm,
+      isCheckChange: false,
+    };
+  },
+  computed: {
+    ...mapGetters({
+      url: "getUrl",
+      // avatar: "getAvatar",
+      initDataBasic: "getBasicData",
+    }),
+    ...mapState({
+      basic: (state) => state.medical.basicData,
+      // basic: (state) => state.medical.medicalCard.person,
+    }),
+  },
+  methods: {
+    click() {
+      console.log(this.basic);
+    },
+    // checkChangeInput() {
+    //   let initInsurance = JSON.stringify(this.initDataBasic);
+    //   let changeInsurance = JSON.stringify(this.basic);
+    //   if (initInsurance !== changeInsurance) {
+    //     this.isCheckChange = true;
+    //   } else {
+    //     this.isCheckChange = false;
+    //   }
+    // },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.select
+  width: 324px
+.avatar-field
+  min-width: 324px
+.avatar
+  height: 100%
+  border-radius: 50%
+.replace-photo
+  color: var(--btn-blue-color)
+.input
+  color: purple
+.form-wrap
+  display: grid
+  grid-template-columns: repeat(3, 1fr)
+  grid-template-rows: repeat(1, 1fr)
+  @media(max-width: 1900px)
+    grid-template-columns: repeat(2, 1fr)
+    grid-template-rows: repeat(2, 1fr)
+  @media(max-width: 1320px)
+    grid-template-columns: repeat(1, 1fr)
+    grid-template-rows: repeat(3, 1fr)
+.label-field
+  color: var(--font-grey-color)
+</style>

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -180,6 +180,66 @@ export const baseInfoMenu = [
   },
 ];
 
+export const baseInsuranceForm = [
+  {
+    insuranceLabel: "ОМС",
+    insuranceKey: "insuranceOMS",
+    fields: [
+      {
+        key: "series",
+        label: "Серия",
+        type: "number",
+      },
+      {
+        key: "number",
+        label: "Номер",
+        type: "number",
+      },
+      {
+        key: "photo",
+        label: "Фото ОМС",
+        type: "photo",
+      },
+    ],
+  },
+  {
+    insuranceLabel: "ДМС",
+    insuranceKey: "insuranceDMS",
+    fields: [
+      {
+        key: "series",
+        label: "Серия",
+        type: "number",
+      },
+      {
+        key: "number",
+        label: "Номер",
+        type: "number",
+      },
+      {
+        key: "photo",
+        label: "Фото ДМС",
+        type: "photo",
+      },
+    ],
+  },
+  // {
+  //   insuranceLabel: "Категория льготы",
+  //   insuranceKey: "benefit",
+  //   fields: [
+  //     {
+  //       key: "benefit",
+  //       label: "Категория",
+  //       type: "text",
+  //     },
+  //     {
+  //       key: "photo",
+  //       label: "Документы",
+  //       type: "photo",
+  //     },
+  //   ],
+  // },
+];
 export const routesDictionary = {
   "/clients": "Клиенты",
   "/calendar": "Календарь",

src/store/modules/medicalCard.js

@@ -73,6 +73,14 @@ const getters = {
         apartment_number: residenceAddress?.apartment_number,
         id: residenceAddress?.id,
       },
+      insuranceDMS: {
+        series: person.insurance_policy.find((e) => e.title === "DMS")?.series,
+        number: person.insurance_policy.find((e) => e.title === "DMS")?.number,
+      },
+      insuranceOMS: {
+        series: person.insurance_policy.find((e) => e.title === "OMS")?.series,
+        number: person.insurance_policy.find((e) => e.title === "OMS")?.number,
+      },
     };
   },
   getAvatar(state) {