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

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

@@ -0,0 +1,53 @@
+<template lang="pug">
+  medical-form-wrapper(:title="data.title")
+    .flex.flex-col.gap-y-4
+      .flex.gap-x-7px.rounded.py-7px.px-3.w-fit(:style="{'backgroundColor': isEdit ? none: 'var(--bg-light-grey)'}")
+        q-checkbox.font-medium.text-smm(
+          v-model="protocol[data.key].lacticBite",
+          dense,
+          checked-icon="check_box",
+          unchecked-icon="check_box_outline_blank",
+          :disable="!isEdit",
+          label="Молочный прикус",
+          :color="isEdit ? 'primary' : 'grey'"
+          )
+    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(
+          size="12px",
+          :style="{'backgroundColor': viewToothFormula ? 'var(--bg-aqua-blue)' : none}",
+          @click="()=>{ viewToothFormula=true }",
+        )
+        q-btn.w-12.h-full.rounded(
+          size="12px",
+          :style="{'backgroundColor': !viewToothFormula ? 'var(--bg-aqua-blue)' : none}",
+          @click="()=>{ viewToothFormula=false }",
+        )
+</template>
+
+<script>
+import MedicalFormWrapper from "@/pages/newMedicalCard/components/MedicalFormWrapper.vue";
+import teeth from "@/assets/icons/teeth.svg";
+import { mapState } from "vuex";
+
+export default {
+  name: "ToothFormulaForm",
+  components: { MedicalFormWrapper },
+  data() {
+    return {
+      teeth: teeth,
+      isEdit: false,
+      component: false,
+      viewToothFormula: true,
+    };
+  },
+  props: {
+    data: Object,
+  },
+  computed: {
+    ...mapState({
+      protocol: (state) => state.medical.protocolData,
+    }),
+  },
+};
+</script>

src/pages/newMedicalCard/components/InitialInspectionProtocol/MedicalProtocolsInspection.vue

@@ -41,8 +41,8 @@ import DiseaseForm from "@/pages/newMedicalCard/components/InitialInspectionProt
 import BaseButton from "@/components/base/BaseButton.vue";
 import IndexForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/IndexForm.vue";
 import MainFactorsForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/MainFactorsForm.vue";
+import ToothFormulaForm from "@/pages/newMedicalCard/components/InitialInspectionProtocol/Forms/ToothFormulaForm.vue";
 import { protocolForms } from "@/pages/newMedicalCard/utils/medicalConfig.js";
-
 export default {
   name: "MedicalProtocolsInspection",
   components: {
@@ -52,6 +52,7 @@ export default {
     BaseButton,
     IndexForm,
     MainFactorsForm,
+    ToothFormulaForm,
   },
   props: { inspection: Boolean, fillInspection: Boolean },
   data() {

src/pages/newMedicalCard/components/MedicalFormWrapper.vue

@@ -17,6 +17,7 @@
         .flex.w-fit.gap-10px.items-center.delete-button.cursor-pointer(v-if="!isEdit && titleDelete" @click="deleteItem")
           q-icon(name="app:basket" size="20")
           span.text-smm.font-medium {{ titleDelete }}
+        slot(name="right-corner")
       slot
       .flex.h-fit.w-fit.gap-2(v-if="isEdit && buttonsPresence")
         q-btn(

src/pages/newMedicalCard/utils/medicalConfig.js

@@ -928,6 +928,12 @@ export const protocolForms = [
       ],
     },
   },
+  {
+    title: "Зубная формула",
+    component: "ToothFormulaForm",
+    key: "toothFormula",
+    state: "toothFormula",
+  },
   {
     title: "План обследования",
     component: "MedicalFormTag",