From 517a6fc02c9506d4cd5b5dcd5e02b578e53ba17e Mon Sep 17 00:00:00 2001
From: DwCay <duminalexei@gmail.com>
Date: Mon, 9 Jan 2023 20:47:42 +0300
Subject: [PATCH] =?UTF-8?q?WIP=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D0=BB=20=D0=BD=D0=B5=D0=B4=D0=BE=D1=81=D1=82=D0=B0=D1=8E=D1=89?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=BF=D0=BE=D0=BB=D1=8F=20=D0=BD=D0=B0=20=D1=81?=
 =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=83=20=D0=BC=D0=B5=D0=B4?=
 =?UTF-8?q?.=D0=BA=D0=B0=D1=80=D1=82=D1=8B=20=D0=B8=20=D1=85=D0=B5=D0=B4?=
 =?UTF-8?q?=D0=B5=D1=80=20=D1=81=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D1=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MedicalCardHeader.vue          |  19 ++
 .../components/MedicalCardWrapper.vue         | 207 +++++++++++-------
 src/pages/medicalCard/utils/medicalConfig.js  |  22 ++
 tailwind.config.js                            |   3 +
 4 files changed, 171 insertions(+), 80 deletions(-)
 create mode 100644 src/pages/medicalCard/components/MedicalCardHeader.vue

diff --git a/src/pages/medicalCard/components/MedicalCardHeader.vue b/src/pages/medicalCard/components/MedicalCardHeader.vue
new file mode 100644
index 0000000..96080fd
--- /dev/null
+++ b/src/pages/medicalCard/components/MedicalCardHeader.vue
@@ -0,0 +1,19 @@
+<template lang="pug">
+  .flex.w-full
+    .flex.w-full.text-lgx.font-bold.items-center.justify-center Медицинская карта №{{numberCard}}
+    .flex.gap-x-2
+      base-button(left-icon="icon-download", :icon-left-size="16", :size="40", :outlined="true")
+      base-button(left-icon="icon-plus", :icon-left-size="13", :size="40")
+        span.font-semibold Создать
+</template>
+
+<script>
+import BaseButton from "@/components/base/BaseButton.vue";
+export default {
+  name: "MedicalCardHeader",
+  components: { BaseButton },
+  props: {
+    numberCard: Number,
+  },
+};
+</script>
diff --git a/src/pages/medicalCard/components/MedicalCardWrapper.vue b/src/pages/medicalCard/components/MedicalCardWrapper.vue
index ffadf11..5b2a40b 100644
--- a/src/pages/medicalCard/components/MedicalCardWrapper.vue
+++ b/src/pages/medicalCard/components/MedicalCardWrapper.vue
@@ -1,97 +1,118 @@
 <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"
-        :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"
-          :data="medicalDataInit.registration_address"
-          )
-          base-detail-input(
-            v-for="field in configData.registration_address.fields"
-            :field="field"
-            :data="medicalDataInit.registration_address"
+    .wrapper-medical.relative.flex.gap-y-4.flex-col.h-full.w-full( class="pb-52px")
+      .card-upper.flex.flex-col.gap-y-4.px-6.py-6
+        medical-card-header(:number-card="numberCard")
+        .card-basic-info.flex
+          base-detail-info(
+            :title="configData.identity_document.title"
+            :height="configData.identity_document.height"
+            :data="medicalDataInit.identity_document"
             )
-        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"
+            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"
+              :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"
+              :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"
             )
-      .flex.flex-col.gap-2
-        base-detail-info(
-          :title="configData.snils.title"
-          :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"
-          :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"
-          )
+            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"
+              :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"
+              )
+      .flex.flex-col(class="px-92px gap-y-60px")
+        .flex.flex-col(class="gap-y-2.5")
+          .flex.flex-col.gap-y-2(v-for="(key, index) in Object.keys(dentalIndications)")
+            span.font-bold.font-xs {{`${index+1}. ${configData.dental_indications[key]}`}}
+            base-input(v-model="dentalIndications[key]")
+        .flex.justify-center
+          base-button.w-fit(:icon-left-size="13", :size="40")
+            span.font-semibold Сохранить
 </template>
 
 <script>
+import MedicalCardHeader from "@/pages/medicalCard/components/MedicalCardHeader.vue";
 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";
 import BaseInput from "@/components/base/BaseInput.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
 import ClientDetailInput from "@/pages/clients/components/ClientDetailInput.vue";
 export default {
   name: "MedicalCardWrapper",
-  components: { ClientDetailInput, BaseInput, BaseDetailInfo, BaseDetailInput },
+  components: {
+    ClientDetailInput,
+    BaseInput,
+    BaseButton,
+    BaseDetailInfo,
+    BaseDetailInput,
+    MedicalCardHeader,
+  },
   data() {
     return {
+      numberCard: "",
       configData: medicalDetailConfig,
       medicalDataInit: {
         identity_document: {
@@ -128,10 +149,33 @@ export default {
           agreement_date: null,
         },
       },
+      dentalIndications: {
+        complaints: "",
+        allergic_history: "",
+        past_diseases: "",
+        medications_taken: "",
+        thermometry: "",
+        tonometry: "",
+        disease_progress: "",
+        visual_examination: "",
+        oral_examination: "",
+        dental_formula: [],
+        dental_bite: "",
+        hygiene_index: "",
+        dmf_index: "",
+        diagnostic_findings: "",
+        icd_code: "",
+        survey_plan: "",
+        survey_data: "",
+        clinical_diagnosis: "",
+        treatment_plan: "",
+        treatment_protocol: "",
+      },
     };
   },
   methods: {
     saveDataMedical(data) {
+      this.numberCard = data?.number && data.number;
       const confidant = data ? data["confidant"] : undefined;
       const pass = data
         ? data?.person?.identity_document?.find((el) => el.kind === "PASSPORT")
@@ -203,9 +247,6 @@ export default {
 .wrapper-medical
   background-color: var(--default-white)
   height: calc(100vh - 64px)
-  display: grid
-  grid-template-columns: 280px 292px 180px 360px 463px
-  gap: 16px
   overflow: auto
   &::-webkit-scrollbar
     height: 4px
@@ -216,4 +257,10 @@ export default {
   &::-webkit-scrollbar-thumb
     border-radius: 8px
     background-color: var(--btn-blue-color)
+.card-basic-info
+  display: grid
+  grid-template-columns: 280px 292px 180px 360px 463px
+  gap: 16px
+.card-upper
+  border-bottom: 1px solid var(--border-light-grey-color)
 </style>
diff --git a/src/pages/medicalCard/utils/medicalConfig.js b/src/pages/medicalCard/utils/medicalConfig.js
index fd42190..bbfd261 100644
--- a/src/pages/medicalCard/utils/medicalConfig.js
+++ b/src/pages/medicalCard/utils/medicalConfig.js
@@ -139,4 +139,26 @@ export const medicalDetailConfig = {
       },
     ],
   },
+  dental_indications: {
+    complaints: "Жалобы",
+    allergic_history: "Аллергологический анамнез",
+    past_diseases: "Перенесённые и сопутствующие заболевания",
+    medications_taken: "Принимаемые лекарственные препараты",
+    thermometry: "Термометрия (по показаниям)",
+    tonometry: "Тонометрия, ЧСС (по показаниям)",
+    disease_progress: "Развитие настоящего заболевания",
+    visual_examination: "Внешний осмотр",
+    oral_examination: "Осмотр преддверия и полости рта",
+    dental_formula: "Зубная формула",
+    dental_bite: "Прикус",
+    hygiene_index: "Индекс гигиены",
+    dmf_index: "Индекс КПУ",
+    diagnostic_findings: "Предварительный диагноз",
+    icd_code: "Код МКБ-10",
+    survey_plan: "План обследования",
+    survey_data: "Данные обследования",
+    clinical_diagnosis: "Клинический диагноз",
+    treatment_plan: "План лечения",
+    treatment_protocol: "Протокол лечения",
+  },
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 247f020..9f76d6f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,6 +18,7 @@ module.exports = {
         base: ["16px", { lineHeight: "19px" }],
         m: ["16px", { lineHeight: "21.6px" }],
         lg: ["18px", { lineHeight: "21px" }],
+        lgx: ["22px", { lineHeight: "25.83px" }],
         xl: ["20px", { lineHeight: "23px" }],
         xxl: ["24px", { lineHeight: "26px" }],
         "2xl": ["28px", { lineHeight: "33px" }],
@@ -50,7 +51,9 @@ module.exports = {
         "30px": "30px",
         "45px": "45px",
         "52px": "52px",
+        "60px": "60px",
         "74px": "74px",
+        "92px": "92px",
         "148px": "148px",
       },
     },