Merge branch 'UC-208' into 'master'

Resolve UC-208

See merge request andrusyakka/urban-couscous!251

src/pages/medicalCard/components/MedicalCardHeader.vue

@@ -13,7 +13,7 @@ export default {
   name: "MedicalCardHeader",
   components: { BaseButton },
   props: {
-    numberCard: Number,
+    numberCard: String,
   },
 };
 </script>

src/pages/medicalCard/components/MedicalCardWrapper.vue

@@ -84,8 +84,9 @@
       .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]}`}}
+            span.font-bold.text-xsx {{`${index+1}. ${configData.dental_indications[key]}`}}
-            base-input(v-model="dentalIndications[key]")
+            medical-dental-formula(v-if="key === 'dental_formula'" :formula-data="dentalIndications[key]")
+            base-input(v-model="dentalIndications[key]" v-else)
         .flex.justify-center
           base-button.w-fit(:icon-left-size="13", :size="40")
             span.font-semibold Сохранить
@@ -93,8 +94,10 @@
 
 <script>
 import MedicalCardHeader from "@/pages/medicalCard/components/MedicalCardHeader.vue";
+import MedicalDentalFormula from "@/pages/medicalCard/components/MedicalDentalFormula.vue";
 import BaseDetailInput from "@/components/base/BaseDetailInput.vue";
 import BaseDetailInfo from "@/components/base/BaseDetailInfo.vue";
+import { formulaDataMap } from "@/pages/medicalCard/utils/medicalConfig";
 import { medicalDetailConfig } from "@/pages/medicalCard/utils/medicalConfig";
 import { fetchWrapper } from "@/shared/fetchWrapper";
 import BaseInput from "@/components/base/BaseInput.vue";
@@ -109,6 +112,7 @@ export default {
     BaseDetailInfo,
     BaseDetailInput,
     MedicalCardHeader,
+    MedicalDentalFormula,
   },
   data() {
     return {
@@ -159,7 +163,7 @@ export default {
         disease_progress: "",
         visual_examination: "",
         oral_examination: "",
-        dental_formula: [],
+        dental_formula: formulaDataMap,
         dental_bite: "",
         hygiene_index: "",
         dmf_index: "",

src/pages/medicalCard/components/MedicalDentalFormula.vue

@@ -0,0 +1,40 @@
+<template lang="pug">
+  .wrapper.flex.w-full.px-52px.py-7.gap-x-102px
+    .flex.flex-col.gap-y-5
+      .flex.flex-col.gap-y-4
+        span.font-bold.text-base Состояние зубов:
+        .flex.flex-col.gap-y-1
+          div(v-for="condition in dentalCondition")
+            span.font-bold.text-base {{condition.name}}
+            span.text-base {{` - ${condition.discription}`}}
+      .flex.flex-col.gap-y-1
+        .font-bold.text-base Подвижность:
+        span.text-base Степень -
+          span.font-bold.text-base  I, II, III
+    .flex.flex-col.h-fit.rounded
+      medical-formula-table(:data="formulaData[0]")
+      medical-formula-table(:data="formulaData[1]")
+</template>
+
+<script>
+import { dentalСonditionMap } from "@/pages/medicalCard/utils/medicalConfig";
+import MedicalFormulaTable from "@/pages/medicalCard/components/MedicalFormulaTable.vue";
+export default {
+  name: "MedicalDentalFormula",
+  components: { MedicalFormulaTable },
+  props: {
+    formulaData: Array,
+  },
+  data() {
+    return {
+      dentalCondition: dentalСonditionMap,
+    };
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper
+  border: 1.5px solid var(--border-light-grey-color)
+  border-radius: 4px
+</style>

src/pages/medicalCard/components/MedicalFormulaTable.vue

@@ -0,0 +1,32 @@
+<template lang="pug">
+  //TODO: Поправить бордеры у таблицы
+  .table-formula.flex.border-collapse(:class="{'rounded-t': data.name === 'upperJaw', 'rounded-b': data.name === 'lowerJaw'}")
+    .flex.flex-col.border-collapse
+      .cell-number.flex.w-52.h-50px.font-bold.text-lg.justify-center.items-center.border-collapse(v-for="row in data.rowMap") {{row.label}}
+    .flex.flex-col.border-collapse(v-for="tooth in data.columns")
+      .cell.flex.w-50px.h-50px.font-bold.text-2xl.justify-center.items-center.border-collapse(v-for="row in data.rowMap" :class="{'cell-number': row.name === 'tooth_number'}")
+        span(v-if="row.name === 'tooth_number'") {{tooth[row.name]}}
+        input.w-8.outline-0(v-if="row.name === 'dental_condition'" v-model="tooth[row.name]" maxlength="2")
+        input.w-8.outline-0(v-if="row.name === 'tooth_mobility'" v-model="tooth[row.name]" maxlength="3")
+</template>
+
+<script>
+export default {
+  name: "MedicalFormulaTable",
+  props: {
+    data: Object,
+    rowMap: Array,
+    condition: Array,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.table-formula
+  border: 2px solid var(--font-black-color)
+.cell
+  border: 1px solid var(--font-black-color)
+.cell-number
+  @extend .cell
+  background-color: var(--border-light-grey-color)
+</style>

src/pages/medicalCard/utils/medicalConfig.js

@@ -174,3 +174,251 @@ export const medicalDetailConfig = {
     treatment_protocol: "Протокол лечения",
   },
 };
+
+export const dentalСonditionMap = [
+  {
+    name: "К",
+    discription: "кариес",
+  },
+  {
+    name: "П",
+    discription: "пульпит",
+  },
+  {
+    name: "Пт",
+    discription: "периодонтит",
+  },
+  {
+    name: "Д",
+    discription: "дефект",
+  },
+  {
+    name: "Пл",
+    discription: "пломба",
+  },
+  {
+    name: "Ик",
+    discription: "искусственная коронка",
+  },
+  {
+    name: "Из",
+    discription: "искусственный зуб",
+  },
+  {
+    name: "В",
+    discription: "вкладка",
+  },
+  {
+    name: "И",
+    discription: "имплантат",
+  },
+  {
+    name: "Кз",
+    discription: "корень зуба",
+  },
+  {
+    name: "О",
+    discription: "отсутствующий зуб",
+  },
+];
+
+export const formulaDataMap = [
+  {
+    name: "upperJaw",
+    rowMap: [
+      {
+        label: "Подвижность",
+        name: "tooth_mobility",
+      },
+      {
+        label: "Cостояние зубов",
+        name: "dental_condition",
+      },
+      {
+        label: "Верхняя челюсть",
+        name: "tooth_number",
+      },
+    ],
+    columns: [
+      {
+        tooth_number: "18",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "17",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "16",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "15",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "14",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "13",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "12",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "11",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "21",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "22",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "23",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "24",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "25",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "26",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "27",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "28",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+    ],
+  },
+  {
+    name: "lowerJaw",
+    rowMap: [
+      {
+        label: "Нижняя челюсть",
+        name: "tooth_number",
+      },
+      {
+        label: "Cостояние зубов",
+        name: "dental_condition",
+      },
+      {
+        label: "Подвижность",
+        name: "tooth_mobility",
+      },
+    ],
+    columns: [
+      {
+        tooth_number: "48",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "47",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "46",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "45",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "44",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "43",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "42",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "41",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "31",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "32",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "33",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "34",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "35",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "36",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "37",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+      {
+        tooth_number: "38",
+        dental_condition: "",
+        tooth_mobility: "",
+      },
+    ],
+  },
+];

tailwind.config.js

@@ -50,10 +50,12 @@ module.exports = {
         "29_25px": "29.25px",
         "30px": "30px",
         "45px": "45px",
+        "50px": "50px",
         "52px": "52px",
         "60px": "60px",
         "74px": "74px",
         "92px": "92px",
+        "102px": "102px",
         "148px": "148px",
       },
     },