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

2023-06-05 11:15:55 +03:00
parent 30ffa4f488
commit 94ac479e2f
7 changed files with 123 additions and 22 deletions
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/DentalConditionForm.vue
+++ b/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)];
-      if (this.data.general)
-        arraySelected.unshift({
-          value: this.data.general,
-          type: "general",
-        });
-      this.listSelected = [...arraySelected];
+      let arraySelected = [...this.getFilledConditions(this.data)];
      if (arraySelected.length) {
+        this.listSelected = [...arraySelected];
        this.isOpenInfoSelected = true;
      } else {
        this.isOpenInfoSelected = false;
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/FormulaFilter.vue
+++ b/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>
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
+++ b/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(v-for="condition in conditions") {{`${condition} – ${config[condition]}`}}
+        span.opacity-60(:style="{'color': 'var(--font-dark-blue-color)'}") {{`${conditions[0]} – ${config[conditions[0]]}`}}
+      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,
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
+++ b/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="getFiiledConditions(value[rowKey]).map((el) => el.value).flat()"
+        :conditions="getFilledConditions(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],
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
+++ b/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,