[WIP] Добавил фильтр зубной формулы

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

@@ -63,7 +63,7 @@
 </template>
 
 <script>
-import { getFiiledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
+import { getFilledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
 import { toothConditions } from "@/pages/newMedicalCard/utils/medicalConfig";
 
 export default {
@@ -72,7 +72,7 @@ export default {
     return {
       isOpenInfoSelected: false,
       listSelected: [],
-      getFiiledConditions,
+      getFilledConditions,
       toothConditions,
     };
   },
@@ -83,14 +83,9 @@ export default {
   },
   methods: {
     updateConditions() {
-      let arraySelected = [...this.getFiiledConditions(this.data)];
+      let arraySelected = [...this.getFilledConditions(this.data)];
-      if (this.data.general)
-        arraySelected.unshift({
-          value: this.data.general,
-          type: "general",
-        });
-      this.listSelected = [...arraySelected];
       if (arraySelected.length) {
+        this.listSelected = [...arraySelected];
         this.isOpenInfoSelected = true;
       } else {
         this.isOpenInfoSelected = false;

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

@@ -0,0 +1,91 @@
+<template lang="pug">
+  .flex.w-full.gap-x-10px
+    .filter-block.w-full.flex-col.flex.rounded(
+      v-for="filter in formulaFilterMap"
+      )
+      .flex.block-filter.h-30px(v-for="value in filter")
+        .border-right.width-cell.flex.justify-center.items-center
+          q-checkbox(
+            dense,
+            v-model="filterResult",
+            @update:model-value="() => updateFilter(value)",
+            :val="value",
+            checked-icon="check_box",
+            unchecked-icon="check_box_outline_blank",
+          )
+        .border-right.width-cell.flex.justify-center.items-center
+          span.text-smm.font-medium(
+            v-if="value !== 'Все'"
+            :style="{'color': 'var(--font-grey-color)'}"
+            ) {{value}}
+        .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] || "-"}}
+</template>
+
+<script>
+import {
+  toothConditions,
+  formulaFilterMap,
+} from "@/pages/newMedicalCard/utils/medicalConfig";
+import { getFilledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
+
+export default {
+  name: "FormulaFilter",
+  data() {
+    return {
+      toothConditions,
+      formulaFilterMap,
+      getFilledConditions,
+      filterResult: ["Все"],
+    };
+  },
+  props: {
+    data: Object,
+  },
+  methods: {
+    updateFilter(value) {
+      if (value === "Все" || !this.filterResult.length) {
+        this.filterResult = ["Все"];
+      } else {
+        this.filterResult = [
+          ...this.filterResult.filter((item) => item !== "Все"),
+        ];
+      }
+    },
+  },
+  computed: {
+    getCountConditions() {
+      let conditions = {};
+      Object.keys(this.toothConditions).forEach((key) => {
+        conditions[key] = 0;
+      });
+      Object.keys(this.data.formula)
+        .map((key) => ({
+          firstCondition: getFilledConditions(
+            this.data.formula[key].dental_condition
+          )
+            .map((item) => item.value)
+            .flat()[0],
+          key: key,
+        }))
+        .forEach((el) => {
+          if (el.firstCondition) {
+            conditions[el.firstCondition] += 1;
+          }
+        });
+      return conditions;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.filter-block
+  border: 1px solid var(--border-light-grey-color)
+.border-right
+  border-right: 1px solid var(--border-light-grey-color)
+.width-cell
+  min-width: 32px
+</style>

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

@@ -6,8 +6,8 @@
     )
     .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.opacity-60(:style="{'color': 'var(--font-dark-blue-color)'}") {{`${conditions[0]} – ${config[conditions[0]]}`}}
-      span(v-for="condition in conditions") {{`${condition} – ${config[condition]}`}}
+      span(v-for="condition in conditions.slice(1)") {{`${condition} – ${config[condition]}`}}
 </template>
 
 <script>
@@ -17,7 +17,6 @@ export default {
   name: "ToothConditionsInfo",
   props: {
     config: Object,
-    general: String,
     conditions: Array,
     modelValue: Boolean,
     hideEvent: Function,

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

@@ -33,17 +33,16 @@
     v-if="rowKey === 'dental_condition' && !isEditCondition",
     :class="{'cell-info': isEdit}"
     )
-    span.text-smm.font-medium {{ value[rowKey].general }}
+    span.text-smm.font-medium {{getFilledConditions(value[rowKey]).map((el) => el.value).flat()[0]}}
     .conditions.flex.justify-center.items-center.w-27px.h-6.rounded.cursor-pointer(
-      v-if="getFiiledConditions(value[rowKey]).length",
+      v-if="getFilledConditions(value[rowKey]).map((el) => el.value).flat().length-1 > 0",
       @click="()=>openConditionsInfo()",
       :class="{'active': isOpenConditionsInfo}"
       )
-      span.text-xsx.font-medium {{`+${getFiiledConditions(value[rowKey]).length}`}}
+      span.text-xsx.font-medium {{`+${getFilledConditions(value[rowKey]).map((el) => el.value).flat().length - 1}`}}
       tooth-conditions-info(
         v-model="isOpenConditionsInfo",
-        :general="value[rowKey].general",
+        :conditions="getFilledConditions(value[rowKey]).map((el) => el.value).flat()"
-        :conditions="getFiiledConditions(value[rowKey]).map((el) => el.value).flat()"
         :config="conditionConfig"
         )
   span.text-smm.font-medium(
@@ -84,7 +83,7 @@
 import DentalConditionForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue";
 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";
+import { getFilledConditions } from "@/pages/newMedicalCard/utils/gettersObjects";
 import {
   toothConditions,
   toothMobility,
@@ -100,7 +99,7 @@ export default {
       isOpenConditionsInfo: false,
       mobilityConfig: toothMobility,
       conditionConfig: toothConditions,
-      getFiiledConditions,
+      getFilledConditions,
     };
   },
   mixins: [v_model],

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

@@ -26,6 +26,7 @@
           :form-config="data.conditionsForm",
           :is-edit="isEdit"
           )
+      formula-filter(: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(
@@ -43,6 +44,7 @@
 </template>
 
 <script>
+import FormulaFilter from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/FormulaFilter.vue";
 import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
 import ToothFormulaTable from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue";
 import teeth from "@/assets/icons/teeth.svg";
@@ -51,11 +53,12 @@ import { mapState } from "vuex";
 
 export default {
   name: "ToothFormulaForm",
-  components: { MedicalFormWrapper, ToothFormulaTable },
+  components: { MedicalFormWrapper, ToothFormulaTable, FormulaFilter },
   data() {
     return {
       teeth,
       teeth_2,
+      filter: ["Все"],
       isEdit: false,
       component: false,
       viewToothFormula: true,

src/pages/newMedicalCard/utils/gettersObjects.js

@@ -55,7 +55,8 @@ export function getConfidantObject(data) {
   }
 }
 
-export const getFiiledConditions = (condition) => {
+export const getFilledConditions = (condition) => {
+  let filledConditions = [];
   let crown = Object.keys(condition.crown)
     .map((key) => ({
       value: condition.crown[key],
@@ -70,5 +71,11 @@ export const getFiiledConditions = (condition) => {
       part: key,
     }))
     .filter((el) => el.value.length);
-  return [...crown, ...root];
+  filledConditions = [...crown, ...root];
+  if (condition.general)
+    filledConditions.unshift({
+      value: condition.general,
+      type: "general",
+    });
+  return filledConditions;
 };

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -586,6 +586,13 @@ export const toothMobility = [
   { id: 4, label: "IV" },
 ];
 
+export const formulaFilterMap = [
+  ["Все", "К", "П"],
+  ["Д", "Пл", "ИК"],
+  ["ИЗ", "В", "И"],
+  ["КЗ", "О", "Пт"],
+];
+
 export const protocolForms = [
   {
     title: "Жалобы",