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

2023-06-06 16:03:47 +03:00
parent 7057f0131f
commit c161c0a5fd
6 changed files with 121 additions and 109 deletions
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/FormulaFilter.vue
+++ b/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) {
-        this.filterResult = ["Все"];
+      if (value === "Все" || !this.filterFurmula.length) {
+        this.filterFurmula = ["Все"];
+        this.value = [...Object.keys(this.data.formula)];
      } else {
-        this.filterResult = [
-          ...this.filterResult.filter((item) => item !== "Все"),
+        this.filterFurmula = [
+          ...this.filterFurmula.filter((item) => item !== "Все"),
        ];
+        this.value = this.filterFurmula
+          .map((key) => this.getCountConditions[key])
+          .flat();
      }
    },
  },
@@ -59,22 +65,18 @@ export default {
    getCountConditions() {
      let conditions = {};
      Object.keys(this.toothConditions).forEach((key) => {
-        conditions[key] = 0;
+        conditions[key] = [];
+      });
+      Object.keys(this.data.formula).forEach((key) => {
+        let firstConditions = getFilledConditions(
+          this.data.formula[key].dental_condition
+        )
+          .map((item) => item.value)
+          .flat()[0];
+        if (firstConditions) {
+          conditions[firstConditions] = [...conditions[firstConditions], key];
+        }
      });
-      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;
    },
  },
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
@@ -1,82 +1,83 @@
 <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}"
  )
-  .edit-cell.flex.h-full.w-full.rounded.justify-center.items-center(
-    v-if="isEdit && rowKey !== 'tooth_number'"
-    @click.stop="()=>{isEditCondition=!isEditCondition}",
-    :class="{'open-edit': isEditCondition}"
-    )
-    q-icon(
-      v-if="!isEditCondition",
-      name="add",
-      size="25px",
-    )
-    q-icon(
-      v-else
-      name="close",
-      size="25px",
-    )
-  .flex.flex-col.gap-y-5px.items-center(
-    v-if="rowKey === 'tooth_number'",
-    )
-    tooth-low-svg(
-      :opacity="value.dental_condition.general === 'О' ? 0.2 : 1",
-      :type="config.type",
-      :position="config?.position",
-      :jaw="jawPosition"
+  .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}",
+      :class="{'open-edit': isEditCondition}"
      )
-    span.font-medium.text-smm {{ config.tooth_number }}
-  .flex.flex-col.gap-y-1.items-center(
-    v-if="rowKey === 'dental_condition' && !isEditCondition",
-    :class="{'cell-info': isEdit}"
-    )
-    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="getFilledConditions(value[rowKey]).map((el) => el.value).flat().length-1 > 0",
-      @click="()=>openConditionsInfo()",
-      :class="{'active': isOpenConditionsInfo}"
+      q-icon(
+        v-if="!isEditCondition",
+        name="add",
+        size="25px",
      )
-      span.text-xsx.font-medium {{`+${getFilledConditions(value[rowKey]).map((el) => el.value).flat().length - 1}`}}
-      tooth-conditions-info(
-        v-model="isOpenConditionsInfo",
-        :conditions="getFilledConditions(value[rowKey]).map((el) => el.value).flat()"
-        :config="conditionConfig"
+      q-icon(
+        v-else
+        name="close",
+        size="25px",
+      )
+    .flex.flex-col.gap-y-5px.items-center(
+      v-if="rowKey === 'tooth_number'",
+      )
+      tooth-low-svg(
+        :opacity="value.dental_condition.general === 'О' ? 0.2 : 1",
+        :type="config.type",
+        :position="config?.position",
+        :jaw="jawPosition"
        )
-  span.text-smm.font-medium(
-    v-if="rowKey === 'tooth_mobility' && !isEditCondition",
-    :class="{'cell-info': isEdit}"
-    ) {{ mobilityConfig.find((el) => el.id === value[rowKey])?.label || null }}
-  q-menu(
-    v-if="isEdit && rowKey === 'tooth_mobility'",
-    v-model="isEditCondition",
-    anchor="top left",
-    :offset="[0,168]",
-    )
-    .flex.flex-col.p-2.w-40.gap-y-1
-      .mobility-item.flex.justify-between.items-center.py-7px.pl-7px.pr-3.rounded.cursor-pointer(
-        v-for="mobility in mobilityConfig",
-        @click="()=>chooseMobility(mobility.id)"
+      span.font-medium.text-smm {{ config.tooth_number }}
+    .flex.flex-col.gap-y-1.items-center(
+      v-if="rowKey === 'dental_condition' && !isEditCondition",
+      :class="{'cell-info': isEdit}"
+      )
+      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="getFilledConditions(value[rowKey]).map((el) => el.value).flat().length-1 > 0",
+        @click="()=>openConditionsInfo()",
+        :class="{'active': isOpenConditionsInfo}"
        )
-        span.text-smm.font-medium {{ `${mobility.label} степень` }}
-        q-icon.check(
-          name="check",
-          size="12px"
+        span.text-xsx.font-medium {{`+${getFilledConditions(value[rowKey]).map((el) => el.value).flat().length - 1}`}}
+        tooth-conditions-info(
+          v-model="isOpenConditionsInfo",
+          :conditions="getFilledConditions(value[rowKey]).map((el) => el.value).flat()"
+          :config="conditionConfig"
          )
-  q-menu(
-    v-if="isEdit && rowKey === 'dental_condition'",
-    v-model="isEditCondition",
-    anchor="top left",
-    self="bottom left",
-    :offset="[20,8]",
-    )
-    dental-condition-form(
-      :data="value.dental_condition"
-      :cell-config="config",
-      :form-config="formConfig"
+    span.text-smm.font-medium(
+      v-if="rowKey === 'tooth_mobility' && !isEditCondition",
+      :class="{'cell-info': isEdit}"
+      ) {{ mobilityConfig.find((el) => el.id === value[rowKey])?.label || null }}
+    q-menu(
+      v-if="isEdit && rowKey === 'tooth_mobility'",
+      v-model="isEditCondition",
+      anchor="top left",
+      :offset="[0,168]",
      )
+      .flex.flex-col.p-2.w-40.gap-y-1
+        .mobility-item.flex.justify-between.items-center.py-7px.pl-7px.pr-3.rounded.cursor-pointer(
+          v-for="mobility in mobilityConfig",
+          @click="()=>chooseMobility(mobility.id)"
+          )
+          span.text-smm.font-medium {{ `${mobility.label} степень` }}
+          q-icon.check(
+            name="check",
+            size="12px"
+            )
+    q-menu(
+      v-if="isEdit && rowKey === 'dental_condition'",
+      v-model="isEditCondition",
+      anchor="top left",
+      self="bottom left",
+      :offset="[20,8]",
+      )
+      dental-condition-form(
+        :data="value.dental_condition"
+        :cell-config="config",
+        :form-config="formConfig"
+        )
 </template>

 <script>
@@ -109,6 +110,7 @@ export default {
    rowKey: String,
    config: Object,
    formConfig: Object,
+    filtredTooths: Array,
  },
  watch: {
    isEdit() {
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
+++ b/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>
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue
+++ b/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"],
 };