[WIP] Добавил форму изменения состояния зубов

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

@@ -0,0 +1,66 @@
+<template lang="pug">
+  .flex.p-1
+    .wrapper-tooth.felx.h-250px.w-28.flex-col.rounded.justify-around.items-center
+      span.text-base.font-medium {{cellConfig.tooth_number}}
+    .flex.flex-col.pt-2.pl-4.pr-1.gap-y-2.w-350px.h-250px
+      span.font-bold.text-m Состояние зуба
+      .options-wrapper.flex.flex-col.h-250px.overflow-y-auto.gap-y-1
+        q-expansion-item.expansion-item.rounded.mr-2(
+          v-for="(kind, key) in formConfig.conditions", 
+          :label="kind.label"
+          )
+          .flex.flex-col.pl-4(v-if="!kind?.partsTooth")
+            .flex.gap-11px.items.center.h-10.w-full(
+              v-for="option in kind.options"
+            )
+              q-radio(
+                v-model="data[key]",
+                :val="option.value"
+                dense,
+                checked-icon="check_box",
+                unchecked-icon="check_box_outline_blank",
+              )
+              .condition-label.flex.gap-x-2.h-full.w-full.items-center.text-smm
+                span.font-semibold {{ option.value }}
+                span.font-medium {{ option.label }}
+          .flex.flex-col.pl-4(v-else)
+            .flex.flex-col.gap-y-3
+              .flex.flex-col(v-for="(part, partKey) in kind?.partsTooth")
+                span.option-label.text-smm.font-medium {{part.label}}
+                q-option-group(
+                  v-model="data[key][partKey]",
+                  :options="kind.options",
+                  size="30px",
+                  dense,
+                  type="checkbox",
+                )
+                  template(v-slot:label="opt")
+                    .condition-label.flex.gap-x-2.h-10.w-full.items-center.text-smm
+                      span.font-semibold {{ opt.value }}
+                      span.font-medium {{ opt.label }}
+</template>
+
+<script>
+export default {
+  name: "DentalConditionForm",
+  props: {
+    data: Object,
+    cellConfig: Object,
+    formConfig: Object,
+  },
+};
+</script>
+
+<style lang="sass" scoped>
+.wrapper-tooth
+  border: 1px solid var(--border-light-grey-color)
+.expansion-item
+  border: 1px solid var(--bg-light-grey)
+.option-label
+  color: var(--font-grey-color)
+.condition-label
+  border-bottom: 1px solid var(--bg-light-grey)
+.options-wrapper
+  &::-webkit-scrollbar
+      width: 4px
+</style>

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

@@ -43,19 +43,19 @@
         v-model="isOpenConditionsInfo",
         :general="value[rowKey].general",
         :conditions="getFiiledConditions(value[rowKey])"
-        :config="toothConfig.conditions"
+        :config="conditionConfig"
         )
   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 }}
+    ) {{ mobilityConfig.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",
+        v-for="mobility in mobilityConfig",
         @click="()=>chooseMobility(mobility.id)"
         )
         span.text-smm.font-medium {{ `${mobility.label} степень` }}
@@ -63,21 +63,34 @@
           name="check",
           size="12px"
           )
+    dental-condition-form(
+      v-if="rowKey === 'dental_condition'",
+      :data="value.dental_condition"
+      :cell-config="config",
+      :form-config="formConfig"
+      )
 </template>
 
 <script>
+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 {
+  toothConditions,
+  toothMobility,
+} from "@/pages/newMedicalCard/utils/medicalConfig";
 import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "ToothFormulaCell",
-  components: { ToothLowSvg, ToothConditionsInfo },
+  components: { ToothLowSvg, ToothConditionsInfo, DentalConditionForm },
   data() {
     return {
       isEditCondition: false,
       isOpenConditionsInfo: false,
+      mobilityConfig: toothMobility,
+      conditionConfig: toothConditions,
       getFiiledConditions,
     };
   },
@@ -87,7 +100,7 @@ export default {
     jawPosition: String,
     rowKey: String,
     config: Object,
-    toothConfig: Object,
+    formConfig: Object,
   },
   watch: {
     isEdit() {

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

@@ -20,7 +20,7 @@
           :key="`table_${config.name}`", 
           :config="config", 
           :data="protocol[data.state]", 
-          :toothConfig="data.toothConfig",
+          :form-config="data.conditionsForm",
           :is-edit="isEdit"
           )
     template(v-slot:right-corner)

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

@@ -16,7 +16,7 @@
         :jaw-position="config.name",
         :row-key="row.key",
         :config="cell",
-        :tooth-config="toothConfig"
+        :form-config="formConfig"
         )
 </template>
 
@@ -36,11 +36,11 @@ export default {
     };
   },
   props: {
-    toothConfig: Object,
     config: Object,
     data: Object,
     modelValue: Object,
     isEdit: Boolean,
+    formConfig: Object,
   },
   emits: ["update:modelValue"],
 };

src/pages/newMedicalCard/utils/gettersObjects.js

@@ -57,8 +57,12 @@ export function getConfidantObject(data) {
 
 export const getFiiledConditions = (condition) => {
   let filledConditions = [
-    ...Object.values(condition.crown).filter((val) => val),
+    ...Object.values(condition.crown)
-    ...Object.values(condition.root).filter((val) => val),
+      .filter((val) => val.length)
+      .flat(),
+    ...Object.values(condition.root)
+      .filter((val) => val.length)
+      .flat(),
   ];
   return filledConditions;
 };

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -565,6 +565,27 @@ export const mapEventStatus = {
   },
 };
 
+export const toothConditions = {
+  К: "Кариес",
+  П: "Пульпит",
+  Пт: "Периодонтит",
+  Д: "Дефект",
+  Пл: "Пломба",
+  ИК: "Искусственная коронка",
+  ИЗ: "Искусственный зуб",
+  В: "Вкладка",
+  И: "Имплантат",
+  КЗ: "Корень зуба",
+  О: "Отсутствующий зуб",
+};
+
+export const toothMobility = [
+  { id: 1, label: "I" },
+  { id: 2, label: "II" },
+  { id: 3, label: "III" },
+  { id: 4, label: "IV" },
+];
+
 export const protocolForms = [
   {
     title: "Жалобы",
@@ -933,26 +954,67 @@ export const protocolForms = [
     component: "ToothFormulaForm",
     key: "toothFormula",
     state: "toothFormula",
-    toothConfig: {
+    conditionsForm: {
       conditions: {
-        К: "Кариес",
+        general: {
-        П: "Пульпит",
+          options: (() => {
-        Пт: "Периодонтит",
+            let arrayOptions = ["ИЗ", "И", "О", "П"];
-        Д: "Дефект",
+            return arrayOptions.map((item) => ({
-        Пл: "Пломба",
+              value: item,
-        ИК: "Искусственная коронка",
+              label: toothConditions[item],
-        ИЗ: "Искусственный зуб",
+            }));
-        В: "Вкладка",
+          })(),
-        И: "Имплантат",
+          label: "Общее",
-        КЗ: "Корень зуба",
+        },
-        О: "Отсутствующий зуб",
+        crown: {
+          options: (() => {
+            let arrayOptions = ["К", "П", "Д", "Пл"];
+            return arrayOptions.map((item) => ({
+              value: item,
+              label: toothConditions[item],
+            }));
+          })(),
+          label: "Коронка",
+          partsTooth: {
+            central: {
+              label: "Центральная часть",
+            },
+            upper: {
+              label: "Верхняя часть",
+            },
+            lower: {
+              label: "Нижняя часть",
+            },
+            left: {
+              label: "Левая часть",
+            },
+            right: {
+              label: "Правая часть",
+            },
+          },
+        },
+        root: {
+          options: (() => {
+            let arrayOptions = ["К", "П", "Д", "Пл"];
+            return arrayOptions.map((item) => ({
+              value: item,
+              label: toothConditions[item],
+            }));
+          })(),
+          label: "Корень",
+          partsTooth: {
+            central: {
+              label: "Центральная часть",
+            },
+            left: {
+              label: "Левая часть",
+            },
+            right: {
+              label: "Правая часть",
+            },
+          },
+        },
       },
-      mobility: [
-        { id: 1, label: "I" },
-        { id: 2, label: "II" },
-        { id: 3, label: "III" },
-        { id: 4, label: "IV" },
-      ],
     },
     formulaConfig: [
       {

src/store/modules/toothFormula.js

@@ -1,583 +1,33 @@
 const stateInit = {
   lacticBite: false,
-  formula: {
+  formula: (() => {
-    18: {
+    let initObj = {};
+    let arrayTooth = [
+      18, 17, 16, 15, 14, 13, 12, 11, 21, 22, 23, 24, 25, 26, 27, 28, 48, 47,
+      46, 45, 44, 43, 42, 41, 31, 32, 33, 34, 35, 36, 37, 38,
+    ];
+    arrayTooth.forEach((number) => {
+      initObj[number] = {
         dental_condition: {
           general: null,
           crown: {
-          central: null,
+            central: [],
-          upper: null,
+            upper: [],
-          lower: null,
+            lower: [],
-          left: null,
+            left: [],
-          right: null,
+            right: [],
           },
           root: {
-          central: null,
+            central: [],
-          left: null,
+            left: [],
-          right: null,
+            right: [],
           },
         },
         tooth_mobility: null,
-    },
+      };
-    17: {
+    });
-      dental_condition: {
+    return initObj;
-        general: null,
+  })(),
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    16: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    15: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    14: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    13: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    12: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    11: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    21: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    22: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    23: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    24: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    25: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    26: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    27: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    28: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    48: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    47: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    46: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    45: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    44: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    43: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    42: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    41: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    31: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    32: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    33: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    34: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    35: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    36: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    37: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-    38: {
-      dental_condition: {
-        general: null,
-        crown: {
-          central: null,
-          upper: null,
-          lower: null,
-          left: null,
-          right: null,
-        },
-        root: {
-          central: null,
-          left: null,
-          right: null,
-        },
-      },
-      tooth_mobility: null,
-    },
-  },
 };
 
 const state = {
@@ -605,7 +55,7 @@ const state = {
         general: "ИЗ",
         crown: {
           ...stateInit.formula["11"].dental_condition.crown,
-          central: "К",
+          central: ["К"],
         },
         root: { ...stateInit.formula["11"].dental_condition.root },
       },
@@ -639,7 +89,7 @@ const state = {
       dental_condition: {
         general: "ИЗ",
         crown: { ...stateInit.formula["41"].dental_condition.crown },
-        root: { ...stateInit.formula["41"].dental_condition.root, left: "П" },
+        root: { ...stateInit.formula["41"].dental_condition.root, left: ["П"] },
       },
       tooth_mobility: null,
     },

tailwind.config.js

@@ -68,6 +68,9 @@ module.exports = {
         "102px": "102px",
         "143px": "143px",
         "148px": "148px",
+        "212px": "212px",
+        "250px": "250px",
+        "350px": "350px",
       },
     },
   },