[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"],
 };