WIP Поправил таблицу зубной формулы и доработал формы информации о клиенте

src/pages/medicalCard/components/MedicalCardWrapper.vue

@@ -80,6 +80,12 @@
             base-detail-info(
               :title="configData.agreement_form.title"
               :height="configData.agreement_form.height"
+              direction-row
+              )
+              base-detail-input(
+                v-for="field in configData.agreement_form.fields"
+                :field="field"
+                :data="medicalDataInit.agreement_form"
               )
       .flex.flex-col(class="px-92px gap-y-60px")
         .flex.flex-col(class="gap-y-2.5")
@@ -92,6 +98,7 @@
             color="primary",
             label="Сохранить",
             padding="8px 24px",
+            @click="validateFormMedical"
             no-caps
           )
 </template>
@@ -180,6 +187,9 @@ export default {
     };
   },
   methods: {
+    validateFormMedical() {
+      console.log(this.medicalDataInit);
+    },
     saveDataMedical(data) {
       this.numberCard = data?.number && data.number;
       const confidant = data ? data["confidant"] : undefined;
@@ -267,6 +277,17 @@ export default {
   display: grid
   grid-template-columns: 280px 292px 180px 360px 463px
   gap: 16px
+  padding: 0 20px 20px 0
+  overflow-x: auto
+  &::-webkit-scrollbar
+    height: 4px
+    width: 4px
+  &::-webkit-scrollbar-track
+    background-color: rgba(211, 212, 220, 0.5)
+    border-radius: 8px
+  &::-webkit-scrollbar-thumb
+    border-radius: 8px
+    background-color: var(--btn-blue-color)
 .card-upper
   border-bottom: 1px solid var(--border-light-grey-color)
 </style>

src/pages/medicalCard/components/MedicalDentalFormula.vue

@@ -37,4 +37,14 @@ export default {
 .wrapper
   border: 1.5px solid var(--border-light-grey-color)
   border-radius: 4px
+  overflow: auto
+  &::-webkit-scrollbar
+    height: 4px
+    width: 4px
+  &::-webkit-scrollbar-track
+    background-color: rgba(211, 212, 220, 0.5)
+    border-radius: 8px
+  &::-webkit-scrollbar-thumb
+    border-radius: 8px
+    background-color: var(--btn-blue-color)
 </style>

src/pages/medicalCard/components/MedicalFormulaTable.vue

@@ -1,32 +1,51 @@
 <template lang="pug">
   //TODO: Поправить бордеры у таблицы
-  .table-formula.flex.border-collapse(:class="{'rounded-t': data.name === 'upperJaw', 'rounded-b': data.name === 'lowerJaw'}")
+  .table-formula.flex.border-collapse
     .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}}
+      .cell-grey.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'}")
+      .cell.flex.w-50px.h-50px.font-bold.text-2xl.justify-center.items-center(v-for="(row, index) in data.rowMap" :class="{'cell-grey': 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")
+        base-input.pl-4.pr-2(v-if="row.name === 'dental_condition'" v-model="tooth[row.name]" :rules="[ruleCondition]" :max-length="2" borderless no-error-icon)
+        label.flex.w-full.h-full.justify-center.items-center.cursor-pointer(v-if="row.name === 'tooth_mobility'")
+          base-select.pl-4.pr-4(v-model="tooth[row.name]" :id="`${row.name}_${index}`" :items="mobilityMap" :outlined="false" menu-anchor="bottom start" borderless hide-dropdown-icon)
 </template>
 
 <script>
+import { ruleDentalCondition } from "@/assets/rules/rulesInput";
+import BaseInput from "@/components/base/BaseInput.vue";
+import BaseSelect from "@/components/base/BaseSelect.vue";
 export default {
   name: "MedicalFormulaTable",
+  components: { BaseInput, BaseSelect },
   props: {
     data: Object,
     rowMap: Array,
     condition: Array,
   },
+  data() {
+    return {
+      ruleCondition: ruleDentalCondition,
+      mobilityMap: [
+        { id: 1, label: "I" },
+        { id: 2, label: "II" },
+        { id: 3, label: "III" },
+      ],
+    };
+  },
 };
 </script>
 
 <style lang="sass" scoped>
 .table-formula
-  border: 2px solid var(--font-black-color)
+  border-left: 1.5px solid var(--font-black-color)
+  border-top: 1.5px solid var(--font-black-color)
 .cell
-  border: 1px solid var(--font-black-color)
-.cell-number
+  border-bottom: 1.5px solid black
+  border-right: 1.5px solid black
+.cell-grey
   @extend .cell
   background-color: var(--border-light-grey-color)
+.not-border
+  border: none
 </style>

src/pages/medicalCard/utils/medicalConfig.js

@@ -24,7 +24,7 @@ export const medicalDetailConfig = {
     },
   ],
   identity_document: {
-    height: 366,
+    height: 316,
     title: "Паспортные данные",
     fields: [
       {
@@ -51,7 +51,7 @@ export const medicalDetailConfig = {
     ],
   },
   registration_address: {
-    height: 135,
+    height: 85,
     title: "Адрес регистрации",
     fields: [
       {
@@ -62,7 +62,7 @@ export const medicalDetailConfig = {
     ],
   },
   temporary_address: {
-    height: 135,
+    height: 85,
     title: "Адрес проживания",
     fields: [
       {
@@ -73,7 +73,7 @@ export const medicalDetailConfig = {
     ],
   },
   snils: {
-    height: 135,
+    height: 85,
     title: "СНИЛС",
     fields: [
       {
@@ -85,7 +85,7 @@ export const medicalDetailConfig = {
     ],
   },
   policy: {
-    height: 210,
+    height: 162,
     title: "ПОЛИС",
     fields: [
       {
@@ -101,7 +101,7 @@ export const medicalDetailConfig = {
     ],
   },
   policy_organization: {
-    height: 135,
+    height: 85,
     title: "Страховая организация",
     fields: [
       {
@@ -112,7 +112,7 @@ export const medicalDetailConfig = {
     ],
   },
   additional: {
-    height: 275,
+    height: 218,
     title: "Дополнительная информация",
     fields: [
       {
@@ -135,14 +135,26 @@ export const medicalDetailConfig = {
     ],
   },
   agreement_form: {
-    height: 163,
+    height: 121,
     title:
       "Информированное добровольное согласие на виды медицинских вмешательств, включенные в Перечень определенных видов медицинских вмешательств:",
     fields: [
       {
         label: "agreement",
         title: "Получено",
-        type: "check_box",
+        type: "radio",
+        items: [
+          {
+            id: "1",
+            label: "Да",
+            value: true,
+          },
+          {
+            id: "2",
+            label: "Нет",
+            value: false,
+          },
+        ],
       },
       {
         label: "agreement_date",