WIP Добавил отображение данных медицинской карты

src/assets/sass/variables.sass

@@ -5,6 +5,7 @@
   --font-black-color: #090a15
   --font-black-color-0: rgba(9, 10, 21, 0)
   --font-black-color-1: rgba(9, 10, 21, 0.5)
+  --icon-light-blue: #d7d9ff
   --btn-blue-color: #4772f2
   --btn-blue-sec-color: #c6d2f6
   --btn-blue-color-hover: #7e9cf6

src/components/base/BaseDetailInfo.vue

@@ -1,9 +1,13 @@
 <template lang="pug">
   .section-wrapper.flex.flex-col.h-fit.cursor-pointer(:style="{height: `${height}px`}")
-    .section-header.flex.items-center.justify-between.pl-4.pr-3.py-4
+    .section-header.flex.items-center.justify-between.pl-4.pr-3.py-4.mb-3
       span.text-sm.font-semibold.whitespace-normal {{title}}
-    .flex.items-center.gap-x-8
+    .flex.flex-col.items-center.gap-y-4.px-4
-    .section-add.flex.justify-center.items-center.cursor-pointer Добавить данные
+     slot(v-if="!isNoData")
+    .section-add.flex.justify-center.items-center.cursor-pointer(
+      v-if="isNoData"
+      @click="openAddDoc"
+    ) Добавить данные
 </template>
 
 <script>
@@ -12,6 +16,28 @@ export default {
   props: {
     title: String,
     height: Number,
+    data: Object,
+  },
+  data() {
+    return {
+      isNoData: true,
+    };
+  },
+  methods: {
+    openAddDoc() {
+      this.isNoData = false;
+    },
+  },
+  watch: {
+    data() {
+      Object.values(this.data)
+        .map((el) => (el ? el : undefined))
+        .forEach((el) => {
+          if (el) {
+            this.isNoData = false;
+          }
+        });
+    },
   },
 };
 </script>

src/components/base/BaseDetailInput.vue

@@ -0,0 +1,44 @@
+<template lang="pug">
+  .flex.flex-col.w-full(class="gap-y-1.5")
+    span.title-section.font-semibold.text-xs(v-if="field.title" ) {{field.title}}
+    .flex.items-center(v-if="field.type === 'text' || field.type === 'textarea'" class="gap-x-2.5")
+      span.w-4.icon(v-if="field.icon" :class="field.icon")
+      base-input(v-model="data[field.label]" :with-icon="field.copy")
+        .copy.icon-copy.cursor-pointer(
+          v-if="field.copy && data[field.label]",
+          @click="() => copyValue(data[field.label])"
+        )
+    base-input-date(v-if="field.type === 'date'" v-model="data[field.label]")
+</template>
+
+<script>
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseInputDate from "@/components/base/BaseInputDate.vue";
+export default {
+  name: "BaseDetailInput",
+  components: { BaseInput, BaseInputDate },
+  props: {
+    value: String,
+    field: Object,
+    data: Object,
+  },
+  data() {
+    return {
+      isNoData: true,
+    };
+  },
+  methods: {
+    copyValue(text) {
+      navigator.clipboard.writeText(text);
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.icon
+  color: var(--icon-light-blue)
+.copy
+  color: var(--btn-blue-color)
+  opacity: 0.6
+</style>

src/pages/medicalCard/components/MedicalCardWrapper.vue

@@ -1,20 +1,87 @@
 <template lang="pug">
   .wrapper.flex.w-full.relative.mx-2
     .wrapper-medical.relative.flex.flex-col.px-6.py-6.h-full.w-full
-      base-detail-info(:title="configData.identity_document.title" :height="configData.identity_document.height")
+      base-detail-info(
+        :title="configData.identity_document.title"
+        :height="configData.identity_document.height"
+        :data="medicalDataInit.identity_document"
+        )
+        base-detail-input(
+          v-for="field in configData.identity_document.fields"
+          :field="field"
+          :data="medicalDataInit.identity_document"
+          )
       .flex.flex-col.gap-30px
-        base-detail-info(:title="configData.registration_address.title" :height="configData.registration_address.height")
+        base-detail-info(
-        base-detail-info(:title="configData.temporary_address.title" :height="configData.temporary_address.height")
+          :title="configData.registration_address.title"
+          :height="configData.registration_address.height"
+          :data="medicalDataInit.registration_address"
+          )
+          base-detail-input(
+            v-for="field in configData.registration_address.fields"
+            :field="field"
+            :data="medicalDataInit.registration_address"
+            )
+        base-detail-info(
+          :title="configData.temporary_address.title"
+          :height="configData.temporary_address.height"
+          :data="medicalDataInit.temporary_address"
+          )
+          base-detail-input(
+            v-for="field in configData.temporary_address.fields"
+            :field="field"
+            :data="medicalDataInit.temporary_address"
+            )
       .flex.flex-col.gap-2
-        base-detail-info(:title="configData.snils.title" :height="configData.snils.height")
+        base-detail-info(
-        base-detail-info(:title="configData.policy_number_series.title" :height="configData.policy_number_series.height")
+          :title="configData.snils.title"
-      base-detail-info(:title="configData.policy_organization.title" :height="configData.policy_organization.height")
+          :height="configData.snils.height"
+          :data="medicalDataInit.snils"
+          )
+          base-detail-input(
+            v-for="field in configData.snils.fields"
+            :field="field"
+            :data="medicalDataInit.snils"
+            )
+        base-detail-info(
+          :title="configData.policy.title"
+          :height="configData.policy.height"
+          :data="medicalDataInit.policy"
+          )
+          base-detail-input(
+            v-for="field in configData.policy.fields"
+            :field="field"
+            :data="medicalDataInit.policy"
+            )
+      base-detail-info(
+        :title="configData.policy_organization.title"
+        :height="configData.policy_organization.height"
+        :data="medicalDataInit.policy_organization"
+        )
+        base-detail-input(
+          v-for="field in configData.policy_organization.fields"
+          :field="field"
+          :data="medicalDataInit.policy_organization"
+          )
       .flex.flex-col.gap-4
-        base-detail-info(:title="configData.additional.title" :height="configData.additional.height")
+        base-detail-info(
-        base-detail-info(:title="configData.agreement_form.title" :height="configData.agreement_form.height")
+          :title="configData.additional.title"
+          :height="configData.additional.height"
+          :data="medicalDataInit.additional"
+          )
+          base-detail-input(
+            v-for="field in configData.additional.fields"
+            :field="field"
+            :data="medicalDataInit.additional"
+            )
+        base-detail-info(
+          :title="configData.agreement_form.title"
+          :height="configData.agreement_form.height"
+          )
 </template>
 
 <script>
+import BaseDetailInput from "@/components/base/BaseDetailInput.vue";
 import BaseDetailInfo from "@/components/base/BaseDetailInfo.vue";
 import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig";
 import { fetchWrapper } from "@/shared/fetchWrapper";
@@ -22,11 +89,45 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import ClientDetailInput from "@/pages/clients/components/ClientDetailInput.vue";
 export default {
   name: "MedicalCardWrapper",
-  components: { ClientDetailInput, BaseInput, BaseDetailInfo },
+  components: { ClientDetailInput, BaseInput, BaseDetailInfo, BaseDetailInput },
   data() {
     return {
       configData: medicalDetailConfig,
-      medicalDataInit: {},
+      medicalDataInit: {
+        identity_document: {
+          number_series: null,
+          issued_by_org: null,
+          issued_by_org_code: null,
+          issued_by_date: null,
+        },
+        registration_address: {
+          registration_address: null,
+        },
+        temporary_address: {
+          temporary_address: null,
+        },
+        snils: {
+          insurance_number: null,
+        },
+        policy: {
+          series: null,
+          number: null,
+        },
+        policy_organization: {
+          policy_organization: null,
+        },
+        additional: {
+          name_confidant: null,
+          phone_confidant: null,
+        },
+        benefit_code: {
+          benefit_code: null,
+        },
+        agreement_form: {
+          agreement: null,
+          agreement_date: null,
+        },
+      },
     };
   },
   methods: {
@@ -40,6 +141,7 @@ export default {
         identity_document: {
           ...pass,
           number_series: `${pass.series} ${pass.number}`,
+          issued_by_date: new Date(pass.issued_by_date),
         },
         registration_address: {
           registration_address: data?.person?.address?.find(
@@ -66,7 +168,7 @@ export default {
             : null,
           phone_confidant: confidant?.contacts?.find(
             (el) => el?.kind === "PHONE"
-          ),
+          )?.username,
         },
         benefit_code: {
           benefit_code: data?.benefit_code,

src/pages/medicalCard/utils/medicalConfig.js

@@ -6,105 +6,107 @@ export const medicalDetailConfig = {
       {
         label: "number_series",
         title: "Серия и номер",
-        type: "input",
+        type: "text",
         copy: true,
       },
       {
         label: "issued_by_org",
         title: "Выдан",
-        type: "input",
+        type: "textarea",
       },
       {
         label: "issued_by_org_code",
         title: "Код подразделения",
-        type: "input",
+        type: "text",
       },
       {
         label: "issued_by_date",
         title: "Дата выдачи",
-        type: "data",
+        type: "date",
       },
     ],
   },
   registration_address: {
-    height: 130,
+    height: 135,
-    title: "Адреес регистрации",
+    title: "Адрес регистрации",
     fields: [
       {
         label: "registration_address",
         title: "Полный адрес",
-        type: "input",
+        type: "textarea",
       },
     ],
   },
   temporary_address: {
-    height: 130,
+    height: 135,
-    title: "Адреес проживания",
+    title: "Адрес проживания",
     fields: [
       {
         label: "temporary_address",
         title: "Полный адрес",
-        type: "input",
+        type: "textarea",
       },
     ],
   },
   snils: {
-    height: 108,
+    height: 135,
     title: "СНИЛС",
     fields: [
       {
         label: "insurance_number",
         title: "Номер",
-        type: "input",
+        type: "text",
         copy: true,
       },
     ],
   },
-  policy_number_series: {
+  policy: {
-    height: 170,
+    height: 210,
     title: "ПОЛИС",
     fields: [
       {
         label: "series",
         title: "Серия",
-        type: "input",
+        type: "text",
       },
       {
         label: "number",
         title: "Номер",
-        type: "input",
+        type: "text",
       },
     ],
   },
   policy_organization: {
-    height: 111,
+    height: 135,
     title: "Страховая организация",
     fields: [
       {
         label: "organization",
         title: "Название",
-        type: "input",
+        type: "text",
       },
     ],
   },
   additional: {
-    height: 202,
+    height: 275,
     title: "Дополнительная информация",
     fields: [
       {
+        icon: "icon-person",
         label: "name_confidant",
         title: "Доверенное лицо",
-        type: "input",
+        type: "text",
       },
       {
+        icon: "icon-phone",
         label: "phone_confidant",
         title: "",
-        type: "input",
+        type: "text",
       },
       {
         label: "benefit_code",
         title: "Код категории льготы",
-        type: "input",
+        type: "text",
       },
     ],
   },