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

src/pages/medicalCard/components/MedicalFormulaTable.vue

@@ -0,0 +1,34 @@
+<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)
+  border-collapse: collapse
+.cell
+  border: 1px solid var(--font-black-color)
+  border-collapse: collapse
+.cell-number
+  @extend .cell
+  background-color: var(--border-light-grey-color)
+</style>