[WIP] Настроил фильтрацию таблицы зубной формулы

src/pages/newCalendar/components/CalendarBackground.vue

@@ -17,7 +17,6 @@ export default {
       workingHours: (state) => state.calendar.workingHours,
     }),
     timeCount() {
-      console.log(this.workingHours);
       return (
         this.workingHours.end.split(":")[0] -
         this.workingHours.start.split(":")[0] +

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

@@ -7,7 +7,7 @@
         .border-right.width-cell.flex.justify-center.items-center
           q-checkbox(
             dense,
-            v-model="filterResult",
+            v-model="filterFurmula",
             @update:model-value="() => updateFilter(value)",
             :val="value",
             checked-icon="check_box",
@@ -21,7 +21,7 @@
         .border-right.flex.items-center.pl-3.w-full(:style="{'minWidth': '190px'}")
           span.text-smm.font-medium {{toothConditions[value] || value}}
         .width-cell.flex.w-8.justify-center.items-center
-          span.text-smm.font-medium {{getCountConditions[value] || "-"}}
+          span.text-smm.font-medium {{getCountConditions[value] && getCountConditions[value].length || "-"}}
 </template>
 
 <script>
@@ -30,6 +30,7 @@ import {
   formulaFilterMap,
 } from "@/pages/newMedicalCard/utils/medicalConfig";
 import { getFilledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
+import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "FormulaFilter",
@@ -38,20 +39,25 @@ export default {
       toothConditions,
       formulaFilterMap,
       getFilledConditions,
-      filterResult: ["Все"],
+      filterFurmula: ["Все"],
     };
   },
   props: {
     data: Object,
   },
+  mixins: [v_model],
   methods: {
     updateFilter(value) {
-      if (value === "Все" || !this.filterResult.length) {
+      if (value === "Все" || !this.filterFurmula.length) {
-        this.filterResult = ["Все"];
+        this.filterFurmula = ["Все"];
+        this.value = [...Object.keys(this.data.formula)];
       } else {
-        this.filterResult = [
+        this.filterFurmula = [
-          ...this.filterResult.filter((item) => item !== "Все"),
+          ...this.filterFurmula.filter((item) => item !== "Все"),
         ];
+        this.value = this.filterFurmula
+          .map((key) => this.getCountConditions[key])
+          .flat();
       }
     },
   },
@@ -59,20 +65,16 @@ export default {
     getCountConditions() {
       let conditions = {};
       Object.keys(this.toothConditions).forEach((key) => {
-        conditions[key] = 0;
+        conditions[key] = [];
       });
-      Object.keys(this.data.formula)
+      Object.keys(this.data.formula).forEach((key) => {
-        .map((key) => ({
+        let firstConditions = getFilledConditions(
-          firstCondition: getFilledConditions(
           this.data.formula[key].dental_condition
         )
           .map((item) => item.value)
-            .flat()[0],
+          .flat()[0];
-          key: key,
+        if (firstConditions) {
-        }))
+          conditions[firstConditions] = [...conditions[firstConditions], key];
-        .forEach((el) => {
-          if (el.firstCondition) {
-            conditions[el.firstCondition] += 1;
         }
       });
       return conditions;

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

@@ -1,9 +1,10 @@
 <template lang="pug">
-.cell.flex.justify-center.items-center.h-full.p-1(
+.cell.flex(
   :key="`${jawPosition}_${config.tooth_number}`"
   :style="{'width': '5%'}",
   :class="{'cursor-pointer': isEdit}"
   )
+  .flex.h-full.w-full.justify-center.items-center.h-full.p-1(v-if="filtredTooths.includes(config.tooth_number)")
     .edit-cell.flex.h-full.w-full.rounded.justify-center.items-center(
       v-if="isEdit && rowKey !== 'tooth_number'"
       @click.stop="()=>{isEditCondition=!isEditCondition}",
@@ -109,6 +110,7 @@ export default {
     rowKey: String,
     config: Object,
     formConfig: Object,
+    filtredTooths: Array,
   },
   watch: {
     isEdit() {

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

@@ -20,13 +20,17 @@
       .flex.flex-col
         tooth-formula-table(
           v-for="config in data.formulaConfig",
+          :filtred-tooths="filtredTooths"
           :key="`table_${config.name}`", 
           :config="config", 
           :data="protocol[data.state]", 
           :form-config="data.conditionsForm",
           :is-edit="isEdit"
           )
-      formula-filter(:data="protocol[data.state]")
+      formula-filter(
+        v-model="filtredTooths",
+        :data="protocol[data.state]",
+        )
     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(
@@ -58,7 +62,7 @@ export default {
     return {
       teeth,
       teeth_2,
-      filter: ["Все"],
+      filtredTooths: [],
       isEdit: false,
       component: false,
       viewToothFormula: true,
@@ -81,5 +85,8 @@ export default {
       this.isEdit = false;
     },
   },
+  mounted() {
+    this.filtredTooths = Object.keys(this.protocol[this.data.state].formula);
+  },
 };
 </script>

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

@@ -12,6 +12,7 @@
       tooth-formula-cell(
         v-for="cell in config.columns",
         v-model="data.formula[cell.tooth_number]",
+        :filtred-tooths="filtredTooths"
         :is-edit="isEdit",
         :jaw-position="config.name",
         :row-key="row.key",
@@ -41,6 +42,7 @@ export default {
     modelValue: Object,
     isEdit: Boolean,
     formConfig: Object,
+    filtredTooths: Array,
   },
   emits: ["update:modelValue"],
 };

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -1043,103 +1043,103 @@ export const protocolForms = [
         columns: [
           {
             type: "molars",
-            tooth_number: 18,
+            tooth_number: "18",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 17,
+            tooth_number: "17",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 16,
+            tooth_number: "16",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "left",
             type: "pre-molars",
-            tooth_number: 15,
+            tooth_number: "15",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "left",
             type: "pre-molars",
-            tooth_number: 14,
+            tooth_number: "14",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "left",
             type: "fangs",
-            tooth_number: 13,
+            tooth_number: "13",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "incisors",
-            tooth_number: 12,
+            tooth_number: "12",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "incisors",
-            tooth_number: 11,
+            tooth_number: "11",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "incisors",
-            tooth_number: 21,
+            tooth_number: "21",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "incisors",
-            tooth_number: 22,
+            tooth_number: "22",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "right",
             type: "fangs",
-            tooth_number: 23,
+            tooth_number: "23",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "right",
             type: "pre-molars",
-            tooth_number: 24,
+            tooth_number: "24",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             position: "right",
             type: "pre-molars",
-            tooth_number: 25,
+            tooth_number: "25",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 26,
+            tooth_number: "26",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 27,
+            tooth_number: "27",
             dental_condition: "",
             tooth_mobility: "",
           },
           {
             type: "molars",
-            tooth_number: 28,
+            tooth_number: "28",
             dental_condition: "",
             tooth_mobility: "",
           },