[WIP] Добавил отображение состояния и подвижности зубов

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue

@@ -0,0 +1,27 @@
+<template lang="pug">
+  q-menu(
+    v-model="modelValue",
+    )
+    .flex.flex-col.p-4.gap-15px.text-smm.font-medium
+      .general.w-full.flex.justify-start.pb-15px
+        span.opacity-60(:style="{'color': 'var(--font-dark-blue-color)'}") {{`${general} – ${config[general]}`}}
+      span(v-for="condition in conditions") {{`${condition} – ${config[condition]}`}}
+</template>
+
+<script>
+export default {
+  name: "ToothConditionsInfo",
+  props: {
+    config: Object,
+    general: String,
+    conditions: Array,
+    modelValue: Boolean,
+  },
+  emits: ["update:modelValue"],
+};
+</script>
+
+<style lang="sass" scoped>
+.general
+  border-bottom: 1px solid var(--border-light-grey-color)
+</style>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue

@@ -1,16 +1,25 @@
 <template lang="pug">
-  medical-form-wrapper(:title="data.title")
+  medical-form-wrapper(
+    :title="data.title",
+    :is-edit="isEdit",
+    :open-edit="openEdit",
+    :cancel="cancelEdit",
+     )
     .flex.flex-col.gap-y-4
       .flex.gap-x-7px.rounded.py-7px.px-3.w-fit(:style="{'backgroundColor': isEdit ? 'var(--default-white)': 'var(--bg-light-grey)'}")
         q-checkbox.font-medium.text-smm(
-          v-model="protocol[data.key].lacticBite",
+          v-model="protocol[data.state].lacticBite",
           dense,
           :disable="!isEdit",
           label="Молочный прикус",
           :color="isEdit ? 'primary' : 'grey'"
           )
       .flex.flex-col
-        tooth-formula-table(v-for="config in data.formulaConfig", :config="config")
+        tooth-formula-table(
+          v-for="config in data.formulaConfig", 
+          :config="config", :data="protocol[data.state]", 
+          :toothConfig="data.toothConfig"
+          )
     template(v-slot:right-corner)
       .flex.flex-toogle.h-10.p-1.rounded(:style="{'backgroundColor': 'var(--bg-light-grey)'}")
         q-btn.w-12.h-full.rounded(
@@ -55,5 +64,13 @@ export default {
       protocol: (state) => state.medical.protocolData,
     }),
   },
+  methods: {
+    openEdit() {
+      this.isEdit = true;
+    },
+    cancelEdit() {
+      this.isEdit = false;
+    },
+  },
 };
 </script>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue

@@ -11,21 +11,40 @@
         )
         .flex.flex-col.gap-y-5px.items-center(v-if="row.key === 'tooth_number'")
           tooth-low-svg(
+            :opacity="data.formula[cell.tooth_number].dental_condition.general === 'О' ? 0.2 : 1"
             :type="cell.type",
             :position="cell?.position",
             :jaw="config.name"
             )
           span.font-medium.text-smm {{ cell.tooth_number }}
+        .flex.flex-col.gap-y-1.items-center(v-if="row.key === 'dental_condition'")
+          span.text-smm.font-medium {{ data.formula[cell.tooth_number].dental_condition.general }}
+          .conditions.flex.justify-center.items-center.w-27px.h-6.rounded.cursor-pointer(
+            v-if="getFiiledConditions(data.formula[cell.tooth_number].dental_condition).length",
+            @click="()=>openConditionsInfo()"
+            )
+            span.text-xsx.font-medium {{`+${getFiiledConditions(data.formula[cell.tooth_number].dental_condition).length}`}}
+            tooth-conditions-info(
+              v-model="isOpenConditions",
+              :general="data.formula[cell.tooth_number].dental_condition.general",
+              :conditions="getFiiledConditions(data.formula[cell.tooth_number].dental_condition)"
+              :config="toothConfig.conditions"
+              )
+        span.text-smm.font-medium(v-if="row.key === 'tooth_mobility'") {{ toothConfig.mobility.find((el) => el.id === data.formula[cell.tooth_number].tooth_mobility)?.label || null }}
 </template>
 
 <script>
 import ToothLowSvg from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue";
+import ToothConditionsInfo from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue";
+import { getFiiledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
 
 export default {
   name: "ToothFormulaTable",
-  components: { ToothLowSvg },
+  components: { ToothLowSvg, ToothConditionsInfo },
   data() {
     return {
+      isOpenConditions: false,
+      getFiiledConditions,
       heightRow: {
         tooth_mobility: "36px",
         dental_condition: "64px",
@@ -34,7 +53,14 @@ export default {
     };
   },
   props: {
+    toothConfig: Object,
     config: Object,
+    data: Object,
+  },
+  methods: {
+    openConditionsInfo() {
+      this.isOpenConditions = true;
+    },
   },
 };
 </script>
@@ -52,4 +78,10 @@ export default {
   border-right: 1px solid var(--border-light-grey-color)
   &:last-child
     border-right-width: 0
+.conditions
+  background-color: var(--bg-light-grey)
+  &:hover
+    background-color: var(--font-grey-color-0)
+  &.active
+    background-color: var(--btn-blue-color)
 </style>

src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothLowSvg.vue

@@ -4,7 +4,8 @@
     :width="getSize.width",
     :height="getSize.height",
     :viewBox="getSize.viewBox",
-    fill="none",
+    :fill-opacity="opacity"
+    fill="#252850",
     xmlns="http://www.w3.org/2000/svg",
     )
     path(
@@ -34,9 +35,22 @@
 export default {
   name: "ToothLowSvg",
   props: {
+    opacity: {
+      type: Number,
+      default: 1,
+    },
+    type: {
       type: String,
-    position: String,
+      default: "molars",
-    jaw: String,
+    },
+    position: {
+      type: String,
+      default: "left",
+    },
+    jaw: {
+      type: String,
+      default: "upper",
+    },
   },
   computed: {
     getSize() {

src/pages/newMedicalCard/utils/gettersObjects.js

@@ -54,3 +54,11 @@ export function getConfidantObject(data) {
     };
   }
 }
+
+export const getFiiledConditions = (condition) => {
+  let filledConditions = [
+    ...Object.values(condition.crown).filter((val) => val),
+    ...Object.values(condition.root).filter((val) => val),
+  ];
+  return filledConditions;
+};

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -933,6 +933,27 @@ export const protocolForms = [
     component: "ToothFormulaForm",
     key: "toothFormula",
     state: "toothFormula",
+    toothConfig: {
+      conditions: {
+        К: "Кариес",
+        П: "Пульпит",
+        Пт: "Периодонтит",
+        Д: "Дефект",
+        Пл: "Пломба",
+        ИК: "Искусственная коронка",
+        ИЗ: "Искусственный зуб",
+        В: "Вкладка",
+        И: "Имплантат",
+        КЗ: "Корень зуба",
+        О: "Отсутствующий зуб",
+      },
+      mobility: [
+        { id: 1, label: "I" },
+        { id: 2, label: "II" },
+        { id: 3, label: "III" },
+        { id: 4, label: "IV" },
+      ],
+    },
     formulaConfig: [
       {
         name: "upper",
@@ -1074,103 +1095,103 @@ export const protocolForms = [
         columns: [
           {
             type: "molars",
-            tooth_number: 48,
+            tooth_number: "48",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 47,
+            tooth_number: "47",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 46,
+            tooth_number: "46",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "left",
             type: "pre-molars",
-            tooth_number: 45,
+            tooth_number: "45",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "left",
             type: "pre-molars",
-            tooth_number: 44,
+            tooth_number: "44",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "left",
             type: "fangs",
-            tooth_number: 43,
+            tooth_number: "43",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "incisors",
-            tooth_number: 42,
+            tooth_number: "42",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "incisors",
-            tooth_number: 41,
+            tooth_number: "41",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "incisors",
-            tooth_number: 31,
+            tooth_number: "31",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "incisors",
-            tooth_number: 32,
+            tooth_number: "32",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "right",
             type: "fangs",
-            tooth_number: 33,
+            tooth_number: "33",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "right",
             type: "pre-molars",
-            tooth_number: 34,
+            tooth_number: "34",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "right",
             type: "pre-molars",
-            tooth_number: 35,
+            tooth_number: "35",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 36,
+            tooth_number: "36",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 37,
+            tooth_number: "37",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 38,
+            tooth_number: "38",
             dental_condition: "",
             tooth_mobility: "",
           },

src/store/modules/medicalCard.js

@@ -1,6 +1,7 @@
 import { fetchWrapper } from "@/shared/fetchWrapper";
 import { genderOptions } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { getConfidantObject } from "@/pages/newMedicalCard/utils/gettersObjects";
+import toothFormula from "@/store/modules/toothFormula";
 
 const state = () => ({
   medicalCard: {},
@@ -305,7 +306,8 @@ const getters = {
         },
       },
       toothFormula: {
-        lacticBite: true,
+        lacticBite: toothFormula.state.lacticBite,
+        formula: toothFormula.state.formula,
       },
     };
   },
@@ -334,7 +336,8 @@ const getters = {
       },
       disease: null,
       toothFormula: {
-        lacticBite: false,
+        lacticBite: toothFormula.stateInit.lacticBite,
+        formula: toothFormula.stateInit.formula,
       },
     };
   },

src/store/modules/toothFormula.js

@@ -0,0 +1,660 @@
+const stateInit = {
+  lacticBite: false,
+  formula: {
+    18: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    17: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    16: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    15: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    14: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    13: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    12: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    11: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    21: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    22: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    23: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    24: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    25: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    26: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    27: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    28: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    48: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    47: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    46: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    45: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    44: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    43: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    42: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    41: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    31: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    32: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    33: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    34: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    35: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    36: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    37: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+    38: {
+      dental_condition: {
+        general: null,
+        crown: {
+          central: null,
+          upper: null,
+          lower: null,
+          left: null,
+          right: null,
+        },
+        root: {
+          central: null,
+          left: null,
+          right: null,
+        },
+      },
+      tooth_mobility: null,
+    },
+  },
+};
+
+const state = {
+  lacticBite: true,
+  formula: {
+    ...JSON.parse(JSON.stringify(stateInit.formula)),
+    13: {
+      dental_condition: {
+        general: "О",
+        crown: { ...stateInit.formula["13"].dental_condition.crown },
+        root: { ...stateInit.formula["13"].dental_condition.root },
+      },
+      tooth_mobility: 1,
+    },
+    12: {
+      dental_condition: {
+        general: "О",
+        crown: { ...stateInit.formula["12"].dental_condition.crown },
+        root: { ...stateInit.formula["12"].dental_condition.root },
+      },
+      tooth_mobility: null,
+    },
+    11: {
+      dental_condition: {
+        general: "ИЗ",
+        crown: {
+          ...stateInit.formula["11"].dental_condition.crown,
+          central: "К",
+        },
+        root: { ...stateInit.formula["11"].dental_condition.root },
+      },
+      tooth_mobility: null,
+    },
+    25: {
+      dental_condition: {
+        general: "ИЗ",
+        crown: { ...stateInit.formula["25"].dental_condition.crown },
+        root: { ...stateInit.formula["25"].dental_condition.root },
+      },
+      tooth_mobility: 3,
+    },
+    43: {
+      dental_condition: {
+        general: "О",
+        crown: { ...stateInit.formula["43"].dental_condition.crown },
+        root: { ...stateInit.formula["43"].dental_condition.root },
+      },
+      tooth_mobility: 3,
+    },
+    42: {
+      dental_condition: {
+        general: "О",
+        crown: { ...stateInit.formula["42"].dental_condition.crown },
+        root: { ...stateInit.formula["42"].dental_condition.root },
+      },
+      tooth_mobility: null,
+    },
+    41: {
+      dental_condition: {
+        general: "ИЗ",
+        crown: { ...stateInit.formula["41"].dental_condition.crown },
+        root: { ...stateInit.formula["41"].dental_condition.root, left: "П" },
+      },
+      tooth_mobility: null,
+    },
+    35: {
+      dental_condition: {
+        general: "ИЗ",
+        crown: { ...stateInit.formula["35"].dental_condition.crown },
+        root: { ...stateInit.formula["35"].dental_condition.root },
+      },
+      tooth_mobility: null,
+    },
+  },
+};
+
+export default {
+  stateInit,
+  state,
+};