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

2023-05-30 19:07:24 +03:00
parent 5cc8c44401
commit 701164c288
5 changed files with 170 additions and 47 deletions
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothConditionsInfo.vue
@@ -1,6 +1,8 @@
 <template lang="pug">
  q-menu(
    v-model="modelValue",
+    anchor="bottom left",
+    :offset="[160,5]",
    )
    .flex.flex-col.p-4.gap-15px.text-smm.font-medium
      .general.w-full.flex.justify-start.pb-15px
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue
@@ -0,0 +1,144 @@
+<template lang="pug">
+.cell.flex.justify-center.items-center.h-full.p-1(
+  :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.self="()=>{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"
+      )
+    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 {{ value[rowKey].general }}
+    .conditions.flex.justify-center.items-center.w-27px.h-6.rounded.cursor-pointer(
+      v-if="getFiiledConditions(value[rowKey]).length",
+      @click="()=>openConditionsInfo()",
+      )
+      span.text-xsx.font-medium {{`+${getFiiledConditions(value[rowKey]).length}`}}
+      tooth-conditions-info(
+        v-model="isOpenConditionsInfo",
+        :general="value[rowKey].general",
+        :conditions="getFiiledConditions(value[rowKey])"
+        :config="toothConfig.conditions"
+        )
+  span.text-smm.font-medium(
+    v-if="rowKey === 'tooth_mobility' && !isEditCondition",
+    :class="{'cell-info': isEdit}"
+    ) {{ toothConfig.mobility.find((el) => el.id === value[rowKey])?.label || null }}
+  q-menu(
+    v-if="isEdit",
+    v-model="isEditCondition",
+    )
+    .flex.flex-col.p-4(v-if="rowKey === 'tooth_mobility'")
+      .mobility-item.flex.justify-between.items-center.py-7px.pl-7px.pr-15px.rounded.w-143px.cursor-pointer(
+        v-for="mobility in toothConfig.mobility",
+        @click="()=>chooseMobility(mobility.id)"
+        )
+        span.text-smm.font-medium {{ `${mobility.label} степень` }}
+        q-icon.check(
+          name="check",
+          size="12px"
+          )
+</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";
+import { v_model } from "@/shared/mixins/v-model";
+
+export default {
+  name: "ToothFormulaCell",
+  components: { ToothLowSvg, ToothConditionsInfo },
+  data() {
+    return {
+      isEditCondition: false,
+      isOpenConditionsInfo: false,
+      getFiiledConditions,
+    };
+  },
+  mixins: [v_model],
+  props: {
+    isEdit: Boolean,
+    jawPosition: String,
+    rowKey: String,
+    config: Object,
+    toothConfig: Object,
+  },
+  watch: {
+    isEdit() {
+      if (!this.isEdit) {
+        this.isEditCondition = false;
+      }
+    },
+  },
+  methods: {
+    chooseMobility(id) {
+      this.value.tooth_mobility = id;
+      this.isEditCondition = false;
+    },
+    openConditionsInfo() {
+      this.isOpenConditionsInfo = true;
+    },
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.cell
+  border-right: 1px solid var(--border-light-grey-color)
+  &:hover
+    & .edit-cell
+      display: flex
+    & .cell-info
+      display: none
+  &:active
+    & .cell-info
+      display: none
+  &: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)
+.edit-cell
+  background-color: var(--bg-light-grey)
+  color: var(--font-grey-color)
+  display: none
+.open-edit
+  display: flex !important
+.mobility-item
+  &:hover
+    background-color: var(--bg-light-grey)
+    & .check
+      display: block
+.check
+  display: none
+  color: var(--bg-status-green)
+</style>
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaForm.vue
@@ -16,9 +16,12 @@
          )
      .flex.flex-col
        tooth-formula-table(
-          v-for="config in data.formulaConfig", 
-          :config="config", :data="protocol[data.state]", 
-          :toothConfig="data.toothConfig"
+          v-for="config in data.formulaConfig",
+          :key="`table_${config.name}`", 
+          :config="config", 
+          :data="protocol[data.state]", 
+          :toothConfig="data.toothConfig",
+          :is-edit="isEdit"
          )
    template(v-slot:right-corner)
      .flex.flex-toogle.h-10.p-1.rounded(:style="{'backgroundColor': 'var(--bg-light-grey)'}")
--- a/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue
+++ b/src/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaTable.vue
@@ -2,49 +2,32 @@
  .table.flex.flex-col.w-full.box-border(
    :class="{'rounded-t': config.name === 'upper', 'rounded-b': config.name === 'lower','border-botton-none': config.name === 'upper',}",
    )
-    .row.flex.w-full(v-for="row in config.rowMap", :style="{'height': heightRow[row.key]}")
+    .row.flex.w-full(
+      v-for="row in config.rowMap",
+      :key="`${config.name}_${row.key}`",
+      :style="{'height': heightRow[row.key]}"
+      )
      .cell.flex.justify-start.items-center.pl-4.h-full(:style="{'width': '20%', 'minWidth': '146px'}")
        span.font-medium.text-smm.whitespace-nowrap(:style="{'color': 'var(--font-grey-color)'}") {{ row.label }}
-      .cell.flex.justify-center.items-center.h-full(
+      tooth-formula-cell(
        v-for="cell in config.columns",
-        :style="{'width': '5%'}"
+        v-model="data.formula[cell.tooth_number]",
+        :is-edit="isEdit",
+        :jaw-position="config.name",
+        :row-key="row.key",
+        :config="cell",
+        :tooth-config="toothConfig"
        )
-        .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";
+import ToothFormulaCell from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormula/ToothFormulaCell.vue";

 export default {
  name: "ToothFormulaTable",
-  components: { ToothLowSvg, ToothConditionsInfo },
+  components: { ToothFormulaCell },
  data() {
    return {
-      isOpenConditions: false,
-      getFiiledConditions,
      heightRow: {
        tooth_mobility: "36px",
        dental_condition: "64px",
@@ -56,12 +39,10 @@ export default {
    toothConfig: Object,
    config: Object,
    data: Object,
+    modelValue: Object,
+    isEdit: Boolean,
  },
-  methods: {
-    openConditionsInfo() {
-      this.isOpenConditions = true;
-    },
-  },
+  emits: ["update:modelValue"],
 };
 </script>

@@ -76,12 +57,4 @@ export default {
    border-bottom-width: 0
 .cell
  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>